//当年风险处置情况
<template>
  <div class="box">
    <div class="title">
      当年风险处置情况
    </div>
    <div class="content">
      <div class="top">
        <div id="chartsFxczqk" ></div>
        <div class="num">
          <p><span style="color:rgb(100,177,248)">{{list[1].value}}</span>/{{list[0].value}}</p>
          <p>未处置/累计发现数</p>
        </div>
      </div>
      <div class="bottom">
        <span>自治共治处置数<span class="sum">{{noneJointlyProcessedCount}}</span></span>
        <span>部门协同处置数<span class="sum">{{jointlyProcessedCount}}</span></span>
      </div>

    </div>
  </div>
</template>

<script >
import echarts from 'echarts'
import {mapActions, mapState} from 'vuex'

export default {
  props: {
  
  },
  data(){
    return{
      allNum: {},
      list: [
        {value: 0, name: '累计发现数'},
        {value: 0, name: '未处置'},
      ],
      noneJointlyProcessedCount: 0,
      jointlyProcessedCount: 0,
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            minAngle: 15,
            radius: ['50%', '68%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            'itemStyle': {
              'normal': {
                'borderWidth': 1, // 间距的宽度
                'borderColor': '#fff', //背景色
              }
            },
            data: [
            ]
          }
        ]
      }
    }
  },
  created(){
    this.get_RiskDisposal().then(res => {
      this.allNum = this.$com.confirm(res, 'data.content', [])
    })
  },
  watch: {
    allNum: {
      handler(cur){
        this.list[0].value = cur.totalCount
        this.list[1].value = cur.noneCount
        this.jointlyProcessedCount = cur.jointlyProcessedCount
        this.noneJointlyProcessedCount=cur.noneJointlyProcessedCount

        setTimeout(() => {
          let myChart= echarts.init(document.getElementById('chartsFxczqk'))
          this.option.color = ['rgb(119,200,125)', 'rgb(236,109,103)']
          this.option.series[0].data = this.list
          myChart.setOption(this.option)
          window.addEventListener('resize', function () {
            myChart.resize()
          })
        }, 0)

      },
      deep: true
    }
  },
  methods: {
    ...mapActions([
      'get_RiskDisposal'
    ]),
  }

}
</script>

<style scoped>
.box{
  background: #fff; 
  display: flex;
  flex-direction: column;
  min-height: 25vh;

}
.box .title{
  height: 35px;
  padding-left: 20px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid #ccc;
}
.box .content{
  padding: 12px;
  flex:1;
}
.box .content .top{
  height:80%;
  width: 100%;
  display: flex;
  padding-left: 10%;
  align-items: center;
  /* border: 1px solid rgb(139, 57, 57); */
}
.box .content .top >div:first-child{
  height:80%;
  width: 30%;
  /* border: 2px solid rgb(48, 146, 65); */

}
.box .content .top .num p{
  font-size: 12px;
  padding: 0;
  margin: 0;
  font-weight: 500;
  /* border: 1px solid rgb(36, 111, 182); */

}
.box .content .top .num p:last-child{
  font-size: 12px;
  font-weight: normal;
  /* border: 1px solid #ccc; */

}
.box .content .bottom{
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
}
.box .content .bottom .sum{
  color: rgb(100,177,248);
  font-size: 12px;
  font-weight: 500;
  padding-left: 12px;
  display: inline-block;
}
</style>