<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" style="width: 100%; height: 100%" />
      <p @click="lookDetail(`已查岗位数量`)" 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" style="width: 100%; height: 100%" />
      <p  @click="lookDetail(`未查岗位数量`)" style="color: #1352b6;position: relative;bottom: 0.5rem;">查看详情</p>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="800px"
    >
      <div class="max_heigth_box">
        <el-row class="title_box">
          <el-col :span="2">序号</el-col>
          <el-col :span="10">部门</el-col>
          <el-col :span="10">岗位</el-col>
          <el-col :span="2">人数</el-col>
        </el-row>
        <el-row v-for="(item, index) in tableData" :key="index">
          <el-col :span="2"> {{ index + 1 }} </el-col>
          <el-col :span="10"> {{ item.deptName }} </el-col>
          <el-col :span="10"> {{ item.postName }}</el-col>
          <el-col :span="2"> {{ item.userCount }} 人</el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { postChecked, postUnChecked } from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebRightTop',
  data() {
    return {
      flag: 1,
      config: {
        header: ['部门', '岗位', '人数'],
        data: [],
        headerBGC: '#1352b6',
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        // columnWidth: [
        //   120,200,50
        // ],
        align: ['center', 'center', 'center'],
      },
      title:"",
      tableData: [],
      dialogVisible: false,

      table1:[]
    }
  },

  mounted() {
    this.doClick(1)
  },

  methods: {
    doClick(type) {
      this.flag = type
      if (this.flag == 1) {
        this.initPostChecked()
      } else {
        this.initPostUnChecked()
      }
    },
    lookDetail (title){
      this.title = title
      this.dialogVisible = true
    },
    initPostChecked() {
      postChecked().then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.config.data = res.data.map((item) => {
          return [item.deptName, item.postName, item.userCount]
        })
        this.config = Object.assign({}, this.config)
        this.tableData = res.data
      })
    },
    initPostUnChecked() {
      postUnChecked().then((res) => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.config.data = res.data.map((item) => {
          return [item.deptName, item.postName, item.userCount]
        })
        this.config = Object.assign({}, this.config)
        this.tableData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .header {
  color: #1352b6;
}

.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;
  }
}

.max_heigth_box {
  max-height: 70vh;
  overflow: auto;


  .el-row {
    color: #000;

    .el-col {
      border: 1px solid #e2e9ed;
      text-align: center;
      min-height: 40px;
      padding: 0.5rem 0;
    }
  }
}
.title_box {
  font-weight: 700;
  background: #1453b6;
  color: #fff !important;
}
::v-deep .header-item {
  color: #fff;
}
</style>