<template>
  <div style="width: 100%; height: 100%;">
    <v-chart
      v-show="option.series[0].data.length"
      style="width:100%;height:100%"
      :auto-resize="true"
      :options="option"/>
    <div
      style="text-align: center"
      v-show="!option.series[0].data.length">今日暂无数据</div>
  </div>
</template>
<script>
import { getSalesByOta } from '@/api/dashboard'
import moment from 'moment'
let option = {
  color: ['#DA6D66', '#6ABAE7', '#E48A45', '#71AC56', '#896CB2', '#F8E238', '#E8B5C4', '#114985', '#896242', '#6F7C57', '#462F73', '#AAB845'],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    left: 0,
    bottom: 'left',
    textStyle: {
      color: '#000',
      shadowColor: '#ccc',
      shadowBlur: 10
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  series: [
    {
      name: '渠道金额',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['70%', '50%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: []
    }
  ]
}

export default {
  data () {
    return {
      option
    }
  },
  mounted () {
    // this.getSalesByOta()
  },
  methods: {
    getSalesByOta () {
      getSalesByOta({
        startDate: new Date(moment().format('YYYY-MM-DD') + ' 00:00:00'),
        endDate: new Date(moment().format('YYYY-MM-DD') + ' 23:59:59')
      }).then((res) => {
        let tmpChartdata = []
        res.data.forEach(element => {
          tmpChartdata.push({value: element.actualPrice, name: element.otaSourceName})
        })
        this.option.series[0].data = tmpChartdata
      })
    }
  }
}
</script>
