<template>
  <app-container>
    <el-row style="margin-left: auto;margin-right: auto">
      <el-col :span="12">
        <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
      </el-col>
      <el-col :span="12">
        <div ref="chart1" class="chart-body" style="padding-top: 20px;"/>
      </el-col>
    </el-row>
    <div ref="chart2" class="chart-body" style="margin-top: 20px;margin-bottom: 50px"/>
  </app-container>
</template>

<script>
import echarts from 'echarts'
import { shopStaticsByStatus, shopStaticsByStreet } from '@/api/merchant/merchant'
import { punishStatisticByType } from '@/api/merchant/punish'
export default {
  name: 'ShopStatistics',
  data() {
    return {
      listQuery: {
        begTime: '',
        endTime: ''
      },
      list1: [],
      list2: [],
      list3: []
    }
  },
  computed: {
    pieData() {
      const tmp = []
      const obj = {}
      obj.name = '租用中'
      obj.value = this.list1.rent
      tmp.push(obj)
      const obj1 = {}
      obj1.name = '空置中'
      obj1.value = this.list1.empty
      tmp.push(obj1)
      return tmp
    },
    pieData1() {
      const tmp = []
      const obj = {}
      obj.name = '处罚'
      obj.value = this.list2.punish
      tmp.push(obj)
      const obj1 = {}
      obj1.name = '警告'
      obj1.value = this.list1.warn
      tmp.push(obj1)
      const obj2 = {}
      obj2.name = '劝导'
      obj2.value = this.list1.persuade
      tmp.push(obj2)
      return tmp
    },
    pieData2() {
      const tmp = []
      this.list3.forEach((item, index) => {
        if (item.caseMajorType) {
          const obj = {}
          obj.name = item.streetName
          obj.value = item.shopNum
          tmp.push(obj)
        }
      })
      console.log(tmp)
      return tmp
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      shopStaticsByStatus().then(res => {
        this.list1 = res.data
        this.initChart()
      })
      punishStatisticByType().then(res => {
        this.list2 = res.data
        this.initChart1()
      })
      shopStaticsByStreet().then(res => {
        this.list3 = res.data
        this.initChart2()
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        title: {
          text: '店铺租用状态',
          left: 'center'
        },
        color: [
          '#19d4ae', '#5ab1ef', '#fa6e86',
          '#ffb980', '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8'
        ],
        legend: {
          orient: 'vertical',
          right: 0,
          data: this.pieData.map(item => item.name)
        },
        series: [{
          name: '店铺租用状态',
          type: 'pie',
          radius: 100,
          data: this.pieData,
          label: {
            show: false
          },
          tooltip: {
            formatter: '{b}<br/>店铺数: {c}({d}%)'
          }
        }]
      })
      this.chart.resize()
    },
    initChart1() {
      this.chart = echarts.init(this.$refs.chart1)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        title: {
          text: '商户处罚数量占比',
          left: 'center'
        },
        color: [
          '#19d4ae', '#5ab1ef', '#fa6e86',
          '#ffb980', '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8'
        ],
        legend: {
          orient: 'vertical',
          right: 0,
          data: this.pieData1.map(item => item.name)
        },
        series: [{
          name: '商户处罚数量占比',
          type: 'pie',
          radius: 100,
          data: this.pieData1,
          label: {
            show: false
          },
          tooltip: {
            formatter: '{b}<br/>商户数: {c}({d}%)'
          }
        }]
      })
      this.chart.resize()
    },
    initChart2() {
      this.chart = echarts.init(this.$refs.chart2)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        title: {
          text: '各街道店铺数量统计',
          left: 'center'
        },
        color: [
          '#19d4ae', '#5ab1ef', '#fa6e86',
          '#ffb980', '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8'
        ],
        xAxis: {
          type: 'category',
          data: this.list3.map(item => item.streetName)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          barMaxWidth: 50, // 柱图宽度
          data: this.list3.map(item => item.shopNum),
          type: 'bar',
          tooltip: {
            formatter: '{b}<br/>店铺数: {c}'
          }
        }]
      })
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
.chart-container{
}
.chart-body{
  /*text-align: center;*/
  height: 40vh;
  width: 70%;
  margin-left: auto;
  margin-right: auto
}
.form-container{
  margin-bottom: 20px;
}
</style>