<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import template from "./home.component.html"
@Component({
  template,
  components:{
  },
})
export default class HomeComponent extends Vue {
  // 数据直接定义
  // 所有可用
  public datas = [
  ////////////////////////////////////////
  [
    { name: '运行', value: 11 },
    { name: '停产', value: 13 },
    { name: '检修', value: 8 },
  ],
  // ////////////////////////////////////////
  [
    { name: '特殊', value: 13 },
    { name: '一级', value: 11 },
    { name: '二级', value: 8 },
  ]];
  // 饼图
  public pieChart:any;
  // 柱图
  public barChart:any
  
  // 组件渲染完成
  mounted(){
    window.addEventListener("resize",this.resize)
  }
  beforeDestory(){
    window.removeEventListener("resize",this.resize)
  }

  public buildPieOption(){
    return {
      title:[{
        show:true,
        text:this.datas[0].reduce((total,cur)=>{
          return total+cur.value
        },0),
        textAlign:"center",
        textStyle:{
          fontSize:24
        },
        subtextStyle:{
          fontSize:14
        },
        subtext:"生产装备（套）",
        left:"20%",
        top:"40%"
      },{
        show:true,
        text:this.datas[1].reduce((total,cur)=>{
          return total+cur.value
        },0),
        textAlign:"center",
        subtext:"动火作业（处）",
        textStyle:{
          fontSize:24
        },
        subtextStyle:{
          fontSize:14
        },
        left:"70%",
        top:"40%"
      }],
      color:["#409EFF","#BFCBD9","#E6A23C","#A67AFF","#409EFF","#F56C6C"],
      legend:[{
        right:"53%",
        itemWidth:14,
        top:"center",
        data:this.datas[0],
        orient:"vertical"
      },{
        right:"0%",
        top:"center",
        itemWidth:14,
        data:this.datas[1],
        orient:"vertical"
      }],
      series:this.datas.map((data,idx)=>{ 
        const left = idx * (100 / this.datas.length);
        return {
          type: 'pie',
          radius: ["45%", "60%"],
          center:["40%","50%"],
          top: 'center',
          height: '100%',
          left: left+'%',
          width: "50%",
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 3
          },
          label: {
            alignTo: 'none',
            formatter: '{b}\u00A0\u00A0\u00A0{c}',
            lineHeight: 100,
          },
          labelLine: {
            length: 15,
            length2: 25,
            maxSurfaceAngle: 80
          },
          data: data
        };
      })
    }
  }

  public buildBarOption(){
    return {
      tooltip:{

      },
      color:["#68C23A","#409EFF","#E6A23C","#F56C6C"],
      grid:{
        left:24,
        right:24,
        bottom:24,
        containLabel:true
      },
      legend:{
        top:25,
        left:"center",
      },
      yAxis: [
        {
          type: 'value',
          name:"单位：个",
          splitLine:{
            lineStyle:{
              type:"dashed"
            }
          }
        }
      ],
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['部门1', '部门2', '部门3', '部门4', '部门5']
        }
      ],
      series:[{
        name:"低风险",
        type: 'bar',
        barWidth:40,
        data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
      },{
        name:"一般风险",
        type: 'bar',
        barWidth:40,
        data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
      },{
        name:"较高风险",
        type: 'bar',
        barWidth:40,
        data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
      },{
        name:"高风险",
        type: 'bar',
        barWidth:40,
        data:new Array(5).fill(0).map(item=>Math.floor(Math.random()*100))
      }]
    }
  }

  public getChart(charts,isBar?){
    if(!isBar){
      this.pieChart = charts
    }else{
      this.barChart = charts
    }
  }
  public resize(){
    if(this.pieChart){
      this.pieChart.resize()
    }
    if(this.barChart){
      this.barChart.resize()
    }
  }


  // 计算属性 === computed
  get ValueA(){
    return 1
  }
}
</script>
<style lang="scss" scoped src="./home.component.scss"></style>

