<template>
  <div style="height: 100%; width: 100%">
    <dv-capsule-chart :config="config" style="width: 100%; height: 100%" />
  </div>
</template>

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

  data() {
    return {
      config: {
        data: [
          {
            name: '岗位责任制清单数',
            value: 0
          },
          {
            name: '岗检发现问题一览',
            value: 0
          },
          {
            name: '应检已检岗位数',
            value: 0
          },
          {
            name: '应检未检岗位数',
            value: 0
          }
        ],
        // columnWidth: [50],
        colors: ['#1352b6', '#1352b6', '#1352b6', '#1352b6'],
        unit: '单位(个)',
        showValue: true
      }
    }
  },

  mounted() {
    this.initTotalView()
  },

  methods: {
    async initTotalView() {
      const res = await totalView()
      if (res.code !== 200) return this.$message.error(res.msg)
      if(res.data.listCount){
        this.config.data[0].value = res.data.listCount
      } 
      if (res.data.problemCount){
        this.config.data[1].value = res.data.problemCount
      } 
      if (res.data.checkedPostCount){
        this.config.data[2].value = res.data.checkedPostCount
      } 
      if (res.data.uncheckedPostCount){
        this.config.data[3].value = res.data.uncheckedPostCount
      }
      this.config = Object.assign({}, this.config)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .label-column {
  font-size: 0.85rem;
  color: #000;
}
::v-deep .capsule-item-value {
  font-size: 0.85rem !important;
  color: #000;
}
::v-deep .unit-label {
  font-size: 0.85rem !important;
  color: #000;
}
::v-deep .unit-text {
  font-size: 0.85rem !important;
  color: #000;
}
::v-deep .capsule-item {
  height: 0.85rem;
  color: #000;
}
::v-deep .capsule-item-column {
  height: 0.85rem !important;
  margin: 0 !important;
  color: #000;
}
</style>