<template>
  <div id="cmp4">
      <div class="left">
        <div class="d-flex pt-2 pl-2">
          <span style="color:#5cd9e8">
            <icon name="align-left"></icon>
          </span>
          <span class="fs-xl text mx-2">社区养老</span>
        </div>
        <div class="up">
          <div class="item" v-for="item in titleItem" :key="item.title">
              <p class="ml-3 colorBlue fw-b">{{item.title}} : </p>
              <dv-digital-flop :config="item.number" style="display: block;width:1rem;height:100%;" />
          </div>
        </div>
      </div>
      <div class="right">
        <Echart
          :options="options"
          id="cmp1"
          style="width: 100%;height: 100%;"
        ></Echart>
      </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  export default{
    components:{
      Echart
    },
    data(){
      return{
        options:{},
        titleItem: [
                {
                  title: "日间照料中心数",
                  number: {
                    number: [8],
                    content: "{nt}",
                    textAlign:'left',
                    style: {
                      fontSize: 20,
                      fontWeight:'bold',
                      fill: '#3de7c9',
                    }
                  }
                },{
                  title: "社会化运营数",
                  number: {
                    number: [27000],
                    content: "{nt}",
                    textAlign:'left',
                    style: {
                      fontSize: 20,
                      fontWeight:'bold',
                      fill: '#32c5e9'
                    }
                  }
                },{
                  title: "涉老组织数",
                  number: {
                    number: [1200],
                    content: "{nt}",
                    textAlign:'left',
                    style: {
                      fontSize: 20,
                      fontWeight:'bold',
                      fill: '#67e0e3'
                    }
                  }
                },{
                  title: "老年活动数",
                  number: {
                    number: [12],
                    content: "{nt}",
                    textAlign:'left',
                    style: {
                      fontSize: 20,
                      fontWeight:'bold',
                      fill: '#8378ea'
                    }
                  }
                }
                ]
      }
    },
    mounted() {
      this.initLine()
    },
    methods:{
      initLine(){
        //职称结构取数
        var getsjjg = ['健身', '书籍', '就餐', '棋牌','老人课堂'];
        var getsjjgrs = [35, 30, 22, 12,10];
        var syjgdata = [];
        for (var i = 0; i < getsjjg.length; i++) {
            syjgdata.push({
                name: getsjjg[i],
                value: getsjjgrs[i]
            })
        }
        var syjgdata2 = [];
        for (var i = 0; i < getsjjg.length; i++) {
            syjgdata2.push({
                name: getsjjg[i],
                value: 100
            })
        }

        var rich = {
            name: {
                color: "#99B3FF",
                fontSize: 10,
                padding: [0, 5],
                fontWeight:'400',
                align: 'right'
            },
            value: {
                color: "#99B3FF",
                fontSize: 10,
                padding: [5, 5],
                fontWeight:'500',
                align: 'right'
            },
            percent: {
                color: "#99B3FF",
                align: 'right',
                fontSize: 10,
                fontWeight:'500',
                padding: [0, 5]
            },
            hr: {
                borderColor: '#DFDFDF',
                width: '100%',
                borderWidth: 1,
                height: 0,
            }
        }
        var colorList = ["#503EFF","#733DFF","#966EFF","#3E6DFF","#536EBF","#6E93FF","#5FEBFF","#8AF1FF","#8AF1FF"];
        let option = {
            name:'',
            title:{
              text:'老人参加服务占比',
              bottom:0,
              left:'center',
              textStyle:{
                fontSize:10
              }
            },
            series: [{
                itemStyle: {
                    normal: {
                        color: function(params) {
                            return colorList[params.dataIndex]
                        },
                        borderColor: '#172659',
                        borderWidth: 3
                    }
                },
                type: 'pie',
                //clockWise: false ,
                //roseType: 'radius',
                radius: ['40%', '60%'],
                center: ["50%", "50%"],
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: '#34569D',
                        }
                    }
                },
                label: {
                    normal: {
                        formatter: params => {
                            return (
                                '{name|' + params.name + '}{percent|' + params.percent.toFixed(0) + '%}'
                            );
                        },
                        rich: rich,
                        padding: [0, -5, 0, -5],
                    }
                },
                data: syjgdata
            },{
                itemStyle: {
                    normal: {
                        color: 'rgba(62,109,255,0.4)',
                    }
                },
                type: 'pie',
                hoverAnimation: false,
                radius: ['35%', '65%'],
                center: ["50%", "50%"],
                label: {
                    normal: {
                        show:false
                    }
                },
                data: [{
                        value: 1,
                    }],
                z:-1
            }]
        };
        this.options = option

      }
    },

  }
</script>

<style lang="less" scoped="scoped">
  #cmp4{
    width: 100%;
    height: 100%;
    display: flex;
    .left,.right{
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .left{
      width: 40%;
    }
    .right{
      width: 60%;
    }
    .up {
      width: 100%;
      box-sizing: border-box;
      .item {
        display: flex;
        align-items: center;
        border-radius: 0.0625rem;
        height: 0.6rem;
        margin-left: .25rem;
      }
    }
  }
</style>
