<template>
  <div style="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">
      <ul>
        <li>
          岗检总问题整改率
          <!--<b style="min-width:70px">{{ formatNumber(dataObj[0] * 100) }} %</b>-->
          <b style="min-width:70px">{{ formatNumber(dataObj[4 - 1] * 100) }} %</b>
        </li>
        <li>
          完整性问题整改率
          <!--<b style="min-width:70px"> {{ formatNumber(dataObj[1] * 100) }} %</b>-->
          <b style="min-width:70px"> {{ formatNumber(dataObj[1 - 1] * 100) }} %</b>
        </li>
        <li>
          适宜性问题整改率
          <!--<b style="min-width:70px"> {{ formatNumber(dataObj[2] * 100) }} %</b>-->
          <b style="min-width:70px"> {{ formatNumber(dataObj[3 - 1] * 100) }} %</b>
        </li>
        <li>
          <!--有效性问题整改率 <b style="min-width:70px"> {{ formatNumber(dataObj[3] * 100) }} %</b>-->
          有效性问题整改率 <b style="min-width:70px"> {{ formatNumber(dataObj[2 - 1] * 100) }} %</b>
        </li>
      </ul>
    </div>
    <div class="tap" v-if="flag == 2" style="height: 90%;">
      <!-- <dv-scroll-board :config="config" style="width: 100%; height: 100%" /> -->
      <el-table :data="tableData" height="calc(100% - 50px)" style="width: auto;">
        <el-table-column label="部门" align="center" width="75" prop="deptName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="问题总数" width="72" align="center" prop="problemTotal">
        </el-table-column>
        <el-table-column label="整改完成数量" align="center"  prop="problemComplete">
        </el-table-column>
        <!--<el-table-column label="问题整改率" align="center" prop="problemRectificationRate">-->
        <el-table-column label="整改率" align="center" prop="problemRectificationRate">
           <template #default="{ row }">
              {{ row.problemRectificationRate? ((row.problemRectificationRate) * 100).toFixed(0) + '%': ''}}
          </template>
        </el-table-column>
      </el-table>
      <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="deptName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="问题总数量" align="center" prop="problemTotal" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="问题整改完成数量" align="center" prop="problemComplete" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="问题整改率" align="center" prop="problemRectificationRate" show-overflow-tooltip>
           <template #default="{ row }">
              {{ row.problemRectificationRate? (row.problemRectificationRate * 100 ).toFixed(0)+ '%': ''}}
          </template>
        </el-table-column>
    </el-table>
  </div>

    </el-dialog>
  </div>
</template>

<script>
import {
  problemRectification,
  deptProblemRectification
} from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebCenterBottom',

  data() {
    return {
      dialogVisible:false,
      flag: 1,
      dataObj: [],
      config: {
        header: ['部门', '问题总数量', '问题整改完成数量', '问题整改率'],
        data: [],
        headerBGC: '#1352b6',
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        color: ['#fff'],
      },
      tableData:[]
    }
  },

  mounted() {
    this.initProblemRectification()
  },

  methods: {
    doClick(type) {
      this.flag = type
      this.initProblemRectification()
      this.initrectification()
    },
    // 获取岗检问题整改率
    initProblemRectification() {
      problemRectification().then((res) => {
        Object.entries(res.data).forEach(([key, value]) => {
          this.dataObj.push(value)
        })
      })
    },
    formatNumber(num) {
      if(!num && num !=0) return ""
      if (Number.isInteger(num)) {
        return num
      } else {
        return num.toFixed(0)
      }
    },
    initrectification() {
      deptProblemRectification().then((res) => {
        this.tableData = res.data
        // this.config.data = res.data.map((item) => {
        //   return [
        //     item.deptName || '-',
        //     item.problemTotal,
        //     item.problemComplete,
        //     Math.floor(item.problemRectificationRate) * 100 + '%'
        //   ]
        // })
        // this.config = Object.assign({}, this.config)
      })
    }
  }
}
</script>

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

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 1rem;
  li {
    color: #1352b6;
    padding: 0.2rem 0.5rem 0.2rem 0rem;
    display: flex;
    align-items: center;
    font-size: 0.8rem;

    b {
      font-size: 1.2rem;
      margin-left: 1rem;
    }
  }
}

.tap {
  padding: 0.5rem 1rem 0rem 0.5rem;
  span {
    padding: 0 0.5rem;
    cursor: pointer;
  }

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

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

::v-deep .header-item {
  color: #fff;
}

::v-deep .has-gutter{
  height: 35px;
}
::v-deep .el-table__header-wrapper{
  height: 35px;
}
::v-deep .el-cell{
  height: 35px;
}
</style>
