<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="部门：">
        <el-cascader
          v-model="queryParams.checkedDeptId"
          :options="deptTreeList"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="queryParams.status" placeholder="请选择">
          <el-option
            v-for="(item, k) in status"
            :key="item.value"
            :label="item"
            :value="k"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题级别：">
        <el-select v-model="queryParams.problemLevel" placeholder="请选择">
          <el-option
            v-for="(item, k) in levelData"
            :key="item.value"
            :label="item"
            :value="k"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="问题属性：">
        <el-select v-model="queryParams.problemAttribute" placeholder="请选择">
          <el-option
            v-for="(item, k) in problematicData"
            :key="item.value"
            :label="item"
            :value="k"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="职责类别：">
        <el-select v-model="queryParams.dutyType" placeholder="请选择">
          <el-option
            v-for="(item, k) in dutyData"
            :key="item.value"
            :label="item"
            :value="k"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题类别：">
        <el-select v-model="queryParams.problemCategory" placeholder="请选择">
          <el-option
            v-for="(item, k) in questionData"
            :key="item.value"
            :label="item"
            :value="k"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年度：">
        <el-date-picker
          v-model="valueYear"
          type="year"
          placeholder="选择年"
          value-format="yyyy"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="openApprove = true"
          :disabled="multiple"
          >批量审核</el-button
        >
      </el-col>
    </el-row>
    <el-table
      border
      v-loading="loading"
      :data="postList"
      @selection-change="handleSelectionChange"
      height="calc(100% - 150px)"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :selectable="checkSelectSet"
      />
      <el-table-column
        label="问题编号"
        align="center"
        prop="problemNo"
        min-width="190px"
      />
      <el-table-column label="受检部门" align="center" min-width="180px">
        <template slot-scope="{ row }">
          <span>{{ row.checkedDeptName || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="问题级别" align="center">
        <template slot-scope="{ row }">
          <span>{{ levelData[row.problemLevel] || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职责类别" align="center" min-width="180px">
        <template slot-scope="{ row }">
          <span>{{ dutyData[row.dutyType] || "--" }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="问题属性" align="center">
        <template slot-scope="{ row }">
          <span>{{ problematicData[row.problemAttribute] || "--" }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="问题类别" align="center" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ questionData[row.problemCategory] || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="问题原因" align="center" min-width="250px">
        <template slot-scope="{ row }">
          <span>{{ row.problemCause || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改责任人" align="center" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.rectificationResponsibleName || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改期限" align="center" min-width="190px">
        <template slot-scope="{ row }">
          <span>{{ row.rectificationPeriod || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前状态" align="center" min-width="150px">
        <template slot-scope="{ row }">
          <span :style="{ color: statusColor[row.status] }">{{
            status[row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="整改完成时间" align="center" min-width="190px">
        <template slot-scope="{ row }">
          <span>{{ row.rectificationCompletionTime || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="200"
        fixed="right"
      >
        <template slot-scope="{ row }">
          <el-button
            v-if="[10, 20].includes(row.status)"
            type="text"
            @click="handleUpdate('审核', row)"
            >审核</el-button
          >
          <el-button
            type="text"
            @click="handleUpdate('查看', row)"
            >查看</el-button
          >
          <el-dropdown
            size="mini"
            v-if="[10, 20, 12, 40].includes(row.status)"
            @command="(command) => handleCommand(command, row)"
          >
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
              >邮件通知</el-button
            >
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleAuditor"
                >部门经理</el-dropdown-item
              >
              <el-dropdown-item command="handlePrepared"
                >专业部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible="open"
      :fullscreen="true"
      @close="cancel"
    >
      <el-row :gutter="30" style="padding: 0 40px">
        <el-col :span="12">
          <el-descriptions title="整改方案" :column="2" border>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 岗检编号 </template>
              {{ form.problemNo }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 岗检工作组 </template>
              {{ form.checkWorkgroupName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 岗检小组 </template>
              {{ form.checkGroupName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 检查人员 </template>
              {{ form.checkUserName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 问题级别 </template>
              {{ levelData[form.problemLevel] }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 问题属性 </template>
              {{ problematicData[form.problemAttribute] }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 问题类别 </template>
              {{ questionData[form.problemCategory] }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 检查时间 </template>
              {{ form.checkTime }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" border>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 职责类别 </template>
              {{ dutyData[form.dutyType] }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 问题原因 </template>
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                placeholder="请输入"
                v-model="form.problemCause"
                disabled
              >
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 是否立行立改问题 </template>
              <el-radio-group v-model="form.isImmediatelyCorrected" disabled>
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 整改措施/建议 </template>
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6 }"
                placeholder="请输入"
                v-model="form.rectificationMeasure"
                disabled
              >
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 整改责任部门 </template>
              <el-cascader
                disabled
                v-model="form.checkedDeptId"
                :options="deptTreeList"
                @change="handleChange"
              >
              </el-cascader>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 整改责任人 </template>
              <el-select
                v-model="form.rectificationResponsibleUserId"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in depUserList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="labelStyle">
              <template slot="label"> 整改期限 </template>
              <el-date-picker
                v-model="form.rectificationPeriod"
                type="date"
                placeholder="选择日期"
                disabled
              >
              </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item
              :labelStyle="labelStyle"
              v-if="[40, 41, 42].includes(form.status)"
            >
              <template slot="label"> 整改完成 </template>
              <el-radio-group v-model="form.isRectificationCompleted" disabled>
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item
              :labelStyle="labelStyle"
              v-if="[40, 41, 42].includes(form.status)"
            >
              <template slot="label"> 整改完成证明</template>
              <el-link
                type="primary"
                @click="handelPrevie(form.rectificationCompletionImg)"
                >{{ getFileName(form.rectificationCompletionImg) }}</el-link
              >
            </el-descriptions-item>
            <el-descriptions-item
              :labelStyle="labelStyle"
              v-if="[40, 41, 42].includes(form.status)"
            >
              <template slot="label"> 整改完成时间 </template>
              {{ form.rectificationCompletionTime }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <span class="el-descriptions__header"
            ><div class="el-descriptions__title">审核意见</div></span
          >
          <el-row :gutter="20" class="row_header">
            <el-col :span="12">审核人</el-col>
            <el-col :span="12">审核结果</el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="row_content"
            v-if="form.rectificationResponsibleName"
          >
            <el-col :span="12">{{ form.rectificationResponsibleName }}</el-col>
            <el-col :span="12">{{
              row.status === 12 && row.reason
                ? "不通过：" + row.reason
                : [20, 21, 22, 30, 41, 40, 42].includes(row.status)
                ? "通过"
                : ""
            }}</el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="row_content"
            v-if="row.specialityDepartmentReviewerName"
          >
            <el-col :span="12">{{
              row.specialityDepartmentReviewerName
            }}</el-col>
            <el-col :span="12">{{
              row.status === 22 && row.reason
                ? "不通过：" + row.reason
                : [30, 41, 40, 42].includes(row.status)
                ? "通过"
                : ""
            }}</el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="row_content"
            v-if="row.reviewDepartmentReviewerName"
          >
            <el-col :span="12">{{ row.reviewDepartmentReviewerName }}</el-col>
            <el-col :span="12">{{
              row.status === 42 && row.reason
                ? "不通过：" + row.reason
                : [41].includes(row.status)
                ? "通过"
                : ""
            }}</el-col>
          </el-row>
          <div style="height: 16px"></div>
          <div v-if="!check">
            <span class="el-descriptions__header"
              ><div class="el-descriptions__title">不通过理由</div></span
            >
            <el-form
              :model="reasonParams"
              ref="reasonForm"
              size="small"
              label-width="95px"
            >
              <el-form-item label="审核人">
                {{ userName }}
              </el-form-item>
              <el-form-item label="不通过理由">
                <el-input
                  style="width: 500px"
                  v-model="reasonParams.reason"
                  placeholder="请输入"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6 }"
                />
              </el-form-item>
              <el-form-item>
                <div style="display: inline-block; width: 300px"></div>
                <el-button type="danger" @click="submitForm(2)"
                  >不通过</el-button
                >
                <el-button type="primary" @click="submitForm(1)"
                  >通过</el-button
                >
                <el-button @click="cancel">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 批量审核 -->
    <el-dialog
      :title="title"
      :visible.sync="openApprove"
      width="500px"
      @colse="cancelApprove"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="未通过原因：" prop="status">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入"
            v-model="textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleApprove(2)">不通过</el-button>
        <el-button type="primary" @click="handleApprove(1)">通过</el-button>
        <el-button @click="cancelApprove">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="预览附件"
      :visible.sync="previewAnnex"
      :fullscreen="true"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <preview-file
        :preview-url="previewUrl"
        :preview-type="previewType"
        :preview-img-url="previewImgUrl"
        @handleDownload="handleDownload"
      />

      <div slot="footer" class="batch-dialog-footer">
        <el-button type="primary" @click="previewAnnex = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCheckedProblem,
  getCheckedProblem,
  setDeptApproveTime,
  setSpecialityDepartmentReviewTime,
  setReviewDepartmentReviewerTime,
  postCheckedProblemRecord,
} from "@/api/postImplementation/remediationAction.js";
import {
  getPostUserList,
  getDeptTree,
} from "@/api/postInspectionPlanning/teamManagement.js";
import { getBase64 } from "@/api/postInspectionPlanning/projectManagement.js";
import { getToken } from "@/utils/auth";
import { mapState } from "vuex";
import { getBaseUrl } from "@/utils/baseUrl.js";
import { sendMailFile } from "@/api/postInspectionPlanning/projectManagement.js";
export default {
  name: "Post",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      previewImgUrl: '',
      openApprove: false,
      textarea: "",
      valueYear: "",
      deptTreeList: [],
      depUserList: [],
      departmentList: [],
      specializedDepartmentList: [],
      row: {},
      labelStyle: {
        width: "150px",
        "font-weight": 600,
        color: "#000",
      },
      postUserList: [],
      options: [
        {
          value: "选项1",
          label: "刘易斯",
        },
        {
          value: "选项2",
          label: "李涛",
        },
        {
          value: "选项3",
          label: "张三",
        },
      ],
      isBatch: false,
      checkDialog: false,
      textarea2: "",
      // 文件预览
      previewAnnex: false,
      previewUrl: "",
      previewType: "",
      filename: "",
      active: 0,
      establishDialog: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      levelData: {
        1: "一般",
        2: "重要",
      },
      dutyData: {
        1: "业务职责",
        2: "党建及党风廉政建设职责",
        3: "安全环保职责",
        4: "合规与保密职责",
        5: "任职资格与能力素质要求",
        6: "岗位责任制文件完整性与适宜性"
      },
      problematicData: {
        1: "完整性",
        2: "适宜性",
        3: "有效性",
      },
      questionData: {
        1: "职责权限问题",
        2: "工作内容问题",
        3: "工作标准问题",
        4: "考核奖励问题",
        5: "任职资格问题",
        6: "其他",
      },
      postList: [],
      status: {
        1: "待指定整改人",
        2: "待填写方案",
        10: "待部门审核",
        11: "部门审核通过",
        12: "部门审核驳回",
        20: "待专业部门人审核",
        21: "专业部门人审核通过",
        22: "专业部门人审核驳回",
        30: "上传实施图片",
        40: "待复查部门人审核",
        41: "复查部门人审核通过",
        42: "复查部门人审核驳回",
      },
      statusColor: {
        1: "#E6A23C",
        2: "#E6A23C",
        10: "#E6A23C",
        11: "#67C23A",
        12: "#F56C6C",
        20: "#E6A23C",
        21: "#67C23A",
        22: "#F56C6C",
        30: "#67C23A",
        40: "#E6A23C",
        41: "#67C23A",
        42: "#F56C6C",
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: getBaseUrl() + "/system/user/importData",
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        problemLevel: "",
        problemAttribute: "",
        status: "",
        problemCategory: "",
        dutyType: "",
        checkedDeptId: [],
      },
      userList: [],
      // 表单参数
      form: {
        checkGroupId: "",
        checkTime: "",
        checkUserId: "",
        checkWorkgroupId: "",
        checkedDeptId: "",
        dutyType: "",
        isImmediatelyCorrected: "",
        isRectificationCompleted: "",
        problemAttribute: "",
        problemCategory: "",
        problemCause: "",
        problemLevel: "",
        problemNo: "",
        rectificationCompletionImg: "",
        rectificationMeasure: "",
        rectificationPeriod: "",
        rectificationResponsibleUserId: "",
        specialityDepartmentReviewTime: "",
        rectificationCompletionTime: "",
      },
      // 表单校验
      rules: {
        postName: [
          { required: true, message: "岗位名称不能为空", trigger: "blur" },
        ],
        postCode: [
          { required: true, message: "岗位编码不能为空", trigger: "blur" },
        ],
        postSort: [
          { required: true, message: "岗位顺序不能为空", trigger: "blur" },
        ],
      },
      reasonParams: {
        checkUserName: "",
        reason: "",
      },
    };
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.nickName,
    }),
    check() {
      return this.title === "查看";
    },
    nickName() {
      return (id) => {
        return this.userList.find((item) => item.userId === id)?.nickName;
      };
    },
  },
  created() {
    this.initYear();
    this.getList();
    this.getDeptTree();
    getPostUserList().then((response) => {
      this.userList = response.rows;
    });
  },
  methods: {
    // 发送邮件
    handleCommand(command, row) {
      const params = {
        content: "",
        serviceId: row.id,
        serviceType: "",
      };
      this.$confirm("是否发送？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          switch (command) {
            case "handleAuditor":
              params.serviceType = "problem_dept_approve_user";
              sendMailFile(params).then(() => {
                this.$modal.msgSuccess("发送成功");
              });
              break;
            case "handlePrepared":
              params.serviceType = "problem_speciality_department_reviewer";
              sendMailFile(params).then(() => {
                this.$modal.msgSuccess("发送成功");
              });
            default:
              break;
          }
        })
        .catch(() => false);
    },
    getDeptTree() {
      getDeptTree().then((data) => {
        this.deptTreeList = data.data;
      });
    },
    initYear() {
      let _now = new Date();
      let currentYear = _now.getFullYear();
      this.valueYear = `${currentYear}`;
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      const dateRange = [`${this.valueYear}-01-01`, `${this.valueYear}-12-31`];
      const checkedDeptId =
        this.queryParams.checkedDeptId[
          this.queryParams.checkedDeptId.length - 1
        ];
      listCheckedProblem(
        this.addDateRange({ ...this.queryParams, checkedDeptId }, dateRange)
      ).then((response) => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = this.$options.data().form;
      this.reasonParams = this.$options.data().reasonParams;
      this.resetForm("reasonParams");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = this.$options.data().queryParams;
      this.initYear();
      this.handleQuery();
    },

    checkSelectSet(row) {
      if (row.status === 10 || row.status === 20) {
        return 1;
      }
      return 0;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // 部门批量审核
      this.departmentList = selection
        .filter((item) => item.status === 10 || item.status === 12)
        .map((item) => item.id);
      // 专业部门批量审核
      this.specializedDepartmentList = selection
        .filter((item) => item.status === 20 || item.status === 22)
        .map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleUpdate(title, row) {
      getCheckedProblem(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = title;
        this.row = row;
        this.form.checkedDeptId = this.getParentList(
          "value",
          this.form.checkedDeptId,
          this.deptTreeList
        );
        this.getUserList(this.form.checkedDeptId);
      });
    },
    getParentList(keyNmame, code, tree) {
      let arr = []; //要返回的数组
      for (let i = 0; i < tree.length; i++) {
        let item = tree[i];
        arr = [];
        arr.push(item[keyNmame]); //保存当前节点id
        if (code == item[keyNmame]) {
          //判断当前id是否是默认id
          return arr; //是则退出循环、返回数据
        } else {
          //否则进入下面判断，判断当前节点是否有子节点数据
          if (item.children && item.children.length > 0) {
            //合并子节点返回的数据
            arr = arr.concat(this.getParentList(keyNmame, code, item.children));
            if (arr.includes(code)) {
              //如果当前数据中已包含默认节点，则退出循环、返回数据
              return arr;
            }
          }
        }
      }
    },
    handleChange(arr) {
      this.getUserList(arr);
    },
    getUserList(arr) {
      if (!arr) return;
      const id = arr[arr.length - 1];
      getPostUserList({ deptId: id }).then((response) => {
        this.depUserList = response.rows;
      });
    },
    handleApprove(type) {
      if (type === 2 && !this.textarea) {
        this.$modal.msgWarning("请输入不通过理由！！！");
        return;
      }
      const name = type === 2 ? "已驳回" : "已通过";
      if (this.departmentList.length) {
        const status = type === 2 ? 12 : 11;
        const params = {
          reason: this.textarea,
          ids: this.departmentList.join(","),
          status,
        };
        setDeptApproveTime(params).then((response) => {
          this.$modal.msgSuccess(name);
          this.openApprove = false;
          this.getList();
        });
      } else if (this.specializedDepartmentList.length) {
        const status = type === 2 ? 22 : 21;
        const params = {
          reason: this.textarea,
          ids: this.specializedDepartmentList.join(","),
          status,
        };
        setSpecialityDepartmentReviewTime(params).then((response) => {
          this.$modal.msgSuccess(name);
          this.openApprove = false;
          this.getList();
        });
      } else {
        this.$modal.msgWarning("没有部门审核项！！！");
      }
    },

    // 取消按钮
    cancelApprove() {
      this.openApprove = false;
      this.textarea = "";
    },
    /** 提交按钮 */
    submitForm: function (type) {
      if (type === 2 && !this.reasonParams.reason) {
        this.$modal.msgWarning("请输入不通过理由！！！");
        return;
      }
      const name = type === 2 ? "已驳回" : "已通过";
      if (this.row.status === 10 || this.row.status === 12) {
        const status = type === 2 ? 12 : 11;
        const params = {
          ...this.reasonParams,
          ids: this.row.id,
          status,
        };
        setDeptApproveTime(params).then((response) => {
          this.$modal.msgSuccess(name);
          this.open = false;
          this.getList();
        });
      } else if (this.row.status === 20 || this.row.status === 22) {
        const status = type === 2 ? 22 : 21;
        const params = {
          ...this.reasonParams,
          ids: this.row.id,
          status,
        };
        setSpecialityDepartmentReviewTime(params).then((response) => {
          this.$modal.msgSuccess(name);
          this.open = false;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids;
      this.$modal
        .confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？')
        .then(function () {
          return delPost(postIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handelPrevie(path) {
      getBase64({ path }).then((res) => {
        let wj = encodeURIComponent(res.msg);
        wj = decodeURIComponent(wj);
        const myBlob = this.dataURLtoBlob(wj);
        this.previewUrl = myBlob;
        this.previewImgUrl = res.msg;
        this.previewType = this.iconByType(
          path.split(".")[path.split(".").length - 1]
        );
        this.filename = this.getFileName(path);
        this.previewAnnex = true;
      });
    },

    handleDown(path) {
      getBase64({ path }).then((res) => {
        let wj = encodeURIComponent(res.msg);
        wj = decodeURIComponent(wj);
        const myBlob = this.dataURLtoBlob(wj);
        this.previewUrl = myBlob;
        this.previewType = this.iconByType(
          path.split(".")[path.split(".").length - 1]
        );
        this.filename = this.getFileName(path);
        this.handleDownload();
      });
    },
    // 获取文件后缀名
    iconByType(filename) {
      return filename.substring(filename.lastIndexOf(".") + 1, filename.length);
    },
    // 获取文件名称
    getFileName(name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      // eslint-disable-next-line no-plusplus
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    handleDownload() {
      // 生成地址
      var myUrl = URL.createObjectURL(this.previewUrl);

      // 下载文件
      this.downloadFile(myUrl, this.filename);
    },
    downloadFile(url, name) {
      const a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("download", name);
      a.setAttribute("target", "_blank");
      const clickEvent = document.createEvent("MouseEvents");
      clickEvent.initEvent("click", true, true);
      a.dispatchEvent(clickEvent);
    },
  },
};
</script>
<style lang="scss" scoped>
.resetStyle {
  width: 100%;
  ::v-deep .el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
    }
  }
}
.card {
  margin-right: 10px; //下边距
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  border: 2px solid;
  border-color: #e5e5e5;
  border-image: none;
  ::v-deep .el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-avatar {
    width: 120px !important;
    height: 120px !important;
    margin: 14px 14px;
  }
  p {
    margin: 0;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
    font-size: 14px;
    &:first-child {
      margin-top: 10px;
      font-size: 18px;
    }
  }
}
.queryButton {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.col-body {
  width: 100%;
  padding: 16px;
  border: solid 1px #e5e5e5;
}
.row_header {
  div {
    border: 1px solid;
    border-color: #e5e5e5;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background: #fafafa;
    font-weight: 600;
  }
}
.row_content {
  div {
    border: 1px solid;
    border-color: #e5e5e5;
    height: 42px;
    line-height: 42px;
    text-align: center;
  }
}
.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;
  ::v-deep .el-image__inner {
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      transform: scale(1.2);
    }
  }
  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}
</style>
