<template>
  <div class="app-container clue-container">
    <div class="common-title">风险概览</div>
    <div class="flex-box clue-box">
      <div class="clue-echarts"><div id="echartsRisk" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
      <div class="table-item">
        <el-table
          :data="viewData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="风险纬度分布"></el-table-column>
          <el-table-column
            prop="value"
            label="数量">
            <template slot-scope="scope">
              <span>{{ scope.row.value }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="bl"
            label="占比">
            <template slot-scope="scope">
              <span>{{ scope.row.bl }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Risk',
  props: ['statistic'],
  data() {
    return {
      viewData:[
        {
          name:'开庭公告',
          value:'',
          category:'credit',
          field:'openAnnouncement',
          tz:'',
          bl:''
        },
        {
          name:'企业公告',
          value:'',
          category:'xxx',
          field:'yy',
          tz:'',
          bl:''
        },
        {
          name:'送达公告',
          value:'',
          category:'xxx',
          field:'yy',
          tz:'',
          bl:''
        },
        {
          name:'对外投资变更',
          value:'',
          category:'basic',
          field:'outboundInvestment',
          tz:'',
          bl:''
        },
        {
          name:'法院公告',
          value:'',
          category:'credit',
          field:'courtAnnouncement',
          tz:'',
          bl:''
        },
        {
          name:'立案信息',
          value:'',
          category:'xxx',
          field:'zz',
          tz:'',
          bl:''
        },
        {
          name:'被执行人',
          value:'',
          category:'credit',
          field:'dishonestExecutee',
          tz:'',
          bl:''
        },
        {
          name:'行政处罚',
          value:'',
          category:'credit',
          field:'adminSanction',
          tz:'',
          bl:''
        },
      ]
    }
  },
  created() {
    this.handView()
  },
  mounted() {
    this.$nextTick(()=>{
      this.getDT()
    })
  },
  methods: {
    handView(){
      let totalVal = this.viewData.map(item => {
        let number = this.statistic[item.category]&&this.statistic[item.category][item.field]?this.statistic[item.category][item.field]:0
        return number
      }).reduce((prev, cur) => prev + cur)
      this.viewData = this.viewData.map(item => {
        let number = this.statistic[item.category]&&this.statistic[item.category][item.field]?this.statistic[item.category][item.field]:0
        let it = {name:item.name, value:number, tz: '', bl:parseFloat(Number(Number(number)/Number(totalVal)*100).toFixed(2))+'%'}
        return it
      })
    },
    getDT(){
      let myChart = echarts.init(document.getElementById("echartsRisk"))
      let option = {
        tooltip: {
          trigger: 'item',
          borderWidth:0,
          backgroundColor:"rgba(255, 255, 255, 0.8)",
          formatter: function (params) {
            var result = ''
            result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个</p>'
            if(params.data.tz){
              result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;" >'+ params.data.tz +'亿元</p>'
            }
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.bl +'%</p>'
            return result;
          },
          extraCssText:'width:150px!important;',
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 20,
          data: this.viewData,
          pageButtonPosition: 'end',
        },
        color: ['#8A82F3','#5B9CF7','#43BBE0','#8ECF95','#FFDC6B', '#FE9C77', '#E8649B', '#8A82F3'],
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: this.viewData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .clue-container{
    margin: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    border-radius: 4px;
    .clue-box{
      width: 100%;
      justify-content: space-between;
      align-items: normal;
      margin-top: 20px;
      .clue-echarts{
        width: calc(50% - 8px);
      }
      .table-item{
        width: calc(50% - 8px);
        ::v-deep .el-table--border .el-table__cell{
          border-bottom: 0;
        }
      }
    }
  }
</style>
