<template>
  <div class="app-container">
    <div style="text-align: right">
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>

    <!-- 责任清单 -->
    <h2>责任清单</h2>
    <el-divider></el-divider>
    <h3>一、基本资料</h3>

    <!-- 最上方表格 -->
    <div class="base_top_box">
      <el-row>
        <el-col :span="3"> 所在单位： </el-col>
        <el-col :span="9"> {{ lookData.unitId }} </el-col>
        <el-col :span="3"> 所在部门： </el-col>
        <el-col :span="9"> {{ lookData.deptName }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="3"> 岗位名称： </el-col>
        <el-col :span="9"> {{ lookData.postName }} </el-col>
        <el-col :span="3"> 岗位编码： </el-col>
        <el-col :span="9"> {{ lookData.positionCode }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="3"> 岗位级别： </el-col>
        <el-col :span="9"> {{ lookData.positionLevel }} </el-col>
        <el-col :span="3"> 是否涉密： </el-col>
        <el-col :span="9"> {{ lookData.isConfidential }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="3"> 直接上级： </el-col>
        <el-col :span="9"> {{ lookData.directSuperior }} </el-col>
        <el-col :span="3"> 直接下级： </el-col>
        <el-col :span="9"> {{ lookData.directSubordinate }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="3"> 辖员人数： </el-col>
        <el-col :span="9"> {{ lookData.subordinateCount }} </el-col>
        <el-col :span="3"> 编制/修订日期： </el-col>
        <el-col :span="9"> {{ lookData.revisionDate }} </el-col>
      </el-row>
    </div>

    <h3>二、工作职责</h3>
    <el-divider></el-divider>

    <h4>1. 工作摘要</h4>
    <el-input type="textarea" :rows="4" disabled v-model="lookData.jobSummary">
    </el-input>
    <h4>2. 主要职责</h4>

    <!-- 中间表头 -->
    <div class="base_center_top_box">
      <div class="one">序号</div>
      <div class="two">
        <div class="top_box">工作任务的内容</div>
        <div class="bottom_box">
          <span> 一级事项 </span>
          <span> 二级事项 </span>
          <span> 三级事项 </span>
          <span> 四级事项 </span>
          <span> 五级事项 </span>
        </div>
      </div>
      <div class="three">工作标准</div>
    </div>

    <div
      class="center_table_box"
      v-if="oneList.length !== 0 && type == 1 || oneList.length !== 0 && type == 3 ? true : reviewType == 1"
    >
      <el-row type="flex">
        <el-col style="width: 120px"> （1） </el-col>
        <el-col style="flex: 1"> 业务职责 </el-col>
      </el-row>
      <div
        class="base_center_center_box"
        v-for="(item, index) in oneList"
        :key="index"
      >
        <div class="one">
          <div class="num_box">{{ index + 1 }}</div>
        </div>
        <div class="two">
          <span>{{ item.levelOne }}</span>
          <span>{{ item.levelTwo }}</span>
          <span>{{ item.levelThree }}</span>
          <span>{{ item.levelFour }}</span>
          <span>{{ item.levelFive }}</span>
          <span>{{ item.workStandard }}</span>
        </div>
      </div>
    </div>
    <div
      class="center_table_box"
      v-if="twoList.length !== 0 && type == 1 || twoList.length !== 0 && type == 3 ? true : reviewType == 2"
    >
      <el-row type="flex">
        <el-col style="width: 120px"> （2） </el-col>
        <el-col style="flex: 1"> 党建及党风廉政建设职责 </el-col>
      </el-row>

      <div
        class="base_center_center_box"
        v-for="(item, index) in twoList"
        :key="index"
      >
        <div class="one">
          <div class="num_box">{{ index + 1 }}</div>
        </div>
        <div class="two">
          <span>{{ item.levelOne }}</span>
          <span>{{ item.levelTwo }}</span>
          <span>{{ item.levelThree }}</span>
          <span>{{ item.levelFour }}</span>
          <span>{{ item.levelFive }}</span>
          <span>{{ item.workStandard }}</span>
        </div>
      </div>
    </div>
    <div
      class="center_table_box"
      v-if="threeList.length !== 0 && type == 1 || threeList.length !== 0 && type == 3 ? true : reviewType == 3"
    >
      <el-row type="flex">
        <el-col style="width: 120px"> （3） </el-col>
        <el-col style="flex: 1"> 安全环保责任 </el-col>
      </el-row>

      <div
        class="base_center_center_box"
        v-for="(item, index) in threeList"
        :key="index"
      >
        <div class="one">
          <div class="num_box">{{ index + 1 }}</div>
        </div>
        <div class="two">
          <span>{{ item.levelOne }}</span>
          <span>{{ item.levelTwo }}</span>
          <span>{{ item.levelThree }}</span>
          <span>{{ item.levelFour }}</span>
          <span>{{ item.levelFive }}</span>
          <span>{{ item.workStandard }}</span>
        </div>
      </div>
    </div>
    <div
      class="center_table_box"
      v-if="fourList.length !== 0 && type == 1 || fourList.length !== 0 && type == 3 ? true : reviewType == 4"
    >
      <el-row type="flex">
        <el-col style="width: 120px"> （4） </el-col>
        <el-col style="flex: 1"> 合规与保密职责 </el-col>
      </el-row>

      <div
        class="base_center_center_box"
        v-for="(item, index) in fourList"
        :key="index"
      >
        <div class="one">
          <div class="num_box">{{ index + 1 }}</div>
        </div>
        <div class="two">
          <span>{{ item.levelOne }}</span>
          <span>{{ item.levelTwo }}</span>
          <span>{{ item.levelThree }}</span>
          <span>{{ item.levelFour }}</span>
          <span>{{ item.levelFive }}</span>
          <span>{{ item.workStandard }}</span>
        </div>
      </div>
    </div>

    <h3>三、任职资格与能力素质要求</h3>
    <el-divider></el-divider>
    <div class="base_down_box">
      <el-row style="font-weight: 700; font-size: 1.1rem">
        <el-col :span="4"> 项目 </el-col>
        <el-col :span="20"> 要求 </el-col>
      </el-row>
      <el-row
        type="flex"
        align="center"
        v-for="(item, index) in fiveList"
        :key="index"
      >
        <el-col :span="4"> {{ item.sequenceProject }} </el-col>
        <el-col :span="20"> {{ item.requirement }} </el-col>
      </el-row>
    </div>

    <div v-if="noPassList.length !== 0">
      <div v-for="( item ,index) in noPassList" :key="index">
        <div style="margin: 20px 0px 10px 0">驳回部门：{{ initType(item.type) }}</div>
        <el-input type="textarea" :rows="4" disabled v-model="item.reason" />
      </div>
    </div>

    <div
      v-if="type === '2' && flag"
      style="text-align: right; margin-top: 10px"
    >
      <el-button type="danger" @click="dialogVisible = true">不通过</el-button>
      <el-button type="primary" @click="pass">通过</el-button>
    </div>

    <el-dialog
      title="驳回"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="30"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="beforeClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="驳回原因" prop="rejectReason">
          <el-input type="textarea" v-model="ruleForm.rejectReason"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" @click="submitNoPass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postCheckListLook,
  approveTypeUserList,
  approveReview
} from '@/api/allApi/index.js'
import { getInfo } from '@/api/login'

export default {
  name: 'PostCheckWebLookPage',

  data() {
    return {
      lookData: {},
      oneList: [],
      twoList: [],
      threeList: [],
      fourList: [],
      fiveList: [],
      type: null,
      dialogVisible: false,
      ruleForm: {
        rejectReason: ''
      },
      rules: {
        rejectReason: [
          { required: true, message: '请输入驳回原因', trigger: 'blur' }
        ]
      },
      userList: [],
      userId: '',
      isFlagArr: [],
      reviewType: null,
      flag: true,
      noPassList: []
    }
  },

  mounted() {
    this.type = this.$route.query.type
    this.initList()
    if (this.$route.query.type == 2) {
      this.initGetuserInfo()
    }
  },

  methods: {
    async initList() {
      const res = await postCheckListLook(this.$route.query.id)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.lookData = res.data
      this.lookData.children.forEach((item) => {
        if (item.type === 1) {
          this.oneList.push(item)
        }
        if (item.type === 2) {
          this.twoList.push(item)
        }
        if (item.type === 3) {
          this.threeList.push(item)
        }
        if (item.type === 4) {
          this.fourList.push(item)
        }
        if (item.type === 5) {
          this.fiveList.push(item)
        }
      })
      let arr = []
      this.lookData.children.forEach((item) => {
        if (item.status == 4) {
          arr.push({
            type: item.type,
            reason: item.reason
          })
        }
      })
      this.noPassList = arr.filter(
        (item, index, self) =>
          index ===
          self.findIndex(
            (t) => t.type === item.type && t.reason === item.reason
          )
      )
      console.log(this.noPassList, 'this.noPassList')
    },
    async initTypeUserList() {
      const res = await approveTypeUserList()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.userList = res.data
      res.data.forEach((item) => {
        this.isFlagArr.push(item.userList.some((it) => it === this.userId))

        item.userList.forEach((it) => {
          if (it === this.userId) {
            this.reviewType = item.type
          }
        })
      })
      if (this.isFlagArr.every((item) => !item)) {
        this.flag = false
        return this.$message.warning('该用户没有审核权限!')
      }
    },
    async initGetuserInfo() {
      getInfo().then((res) => {
        this.userId = res.user.userId
        this.initTypeUserList()
      })
    },
    beforeClose() {
      this.ruleForm.rejectReason = ''
      this.dialogVisible = false
    },
    submitNoPass() {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          let obj = {
            id: this.$route.query.id,
            status: 4,
            reason: this.ruleForm.rejectReason,
            type: this.reviewType
          }
          const res = await approveReview(obj)
          console.log(res, 88)
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message({
            type: 'success',
            message: '已驳回!'
          })
          this.$router.push('/postResponsibility/inventoryReview')

          this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    initType(val){
      switch (val) {
        case 1:
          return '人力资源部'
        case 2:
          return '党建工作部'
        case 3:
          return '健康安全环保中心'
        case 4:
          return '内控法务部&办公室'
      }
    },
    pass() {
      this.$confirm('确认通过吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let obj = {
            id: this.$route.query.id,
            status: 3,
            type: this.reviewType
          }
          const res = await approveReview(obj)
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message({
            type: 'success',
            message: '已通过!'
          })
          this.$router.push('/postResponsibility/inventoryReview')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  text-align: center;
  font-weight: 700;
}
h3 {
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 25px;
}
h4 {
  font-weight: 700;
  padding-left: 15px;
}
::v-deep .el-divider--horizontal {
  margin: 15px 0;
}

.base_top_box {
  ::v-deep .el-col {
    padding: 10px;
    min-height: 43px;
    text-align: center;
    border: 1px solid #151515;
  }

  .el-col-3 {
    font-weight: 600;
  }
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #151515 !important;
}

.center_table_box {
  .el-col {
    padding: 10px;
    min-height: 43px;
    display: flex;
    justify-content: center;
    border: 1px solid #151515;
  }
  .num_box {
    width: 18px;
    height: 18px;
    border: 1px solid #151515;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 15px;
  }
  .base_center_center_box {
    display: flex;
    min-height: 43px;

    .one {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #151515;
    }
    .two {
      flex: 21;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #151515;

      span {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-right: 1px solid #151515;
      }
    }
  }
}

.base_center_top_box {
  display: flex;
  height: 80px;

  .one {
    width: 120px;
    text-align: center;
    line-height: 80px;
    border: 1px solid #151515;
  }
  .two {
    flex: 20;
    text-align: center;
    border: 1px solid #151515;
    display: flex;
    flex-direction: column;

    .top_box {
      flex: 1;
      line-height: 40px;
    }

    .bottom_box {
      flex: 1;
      display: flex;
      border-top: 1px solid #151515;
      align-items: center;
      justify-content: space-between;

      span {
        flex: 1;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #151515;
      }
    }
  }
  .three {
    flex: 4;
    text-align: center;
    line-height: 80px;
    border: 1px solid #151515;
  }
}

.base_down_box {
  .el-col {
    padding: 10px;
    min-height: 43px;
    text-align: center;
    border: 1px solid #151515;
  }
}
</style>