<template>
  <div class="boxsgsdialog">
    <MOSTY.PageTree :pageTitle="'车辆月检统计'" :searchType="'03'" @getDeptId="getdeptId" :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"
            :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>
    <!-- 市/县/详情/弹框 -->
    <sgsDialog v-if="isShowSgs" :title="title" v-model="isShowSgs" :row="currRow" @close="sgsdialogshow"
      style="height: 600px;">
    </sgsDialog>
    <!-- <xgsDialog v-if="isShowXgs" v-model="isShowXgs" :row="currRow" @close="xgsdialogshow"></xgsDialog> -->
    <cheliangDialog v-if="isShowYsPage" v-model="isShowYsPage" :editObj="currRow" @close="cheliangdialogshow">
    </cheliangDialog>
  </div>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { reactive, ref, onMounted } from "vue";
import { filterqx } from "@/utils/auth.js";
import sgsDialog from './sgsDialog.vue';
// import xgsDialog from './xgsDialog.vue';
import cheliangDialog from './cheliangDialog.vue';
const emit = defineEmits("changePage");
// 省公司弹框
const isShowSgs = ref(false);
/** 展示县公司下的所有 */
const isShowXgs = ref(false);
const isShowYsPage = ref(false);
/** 是否展示到部门级别 */
/** 是否是县公司 */
const isxgs = ref(filterqx('isxgs') == '1')
/**市公司 */
const isgs = ref(filterqx('isgs') == '1')
/**省公司 */
const isSgs = ref(filterqx('isSgs') == '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;
  getTableData();
};
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位名称",
      prop: "orgname",
      // sortable:true
    },
    {
      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 getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};

//选中的数据
const tableloading = ref(false);
const getTableData = () => {

  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/yueJian/getPageListByLayer`).then((res) => {
    if (res.records) {
      //排序
      // 将包含XN的记录排在最前面
      data.tableData = res.records.sort((a, b) => {
        const aHasXN = a.orgcode.includes('XN');
        const bHasXN = b.orgcode.includes('XN');
        if (aHasXN && !bHasXN) return -1;
        if (!aHasXN && bHasXN) return 1;
        return 0;
      });
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  })
}

const currRow = ref({});
const title = ref('');
//查看
const seeInfo = (row) => {
  title.value = row.orgname;
  currRow.value = { ...row };
  const { orgcode } = row;
  if (!row) return
  // 本级
  if (orgcode.indexOf('XN') > -1) {
    isShowYsPage.value = true;
  } else {
    isShowSgs.value = true;
    // 省公司 点击进入-》 下级 【某市公司】所有内容
    // if (isSgs.value) {
    //   console.log(isSgs.value, 'isSgs.value');

    //   isShowSgs.value = true;
    //   // 市公司 点击进入-》 下级 【某县公司】
    // } else if (isgs.value) {
    //   console.log(isgs.value, 'isgs.value');

    //   isShowXgs.value = true;
    // } else if (isxgs.value) {
    //   console.log(isxgs.value, 'isxgs.value');

    //   // 县公司 点击进入-》 下级 【某部门】 的所有内容
    //   isShowYsPage.value = true;
    // }
  }
};
const sgsdialogshow = () => {
  isShowSgs.value = false;
  getTableData();
};
const xgsdialogshow = () => {
  isShowXgs.value = false;
  getTableData();
};
const cheliangdialogshow = () => {
  isShowYsPage.value = false;
  getTableData();
}
onMounted(() => {
  getTableData()
})
</script>

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

.box {


  .bigBox .zy-right {
    // border: 1px solid red;
    margin-left: none;
  }
}
</style>
