<template>
  <el-card>
    <div slot="header" class="card_header">
      <div class="card_tit">
        <span class="b_tit">供应商数量</span>
        <el-tooltip effect="light" content="按供应商创建时间和最终关闭时间统计" placement="right">
          <i class="xdicon_question-circle xd_admin_iconfont"></i>
        </el-tooltip>
      </div>
      <div>
        <el-radio-group v-model="cyc_type" size="medium" @input="handleChangeType">
          <el-radio-button label="month">按月</el-radio-button>
          <el-radio-button label="year">按年</el-radio-button>
        </el-radio-group>
      </div>
      
    </div>
    <div ref="chartWrap" class="chart_wrap">
    </div>
  </el-card>
</template>
<script>
import * as echarts from 'echarts';
import { mapActions } from "vuex"
export default {
  data(){
    return {
      cyc_type: "month"
    }
  },
  created(){

  },
  mounted(){
    this.renderChart();
  },
  methods: {
    ...mapActions("supplierStat", ['supplierCycCounts']),
    renderChart(){
      this.supplierCycCounts({cyc_type: this.cyc_type}).then(res => {
        var chartDom = this.$refs['chartWrap'];
        var myChart = echarts.init(chartDom);
        var option = this.getChartOptions(res.data);
        option && myChart.setOption(option);
      })
    },
    getChartOptions(data){
      let xAxisData = data.x.data;
      let legendData = ['新增供应商', '关闭供应商'];
      let seriesData = [];
      data.series.forEach(item => {
        for(let i = 0; i < item.length; i++){
          seriesData[i] = seriesData[i] || [];
          seriesData[i].push(item[i].data);
        }
      })
      return {
       
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          smooth: true,
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData.map((item, index) => {
          return {
            name: legendData[index],
            type: 'line',
            smooth: true,
            data: item
          }
        })
      };
    },
    handleChangeType(val){
      console.log(val);
      this.renderChart();
    }
  }
}
</script>
<style lang="less" scoped>
  .card_header{
    display: flex;
    .card_tit{
      display: flex;
      flex: 1;
      align-items: center;
      i{
        margin-left: 4px;
        cursor: pointer;
        color: #A1A7B3;
      }
    }
  }
  .b_tit{
    font-size: 18px;
    font-weight: 400;
    color:#2E3033;
  }
  .chart_wrap{
    height: 260px;
  }
</style>