<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <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="'01'"
            @getdeptData="getdeptId" />
        </div>
      </div>

      <!--  -->
      <div class="right" :style="{ width: rgBoxWid }">
        <!-- 头部 -->
        <div class="headBox" style="justify-content: space-between">
          <div class="title">驾驶员上岗证审验管理列表</div>
          <div class="btnBox" style="display: flex">
            <el-input v-model="listQuery.drivername" placeholder="请输入驾驶员名称进行查询" style="margin-right: 10px;" />
            <el-button type="primary" @click="addUserHander">
              <el-icon>
                <Search />
              </el-icon>
              <span>查询</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" stripe :data="tableData" row-style="height:32px" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="姓名" show-overflow-tooltip property="drivername"></el-table-column>
            <el-table-column label="性别" show-overflow-tooltip prop="sex">
              <template #default="{ row }">
                <dict-tag v-if="row.sex" :options="D_BZ_XB" :value="row.sex" :tag="false" />
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="出生年月" show-overflow-tooltip property="brithday"></el-table-column>
            <el-table-column label="文化程度" show-overflow-tooltip prop="education">
              <template #default="{ row }">
                <dict-tag v-if="row.education" :options="D_BZ_AQRYWHCD" :value="row.education" :tag="false" />
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="驾驶工龄" show-overflow-tooltip property="driverhistory"></el-table-column>
            <el-table-column label="到期时间" show-overflow-tooltip property="nextpoststime"></el-table-column>
            <el-table-column label="上岗时间" show-overflow-tooltip property="fristpoststime"></el-table-column>
            <el-table-column label="准驾车型" show-overflow-tooltip property="carstyle">
              <template #default="{ row }">
                <dict-tag v-if="row.carstyle" :options="D_TB_DRIVELEVEL" :value="row.carstyle" :tag="false" />
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="初次领证时间" show-overflow-tooltip property="fristpoststime"></el-table-column>
            <el-table-column label="当前状态" show-overflow-tooltip property="dqstate"></el-table-column>
            <el-table-column label="操作" width="190">
              <template #default="{ row }">
                <span v-if="row.type == '01'" class="operate" style="color: rgb(230, 38, 48) important"
                  @click="handleSee(row, 'see')">待审核</span>
                <!--临近到期时间的一个月过期->立即审验  -->
                <span class="operate"
                  v-if="row.dqstate == '等待审验' && row.state == '7' && row.tbdwid == getItem('deptId').ssdwid"
                  style="color: red !important" @click="handleShzt(row)">立即审验</span>
                <span class="operate" style="color: yellowgreen !important"
                  @click="handlesyzt(row, 'see')">查看审验状态</span>
                <span class="operate" style="color: #11bbef !important" @click="handleSee(row, '驾驶人上岗证查看')">查看信息</span>
                <!-- 审验失败->重新提交 -->
                <span v-if="row.showzxtj && row.tbdwid == getItem('deptId').ssdwid" class="operate"
                  style="color: yellowgreen !important" @click="handleShzt(row)">重新提交</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
      <!-- 新增 -->
      <div v-if="comprehensiveShow" class="dialog-box">
        <Sgzsbxq :saveBtnShow="saveBtnShow" :editObj="editObj" @close="close" :title="editObj.title" :rwid="rwid"
          :type="type" :examineshow="examineshow" />
      </div>
      <!-- 查看审核状态 -->
      <div v-if="showShzt" class="dialog-box">
        <Zbapxq :editObj="editObj" @close="close2" :title="editObj.title" :type="type" />
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { downloadImg } from "@/excel/Export2Excel.js";

import Sgzsbxq from "@/views/yxkzgl/jsygl/Sgzsbxq.vue";
import Zbapxq from "@/views/yxkzgl/jsygl/zbapxq.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
// 数据
const { D_TB_DRIVELEVEL, D_BZ_AQRYWHCD, D_BZ_XB } = proxy.$dict(
  "D_TB_DRIVELEVEL",
  "D_BZ_AQRYWHCD",
  "D_BZ_XB"
);
const bigHeight = ref(); //整个高度
const comprehensiveShow = ref(false);
const title = ref("");
const showzxtj = ref(false);
const type = ref(null)
//查询条件
const showShzt = ref(false)
const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  formData: {}
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  orgcode: "",
  type: "1",
  time: '2'
});
const total = ref(0);
onMounted(() => {
  bigHeightFn();
  treeHeightFn();

});
function addUserHander() {
  listQuery.pageCurrent = 1;
  getListData()
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
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 tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  editObj.deptname = getItem("deptId").ssbmid;
  postApi(listQuery, `/mosty-jcgl/driverposts/queryDriverpostsList`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        tableData.value.forEach(item => {
          let datedue = new Date(item.nextpoststime);
          let now = new Date();
          datedue.setMonth(datedue.getMonth() - 1);
          if (now >= datedue) {
            item.dqstate = '等待审验'
          } else if (item.tokzstate == '2') {
            item.dqstate = '省/市-安全处(科)负责人审批不通过'
            item.showzxtj = true
          } else if (item.tokzstate == '1') {
            item.dqstate = '完成'
            item.showzxtj = false
          } else if (item.carcontrollerstate == '2') {
            item.dqstate = '省/市-交通管理员审批不通过'
            item.showzxtj = true
          } else if (item.carcontrollerstate == '1') {
            item.dqstate = '省/市-安全处(科)负责人审批中'
            item.showzxtj = false
          } else if (item.unitspheadspsate == '2') {
            item.dqstate = '省/市-车管部门负责人审批不通过'
            item.showzxtj = true
          } else if (item.unitspheadspsate == '1') {
            item.dqstate = '省/市-交通管理员审批中'
            item.showzxtj = false
          } else if (item.fgldstate == '2') {
            item.dqstate = '市车管员审批不通过'
            showzxtj.value = true
          } else if (item.fgldstate == '1') {
            item.dqstate = '省/市-车管部门负责人审批中'
            showzxtj.value = false
          } else if (item.unitsecurityspstate == '2') {
            item.dqstate = '物流-车管部门负责人审批不通过'
            showzxtj.value = true
          } else if (item.unitsecurityspstate == '1') {
            item.dqstate = '市车管员审批中'
            showzxtj.value = false
          } else if (item.unitpartspstate == '2') {
            item.dqstate = '县-车管部门负责人审批不通过'
            item.showzxtj = true
          } else if (item.unitpartspstate == '1') {
            item.dqstate = '物流-车管部门负责人审批中'
            item.showzxtj = false
          } else {
            item.dqstate = '县-车管部门负责人审批中'
            item.showzxtj = false
          }
        })
        total.value = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  );
}
//弹窗关闭
const close = () => {
  comprehensiveShow.value = false;
  type.value = null;
  editObj.rowId = null
  getListData();
};
//关闭审验流程
const close2 = () => {
  showShzt.value = false;
  type.value = null;
  editObj.rowId = null
  getListData();
};
const saveBtnShow = ref(true);
//立即审验
function handleShzt(row) {
  type.value = 'sy'
  editObj.rowId = row.id
  comprehensiveShow.value = true;
  saveBtnShow.value = true;
  editObj.title = "驾驶人上岗证审验申请";
}
//查看审验状态
function handlesyzt(row) {
  type.value = 'sy'
  editObj.title = "驾驶人上岗证查看";
  editObj.rowId = row.id
  showShzt.value = true;
  saveBtnShow.value = false;
}

const examineshow = ref(false);
//详情
function handleSee(row) {
  editObj.title = "上岗证审验详情";
  editObj.rowId = row.id
  comprehensiveShow.value = true;
  saveBtnShow.value = false;
}

//删除
function delInfo(row) {
  postApi({}, `/mosty-jcgl/driverposts/deleteDriverpostsOne/${row.id}`).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};

const treeHeight = ref("");
// 树高度计算
function treeHeightFn() {
  treeHeight.value = window.innerHeight - 187 + "px";
}


</script>

<style lang="scss" scoped>
.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

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