<template>
  <div class="app-container">
    <!--操作区-->
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="create('添加备案申请')"
      class="margin-bottom"
      >添加备案申请</el-button
    >
    <!--搜索区-->
    <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">
          <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 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 align="center" prop="" label="操作区" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="detailFun(scope.row)"
            >详情</el-button
          >
          <el-button
            type="warning"
            size="small"
            @click="create('整改', scope.row)"
            v-if="scope.row.status === 2"
            >整改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!--审核对话框-->
    <el-dialog
      :title="dialogType"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <!-- <template v-if="dialogType === '整改'">
          <div
            class="yellow"
            v-for="(item, index) in checkList.content"
            :key="index"
            >{{index}}{{ item.customName }}:{{ item.customNameVal }}</div
          >
        </template> -->
        <div class="flex">
          <el-form-item
            label="单位负责人"
            class="form-item-style"
            prop="documentIdList"
          >
            <el-select
              filterable
              clearable
              multiple
              collapse-tags
              v-model="form.documentIdList"
              placeholder="请选择人员"
              style="width: 100%"
            >
              <el-option
                v-for="item in user_list"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="证件管理员"
            class="form-item-style"
            prop="headIdList"
          >
            <el-select
              filterable
              clearable
              multiple
              collapse-tags
              v-model="form.headIdList"
              placeholder="请选择人员"
              style="width: 100%"
            >
              <el-option
                v-for="item in user_list"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item
          label="申请函件"
          :prop="form.applyFile ? '' : 'applyFile1'"
          class="form-item-style"
        >
          <UploadFile
            @fileFun="getFormItem"
            :fileVal="form.applyFile1"
            type="applyFile1"
          />
          <span class="blue" @click="handlePreview(form.applyFile)">{{
            form.applyFile
          }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
    <!--详情对话框-->
    <el-dialog
      title="审核人员备案审核详情"
      :visible.sync="detailDialogVisible"
      width="700px"
    >
      <div class="flex detail">
        <div class="user">
          <div class="title m-b-15">
            <div class="line"></div>
            <span>审核人员备案</span>
          </div>
          <span class="blue">单位负责人</span>
          <div class="flex1">
            <div
              class="user-item"
              v-for="(item, index) in detailList.documentList"
              :key="index"
            >
              <el-image
                style="
                  width: 25px;
                  height: 25px;
                  border-radius: 50%;
                  vertical-align: middle;
                "
                :src="item.avatar"
                :preview-src-list="[item.avatar]"
              >
                <div
                  slot="error"
                  style="
                    width: 25px;
                    height: 25px;
                    background: #d9d9d9;
                    border-radius: 50%;
                    vertical-align: middle;
                  "
                ></div>
              </el-image>
              {{ item.name }}
            </div>
          </div>
          <span class="blue">证件管理员</span>
          <div class="flex1">
            <div
              class="user-item"
              v-for="(item, index) in detailList.headList"
              :key="index"
            >
              <el-image
                style="
                  width: 25px;
                  height: 25px;
                  border-radius: 50%;
                  vertical-align: middle;
                "
                :src="item.avatar"
                :preview-src-list="[item.avatar]"
              >
                <div
                  slot="error"
                  style="
                    width: 25px;
                    height: 25px;
                    background: #d9d9d9;
                    border-radius: 50%;
                    vertical-align: middle;
                  "
                ></div>
              </el-image>
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="audit">
          <div class="title m-b-15">
            <div class="line"></div>
            <span>审核情况</span>
          </div>
          <div class="audit-item">
            <i class="blue-dot"></i>
            <i class="blue-line"></i>
            <div class="audit-item-msg">
              <span class="tit">发起审核人员备案申请 </span>
              <span class="time">{{ detailList.createTime }}</span
              ><br />
              <template>
                <strong class="tit">{{ detailList.username }}</strong>
                <br />
                <span
                  v-if="detailList.applyFile"
                  class="blue"
                  @click="handlePreview(detailList.applyFile)"
                >
                  {{ detailList.applyFile }}
                </span>
              </template>
            </div>
          </div>
          <div
            class="audit-item"
            v-for="(item, index) in checkList"
            :key="index"
          >
            <i class="blue-dot"></i>
            <i class="blue-line"></i>
            <div class="audit-item-msg">
              <span class="tit">{{ item.auditName }} </span>
              <span class="time">{{ item.createTime }}</span
              ><br />
              <div>
                <el-image
                  v-if="item.checkName"
                  style="
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    vertical-align: middle;
                  "
                  :src="item.checkAvatar"
                  :preview-src-list="[item.checkAvatar]"
                >
                </el-image>
                {{ item.checkName }}
                <div>
                  <strong
                    :class="[
                      'tit',
                      item.status == 2
                        ? 'yellow'
                        : item.status == 3
                        ? 'blue'
                        : item.status == 4
                        ? 'red'
                        : '',
                    ]"
                    >{{
                      item.status == 2
                        ? "整改"
                        : item.status == 3
                        ? "已同意"
                        : item.status == 4
                        ? "已拒绝"
                        : ""
                    }}</strong
                  >
                  <div
                    :class="
                      item.status == 2
                        ? 'yellow'
                        : item.status == 3
                        ? 'blue'
                        : item.status == 4
                        ? 'red'
                        : ''
                    "
                    v-for="(item1, index1) in item.content"
                    :key="index1"
                  >
                    <!-- {{ item1.customName }}:{{ item1.customNameVal }} -->

                    <div v-if="item1.customType == '图片'">
                      {{ item1.customName }}:
                      <img
                        v-for="(item2, index2) in item1.customNameVal1"
                        :key="index2"
                        class="custom-img"
                        :src="item2"
                        mode=""
                      />
                    </div>
                    <div v-if="item1.customType == '视频'">
                      {{ item1.customName }}:
                      <video class="video" :src="item1.customNameVal" />
                    </div>
                    <div
                      v-if="
                        item1.customType != '视频' && item1.customType != '图片'
                      "
                    >
                      {{ item1.customName }}:{{ item1.customNameVal }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import UploadFile from "@/components/UploadFile";
import {
  userCheckApplycheckList,
  userCheckApplyInsert,
  userCheckApplyGetPageList,
  userCheckApplyUpdate,
} from "@/api/user_manage";
import { auditUserList } 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,
      // 是否显示对话框
      dialogVisible: false,
      detailDialogVisible: false,
      dialogType: "添加备案申请",
      form_copy: null,
      // 添加角色参数
      form: {
        documentIdList: [],
        headIdList: [],
        applyFile1: [],
      },
      // 验证规则
      rules: {
        applyFile1: [{ required: true, message: "请选择", trigger: "change" }],
        headIdList: [{ required: true, message: "请选择", trigger: "change" }],
        documentIdList: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
      type_list: [
        { id: 1, name: "审核中" },
        { id: 2, name: "整改中" },
        { id: 3, name: "已通过" },
        { id: 4, name: "已驳回" },
      ],
      detailList: {},
      user_list: [],
      checkList: [],
    };
  },
  created() {
    this.fetchData();
    this.auditUserList();
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      userCheckApplyGetPageList(this.page).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 打开添加角色对话框
    async create(type, row) {
      if (type === "整改") {
        this.form = Object.assign(this.form, row);
        // await this.detailFun(row,1);
        console.log(this.form.applyFile);
      } else {
        this.form = JSON.parse(JSON.stringify(this.form_copy));
      }
      this.dialogType = type;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res;
          if (this.dialogType == "整改") {
            res = await userCheckApplyUpdate(this.form);
          } else {
            res = await userCheckApplyInsert(this.form);
          }
          if (res.code == 200) {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        }
      });
    },
    // 获取审核详情
    async detailFun(row, type) {
      await userCheckApplycheckList(row.userCheckApplyId).then((res) => {
        res.data.forEach((i) => {
          if (i.content && i.content.length > 0) {
            i.content.forEach((item) => {
              if (item.customType == "图片") {
                item.customNameVal1 = [];
                item.customNameVal1 = item.customNameVal.split(",");
              }
            });
          }
        });
        this.checkList = res.data;
        this.detailList = row;
      });
      if (!type) {
        this.detailDialogVisible = true;
      }
    },
    //获取人员列表
    auditUserList() {
      auditUserList(this.adminId).then((res) => {
        this.user_list = res.data;
      });
    },
    // 下载文件
    handlePreview(file) {
      window.location.href = file;
    },
    // 赋值
    getFormItem(val, type) {
      this.form[type] = val;
      this.form.applyFile = this.form.applyFile1[0].url;
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.m-b-15 {
  margin-bottom: 15px;
}
.detail {
  height: 500px;
  overflow: auto;
}
.user {
  width: 300px;
}

.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;
  width: 330px;
}
.blue {
  color: #409eff;
  cursor: pointer;
  // display: inline-block;
  margin-left: 10px;
}
.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;
}
.video {
  height: 100px;
  vertical-align: top;
}
.custom-img {
  width: 60px;
  height: 60px;
  margin: 0 7px 7px 0;
  vertical-align: top;
}
</style>
