<template>
  <div class="app-container">
    <!--搜索区-->
    <div class="float">
      <!-- <el-select
        filterable
        clearable
        v-model="page.data.status"
        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-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>
      <el-date-picker
        v-model="page.data.endTime"
        type="datetime"
        placeholder="选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="margin-left"
      >
      </el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="fetchData"
        class="margin-left"
        >搜索</el-button
      >
    </div>
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :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">
          {{ 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.documentList" :key="index"
            >{{ item.name
            }}{{ scope.row.documentList.length === index + 1 ? "" : "," }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="证件管理员" align="center">
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.headList" :key="index"
            >{{ item.name
            }}{{ scope.row.headList.length === index + 1 ? "" : "," }}</span
          >
        </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 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>

    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import UploadFile from "@/components/UploadFile";
import {
  userCheckApplycheckList,
  checkPersonPageList,
} from "@/api/user_manage";
import { personnelList } from "@/api/audit";

export default {
  components: { Pagination, UploadFile },
  filters: {},
  computed: {},
  data() {
    return {
      role: this.$store.getters.role,
      adminType: this.$store.getters.adminType,
      adminId: this.$store.getters.adminId,
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          status: null,
          endTime: null,
          startTime: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 是否显示对话框
      detailDialogVisible: false,
      type_list: [
        { id: 1, name: "审核中" },
        { id: 2, name: "整改中" },
        { id: 3, name: "已通过" },
        { id: 4, name: "已驳回" },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      checkPersonPageList(this.page).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 赋值
    getFormItem(val, type) {
      this.form[type] = val;
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.m-b-15 {
  margin-bottom: 15px;
}
.user {
  width: 500px;
}
.bule {
  color: #409eff;
  margin-left: 10px;
}
.flex1 {
  margin: 10px 0;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
.user-item {
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #409eff;
  border-radius: 30px;
  padding: 5px 10px;
}
.audit-item {
  position: relative;
  line-height: 32px;
}
.blue {
  color: #409eff;
  cursor: pointer;
  display: inline-block;
  width: 310px;
}
.red {
  color: #fc7c7c;
  margin-left: 10px;
}
.yellow {
  color: #fcba39;
}
.blue-dot {
  position: absolute;
  background: #409eff;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 5px;
}
.blue-line {
  position: absolute;
  height: 100%;
  /* width: 2px; */
  border-left: 1.6px dashed #409eff;
  top: 22px;
  left: 4px;
}
.audit-item-msg {
  margin: 26px 0 0 20px;
}
.tit {
  font-size: 16px;
}
.time {
  float: right;
  font-size: 14px;
  margin-left: 20px;
}
</style>
