<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="zzjgleft" :style="{ width: lfBoxWid }">
      <div class="title">
        <span v-if="iconChange">上岗证\准驾证审验信息</span>
        <el-icon @click="handleCollapse" v-show="iconChange">
          <DArrowLeft />
        </el-icon>
        <el-icon @click="handleCollapse" v-show="!iconChange">
          <DArrowRight />
        </el-icon>
      </div>
      <!-- 左边得树状 -->
      <div class="treeBox" :style="{ height: treeHeight }">
        <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable v-model="data.deptId" />
      </div>
    </div>
    <div class="right">
      <div class="head">
        <div class="title">上岗证\准驾证审验信息</div>
        <div class="search">
          <el-date-picker v-model="yearvalue" type="year" placeholder="Pick a year" />
        </div>
      </div>
      <div class="bottom">
        <div class="bottomright">
          <div class="table">
            <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableConfiger="data.tableConfiger"
              @chooseData="chooseData">
              <!-- 操作 -->
              <template #controls="{ row }">
                <el-link type="primary" style="margin-right: 20px" @click="edit(row)" size="small">查看</el-link>
              </template>
            </MyTable>
          </div>
          <div class="fenye">
            <Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></Pages>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Search from "@/components/aboutTable/Search/index.vue";
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
import Pages from "@/components/aboutTable/Pages/index.vue";
import { ElMessage } from "element-plus";
import { reactive, ref, watch, onMounted } from "vue";
const emit = defineEmits("changePage");
const yearvalue = ref("");
const lfBoxWid = ref("300px");
// 树的展开与折叠
const iconChange = ref(true);
const searchArr = reactive([
  {
    showType: "input",
    prop: "sbmc",
    placeholder: "请输入场所名称"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "驾驶员姓名",
      prop: "kssj",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "性别",
      prop: "jssj",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "证件类型",
      prop: "pxxm",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "单位",
      prop: "fzr",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "新办理时间",
      prop: "lxr",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "审验时间",
      prop: "zbbm",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "证件号码",
      prop: "ywlx",
      showOverflowTooltip: true,
      sortable: false
    },
  ],
  tableConfiger: {
    showIndex: false,
    haveControls: false,
    loading: false,
    height: 750,
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
});
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
const changeNo = (val) => {
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  data.pageConfiger.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  data.searchObj = obj;
  getTableData();
};

const edit = (row) => {
  emit("changePage", "Details", row);
};
const del = (obj) => { };


function getTableData() {
  let list = [
    {
      kssj: "陆洁",//驾驶员姓名
      jssj: "男",//性别
      pxxm: "上岗证",//证件类型 q
      fzr: "陇南市烟草专卖局（公司）",//单位
      lxr: "2023-06-28",//新办理时间
      zbbm: "2023-06-28",//审验时间
      ywlx: "5630001957",//证件号码
    }
  ];
  data.tableData = list;

  // if(!data.clickTree) return ElMessage.warning("选选择部门更好查找");
  // let attr = {
  //   orgId: data.clickTree.associateId,
  //   pageCurrent: data.pageConfiger.pageCurrent,
  //   pageSize: data.pageConfiger.pageSize
  // };
  // attr = {...attr, ...data.searchObj}
  // fns.selectUserPage(attr).then((res) => {
  //   data.tableData = res.records;
  //   data.pageConfiger.total = res.total;
  // });
}

const toAdd = () => {
  // if (!data.clickTree) return ElMessage.warning("请先选择部门");
  // let obj = {
  //   showPageAdd: true
  // };
  // obj = { ...obj, ...data.clickTree };
  emit("changePage", "Details");
  // data.clickTree = null;
};
let D_TB_YALX = reactive([]);
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value =
    window.innerHeight - 187 + "px";
};
onMounted(() => {
  getSysDictByCode({ dictCode: "D_TB_YALX" }).then((res) => {
    if (res) {
      D_TB_YALX = res.itemList;
      searchArr[0].options = res.itemList.map((item) => {
        const obj = {
          label: item.zdmc,
          value: item.dm
        };
        return reactive(obj);
      });
    }
  });
  getTableData();
  treeHeightFn();
  window.onresize = function () {
    treeHeightFn();
  };
});
</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;



  .right {
    height: calc(100%);
    width: calc(100% - 300px);
    padding: 0 10px;
    box-sizing: border-box;

    .head {
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>