<template>
  <div class="boxsgsdialog">
    <el-dialog  :title="props.title" custom-class="cheliangdialog"  v-model="isShowDialog" width="90vw" align-center  :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>
    <!-- 县公司 -->
    <xgsDialog :title="xgsTCTitle" :years="props.years" v-if="isShowXgsTC" v-model="isShowXgsTC" @close="closeXgsTC"
      :row="currRow" />
    <!-- 车辆详情 -->
    <cheliangDialog :title="xgsTCTitle" :years="props.years" v-if="isShowYsPage" v-model="isShowYsPage"
      @close="closeXgsTC" :editObj="currRow" />
  </div>

</template>
<script setup>
// 引入
import { reactive, onMounted, ref, nextTick, watch, defineProps, defineEmits, computed } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
import xgsDialog from './xgsDialog.vue'
import cheliangDialog from './cheliangDialog.vue'
import { getApi } from "@/api/tobAcco_api.js";
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 isShowDialog = computed({
  get () {
    return props.modelValue
  },
  set (val) {
    emits('update:modelValue', val)
  }
})
const emits = defineEmits(['close'])
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 isShowXgsTC = ref(false)
/** 当前查看或审核行 */
const currRow = ref({})


const beforeClose = () => {
  emits('close')
}
const tableloading = ref(false)
const isOpen = ref(false);
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 totalHeight = ref(null)
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    totalHeight.value = `calc(80vh - 40px)`
  })
}, {
  deep: true,
  immediate: true
})
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,
});

function getDataList () {
  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;
      });
      // 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 isxgs = ref(filterqx('isxgs') == '1')
/**市公司 */
const isgs = ref(filterqx('isgs') == '1')
const seeDetail = (row) => {
  currRow.value = { ...row }
  // xgsTCTitle.value = `${row.orgname}-查看详情`
  // isShowXgsTC.value = true
  const { orgcode } = row;
  if (!row) return
  // 本级
  if (orgcode.indexOf('XN') > -1) {
    isShowYsPage.value = true;
  } else {
    isShowYsPage.value = true;
  }


}

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

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

</script>

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

.boxsgsdialog {
  .way {
    .bigBox .zy-right {
      // border: 1px solid red;
      margin-left: none;
    }
  }

}
</style>
