<template>
  <div class="app-container">
    <!--操作区-->
    <template v-if="isTable">
      <!-- <el-button type="primary" @click="exportFile()" class="margin-bottom"
        >导出</el-button
      > -->
      <!--搜索区-->
      <div class="float">
        <el-select
          v-model="page.data.passApplyType"
          filterable
          clearable
          placeholder="通行证类型"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in type_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="page.data.name"
          placeholder="请输入姓名"
          clearable
          class="margin-left input"
        />
        <el-input
          v-model="page.data.phone"
          placeholder="请输入手机号"
          clearable
          class="margin-left input"
        /><el-input
          v-model="page.data.idNumber"
          placeholder="请输入身份证号"
          clearable
          class="margin-left input"
        />
        <el-select
          v-model="page.data.status"
          filterable
          clearable
          placeholder="请选择审核状态"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in status_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <!-- <el-select
          filterable
          clearable
          v-model="page.data.ppppp"
          placeholder="请选择违规次数"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in num_list"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          >
          </el-option>
        </el-select> -->
        <el-date-picker
          v-model="page.data.startTime"
          type="datetime"
          placeholder="选择起始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="margin-left"
        />
        <el-date-picker
          v-model="page.data.endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="margin-left"
        />
        <el-button
          type="primary"
          icon="el-icon-search"
          class="margin-left"
          @click="fetchData"
        >搜索</el-button>
      </div>
      <!--主表格-->
      <el-table
        ref="table_form"
        v-loading="listLoading"
        class="table"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            {{ indexMethod(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column label="通行证类型" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.passApplyType === 1"
              type="primary"
            >人员长期通行证</el-tag>
            <el-tag
              v-if="scope.row.passApplyType === 2"
              type="success"
            >人员短期通行证</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="头像（证件照）" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.avatar"
              class="table-img"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
            />
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="身份证号" align="center">
          <template slot-scope="scope">
            {{ scope.row.idNumber | desensitization( 6,14) }}
          </template>
        </el-table-column>
        <el-table-column label="手机号 " align="center">
          <template slot-scope="scope">
            {{ scope.row.phone| desensitization( 3, 7) }}
          </template>
        </el-table-column>
        <el-table-column label="账号名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="单位简称" align="center">
          <template slot-scope="scope">
            {{ scope.row.unitConciseName }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="引领人 " align="center">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.leaderList" :key="index">{{item.name}}，</span>
          </template>
        </el-table-column> -->
        <el-table-column label="通行证开始有效期 " align="center">
          <template slot-scope="scope">
            {{ scope.row.startTime }}
          </template>
        </el-table-column>
        <el-table-column label="通行证结束有效期 " align="center">
          <template slot-scope="scope">
            {{ scope.row.endTime }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="通行区域 " align="center">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column> -->
        <el-table-column label="审核状态 " align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="info">审核中</el-tag>
            <el-tag v-if="scope.row.status === 2" type="warning">整改中</el-tag>
            <el-tag v-if="scope.row.status === 3" type="success">已通过</el-tag>
            <el-tag v-if="scope.row.status === 4" type="danger">已拒绝</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="违规次数" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="" label="操作区" width="200">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="delPass(scope.row.passApplyId)"
            >删除</el-button>
            <el-button
              type="primary"
              size="small"
              @click="create(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页栏-->
      <pagination
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="fetchData"
      />
    </template>
    <div v-else class="page">
      <div class="tit">
        <strong>{{
          detailList.passApplyType == 1 ? "人员短期通行证" : "人员短期通行证"
        }}</strong>
        <el-button
          type="danger"
          size="small"
          @click="delPass(detailList.passApplyId)"
        >删除</el-button>
        <el-button
          type="primary"
          size="small"
          @click="isTable = true"
        >返回</el-button>
      </div>
      <div class="flex content">
        <div class="flex box1">
          <div class="flex1">
            <div class="flex">
              <div class="flex1">
                <el-image
                  class="user-img"
                  :src="realNamePhoto"
                  :preview-src-list="[realNamePhoto]"
                >
                  <span v-if="!realNamePhoto">暂无照片</span>
                </el-image>
                实名照片
              </div>
              <div class="flex1 m-l-20">
                <el-image
                  class="user-img"
                  :src="detailList.avatar"
                  :preview-src-list="[detailList.avatar]"
                />
                证件照片
              </div>
            </div>
            <!-- <div class="violation">违规1次</div> -->
          </div>
          <div class="user-msg m-l-20">
            <div>{{ detailList.name }}</div>
            <div>{{ detailList.phone }}</div>
            <div>{{ detailList.idNumber }}</div>
            <div>
              {{ detailList.username }} - {{ detailList.deptName }} -
              {{ detailList.postName }}
            </div>
            <div />
          </div>
        </div>
        <div class="flex record wrap">
          <el-tooltip
            class="item"
            effect="dark"
            content="无犯罪证明记录"
            placement="top-start"
          >
            <el-image
              class="record-img"
              :src="detailList.noCriminalProve"
              :preview-src-list="[detailList.noCriminalProve]"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="驾驶证照片"
            placement="top-start"
          >
            <el-image
              class="record-img"
              :src="detailList.driverImg"
              :preview-src-list="[detailList.driverImg]"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="12123车辆扣分记录"
            placement="top-start"
          >
            <el-image
              class="record-img"
              :src="detailList.driverRecordImg"
              :preview-src-list="[detailList.driverRecordImg]"
            />
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="体检资料"
            placement="top-start"
          >
            <el-image
              class="record-img"
              :src="detailList.healthCheckImg"
              :preview-src-list="[detailList.healthCheckImg]"
            />
          </el-tooltip>
        </div>
        <div class="pass">
          <div>
            通行证有效期：{{ detailList.startTime }}至{{ detailList.endTime }}
          </div>
          <div>
            申请通行区域：
            <i v-for="(item, index) in detailList.areaNameList" :key="index" style="margin-bottom: 5px">{{
              item
            }}</i>
          </div>
          <div>
            引领人：<span
              v-for="(item, index) in detailList.leaderList"
              :key="index"
            >{{ item.name||'' }}-{{ item.passSn||'' }}-{{ item.unitConciseName||'' }}</span>
          </div>
<!--          <div>
            附加资格：<i
              v-if="detailList.extraAttributeList.indexOf(1) > -1"
            >驾驶资格证</i><i v-if="detailList.extraAttributeList.indexOf(2) > -1">施工证</i>
          </div>
          &lt;!&ndash; <div>所在施工单：</div> &ndash;&gt;
          <div>准驾车型：{{ getVehicleType(detailList.drivingModel) }}</div>
          <div>
            准驾类别：{{
              detailList.drivingType == 1
                ? "I类(可进入红线机位安全区)"
                : "Ⅱ类(通行车道)"
            }}
          </div>-->
        </div>
        <div class="status">
          <img
            v-if="detailList.status == 1"
            src="../../assets/pass/overall1.png"
            alt=""
          >
          <img
            v-if="detailList.status == 2"
            src="../../assets/pass/overall4.png"
            alt=""
          >
          <img
            v-if="detailList.status == 3"
            src="../../assets/pass/overall3.png"
            alt=""
          >
          <img
            v-if="detailList.status == 4"
            src="../../assets/pass/overall2.png"
            alt=""
          >
        </div>
      </div>
      <el-steps
        :active="
          auditList[auditList.length - 1].status == 1
            ? auditList.length
            : auditList.length + 1
        "
        simple
        align-center
      >
        <el-step icon="el-icon-check" title="发起审核" />
        <el-step
          v-for="(item, index) in auditList"
          :key="index"
          :title="item.auditName"
          :icon="
            item.status == 3
              ? 'el-icon-check'
              : item.status == 4
                ? 'el-icon-close'
                : item.status == 1
                  ? 'el-icon-more'
                  : 'el-icon-minus'
          "
          @click.native="getAuditItem(item)"
        />
      </el-steps>
      <div v-if="lastData.status != 1" class="result">
        <div class="user">
          <div v-if="lastData.checkName">
            <div>所处步骤：{{ lastData.auditName }}</div>
            <div>审核员：{{ lastData.checkName }}</div>
            <div>审核时间：{{ lastData.checkTime }}</div>
          </div>
          <div
            v-for="(item1, index1) in lastData.content"
            :key="index1"
            :class="
              lastData.status == 2
                ? 'yellow'
                : lastData.status == 3
                  ? 'blue'
                  : lastData.status == 4
                    ? 'red'
                    : ''
            "
          >
            {{ item1.customName }}:{{ item1.customNameVal }}
          </div>
        </div>
        <div class="result-box">
          <img
            v-if="lastData.status == 2"
            src="../../assets/pass/single1.png"
            alt=""
          >
          <img
            v-if="lastData.status == 3"
            src="../../assets/pass/single3.png"
            alt=""
          >
          <img
            v-if="lastData.status == 4"
            src="../../assets/pass/single2.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <!--对话框-->
    <!-- <el-dialog title="违规记录" :visible.sync="dialogVisible" width="900px">
      <el-table
        class="table"
        ref="table_form"
        v-loading="listLoading"
        :data="detailList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            {{ indexMethod1(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column label="违规证件编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column label="违规内容" align="center">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column label="证件到期时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column label="证件归还时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total1"
        :page.sync="page1.pageNum"
        :limit.sync="page1.pageSize"
        @pagination="create"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import UploadImg from '@/components/UploadImg'
import {
  applyDelete,
  checkList,
  getUserInfo,
  applyGetPageList
} from '@/api/pass'
import { getVehicleType } from '@/utils/utils'
export default {
  components: { Pagination, UploadImg },
  filters: {
    // 脱敏
    desensitization(string = '', start, end) {
      if (string) {
        var star = ''
        function makeStar(number) {
          if (number > 0) {
            star += '*'
            return makeStar(--number)
          } else {
            return star
          }
        }
        return (
          string.substring(0, start) +
          makeStar(end - start) +
          string.substring(end)
        )
      }
    }
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          passApplyType: null,
          idNumber: null,
          endTime: null,
          startTime: null,
          name: null,
          phone: null
        },
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // page1: {
      //   data: {},
      //   pageNum: 1,
      //   pageSize: 10,
      // },
      // total1: 0,
      dialogVisible: false,
      type_list: [
        { id: 1, name: '人员长期通行证' },
        { id: 2, name: '人员短期通行证' }
      ],
      status_list: [
        { id: 1, name: '审核中' },
        { id: 2, name: '整改中' },
        { id: 3, name: '已通过' },
        { id: 4, name: '已拒绝' }
      ],
      unit_list: [],
      post_list: [],
      num_list: [],
      isTable: true,
      detailList: {},
      avatarList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
      realNamePhoto: '', // 实名照片
      auditList: [], // 审核列表
      lastData: {} // 审核列表最后一项
    }
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData()
  },
  methods: {
    getVehicleType,
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      applyGetPageList(this.page).then((res) => {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      })
    },
    // 打开添加角色对话框
    async create(row) {
      this.detailList = row
      this.detailList.idNumber = this.desensitization(
        this.detailList.idNumber,
        6,
        14
      )
      this.detailList.phone = this.desensitization(this.detailList.phone, 3, 7)
      await getUserInfo(row.userId).then((res) => {
        this.realNamePhoto = res.data.photo
      })
      await checkList(row.passApplyId).then((res) => {
        this.auditList = res.data
        this.lastData = this.auditList[this.auditList.length - 1]
      })
      this.isTable = false
    },
    // 脱敏
    desensitization(string = '', start, end) {
      var star = ''
      function makeStar(number) {
        if (number > 0) {
          star += '*'
          return makeStar(--number)
        } else {
          return star
        }
      }
      return (
        string.substring(0, start) +
        makeStar(end - start) +
        string.substring(end)
      )
    },
    getAuditItem(item) {
      this.lastData = item
    },
    // 删除
    delPass(id) {
      this.$prompt('请输入删除密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false
      })
        .then(async({ value }) => {
          if (value == 'Nqj##361') {
            this.$message({
              type: 'success',
              message: '密码正确,正在删除...'
            })
            this.listLoading = true
            await applyDelete(id).then((res) => {
              this.listLoading = false
              this.isTable = true
              this.fetchData()
            })
          } else {
            this.$message({
              type: 'error',
              message: '您输入的密码不正确'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // 图片赋值
    getImg(val, index, type) {
      this.form[type] = val
    },
    // 导出
    // exportFile(e, id) {
    //   this.listLoading = true;
    //   meetingExcelOut(this.page).then((res) => {
    //     var eleLink = document.createElement("a");
    //     eleLink.style.display = "none";
    //     // 字符内容转变成blob地址
    //     var blob = new Blob([res]);
    //     eleLink.href = URL.createObjectURL(blob);
    //     eleLink.setAttribute("download", "台账.xlsx");
    //     // 自动触发点击
    //     document.body.appendChild(eleLink);
    //     eleLink.click();
    //     // 然后移除
    //     document.body.removeChild(eleLink);
    //     this.listLoading = false;
    //   });
    // },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1
    },
    // 返回列表序号
    indexMethod1(index) {
      return (this.page1.pageNum - 1) * this.page1.pageSize + index + 1
    }
  }
}
</script>
<style scoped lang="scss">
.tit {
  margin-bottom: 54px;
  strong {
    display: inline-block;
    margin-right: 20px;
  }
}
.box1 {
  border-right: 1px solid #eeeeee;
  width: 40%;
  padding-right: 28px;
}
.content {
  // width: 1700px !important;
  margin-bottom: 52px;
}
.flex {
  width: auto;
  flex-wrap: nowrap;
}
.flex1 {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.wrap {
  flex-wrap: wrap;
}
.m-l-20 {
  margin-left: 20px;
}
.user-img {
  width: 105px;
  height: 140px;
  margin-bottom: 12px;
}
.user-msg {
  font-size: 14px;
  line-height: 33px;
}
.violation {
  margin-top: 35px;
}
.record {
  width: 20%;
  height: 240px;
  padding: 0 10px 0 28px;
  border-right: 1px solid #eeeeee;
  overflow-y: auto;
}
.record-img {
  width: 90px;
  height: 90px;
  margin-right: 12px;
  margin-bottom: 20px;
}
.pass {
  width: 30%;
  padding: 0 18px 0 28px;
  border-right: 1px solid #eeeeee;
}
.pass > div {
  margin-bottom: 15px;
}
.pass i {
  font-style: normal;
  display: inline-block;
  color: #5babfe;
  padding: 5px 5px;
  border: 1px solid #5babfe;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
}
.el-steps,
.result {
  // width: 1674px !important;
  margin-bottom: 24px;
  cursor: pointer;
}
.result {
  background-color: #f8f9fb;
  padding: 100px 0;
  display: flex;
  justify-content: center;
}
.result > .user {
  margin-right: 60px;
  line-height: 45px;
}
.result-box {
  width: 124px;
  height: 124px;
  border-radius: 62px;
  justify-content: center;
  font-size: 18px;
  img {
    width: 100%;
    height: 100%;
  }
}
.result-icon {
  font-size: 32px !important;
}
.status {
  width: 10%;
  padding: 28px;
  img {
    width: 121px;
    height: 105px;
  }
}
.blue {
  color: #409eff;
  cursor: pointer;
  display: inline-block;
  margin-left: 10px;
}
.red {
  color: #fc7c7c;
  margin-left: 10px;
}
.yellow {
  color: #fcba39;
}
</style>
