<template>
  <div class="boxsgsdialog">
    <MOSTY.PageTree :pageTitle="'车辆信息统计'" :searchType="'03'" :isShowLeftTree="false">
      <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" v-if="row.deptId" @click="seeInfo(row)">
                <el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
      </template>
    </MOSTY.PageTree>
    <!-- 市/县/详情/弹框 -->
    <sgsTC v-if="isShowSgs" :title="title" v-model="isShowSgs" :row="currRow" @close="sgsdialogshow">
    </sgsTC>
    <xgsTC v-if="isShowXgs" :title="title" v-model="isShowXgs" :row="currRow" @close="xgsdialogshow"></xgsTC>
    <carTable v-if="isShowPageList" :title="`${currRow.deptName}-详情`" :row="currRow" @close="pageListClose" />
  </div>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { reactive, ref, onMounted } from "vue";
import { filterqx } from "@/utils/auth.js";
import sgsTC from "./sgsTC.vue";
import xgsTC from './xgsTC.vue';
import carTable from "./carTable.vue";
import { getItem } from "@/utils/storage";
// import sgsDialog from './sgsDialog.vue';
const emit = defineEmits("changePage");
// 省公司弹框
const isShowSgs = ref(false);
/** 展示县公司下的所有 */
const isShowXgs = ref(false);
const isShowPageList = ref(false)
/** 是否展示到部门级别 */
/** 是否是县公司 */
const isxgs = ref(filterqx('isxgs') == '1')
/**市公司 */
const isgs = ref(filterqx('isgs') == '1')
/**省公司 */
const isSgs = ref(filterqx('isSgs') == '1')

// 查询数据
const onSearch = (val) => {
  const [year, month] = val.month ? val.month.split('-') : ['', ''];
  data.pageConfiger.pageCurrent = 1;
  getTableData();
};
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位名称",
      prop: "deptName", //  orgName
      // sortable:true
    },

    {
      title: "车辆总数",
      prop: "count"
    },

    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const listQuery = reactive({
  // pageCurrent: 1,
  // pageSize: 20
  orgCode: '',
});



//获取部门数据
const getdeptId = (val) => {
  listQuery.orgCode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};

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

  tableloading.value = true; // getOrgCodeforCar
  postApi(listQuery, `/mosty-jcgl/car/getOrgCodeforCar`).then((res) => { // queryCarMsg
    console.log('res: ', res);
    let counts = 0
    res?.forEach(item => {
      counts += item.count
    });
    data.tableData = Array.isArray(res) ? res : [];
    data.tableData.push({ count: counts, deptId: '', deptName: '合计' })
  }).finally(() => {
    tableloading.value = false;
  })
}

const currRow = ref({});
const title = ref('');
//查看
const seeInfo = (row) => {
  title.value = row.deptName;
  currRow.value = { ...row };
  const { deptId } = row;
  if (!row) return
  // 本级
  if (deptId.indexOf('XN') > -1) {
    // isShowPageList.value = true;
    isShowXgs.value = true;

  } else {
    // isShowSgs.value = true;
    // 省公司 点击进入-》 下级 【某市公司】所有内容
    if (isSgs.value) {

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

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

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

.box {


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