<template>
  <MOSTY.PageTree :pageTitle="'车辆月检总览'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <section class="eltab3">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <template #actions="{ row }">
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
        </div>
      </section>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { reactive, ref } from "vue";
const emit = defineEmits("changePage");
const searchArr = reactive([
  {
    showType: "month",
    prop: "month",
    width: '250px',
    defaultVal:  new Date(new Date().getFullYear(), new Date().getMonth()+1, 1),
    placeholder: '请选择月份'
  }
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位名称",
      prop: "orgname"
    },
    {
      title: "年份",
      prop: "year"
    },
    {
      title: "月份",
      prop: "month"
    },
    {
      title: "车辆总数",
      prop: "allcount"
    },
    {
      title: "已检车辆数",
      prop: "checkcount"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
const listQuery = reactive({
  month: currentMonth < 10 ? '0' + currentMonth : currentMonth,
  pageCurrent: 1,
  pageSize: 20
});

//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (val) => {
  const [year, month] = val.month ? val.month.split('-') : ['', ''];
  listQuery.pageCurrent = 1;
  listQuery.year = year;
  listQuery.month = month;
  data.pageConfiger.pageCurrent = 1;
  getTableData();
};
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
//选中的数据
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/yueJian/getPageList`).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 seeInfo = (row) => {  
  let arr = {
    title: "查看",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    year: row.year ? row.year : null,
    orgcode: row.orgcode ? row.orgcode : null
  };
  emit("changePage", "Details", arr);
};

</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 358px) ;
}
</style>
