<template>
    <div class="voteChart">
        <div class="echartColumn" ref="echartColumn">
        </div>
        <div class="result">
            <div class="item" v-for="item in chartData.options">
                <div class="line1">
                    <div class="label">{{item.value}}</div>
                    <div class="value">{{item.number}}票  <span style="color: #1890ff;margin-left: 10px; cursor: pointer" @click="showVoter(item)" v-if="item.number != 0">投票者</span></div>
                </div>
                <div class="choices" style="min-height: 20px;margin-bottom: 10px;display: flex;justify-content: space-between;" v-if="item.flag">
                    <div  style="width: 60px;">投票人：</div>
                    <div class="nameList">
                        <span v-for="tar in item.choices" v-if="tar != null" style="margin-right: 10px;color: #1890ff;">
                            {{tar.voterName}}
                        </span>
                    </div>

                </div>

            </div>

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

<script>
import * as echarts from 'echarts'
export default {
  name: "voteChart",
  data(){
    return {
      chartColumn:null,
      chartData:{},
      testData:[],


    }
  },
  watch:{
    chartData(v){
      console.log(v)
        let arr =v.options.map(tar => {
          return {
            value:tar.number,
            name:tar.value
          }
        })

      this.chartColumn.setOption({
        title: {
          text: v.title,
          subtext: v.content,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  },
  methods:{
      showVoter(item){


          item.flag = !item.flag;
      }
  },
  mounted(){
      this.chartColumn = echarts.init(this.$refs.echartColumn);
  }
}
</script>

<style lang="less" scoped>
    .nameList{
        width: calc(100% - 100px);
        /*overflow:hidden;*/
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }

    .echartColumn {
        width: calc(100% - 50px);
      margin: 0 auto;
      height: 300px;

    }
    .result {
      .line1 {
        display: flex;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
      }

      width: calc(100% - 100px);
      margin: 0px auto;

    }
</style>
