<template>
  <div class="home-container layout-pd">
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :xl="24">
        <el-card shadow="hover">
          <div class="title">选择区县</div>
          <br />
          <el-radio-group v-model="state.radio" @change="radioChange">
            <el-radio label="">潍坊市</el-radio>
            <el-radio
              v-for="(item, index) in state.county"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
        <el-card shadow="hover">
          <div class="title">月环比</div>
          <el-table
            :data="state.montable.data"
            v-loading="state.montable.loading"
            border
            stripe
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="areaName" label="区县" />
            <el-table-column prop="time" label="日期" />
            <el-table-column prop="avgPrice" label="平均值"></el-table-column>
            <el-table-column prop="beforeAvgPrice" label="上个月平均值"></el-table-column>
            <el-table-column prop="ratio" label="跟上个月的比率"></el-table-column>
            <el-table-column prop="state" label="预警状态">
              <template #default="scope">
                <el-tag v-if="scope.row.state == 1">正常</el-tag>
                <el-tag type="danger" v-else>预警</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
        <el-card shadow="hover">
          <div class="title">年环比</div>
          <el-table
            :data="state.yeartable.data"
            v-loading="state.yeartable.loading"
            border
            stripe
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="areaName" label="区县" />
            <el-table-column prop="year" label="年份" />
            <el-table-column prop="avgPrice" label="平均值"></el-table-column>
            <el-table-column prop="beforeAvgPrice" label="上半年平均值"></el-table-column>
            <el-table-column prop="ratio" label="环比比例"></el-table-column>
            <el-table-column prop="state" label="预警状态">
              <template #default="scope">
                <el-tag v-if="scope.row.state == 1">正常</el-tag>
                <el-tag type="danger" v-else>预警</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :xs="24" :sm="12" :md="12" :lg="24" :xl="8">
        <el-card shadow="hover">
          <div class="title">半年同比</div>
          <el-table
            :data="state.halyeartable.data"
            v-loading="state.halyeartable.loading"
            border
            stripe
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="areaName" label="区县" />
            <el-table-column prop="year" label="年份" />
            <el-table-column prop="halfYear" label="半年" />
            <el-table-column prop="avgPrice" label="平均值"></el-table-column>
            <el-table-column prop="beforeAvgPrice" label="上半年平均值"></el-table-column>
            <el-table-column prop="ratio" label="环比比例"></el-table-column>
            <el-table-column prop="state" label="预警状态">
              <template #default="scope">
                <el-tag v-if="scope.row.state == 1">正常</el-tag>
                <el-tag type="danger" v-else>预警</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, onMounted, ref, nextTick } from "vue";
import { getAll } from "/@/api/sys/index";
import { getApi } from "/@/api/early/data";

// 定义变量内容
const state = reactive<any>({
  radio: "",
  county: [],
  // 月
  montable: {
    data: [],
    loading: false,
    total: 0,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
  // 年
  yeartable: {
    data: [],
    loading: false,
    total: 0,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
  // 月
  halyeartable: {
    data: [],
    loading: false,
    total: 0,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
});

const radioChange = (e: any) => {
  state.radio = e;
  getons();
};

const getCodeApi = async () => {
  let item = await getAll().codeApi();
  state.county = item.data;
  getons();
};
function getons() {
  getmon();
  getyear();
  gethalyear();
}

// 月环比
async function getmon() {
  let item = await getApi().getmonthList({
    areaCode: state.radio,
    page: state.montable.param.pageNum,
    limit: state.montable.param.pageSize,
  });
  state.montable.data = item.data;
}
// 年环比
async function getyear() {
  let item = await getApi().getyearList({
    areaCode: state.radio,
    page: state.yeartable.param.pageNum,
    limit: state.yeartable.param.pageSize,
  });
  state.yeartable.data = item.data;
}
// 半年同比
async function gethalyear() {
  let item = await getApi().gethalyearList({
    areaCode: state.radio,
    page: state.halyeartable.param.pageNum,
    limit: state.halyeartable.param.pageSize,
  });
  state.halyeartable.data = item.data;
}

// 页面加载时
onMounted(() => {
  getCodeApi();
});
</script>

<style scoped lang="scss">
.title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 14px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
}
.home-container {
  overflow: hidden;
  .home-card-one {
    width: 100%;
    .home-card-item {
      width: 100%;
      height: 130px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);
      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }
      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;
        i {
          color: var(--el-text-color-placeholder);
        }
      }
      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }
  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/4) + s;
      }
    }
  }
}
</style>
