<template>

  <div class="layout_h" style="margin-top: 16px;">
    <el-card class="box-card weight_0_full">
      <div class="part_header layout_h_v_c">
        <div class="v_line"></div>
        <div class="header_title">运营趋势图</div>
        <div class="layout_h_r weight_0_full">
          <el-radio-group v-model="dateType" @change="onRangeChange">
            <el-radio-button label="7天"></el-radio-button>
            <el-radio-button label="30天"></el-radio-button>
            <el-radio-button label="一季度"></el-radio-button>
            <el-radio-button label="一年"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-radio-group v-model="chartType" size="small" style="margin-top: 16px;margin-bottom: 16px;"
        @change="onOrderChange">
        <el-radio-button label="商品数"></el-radio-button>
        <el-radio-button label="订单数"></el-radio-button>
        <el-radio-button label="流水"></el-radio-button>
        <el-radio-button label="历史提现"></el-radio-button>
      </el-radio-group>
      <echarts-from ref="juwuChart" :echartsTitle="line" :xAxis="xAxis" :yAxis="yAxis" :seriesData="series">
      </echarts-from>
    </el-card>
  </div>

</template>

<script>
  import echartsFrom from '@/components/echarts/index';
  import {
    getIndexTrendData
  } from '@/api/home.js'

  export default {
    name: 'user-chart',
    components: {
      echartsFrom
    },
    data() {
      return {
        line: 'line',
        circle: 'circle',
        chartType: '商品数',
        dateType: '7天',
        xAxis: [],
        yAxis:[{ show:false}],
        infoList: {},
        series: [],
      }
    },
    computed: {
      chartTypeParam() {
        let tab = this.chartType
        let type = "1"
        if (tab == '订单数') {
          type = "2"
        } else if (tab == '流水') {
          type = "3"
        } else if (tab == '历史提现') {
          type = "4"
        }
        return type
      },
      dateTypeParam() {
        let tab = this.dateType
        let type = "1"
        if (tab == '30天') {
          type = "2"
        } else if (tab == '一季度') {
          type = "3"
        } else if (tab == '一年') {
          type = "4"
        }
        return type
      }
    },
    mounted() {
      this.loadData(this.dateTypeParam, this.chartTypeParam)
    },
    methods: {
      onRangeChange(tab) {
        this.loadData(this.dateTypeParam, this.chartTypeParam)
      },
      onOrderChange(tab) {
        this.loadData(this.dateTypeParam, this.chartTypeParam)
      },
      remain(num) {
        return Math.round(num * 100) / 100
      },
      loadData(dateType, type) {
        getIndexTrendData({
            dateType,
            type
          })
          .then(r => {
            let data = []
            let dateList = []
            for (var kei = 0; kei < r.data.data.length; kei++) {
              var key = r.data.data[kei];
              data.push(key.number)
              dateList.push(key.data)
            }
            this.xAxis = dateList
            this.series = [{
              data: data,
              name: '数量',
              type: 'line',
              tooltip: true,
              smooth: true,
              symbol: 'none',
              areaStyle: {
                normal: {
                  opacity: 0.2
                }
              }
            }];
          })
          .catch(e => {

          })
      },
      beforeDestroy() {
        if (this.visitChart) {
          this.visitChart.dispose();
          this.visitChart = null;
        }
      }
    }
  }
</script>

<style scoped>
  .header_title {
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-left: 16px;
  }

  .v_line {
    width: 5px;
    height: 20px;
    background-color: #333333;
  }
</style>
