<template>
  <div class="model">
    <div class="bar-chart"></div>
    <div>
      <el-button type="primary" @click="onExportExcel">导出</el-button>
      <el-table
        :data="data.slice((currPage - 1) * 10, currPage * 10)"
        @sort-change="tableSorted"
      >
        <el-table-column prop="name" label="型号"></el-table-column>
        <el-table-column
          sortable="custom"
          prop="num"
          label="数量"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="has_scan_num"
          label="消费者扫码数"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="has_scan_percentage_txt"
          label="扫码率"
        ></el-table-column>
        <el-table-column prop="percentage" label="比例"> </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handlePaginationChanged"
        :total="data.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      barChart: {},
      data: [],
      currPage: 1
    }
  },

  props: ['models'],
  watch: {
    models: function(val) {
      this.initialize()
      this.currPage = 1
      this.setBarChart(val)
      window.addEventListener(
        'resize',
        function() {
          this.barChart.resize()
        }.bind(this)
      )
    }
  },

  methods: {
    initialize() {
      this.barChart = echarts.init(
        document.querySelector('.model .bar-chart'),
        'shine'
      )
    },

    setBarChart(val) {
      this.setbarChartOption(val)
      window.addEventListener(
        'resize',
        function() {
          this.barChart.resize()
        }.bind(this)
      )
    },

    setbarChartOption(val) {
      var seriesData = []
      var xAxisData = []
      let sum = 0
      let values = val.slice(0)
      values = values.sort((v1, v2) => v2.num - v1.num)
      // let values =
      let data = []
      for (let v of values) {
        xAxisData.push(v.model_uni_name)
        seriesData.push(v.num)
        sum += v.num
        data.push({
          name: v.model_uni_name,
          num: v.num,
          has_scan_num: v.has_code1_scan_num + v.has_code2_scan_num,
          has_scan_percentage_txt:
            (
              ((v.has_code1_scan_num + v.has_code2_scan_num) / v.num) *
              100
            ).toFixed(1) + '%',
          has_scan_percentage:
            (v.has_code1_scan_num + v.has_code2_scan_num) / v.num
        })
      }

      xAxisData = xAxisData.slice(0, 10)
      seriesData = seriesData.slice(0, 10)

      for (let d of data) {
        d.percentage = ((d.num / sum) * 100).toFixed(1) + '%'
      }
      this.data = data
      let option = {
        title: {
          text: '型号排名'
        },
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            name: '型号',
            type: 'bar',
            data: seriesData,
            animationEasing: 'elasticOut',
            animationDelayUpdate: function(idx) {
              return idx * 5
            }
          }
        ]
      }

      this.barChart.setOption(option, true)
    },

    handlePaginationChanged(page) {
      this.currPage = page
    },

    tableSorted(params) {
      const prop =
        params.prop === 'has_scan_percentage_txt'
          ? 'has_scan_percentage'
          : params.prop
      this.data = this.data.sort((d1, d2) => {
        return params.order === 'ascending'
          ? d1[prop] - d2[prop]
          : d2[prop] - d1[prop]
      })
    },

    // 导出表格
    onExportExcel() {
      this.$utils.exportExcel(this.data)
    }
  }
}
</script>

<style lang="less" scoped>
.bar-chart {
  width: 500px;
  height: 700px;
}

.model {
  display: flex;
  justify-content: center;
  width: 900px;
  height: 700px;
}
</style>