<template>
  <div class="app-container">
    <h2>
      职能部门互评表 - {{ $route.query.type === '1' ? '查看' : '评分' }}

      <el-button
        type="primary"
        style="float: right; margin-bottom: 10px"
        @click="$router.back()"
        >返 回</el-button
      >
    </h2>

    <el-table
      :data="tableData"
      border
      style="max-height: 60vh; overflow: auto"
      :header-cell-style="{ background: '#1352b6' }"
    >
      <el-table-column align="center" prop="date" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目" width="100">
        <template #default="{ row }">
          {{ initType(row.dutyType) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="分值" width="100">
        <template #default="{ row }">
          {{ row.scoreWeight }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="评分标准" width="100">
        <template #default="{ row }">
          {{ row.rule }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门">
        <el-table-column
          align="center"
          :label="item.byDeptName"
          v-for="(item, index) in tableData[0].children"
          :key="index"
        >
          <template slot-scope="scope">
            <span v-if="$route.query.type === `1`">
              {{ scope.row.children[index].byDeptScore }}
            </span>
            <el-input
              v-else
              :disabled="scope.row.children[index].id === 666"
              v-model="scope.row.children[index].byDeptScore"
              @input="inputVal(scope.row.children[index].byDeptScore, index)"
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <div
      style="text-align: right; margin-top: 20px"
      v-if="$route.query.type !== `1`"
    >
      <el-button type="primary" @click="submit">提 交</el-button>
    </div>
  </div>
</template>

<script>
import {
  postAssessmentRatingOtherDetail,
  functionalDepartmentSub
} from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebIsEditDialog',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      queryData: {},
      total: 0,
      loading: false,
      tableData: [
        {
          children: {}
        }
      ]
    }
  },

  mounted() {
    this.initList()
  },

  methods: {
    async initList() {
      this.loading = true
      const res = await postAssessmentRatingOtherDetail(this.$route.query.id)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.queryData = res.data
      this.tableData = res.data.children
      let arr = []
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          item.children.forEach((it, ind) => {
            arr.push({
              byDeptName: it.byDeptName,
              byDeptId: it.byDeptId,
              id: 666,
              byDeptScore: it.byDeptScore
            })
          })
        } else {
          item.children.forEach((it, ind) => {
            arr.forEach((val, i) => {
              if (it.byDeptId === val.byDeptId) {
                val.byDeptScore = val.byDeptScore += +it.byDeptScore
              }
            })
          })
        }
      })

      this.tableData.push({
        dutyType: 999,
        scoreWeight: '-',
        rule: '',
        children: arr
      })
      this.total = res.total
      this.loading = false
    },
    initType(val) {
      switch (val) {
        case 1:
          return '工作态度'
        case 2:
          return '部门协作'
        case 3:
          return '廉洁从业'
        case 4:
          return '主要工作完成情况'
      }
    },
    async submit() {
      let arr = this.tableData.splice(this.tableData.length - 1, 1)
      this.queryData.children = this.tableData
      const res = await functionalDepartmentSub(this.queryData)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.$message.success('提交成功!')
      this.$router.push(`/examineCompetition/assessment`)
    },
    inputVal(val, index) {
      this.tableData[this.tableData.length - 1].children[index].byDeptScore = 0
      let num = 0
      this.tableData.forEach((item, idx) => {
        num += +item.children[index].byDeptScore
      })
      this.tableData[this.tableData.length - 1].children[index].byDeptScore =
        num
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table::before {
  height: 0px;
}
</style>
