<template>
  <MOSTY.PageTree :pageTitle="'驾驶员档案列表'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <section class="eltab3">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <template #drivelevel="{ row }">
            <dict-tag v-if="row.drivelevel" :options="D_TB_DRIVELEVEL" :value="row.drivelevel" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #empnature="{ row }">
            <dict-tag v-if="row.empnature" :options="D_TB_EMPNATURE" :value="row.empnature" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #sex="{ row }">
            <dict-tag v-if="row.sex" :options="D_BZ_XB" :value="row.sex" :tag="false" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <View />
              </el-icon>查看</span>
            <span v-if='row.cdfiid != null && row.cdfiid != "" && row.empnature == "3"' class='fntsty'
              @click="seesgz(row)" size="small">上岗证</span>
            <span v-if='row.cdfiid != null && row.cdfiid != "" && row.empnature != "3"' class='fntsty'
              @click="seezjz(row)" size="small">准驾证</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog v-model="cardShow" :title="cardtype == '01' ? '上岗证查询' : '驾驶证查询'" :close-on-click-modal="false"
    :show-close="false" width="50%" style='height:70vh !important;'>
    <MOSTY.IDcard :driveruserid='driveruserid'>
    </MOSTY.IDcard>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cardShow = false"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
import Pages from "@/components/aboutTable/Pages/index.vue";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const { D_TB_DRIVELEVEL } = proxy.$dict("D_TB_DRIVELEVEL");
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const { D_TB_EMPNATURE } = proxy.$dict("D_TB_EMPNATURE");

const cardtype = ref('01')
const cardShow = ref(false);
const driveruserid = ref('');
const searchArr = reactive([
  {
    showType: "input",
    prop: "drivername",
    width: '250px',
    placeholder: "请输入驾驶员名称进行查询"
  },
])
const data = reactive({
  searchObj: {},
  tableData: [],
  formData: {},
  tableColumn: [
    {
      title: "驾驶员姓名",
      prop: "drivername"
    },
    {
      title: "驾驶档案号",
      prop: "driverfileno",
    },
    {
      title: "性别",
      prop: "sex",
      slot: true
    },
    {
      title: "出生年月",
      prop: "birth"
    },
    // {
    //   title: "身份证号",
    //   prop: "idcard"
    // },
    {
      title: "准驾车型",
      prop: "drivelevel",
      slot: true
    },
    {
      title: "职工类型",
      prop: "empnature",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  data.pageConfiger.pageSize = val
  getTableData();
};
//查看上岗证
function seesgz(row) {
  cardtype.value = '01'
  driveruserid.value = row.driveruserid;
  cardShow.value = true
}
//查看驾驶证
function seezjz(row) {
  cardtype.value = '02'
  driveruserid.value = row.driveruserid;
  cardShow.value = true
}

const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.nameaffiliationid = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
//查询
const onSearch = (boj) => {
  listQuery.drivername = boj.drivername
  listQuery.pageCurrent = 1;
  getTableData();
}

const tableloading = ref(false)
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/driver/queryDriverFileList`).then(
    (res) => {
      if (res.records) {
        data.tableData = res.records;
        tableloading.value = false;
        data.pageConfiger.total = res.total;
      } else {
        data.tableData = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}


//查看
const seeInfo = (row) => {
  let arr = {
    title: "驾驶员档案",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};
onMounted(() => {

});
</script>

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