<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 :searchType="'03'"
          @getdeptData="getdeptId" />
      </div>
    </div>
    <div class="right">
      <div class="head">
        <div class="title">驾驶员上岗证管理列表</div>
        <div class="search">
          <Search :searchArr="searchArr" @submit="onSearch"> </Search>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomright">
          <div class="table">
            <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableConfiger="data.tableConfiger"
              :tableloading="tableloading" @chooseData="chooseData">
              <template #equipmentunit="{ row }">
                <dict-tag v-if="row.equipmentunit" :options="D_BZ_WPDW" :value="row.equipmentunit" :tag="false" />
                <span v-else>无</span>
              </template>
              <!-- 操作 -->
              <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 { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { downloadImg } from "@/excel/Export2Excel.js";

import Pages from "@/components/aboutTable/Pages/index.vue";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW");
const emit = defineEmits("changePage");
const lfBoxWid = ref("300px");
// 树的展开与折叠
const iconChange = ref(true);
const searchArr = reactive([
  {
    showType: "input",
    prop: "drivername",
    placeholder: "请输入驾驶员名称"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "姓名",
      prop: "drivername",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "性别",
      prop: "sex",
      showOverflowTooltip: true,
      sortable: false,
      showSolt: true
    },
    {
      label: "出生年月",
      prop: "brithday",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "文化程度",
      prop: "education",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "驾驶工龄",
      prop: "driverhistory",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "驾驶证号",
      prop: "drivernumber",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "准驾车型",
      prop: "carstyle",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "初次领证时间",
      prop: "fristpoststime",
      showOverflowTooltip: true,
      sortable: false
    }
  ],
  tableConfiger: {
    showIndex: 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) => {
  listQuery.drivername = obj.drivername;
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});

//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
const tableloading = ref(false)
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/driverposts/queryDriverpostsList`).then(
    (res) => {
      if (res.records) {
        data.tableData = res.records;
        tableloading.value = false;
        data.pageConfiger.total = res.total;
      } else {
        data.tableData = [];
        tableloading.value = false;
      }
    }
  );
}
//新增
const addInfo = () => {
  let arr = {
    title: "新增",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  };
  emit("changePage", "Details", arr);
};
//修改
const editInfo = (row) => {
  let arr = {
    title: "编辑",
    saveBtnShow: true,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};
//查看
const seeInfo = (row) => {
  let arr = {
    title: "查看",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};

//删除
const handledelete = (row) => {
  postApi(
    {},
    "/mosty-jcgl/safetySecurity/deleteSafetySecurityOne/" + row.id
  ).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
};
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value = window.innerHeight - 187 + "px";
};
onMounted(() => {
  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>