<template>
  <el-dialog  v-model="isShowDialog" width="90vw" style="height: 600px;" top="0px" :before-close="beforeClose">
    <MOSTY.PageTree :searchType="'03'" :isShowLeftTree="false">
      <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"
            :isSelect="false" :isSort="false" :tableHeight="'100%'" :actionsW="300">
            <template #actions="{ row }">
              <span class="operesee" @click="seeDetail(row)"><el-icon>
                  <View />
                </el-icon>查看
              </span>
            </template>
          </MOSTY.Table>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="handleCurrentChange"
              @changeSize="handleSizeChange" />
          </div>
        </section>
      </template>
    </MOSTY.PageTree>

  </el-dialog>
  <!-- 车辆详情 -->
  <cheliangDialog :title="xgsTCTitle" :years="props.years" v-if="isShowYsPage" v-model="isShowYsPage"
    @close="closeXgsTC" :editObj="currRow" />
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, defineEmits, computed } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, } from "@/api/tobAcco_api.js";
import cheliangDialog from './cheliangDialog.vue'
import { filterqx } from "@/utils/auth.js";
const props = defineProps({
  years: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: () => { }
  },
  title: {
    type: String,
    default: ''
  },
  modelValue: {
    type: Boolean,
    default: false
  },

})
const emits = defineEmits(['close'])
/** 是否是县公司 */
const isxgs = ref(filterqx('isxgs') == '1')
const searchArr = reactive([
  {
    showType: "month",
    prop: "month",
    width: '250px',
    defaultVal: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
    placeholder: '请选择月份'
  }
])
// 查询数据
const onSearch = (val) => {
  const [year, month] = val.month ? val.month.split('-') : ['', ''];
  listQuery.pageCurrent = 1;
  listQuery.year = year;
  listQuery.month = month;
  data.pageConfiger.pageCurrent = 1;
  getDataList();
};
/** 县公司标题 */
const xgsTCTitle = ref('')
/** 当前查看或审核行 */
const currRow = ref({})


const beforeClose = () => {
  emits('close')
}

const tableloading = ref(false)
const isShowDialog = computed({
  get () {
    return props.modelValue
  },
  set (val) {
    emits('update:modelValue', val)
  }
})
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
//获取年初查询年初统计
const listQuery = reactive({
  month: currentMonth < 10 ? '0' + currentMonth : currentMonth,
  pageCurrent: 1,
  pageSize: 20,
  orgcode: props.row.orgcode,
});
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
  }
});


//获取年初查询年初统计
function getDataList () {
  tableloading.value = true;

  getApi(listQuery, `/mosty-jcgl/yueJian/getPageListByLayer`).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 handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  data.pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  data.pageConfiger.pageCurrent = currentPage;
  getDataList();
};
const isShowYsPage = ref(false)
const seeDetail = (row) => {
  currRow.value = { ...row }
  xgsTCTitle.value = `${row.orgname}-查看详情`
  isShowYsPage.value = true
}

const closeXgsTC = () => {
  isShowYsPage.value = false
  getDataList()
}

onMounted(() => {
  getDataList()
})

</script>

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