<template>
  <MOSTY.PageTree :pageTitle="'比例配置列表(此处有效数据为录入时间是最后的那一条)'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <div class="flxeL">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </div>
    </template>
    <template #table>
      <section style="height: calc(100vh - 311px);">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true">
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
const emit = defineEmits("changePage");
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "一季度占比(%)",
      prop: "firstquarterratio"
    },
    {
      title: "二季度占比(%)",
      prop: "twoquarterratio"
    },
    {
      title: "三季度占比(%)",
      prop: "threequarterratio"
    },
    {
      title: "四季度占比(%)",
      prop: "fourquarterratio"
    },
    {
      title: "年度占比(%)",
      prop: "yearratio"
    },
    {
      title: "录入时间",
      prop: "xtCjsj"
    }
  ],
  tableConfiger: {
    haveControls: false,
    showIndex: false,
    loading: false,
    height: 750,
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
});
//选中的数据

const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/jxkgConfig/queryJxkgConfig`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//新增
const addInfo = () => {
  let arr = {
    title: "新增",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  };
  emit("changePage", "AddOrEdite", arr);
};

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped>
.flxeL {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}
</style>