<template>
  <div class="app-container">
    <h3>考核规则：</h3>
    <el-table border :data="postList1">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          <span>{{
            scope.$index +
            1 +
            (queryParams1.pageNum - 1) * queryParams1.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分分类" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.dutyType ? initType(scope.row.dutyType) : "--"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="默认满分" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.fullScore ? scope.row.fullScore : "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考核规则" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.rule ? scope.row.rule : "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span :style="{ color: statusColor[row.status] }">{{
            status[row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="制定时间" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.createTime ? scope.row.createTime : "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="doAdd(`查看`, scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="scope.row.status !== 3"
            type="text"
            @click="doAdd(`修改`, scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total1 > 0"
      :total="total1"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList1"
    />
    <h3>职能部门互评表：</h3>
    <el-table border :data="postList2">
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="项目" align="center" prop="dutyType">
        <template slot-scope="{ row }">
          <span>{{ dutyType(options2, row.dutyType) || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="默认满分" align="center" prop="fullScore">
        <template slot-scope="{ row }">
          <span>{{ row.fullScore || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分标准" align="center" prop="rule">
        <template slot-scope="{ row }">
          <span>{{ row.rule || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <span :style="{ color: statusColor[row.status] }">{{
            status[row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="制定时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleCheck('check', '查看', scope.row)"
            v-hasPermi="['system:post:edit']"
            >查看</el-button
          >
          <el-button
            v-if="scope.row.status !== 3"
            type="text"
            @click="handleCheck('edit', '审核', scope.row)"
            v-hasPermi="['system:post:edit']"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total2 > 0"
      :total="total2"
      :page.sync="queryParams2.pageNum"
      :limit.sync="queryParams2.pageSize"
      @pagination="getList2"
    />
    <h3>生成部门日常得分：</h3>
    <el-table border :data="postList3">
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="专业" align="center" prop="dutyType">
        <template slot-scope="{ row }">
          <span>{{ dutyType(options1, row.dutyType) || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权重" align="center" prop="fullScore">
        <template slot-scope="{ row }">
          <span>{{ row.fullScore || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <span :style="{ color: statusColor[row.status] }">{{
            status[row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="制定时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleUpdate('check', '查看', scope.row)"
            v-hasPermi="['system:post:edit']"
            >查看</el-button
          >
          <el-button
            v-if="scope.row.status !== 3"
            type="text"
            @click="handleUpdate('edit', '审核', scope.row)"
            v-hasPermi="['system:post:edit']"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total3 > 0"
      :total="total3"
      :page.sync="queryParams3.pageNum"
      :limit.sync="queryParams3.pageSize"
      @pagination="getList3"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open2"
      width="600px"
      @colse="cancel2"
    >
      <el-form
        ref="form2"
        :model="form2"
        :rules="rules"
        label-width="100px"
        :disabled="type === 'check'"
      >
        <el-form-item label="权重：" prop="postName">
          <el-input
            style="width: 100px"
            v-model="form2.fullScore"
            placeholder="请输入"
          />
          %
        </el-form-item>
        <el-form-item label="专业：" filterable prop="status">
          <el-select
            v-model="form2.dutyType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="未通过理由：" prop="status">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8 }"
            placeholder="请输入"
            v-model="textarea"
            :disabled="type === 'check'"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="type !== 'check'">
        <el-button type="danger" @click="submitForm2(4)">不通过</el-button>
        <el-button type="primary" @click="submitForm2(3)">通过</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="dialog_box">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          inline
          class="demo-ruleForm"
        >
          <el-form-item
            label="默认岗检总分："
            prop="fullScore"
            placeholder="请输入默认岗检总分"
          >
            <el-input v-model="ruleForm.fullScore" disabled></el-input>
          </el-form-item>
          <span>分</span>
          <br />
          <el-form-item label="评分分类：" prop="dutyType">
            <el-select
              v-model="ruleForm.dutyType"
              placeholder="请选择评分分类"
              style="width: 610px"
              disabled
            >
              <el-option label="业务职责有效性" :value="1"></el-option>
              <el-option
                label="党建及党风廉政建设职责有效性"
                :value="2"
              ></el-option>
              <el-option label="安全环保职责有效性" :value="3"></el-option>
              <el-option label="合规与保密职责有效性" :value="4"></el-option>
              <el-option
                label="任职资格与能力素质要求符合性"
                :value="5"
              ></el-option>
              <el-option
                label="岗位责任制文件完整性与适宜性"
                :value="6"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则描述：" prop="rule">
            <el-input
              disabled
              type="textarea"
              v-model="ruleForm.rule"
              :rows="4"
              style="width: 610px"
            ></el-input>
          </el-form-item>
          <el-form-item label="评分标准：重要－" prop="problemLevelTwo">
            <el-input
              v-model="ruleForm.problemLevelTwo"
              disabled
              :rows="4"
            ></el-input>
          </el-form-item>
          <span>分</span>
          <el-form-item
            label="评分标准：一般－"
            prop="problemLevelOne"
            style="margin-left: 10px"
          >
            <el-input
              v-model="ruleForm.problemLevelOne"
              :rows="4"
              disabled
            ></el-input>
          </el-form-item>
          <span>分</span>
          <el-form-item label="未通过理由：">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 8 }"
              placeholder="请输入"
              v-model="textarea"
              style="width: 610px"
              :disabled="title === '查看'"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer" v-if="title !== '查看'">
        <el-button type="danger" @click="submit(4)">不通过</el-button>
        <el-button type="primary" @click="submit(3)">通过</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open1"
      width="600px"
      @colse="cancel1"
    >
      <el-form ref="form1" :model="form1" :rules="rules" label-width="100px">
        <el-form-item label="岗检总分：" prop="postName">
          <el-input v-model="form1.fullScore" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="项目：" filterable prop="status">
          <el-select
            v-model="form1.dutyType"
            placeholder="请选择"
            style="width: 100%"
            disabled
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评分标准：" prop="status">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8 }"
            placeholder="请输入"
            v-model="form1.rule"
            disabled
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="未通过理由："
          prop="status"
          v-if="this.type !== 'add'"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8 }"
            placeholder="请输入"
            v-model="textarea"
            :disabled="this.type === 'check'"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="this.type !== 'check'">
        <el-button type="danger" @click="submitForm1(4)">不通过</el-button>
        <el-button type="primary" @click="submitForm1(3)">通过</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listAssessmentRules,
  getAssessmentRules,
  delAssessmentRules,
  addAssessmentRules,
  updateAssessmentRules,
  statusApprove,
  statusFunctions,
  statusProduction,
} from "@/api/postImplementation/functionalDepartment.js";

export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      rowId: "",
      type: "",
      options1: [
        {
          value: 1,
          label: "HSE",
        },
        {
          value: 2,
          label: "生产",
        },
        {
          value: 3,
          label: "设备",
        },
      ],
      options2: [
        {
          value: 1,
          label: "工作态度",
        },
        {
          value: 2,
          label: "部门协作",
        },
        {
          value: 3,
          label: "廉洁从业",
        },
        {
          value: 4,
          label: "主要工作完成情况",
        },
      ],
      value1: "",
      value: new Date(),
      textarea: "",
      active: 0,
      establishDialog: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total1: 0,
      total2: 0,
      total3: 0,
      // 岗位表格数据
      postList1: [],
      postList2: [],
      postList3: [],

      status: {
        1: "待审核",
        2: "审核中",
        3: "通过",
        4: "驳回",
      },
      statusColor: {
        1: "#cdd152",
        2: "#61dd83",
        3: "#61dd83",
        4: "red",
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open1: false,
      open2: false,
      // 查询参数
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
      },
      // 查询参数
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        type: 2,
      },
      // 查询参数
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        type: 3,
      },

      // 表单参数
      form1: {
        rule: "",
        dutyType: "",
        fullScore: "20",
        type: 2,
      },
      form2: {
        dutyType: "",
        fullScore: "20",
        type: 3,
      },

      ruleForm: {
        fullScore: null,
        dutyType: null,
        rule: null,
        problemLevelTwo: null,
        problemLevelOne: null,
      },
      // 表单校验
      rules: {
        postName: [
          { required: true, message: "岗位名称不能为空", trigger: "blur" },
        ],
        postCode: [
          { required: true, message: "岗位编码不能为空", trigger: "blur" },
        ],
        postSort: [
          { required: true, message: "岗位顺序不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList1();
    this.getList2();
    this.getList3();
  },
  methods: {
    doAdd(title, val) {
      this.title = title;
      this.ruleForm = val;
      this.dialogVisible = true;
      this.rowId = val.id;
    },
    dutyType(arr, type) {
      const find = arr.find((item) => item.value === type);
      if (find) {
        return find.label;
      }
    },

    closeDialog() {
      this.dialogVisible = false;
      this.ruleForm = {
        fullScore: null,
        dutyType: null,
        rule: null,
        problemLevelTwo: null,
        problemLevelOne: null,
      };
    },
    initType(val) {
      switch (val) {
        case 1:
          return "业务职责有效性";
        case 2:
          return "党建及党风廉政建设职责有效性";
        case 3:
          return "安全环保职责有效性";
        case 4:
          return "合规与保密职责有效性";
        case 5:
          return "任职资格与能力素质要求符合性";
        case 6:
          return "岗位责任制文件完整性与适宜性";
      }
    },
    /** 查询岗位列表 */
    getList1() {
      listAssessmentRules(this.queryParams1).then((response) => {
        this.postList1 = response.rows;
        this.total1 = response.total;
        this.loading = false;
      });
    },
    /** 查询岗位列表 */
    getList2() {
      listAssessmentRules(this.queryParams2).then((response) => {
        this.postList2 = response.rows;
        this.total2 = response.total;
      });
    },
    /** 查询岗位列表 */
    getList3() {
      listAssessmentRules(this.queryParams3).then((response) => {
        this.postList3 = response.rows;
        this.total3 = response.total;
      });
    },
    // 取消按钮
    cancel1() {
      this.open1 = false;
      this.reset1();
    },
    // 取消按钮
    cancel2() {
      this.open2 = false;
      this.reset2();
    },
    cancelEstablish() {
      this.establishDialog = false;
    },
    // 表单重置
    reset1() {
      this.form1 = this.$options.data().form1;
      this.resetForm("form1");
    },
    // 表单重置
    reset2() {
      this.form2 = this.$options.data().form2;
      this.resetForm("form2");
    },
    // /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.postId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.establishDialog = true;
    },
    /** 查看 */
    handleCheck(type, title, row) {
      this.title = title;
      this.type = type;
      if (type === "add") {
        this.open1 = true;
        return;
      } else {
        this.rowId = row.id;
        getAssessmentRules(row.id).then((response) => {
          const { dutyType, fullScore, type } = row;
          this.form1 = {
            dutyType,
            fullScore,
            type,
          };
          this.open1 = true;
        });
      }
    },

    /** 查看 */
    handleUpdate(type, title, row) {
      this.title = title;
      this.type = type;
      if (type === "add") {
        this.open2 = true;
        return;
      } else {
        this.rowId = row.id;
        getAssessmentRules(row.id).then((response) => {
          const { dutyType, fullScore, type } = response.data;
          this.form2 = {
            dutyType,
            fullScore,
            type,
          };
          this.open2 = true;
        });
      }
    },
    /** 提交按钮 */
    submitForm1: function (status) {
      if (status === 4 && !this.textarea) {
        this.$modal.msgWarning("请输入不通过理由");
        return;
      }
      const params = {
        reason: this.textarea,
        status,
      };
      statusFunctions({ ...params, id: this.rowId }).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.open1 = false;
        this.getList2();
      });
    },
    /** 提交按钮 */
    submitForm2: function (status) {
      if (status === 4 && !this.textarea) {
        this.$modal.msgWarning("请输入不通过理由");
        return;
      }
      const params = {
        reason: this.textarea,
        status,
      };
      statusProduction({ ...params, id: this.rowId }).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.open2 = false;
        this.getList3();
      });
    },
    submit(status) {
      if (status === 4 && !this.textarea) {
        this.$modal.msgWarning("请输入不通过理由");
        return;
      }
      const params = {
        reason: this.textarea,
        status,
      };
      statusApprove({ ...params, id: this.rowId }).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.dialogVisible = false;
        this.getList1();
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids;
      this.$modal
        .confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？')
        .then(function () {
          return delPost(postIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    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%;
    }
  }
}
.dialog_box {
  max-height: 70vh;
  overflow: auto;

  span {
    display: inline-block;
    margin-top: 10px;
  }
}
</style>
