<template>
  <div class="home-container layout-pd">
    <el-card shadow="hover" class="layout-padding-auto">
      <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" border stripe
        :cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="district" label="区县" />
        <el-table-column prop="year" label="年份" />
        <el-table-column prop="avgPrice" label="均价(元)"></el-table-column>
        <el-table-column prop="ratio" label="环比">
          <template #default="scope"> {{ scope.row.ratio }}% </template>
        </el-table-column>
        <el-table-column prop="content" label="预警内容" />
      </el-table>
      <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
        :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum" background
        v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="state.tableData.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="priceindex">
import { defineAsyncComponent, reactive, onMounted, ref } from "vue";
import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
import { getApi } from "/@/api/early/data";
import { getAll } from "/@/api/sys/index";

// 定义变量内容
const state = reactive<any>({
  name: "370783",
  county: [],
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
  totalnum: {}
});

const getCodeApi = async () => {
  let item = await getAll().codeApi();
  state.county = item.data;
  getTableData();
};
// 初始化表格数据
const getTableData = async () => {
  state.tableData.loading = true;
  // 项目
  const data = await getApi().getyearList({
    page: state.tableData.param.pageNum,
    limit: state.tableData.param.pageSize,
  });
  state.tableData.data = data.data;
  state.tableData.total = data.count;
  state.tableData.loading = false;
};
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getTableData();
};
// 页面加载时
onMounted(() => {
  getCodeApi();
});
</script>

<style scoped lang="scss">
.title {
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  margin-bottom: 10px;
  border-left: 3px solid #409efe;
}

.wgt {
  font-weight: bold;
}

.projecttop {
  display: flex;
  align-items: center;

  .red {
    color: #d12d38;
  }

  .green {
    color: #13c928;
  }

  &item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    position: relative;


    span {
      &::after {
        font-size: 14px;
        font-weight: normal;
        margin-left: 2px;
        content: "%";
      }
    }

    &::before {
      content: "";
      width: 2px;
      height: 30px;
      background-color: #eee;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    span {
      font-size: 24px;
      font-weight: bold;
    }

    p {
      margin-top: 10px;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
