<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.adminId"
        placeholder="请选择单位简称"
        class="margin-left input"
      >
        <el-option
          v-for="item in account_list"
          :key="item.adminId"
          :label="item.unitConciseName"
          :value="item.adminId"
        >
        </el-option>
      </el-select>
      <!-- <el-input
        v-model="page.data.eeeee"
        placeholder="请输入单位简称"
        clearable
        class="margin-left input"
      ></el-input> -->
      <el-input
        v-model="page.data.postName"
        placeholder="请输入岗位名称"
        clearable
        class="margin-left input"
      ></el-input>
      <el-select
        filterable
        clearable
        v-model="page.data.areaId"
        placeholder="请选择通行区域"
        class="margin-left input"
      >
        <el-option
          v-for="item in area_list"
          :key="item.passAreaId"
          :label="item.areaName"
          :value="item.passAreaId"
        >
        </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">
          {{ 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.deptName }}
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.postName }}
        </template>
      </el-table-column>
      <el-table-column label="备案通行区域" align="center" width="170">
        <template slot-scope="scope">
          <div
            v-if="scope.row.areaNameList && scope.row.areaNameList.length > 2"
          >
            <div
              v-for="(item, index) in scope.row.areaNameList"
              :key="index"
              class="d-i-b"
            >
              <el-tooltip
                class="item"
                effect="dark"
                placement="top-start"
                popper-class="tool-tip"
              >
                <span
                  slot="content"
                  v-for="(item1, index) in scope.row.areaNameList"
                  :key="index"
                >
                  {{ item1 }}，
                </span>
                <el-tag effect="plain" v-if="index < 2"> {{ item }}</el-tag>
                <el-tag effect="plain" v-if="index === 2"> ...</el-tag>
              </el-tooltip>
            </div>
          </div>
          <el-tag
            v-else
            effect="plain"
            v-for="(item, index) in scope.row.areaNameList"
            :key="index"
          >
            {{ item }}</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"
            popper-class="tool-tip"
          >
            <div slot="content">
              {{ scope.row.reason }}
            </div>
            <span>{{ scope.row.reason | omissionCharacter }}</span>
          </el-tooltip>
        </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 === 3" type="success">已备案</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">整改中</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="250">
        <template slot-scope="scope">
          <!-- passWay:1-直接通过 2-审核 -->
          <el-button
            type="primary"
            size="small"
            @click="detailFun(scope.row)"
            :disabled="scope.row.passWay == 1"
            >审核详情</el-button
          >
          <el-button
            v-if="role == 2"
            type="danger"
            size="small"
            @click="deleteFun(scope.row.deptPostId)"
            >删除</el-button
          >
          <el-button
            v-if="role == 3 && scope.row.status === 2"
            type="warning"
            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"
    />
    <!--对话框-->
    <el-dialog
      :title="dialogTit"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item
          label="所属单位"
          class="form-item-style"
          prop="adminId"
          v-if="role == 2"
        >
          <el-select
            @change="adminIdChange"
            filterable
            clearable
            v-model="form.adminId"
            placeholder="请选择单位简称"
            style="width: 100%"
          >
            <el-option
              v-for="item in account_list"
              :key="item.adminId"
              :label="item.unitConciseName"
              :value="item.adminId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div
          class="custom-css"
          v-for="(item, index) in form.detailDtoList"
          :key="index"
        >
          <div class="flex">
            <el-form-item
              label="岗位名称"
              class="form-item-style"
              style="flex:.5"
              :prop="`detailDtoList.${index}.postName`"
              :rules="rules.postName"
            >
              <el-input placeholder="岗位名称" v-model.trim="item.postName" />
            </el-form-item>
            <el-form-item
              label="绑定部门"
              style="flex:.5;"
              class="form-item-style"
              :prop="`detailDtoList.${index}.link`"
              :rules="rules.deptId"
            >
              <el-cascader
              style="width:100%"
                :options="department_list"
                :props="defaultParams"
                clearable
                v-model="item.link"
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label="通行区域"
              style="flex:.9"
              class="form-item-style"
              :prop="`detailDtoList.${index}.areaIdList`"
              :rules="rules.areaIdList"
            >
              <el-select
                filterable
                clearable
                multiple
                v-model="item.areaIdList"
                placeholder="岗位的通行区域"
                style="width: 100%"
              >
                <el-option
                  v-for="item in area_list"
                  :key="item.passAreaId"
                  :label="item.areaName"
                  :value="item.passAreaId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div class="icon" style="flex:.1" v-if="dialogTit != '整改'">
              <i
                class="el-icon-close"
                style="color:#F56C6C"
                v-if="form.detailDtoList.length > 1"
                @click="delField(index)"
              ></i>
              <i class="el-icon-circle-plus" style="color:#409EFF" @click="addField(index)"></i>
            </div>
          </div>
        </div>
        <el-form-item label="申请理由" class="form-item-style" prop="reason">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入申请理由"
            v-model="form.reason"
          >
          </el-input>
        </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="audit">
        <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">账号名称：</strong>{{ detailList.username }}<br/>
              <strong class="tit">单位简称：</strong>{{ detailList.unitConciseName }}
              <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.checkTime }}</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>
              </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 {
  deptPostDelete,
  deptPostEdit,
  passAreaAreaList,
  getRecursionGetPageList,
  getPostRecursionList,
  belowList,
  checkList,
  deptPostUpdate,
} from "@/api/user_manage";
export default {
  components: { Pagination },
  filters: {
    omissionCharacter(str) {
      if (str && str.length >= 15) {
        str = str.slice(0, 15) + "...";
      }
      return str;
    },
  },
  computed: {},
  data() {
    return {
      role: this.$store.getters.role,
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          postName: null,
          areaId: null,
          adminId: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 是否显示对话框
      dialogVisible: false,
      detailDialogVisible: false,
      dialogTit: "",
      form_copy: null,
      // 添加角色参数
      form: {
        adminId: null,
        detailDtoList: [
          {
            postName: null,
            link: null,
            areaIdList: null,
          },
        ],
        reason: null,
      },
      // 验证规则
      rules: {
        link: [{ required: true, message: "请选择", trigger: "change" }],
        adminId: [{ required: true, message: "请选择", trigger: "change" }],
        areaIdList: [{ required: true, message: "请选择", trigger: "change" }],
        postName: [{ required: true, message: "请输入", trigger: "change" }],
        reason: [{ required: true, message: "请输入", trigger: "change" }],
      },
      account_list: [],
      area_list: [],
      department_list: [],
      defaultParams: {
        checkStrictly: true,
        label: "deptName",
        value: "departmentId",
        children: "deptRsList",
        multiple: false,
      },
      detailList: {},
      checkList: [],
    };
  },
  created() {
    this.fetchData();
    this.passAreaAreaList();
    if (this.role == 3) {
      this.getPostRecursionList();
    } else {
      this.belowList();
    }
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      getRecursionGetPageList(this.page).then((res) => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 打开添加角色对话框
    create(type, row) {
      if (type === "整改") {
        this.form = Object.assign(this.form, row);
        this.form.detailDtoList[0].postName = row.postName;
        this.form.detailDtoList[0].link = row.link.map(Number);
        this.form.detailDtoList[0].areaIdList = row.areaIdList;
        console.log(this.form);
      } else {
        this.form = JSON.parse(JSON.stringify(this.form_copy));
      }
      this.dialogTit = type;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 添加字段
    addField(index, type) {
      this.form.detailDtoList.splice(index + 1, 0, {
        postName: null,
        link: null,
        areaIdList: null,
      });
    },
    // 删除字段
    delField(index, type) {
      this.form.detailDtoList.splice(index, 1);
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res;
          if (this.dialogTit == "整改") {
            let data = {
              deptPostId: this.form.deptPostId,
              areaIdList: this.form.detailDtoList[0].areaIdList,
              link: this.form.detailDtoList[0].link,
              postName: this.form.detailDtoList[0].postName,
              reason: this.form.reason,
            };
            res = await deptPostUpdate(data);
          } else {
            this.form.detailDtoList.forEach((item) => {
              item.deptId = item.link[item.link.length - 1];
            });
            res = await deptPostEdit(this.form);
          }
          if (res.code == 200) {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        }
      });
    },
    // 删除角色
    deleteFun(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        deptPostDelete(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 获取审核详情
    async detailFun(row, type) {
      await checkList(row.deptPostId).then((res) => {
        this.checkList = res.data;
        this.detailList = row;
      });
      if (!type) {
        this.detailDialogVisible = true;
      }
    },
    // 切换单位
    adminIdChange(e) {
      if (e) {
        this.getPostRecursionList(e);
      }
    },
    // 获取部门
    getPostRecursionList(e) {
      getPostRecursionList(e).then((res) => {
        this.department_list = res.data;
        this.department_list.forEach((item) => {});
      });
    },
    // 获取通行区域
    passAreaAreaList() {
      passAreaAreaList().then((res) => {
        this.area_list = res.data;
      });
    },
    // 获取所属单位
    belowList() {
      belowList().then((res) => {
        this.account_list = res.data;
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.m-r {
  margin-right: 5px;
}
.audit-item {
  position: relative;
  line-height: 32px;
  width: 530px;
}
.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-left: 20px;
}
.tit {
  font-size: 14px;
}
.time {
  float: right;
  font-size: 14px;
  margin-left: 20px;
}
.d-i-b {
  display: inline-block;
}
.el-tag {
  margin-right: 10px;
}
.custom-css {
  border: 1px solid #d6eaff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-top: 25px;
}
</style>
