<template>
  <div class="app-container">
    <!--搜索区-->
    <div class="float">
      <el-select
        filterable
        clearable
        v-model="page.data.unitType"
        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-input
        v-model="page.data.username"
        placeholder="账号名称"
        clearable
        class="margin-left input"
      ></el-input>
      <el-input
        v-model="page.data.unitConciseName"
        placeholder="单位简称"
        clearable
        class="margin-left input"
      ></el-input>
      <el-input
        v-model="page.data.manageName"
        placeholder="管理员姓名"
        clearable
        class="margin-left input"
      ></el-input>
      <el-input
        v-model="page.data.managePhone"
        placeholder="管理员手机号"
        clearable
        class="margin-left input"
      ></el-input>
      <el-select
        filterable
        clearable
        v-model="page.data.status"
        placeholder="审核状态"
        class="margin-left input"
      >
        <el-option
          v-for="item in audit_list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <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">
          <el-tag type="primary" v-if="scope.row.unitType === 1"
            >本级单位</el-tag
          >
          <el-tag type="success" v-if="scope.row.unitType === 2"
            >驻场单位</el-tag
          >
        </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">
          {{ scope.row.manageName }}
        </template>
      </el-table-column>
      <el-table-column label="管理员手机号 " align="center">
        <template slot-scope="scope">
          {{ scope.row.managePhone }}
        </template>
      </el-table-column>
      <el-table-column label="企业代码" align="center">
        <template slot-scope="scope">
          {{ scope.row.unitCode }}
        </template>
      </el-table-column>
      <el-table-column label="营业执照照片" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.unitBusinessImg"
            class="table-img"
            :src="scope.row.unitBusinessImg"
            :preview-src-list="[scope.row.unitBusinessImg]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="相关材料" align="center">
        <template
          slot-scope="scope"
          v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0"
        >
          <el-image
            v-for="(item, index) in scope.row.attachmentList"
            :key="index"
            class="table-img"
            :src="item"
            :preview-src-list="[item]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否收费" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isCharge" type="primary">收费</el-tag>
          <el-tag v-if="!scope.row.isCharge" type="success">免费</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">已通过</el-tag>
          <el-tag v-if="scope.row.status === 2" type="info">待审核</el-tag>
          <el-tag v-if="scope.row.status === 3" type="danger">未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top-start">
            <div slot="content">
              {{ scope.row.remarks }}
            </div>
            <span>{{ scope.row.remarks | omissionCharacter }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="拒绝理由" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top-start">
            <div slot="content">
              {{ scope.row.refusedReason }}
            </div>
            <span>{{ scope.row.refusedReason | omissionCharacter }}</span>
          </el-tooltip>
        </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="120">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 2"
            type="primary"
            size="small"
            @click="create(scope.row)"
            >审核</el-button
          >
          <el-button
            v-else
            type="primary"
            size="small"
            plain
            @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"
    />
    <!--对话框-->
    <el-dialog
      title="审核"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="flex">
        <div :class="[detail_list.status == 2 ? 'left' : '']">
          <div class="title">
            <div class="line"></div>
            <span>申请内容</span>
          </div>
          <div class="flex">
            <div
              class="detail-item"
              v-for="(item, index) in detail_tit"
              :key="index"
            >
              <span class="small-tit">{{ item.name }}</span>
              <div class="p-l">
                <el-image
                  v-if="item.name == '营业执照' && detail_list[item.value]"
                  class="table-img"
                  :src="detail_list[item.value]"
                  :preview-src-list="detail_list[item.value]"
                >
                </el-image>
                <span v-else-if="item.name == '审核状态'">
                  <el-tag v-if="detail_list[item.value] === 1" type="success"
                    >已通过</el-tag
                  >
                  <el-tag v-if="detail_list[item.value] === 2" type="info"
                    >待审核</el-tag
                  >
                  <el-tag v-if="detail_list[item.value] === 3" type="danger"
                    >未通过</el-tag
                  ></span
                >

                <span v-else>{{ detail_list[item.value] }}</span>
              </div>
            </div>
            <div class="detail-item" v-if="detail_list.status == 3">
              <span class="small-tit">拒绝理由</span>
              <div class="p-l">
                <span>{{ detail_list.refusedReason }}</span>
              </div>
            </div>
            <div
              class="detail-item"
              v-if="
                detail_list.attachmentList &&
                detail_list.attachmentList.length > 0
              "
            >
              <span class="small-tit">附件：相关材料</span>
              <div
                :class="[
                  detail_list.status == 2 ? 'p-l flex w300' : 'p-l flex',
                ]"
              >
                <el-image
                  v-for="(item, index) in detail_list.attachmentList"
                  :key="index"
                  class="table-img"
                  :src="item"
                  :preview-src-list="[item]"
                >
                </el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="right" v-if="detail_list.status === 2">
          <div class="title">
            <div class="line"></div>
            <span>审核</span>
          </div>
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="80px"
            label-position="left"
          >
            <el-form-item
              label="审核意见"
              prop="status"
              class="form-item-style"
            >
              <el-radio-group v-model="form.status">
                <el-radio :label="1">同意</el-radio>
                <el-radio :label="3">不同意</el-radio>
              </el-radio-group>
            </el-form-item>
            <template v-if="form.status == 1">
              <el-form-item
                label="单位类型"
                class="form-item-style"
                prop="unitType"
              >
                <el-select
                  filterable
                  clearable
                  v-model="form.unitType"
                  placeholder="请选择单位类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in type_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="单位简称"
                prop="unitConciseName"
                class="form-item-style"
              >
                <el-input
                  placeholder="请输入单位简称"
                  v-model="form.unitConciseName"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="收费标准"
                prop="isCharge"
                class="form-item-style"
              >
                <el-radio-group v-model="form.isCharge">
                  <el-radio :label="true">收费</el-radio>
                  <el-radio :label="false">免费</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="备注"
                prop="remarks"
                class="form-item-style special"
              >
                <el-input
                  maxlength="250"
                  show-word-limit
                  type="textarea"
                  :rows="2"
                  placeholder="请输入备注"
                  v-model="form.remarks"
                >
                </el-input>
              </el-form-item>
            </template>

            <el-form-item
              v-if="form.status == 3"
              label="拒绝理由"
              prop="refusedReason"
              class="form-item-style"
            >
              <el-input
                maxlength="250"
                show-word-limit
                type="textarea"
                :rows="2"
                placeholder="请输入备注"
                v-model="form.refusedReason"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div
        class="detail-item wid"
        v-if="detail_list.userDtoList && detail_list.userDtoList.length > 0"
      >
        <span class="small-tit">通行证管理责任人信息</span>
        <div class="p-l flex">
          <div
            class="item"
            v-for="(item, index) in detail_list.userDtoList"
            :key="index"
          >
            <div>
              <span>所在部门：</span
              ><i
                v-for="(item1, index1) in item.departmentNameList"
                :key="index1"
                >{{ item1 }}
                {{ index1 + 1 >= item.departmentNameList.length ? "" : "-" }}</i
              >
            </div>
            <div>
              <span>责任类型：</span
              >{{ item.userCheckType == 1 ? "证件管理员" : "单位负责人" }}
            </div>
            <div>
              <span>责任人：</span>{{ item.name }} 一【{{ item.idNumber }}】【{{
                item.phone
              }}】
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          v-if="detail_list.status === 2"
        >
          取消
        </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import UploadImg from "@/components/UploadImg";
import { admincheck, checkPageList } from "@/api/user_manage";
export default {
  components: { Pagination, UploadImg },
  filters: {
    omissionCharacter(str) {
      if (str && str.length >= 15) {
        str = str.slice(0, 15) + "...";
      }
      return str;
    },
  },
  computed: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          status: null,
          unitType: null,
          managePhone: null,
          manageName: null,
          unitAllName: null,
          unitConciseName: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 是否显示对话框
      dialogVisible: false,
      form_copy: null,
      // 添加角色参数
      form: {
        status: 1,
        remarks: null,
        isCharge: true,
        unitType: null,
        refusedReason: null,
        unitConciseName: null,
      },
      // 验证规则
      rules: {
        unitType: [{ required: true, message: "请选择", trigger: "change" }],
        status: [{ required: true, message: "请选择", trigger: "change" }],
        isCharge: [{ required: true, message: "请选择", trigger: "change" }],
        refusedReason: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        unitConciseName: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
      audit_list: [
        { id: 2, name: "待审核" },
        { id: 3, name: "未通过" },
      ],
      type_list: [
        { id: 1, name: "本级单位" },
        { id: 2, name: "驻场单位" },
      ],
      account_list: [],
      detail_list: [],
      detail_tit: [
        { name: "账号名称", value: "username" },
        { name: "管理员姓名", value: "manageName" },
        { name: "管理员手机号", value: "managePhone" },
        { name: "创建时间", value: "createTime" },
        { name: "企业代码", value: "unitCode" },
        { name: "营业执照", value: "unitBusinessImg" },
        { name: "审核状态", value: "status" },
        // { name: "是否收费", value: "isCharge" },
        // { name: "拒绝理由", value: "refusedReason" },
      ],
    };
  },
  created() {
    this.fetchData();
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      checkPageList(this.page).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 打开添加角色对话框
    create(row) {
      this.form = JSON.parse(JSON.stringify(this.form_copy));
      this.detail_list = row;
      this.form.adminId = row.adminId;
      this.dialogVisible = true;
      if (this.detail_list.status == 2) {
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      }
    },
    // 确定添加/编辑
    addOrUpdate() {
      if (this.detail_list.status == 2) {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            admincheck(this.form).then((res) => {
              this.dialogVisible = false;
              this.fetchData();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            });
          }
        });
      } else {
        this.dialogVisible = false;
      }
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  // margin-top: 25px;
  margin-bottom: 5px;
  .line {
    width: 4px;
    height: 14px;
    background: #409eff;
    border-radius: 13px;
    display: inline-block;
    margin-right: 8px;
  }
  span {
    font-weight: 700;
    font-size: 17px;
    color: #000;
  }
}
.flex {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
.left {
  width: 400px;
  margin-right: 40px;
}
.right {
  width: 400px;
}
.detail-item {
  margin-bottom: 16px;
  width: 33%;
}
.small-tit {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: 46px;
  background: #6da1ef;
  margin-bottom: 8px;
}
.p-l {
  padding-left: 5px;
}
.w300 {
  width: 300px;
}
.table-img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}
.wid {
  width: 100%;
  margin-top: 20px;
}
.item {
  width: 48%;
  margin-bottom: 16px;
  color: #333;
  margin-right: 15px;
}
.item span {
  color: #111;
  font-weight: 500;
}
</style>
