<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="岗检问题扣分规则" name="1">
    </el-tab-pane>
    <el-tab-pane label="职能部门互评规则" name="2">
    </el-tab-pane>
    <el-tab-pane label="生产部门日常得分规则" name="3">
    </el-tab-pane>
  </el-tabs>
  <div v-if="activeName === '1'">
    <el-form ref="query" size="small" :inline="true">
      <el-form-item label="评分分类：">
        <el-select v-model="queryParams.dutyType" placeholder="活动区域">
          <el-option label="全部" value=""></el-option>
          <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="状态：">
        <el-select v-model="queryParams.status" placeholder="活动区域">
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" :value="1"></el-option>
          <el-option label="通过" :value="2"></el-option>
          <el-option label="驳回" :value="3"></el-option>
        </el-select>
      </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="end">
      <el-col :span="1.5">
        <el-button type="primary" @click="doAdd(`新建`, '')">新建</el-button>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="tableData" style="height: 50vh;">
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.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="scope">
          <span>{{ initStatus(scope.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 type="text" @click="doAdd(`修改`, scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <functionalDepartment v-if="activeName === '2'"/>
  <productionDepartment v-if="activeName === '3'"/>
    <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="title === '查看'"
            ></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="title === '查看'"
            >
              <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="title === '查看'"
              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="title === '查看'"
              :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="title === '查看'"
            ></el-input>
          </el-form-item>
          <span>分</span>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer" v-if="title !== '查看'">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAssessmentRulesList,
  postAssessmentRulesAdd,
  postAssessmentRulesUpdate
} from '@/api/allApi/index.js'
import functionalDepartment from "../ruleManagement/functionalDepartment.vue"
import productionDepartment from "../ruleManagement/productionDepartment.vue"
export default {
  name: 'PostCheckWebIndex',
  components: {
    functionalDepartment,
    productionDepartment
  },
  data() {
    return {
      activeName: '1',
      queryParams: {
        dutyType: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false,
      title: '',
      dialogVisible: false,
      ruleForm: {
        fullScore: null,
        dutyType: null,
        rule: null,
        problemLevelTwo: null,
        problemLevelOne: null
      },
      rules: {
        fullScore: [{ required: true, message: '请输入总分', trigger: 'blur' }],
        dutyType: [
          { required: true, message: '请选择评分分类', trigger: 'change' }
        ],
        rule: [{ required: true, message: '请输入规则描述', trigger: 'blur' }],
        problemLevelTwo: [
          { required: true, message: '请输入重要的评分标准', trigger: 'blur' }
        ],
        problemLevelOne: [
          { required: true, message: '请输入一般的评分标准', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    handleClick() {

    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      this.queryParams.type = 1
      postAssessmentRulesList(this.queryParams).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        dutyType: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    initStatus(val) {
      switch (val) {
        case 1:
          return '待审核'
        case 2:
          return '审核中'
        case 3:
          return '通过'
        case 4:
          return '驳回'
      }
    },
    initType(val) {
      switch (val) {
        case 1:
          return '业务职责有效性'
        case 2:
          return '党建及党风廉政建设职责有效性'
        case 3:
          return '安全环保职责有效性'
        case 4:
          return '合规与保密职责有效性'
        case 5:
          return '任职资格与能力素质要求符合性'
        case 6:
          return '岗位责任制文件完整性与适宜性'
      }
    },
    closeDialog() {
      this.dialogVisible = false
      this.ruleForm = {
        fullScore: null,
        dutyType: null,
        rule: null,
        problemLevelTwo: null,
        problemLevelOne: null
      }
    },
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.title === '新建') {
            this.ruleForm.type = 1
            const res = await postAssessmentRulesAdd(this.ruleForm)
            if (res.code !== 200) return this.$message.error(res.msg)
          } else {
            this.ruleForm.type = 1
            const res = await postAssessmentRulesUpdate(this.ruleForm)
            if (res.code !== 200) return this.$message.error(res.msg)
          }
          this.$message({
            message: `${this.title}成功!`,
            type: 'success'
          })
          this.handleQuery()
          this.closeDialog()
        } else {
          this.$message.error('必传项不能为空')
          return false
        }
      })
    },
    doAdd(title, val) {
      this.title = title
      if (title === '修改' || title === '查看') {
        this.ruleForm = val
      }
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog_box {
  max-height: 70vh;
  overflow: auto;

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