<template>
  <div style="width: 100%; height: 100%">
    <div class="tap">
      <span
        style="border-right: 1px solid #1352b6"
        :class="flag == 1 ? `active` : ''"
        @click="doClick(1)"
        >职能管理部门</span
      >
      <span 
        :class="flag == 2 ? `active` : ''" 
        @click="doClick(2)"
        >生产运行部门</span
      >
    </div>
    <div class="tap" v-if="flag == 1" style="height: 78%;">
    <dv-scroll-board :config="config"/>
    <p
      @click="dialogVisible = true"
      style="color: #1352b6;position: relative;bottom: 0.5rem;"
    >
      查看详情
    </p>
  </div>
    <div class="tap" v-if="flag == 2" style="height: 78%;">
    <dv-scroll-board :config="config"/>
    <p
      @click="dialogVisible = true"
      style="color: #1352b6;position: relative;bottom: 0.5rem;"
    >
      查看详情
    </p>
  </div>

    <el-dialog
      title="评比排名"
      :visible.sync="dialogVisible"
      width="700px"
      :append-to-body="true"
    >
      <div style="max-height: 70vh; overflow: auto">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column
            label="排名"
            align="center"
            prop="rating"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="部门"
            align="center"
            prop="deptName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="岗位得分"
            align="center"
            prop="postScore"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="互评得分"
            align="center"
            prop="deptScore"
            show-overflow-tooltip
            v-if="flag ===1"
          >
          </el-table-column>
          <el-table-column
            label="日常得分"
            align="center"
            prop="deptScore"
            show-overflow-tooltip
            v-if="flag ===2"
          >
          </el-table-column>
          <el-table-column
            label="总分"
            align="center"
            prop="score"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { assessmentRating ,assessmentRatingZN , assessmentRatingSC } from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebRightBottom',

  data() {
    return {
      flag: 1,
      tableData:[],
      dialogVisible: false,
      year:"",
      config: {
        header: ['排名', '部门', '岗位得分', '互评得分', '总分'],
        data: [],
        columnWidth: [50, 110, 90, 90,50],
        align: ['center', 'center', 'center', 'center', 'center'],
        headerBGC: '#1352b6',
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent'
      }
    }
  },

  mounted() {
    this.year = new Date().toLocaleDateString().split('/')[0]
    this.$nextTick(()=>{
      this.initAssessmentRatingZN()
    })
  },

  methods: {
    doClick(type) {
      this.flag = type
      if (this.flag == 1) {
        this.initAssessmentRatingZN()
      } else {
        this.initAssessmentRatingSC()
      }
    },
    initAssessmentRatingZN() {
      assessmentRatingZN(this.year).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.config.header = ['排名', '部门', '岗位得分', '互评得分', '总分']
        this.config.data = res.data.map((item) => {
          return [
            item.rating,
            item.deptName,
            item.postScore * 1,
            item.deptScore * 1,
            item.score * 1
          ]
        })
        this.config = Object.assign({}, this.config)
        this.tableData = res.data

      })
    },
    initAssessmentRatingSC() {
      assessmentRatingSC(this.year).then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.config.header = ['排名', '部门', '岗位得分', '日常得分', '总分']
        this.config.data = res.data.map((item) => {
          return [
            item.rating,
            item.deptName,
            item.postScore * 1,
            item.deptScore * 1,
            item.score * 1
          ]
        })
        this.config = Object.assign({}, this.config)
        this.tableData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .header {
  color: #1352b6;
}
::v-deep .row-item {
  .ceil {
    &:last-child {
      color: #ed406e;
    }
  }
}
::v-deep .header-item {
  color: #fff;
}
.tap {
  padding: 15px 0px 0px 20px;

  span {
    padding: 0px 25px;
    cursor: pointer;
  }

  .active {
    color: #1352b6;
    font-size: 1rem
  }

  p {
    text-align: right;
    color: #68bbc4;
    margin-top: 0rem;
    margin-right: 1.5rem;
    cursor: pointer;
  }
}


</style>