<template>
  <div>
    <el-card class="boxcard">
      <div slot="header" class="clearfix">
        <span style="padding-right: 5px;">时间维度</span>
        <el-radio-group @input="change" v-model="param.time">
          <el-radio-button v-for="time in list.times" :label="time.value">{{time.label}}</el-radio-button>
        </el-radio-group>
        <el-date-picker
            @change="change"
            v-model="param.date"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div id="salescanvas" style="height: 400px;width:100%;"></div>
    </el-card>
    <!-- 内容 -->
    <div :style="{height:`${this.contentHeight}px`}">
      <r-table class="page" :isIndex="false" :tableData="tableData" :tableCols="tableCols"  @refresh="init()" >
      </r-table>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      param:{keyWord:'week',time:'week'},
      contentHeight:500,
      myChart:{},
      list:{times:[{label:'今日',value:'day'},{label:'昨日',value:'yesterday'},{label:'本周',value:'week'},{label:'本月',value:'month'},{label:'本季',value:'quarter'},{label:'本年',value:'year'}],},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [],
      tableCols:[
        { label: "商品类型", prop: "type_name",width:150},
        { label: "品牌", prop: "brand_name",width:150},
        { label: "商品名称", prop: "good_name",width:150},
        { label: "商品sku", prop: "title",width:200},
        { label: "销量", prop: "goods_number",width:200},
        { label: "实际库存", prop: "num",width:200},
        { label: "可售库存", prop: "stock",width:200},
        { label: "缺货量", prop: "lastNum",width:150},
        { label: "状态", prop: "status",width:150},
      ],
    }
  },
  mounted() {
    let  element = document.querySelector('.box-card');
    let  topEl = document.querySelector('.boxcard');
    this.contentHeight=element.offsetHeight-topEl.offsetHeight-70
    this.$nextTick(()=>{
      setTimeout(() => {
        
        this.init(this.param)
      }, 1500);
    })
  },
  methods:{
    change(e){
      this.param.keyWord=e
      this.init(this.param)
    },
    init(param={}){
      this.$http.post('/salesChart',Object.assign(param)).then(res=>{
        if (res.code==200) {
          this.getCanvas(res.data.field,res.data.data,res.data.sumDate)
          this.tableData=res.data.list
        } else {
          this.$msg.error('获取数据失败，请重新获取~')
        }
      })
    },
    getCanvas(field=[],data=[],sumCount=[]) {
      console.log('-------getCanvas data------2023-09-25--');
      var series=[]
      this.myChart=this.$chart.init(document.getElementById("salescanvas"));

      const option = {
        color: [
          '#CCFFFF','#FFCCCC','#99CCCC','#FFCC99','#FF9999','#996699','#CC9999','#FFFFCC','#CCCC99','#FFFF99','#CCCCFF','#0099CC','#CCCCCC','#FF6666','#FF9966','#FFCCCC','#CC9966','#666666','#FF6666','#FFFF66','#99CC66','#CC3333','#CCCCCC','#003366','#663366','#CCCC99','#666666','#FF6666','#FFFF00','#0066CC','#333333','#336633','#990033','#66CC00','#CC99CC','#339933','#993399','#006633',
          '#CC9966','#003300','#FF0033','#333399','#CCCC00','#003399','#99CC00','#CC0033','#999933','#993333','#333300','#CCFF99','#99CCFF','#99CC99','#336699','#CC9933','#FFCC33','#336666','#99CC33','#FFCC00','#CC6699','#FFFF00','#3366CC','#FF6600','#009966','#990033','#CCFF66','#FF9900','#FF9966','#996600','#CC6600','#999999','#CCCC33','#000000','#999966','#663300','#FF9933','#6666CC'
        ],
        dataZoom: [
          {
            type: 'slider',
            realtime: true,
            start: 0,
            end: 5,
            height: 5,
            left: 5,
            right: 5,
            bottom: 10,
            show: true,
            fillerColor: "rgba(17, 100, 210, 0.42)",
            borderColor: "rgba(17, 100, 210, 0.12)",
            handleSize: 0,
            showDetail: false,
            zoomLock: true,
            moveOnMouseMove: false,

            startValue: 0,
            endValue: 6,
            minValueSpan: 6,
            maxValueSpan: 6,
          },
          {
            type: "inside",
            start: 0,
            end: 5,
            zoomOnMouseWheel: false,
            moveOnMouseWheel: true,
            moveOnMouseMove: true
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          width: 500,
          type: 'scroll',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: field
          }
        ],
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, sreadOnly: false },
              magicType: { show: true, type: ['stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      };
      Object.keys(data).forEach(key => {
        series.push({name:key,type: 'bar',stack: 'Ad',emphasis: {focus: 'series'},data:data[key]})
      });
      series.push({name: '合计',type: 'bar',data: sumCount,emphasis: {focus: 'series'},markLine: {lineStyle: {type: 'dashed'},data: [[{ type: 'min' }, { type: 'max' }]]}})
      option.series=series
      this.myChart.setOption(option);
    },

  }
};
</script>