<template>
  <div id="cmp1">
    <div class="top">
      <div v-if="numberConfig">
        {{numberConfig.title}}
        <dv-digital-flop :config="numberConfig" class="number" />
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-content">
          <Echart
          width="40%"
          height="100%"
            :options="options2"
            id="cmp2circle"
          ></Echart>
          <!-- <dv-active-ring-chart style="width: 100%;height: 100%;" :config="config1" /> -->
          <!-- <Label-Tag class="Label-Tag" :config="numberConfig.labelConfig" /> -->
        <Echart
              :options="options"
              id="cmp2"
              width="60%"
              height="100%"
            ></Echart>
      </div>
            <Label-Tag class="Label-Tag" :config="labelConfig" />
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  import LabelTag from '../LabelTag'
    var img = 'data:image/png;base64,[encoded data, 7360 characters]';
  export default{
    components:{
      Echart,
      LabelTag,
    },
    props:{
      count1:{
        type:String,
        default:''
      },
      count2:{
        type:String,
        defalut:''
      },
      labelData:{
        type:Array
      }
    },
    data(){
      return{
        labelConfig: {
          colors:['#37a2da','#67e0e3','#8378ea'],
          data: ['封闭式', '闭合式','开放式']
        },
        numberConfig:{
          title:'小区总数',
          number: [1163],
          content: '{nt}个',
          style:{
            fontSize:18,
            fill:'#37a2da',
          },
        },

        parking: false,
        options2:{},
        options:{
             grid: {
                      top:10,
                      bottom:40,
                      left: 40
                 },
                 xAxis: {
                   data: ['金凤区','永宁县','贺兰县','西夏区','灵武市','兴庆区'],
                      axisLabel:{
                        fontSize:9,
                        color:'#b4b4b5',
                        rotate:-45
                      }
                 },

                 yAxis: {
                   type: 'value',
                      axisLabel:{
                        fontSize:9,
                        color:'#b4b4b5'
                      }
                 },
                 tooltip: {
                     trigger: 'axis',

                 },
                 series: [
                      {
                                  name: '封闭式',
                                  type: 'bar',
                                  barWidth: '5px',
                                  stack: 'sum',
                                  data: [105,214,241,250,452,210],
                                  itemStyle: {
                                      normal: {
                                          color:'#37a2da'
                                      },
                                  },
                      },
                     {
                                 name: '闭合式',
                                 type: 'bar',
                                 barWidth: '5px',
                                 stack: 'sum',
                                 data: [420,250,530,164,410,410],
                                 itemStyle: {
                                     normal: {
                                         color:'#67e0e3'
                                     },
                                 },
                     },
                     {
                                 name: '开放式',
                                 type: 'bar',
                                 barWidth: '5px',
                                 stack: 'sum',
                                 data: [112,238,123,244,329,10],
                                 itemStyle: {
                                     normal: {
                                         color:'#8378ea'
                                     },
                                 },
                     },


                 ]
        }
      }
    },
    mounted() {
      var trafficWay = [{
          name: '闭合式',
          value: 20
      }, {
          name: '开放式',
          value: 10
      }, {
          name: '封闭式',
          value: 30
      }];

      var data = [];
      var color = ['#00baff', '#3de7c9', '#8378ea']
      for (var i = 0; i < trafficWay.length; i++) {
          data.push({
              value: trafficWay[i].value,
              name: trafficWay[i].name,
              itemStyle: {
                  normal: {
                      borderWidth: 5,
                      shadowBlur: 20,
                      borderColor: color[i],
                      shadowColor: color[i]
                  }
              }
          });
      }
      this.options2 = {
        color,
        title: {
                text: '',
                top: 'center',
                left: "48%",
                textAlign: "center",
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                    fontWeight: '400'
                }
            },
        graphic: {
          elements: [{
              type: "image",
              z: 3,
              style: {
                  image: img,
                  width: 70,
                  height: 70
              },
              left: 'center',
              top:  'center',
              position: [100, 100]
          }]
        },
        tooltip: {
            show: false
        },
        toolbox: {
            show: false
        },

        series: [{
          name: '',
              type: 'pie',
              clockWise: false,
              radius: ['65%', '70%'],
              hoverAnimation: false,
              label: {
                  show: true,
                  position: 'inner',
                  formatter: params => {
                      return (
                          params.name + '\n' + params.percent.toFixed(0) + '%'
                      );
                  },
              },
              // labelLine:{
              //     normal:{
              //         length:1
              //     }
              // },
              emphasis: {
                  label: {
                      show: false,
                      fontSize: '12',
                      fontWeight: 'bold',
                     
                  }
              },
              center: ["50%", "50%"],
              data
        }]
      }
    }
  }
</script>

<style lang="less" scoped>
  #cmp1{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    .top{
      width: 100%;
      height: .6rem;
      display: flex;
      padding: 0 .3rem;
      div{
        width: 50%;
        height: .6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .number{
        flex:1;
        padding-top: .05rem;
      }
    }
    .bottom{
      width: 100%;
      position: absolute;
      top: .6rem;
      bottom: 0;
      box-sizing: border-box;
    }
    .bottom-content{
      position: absolute;
      top: 0;
      bottom: .4rem;
      width: 100%;
      display: flex;
    }
    .bottom-left{
      width: 40%;
      height: 70%;
      display: flex;
    }
    .dv-charts{
      width: 60%;
    }
    .Label-Tag{
          position: absolute;
          left: .5rem;
          bottom: .1rem;
        }
  }
</style>
