<template>
  <div>
    <el-card class="boxcard" style="height: 100%;">
      <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="canvas" style="min-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>

export default {
  data() {
    return {
      param:{keyWord:'month',time:'month'},
      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: "stock",width:200},
        { label: "总量库存", prop: "num",width:200},
        { label: "可售库存", prop: "shopStock",width:200},
        { label: "采购人员", prop: "buyer_user",width:150},
        { label: "操作人员", prop: "operator_user",width:150},
        { label: "创建时间", prop: "created_by",width:200},
      ],
    }
  },
  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('/flagChart',Object.assign(param)).then(res=>{
          this.getCanvas(res.data.field,res.data.data)
      })
    },
    getCanvas(field=[],data=[]) {
      console.log(data);
      let series=[]
      this.myChart = this.$chart.init(document.getElementById("canvas"));
      let option = {
    
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单金额', '退款金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: field
        },
        yAxis: {
          type: 'value'
        },
        series: []
      };
      Object.keys(data).forEach(key => {
        console.log(key);
          
      });
      series.push({name: '订单金额',type: 'line',stack: 'Total',data:data['goods_cost_price']})
      series.push({name: '退款金额',type: 'line',stack: 'Total',data:data['refund_amount']})
      option.series=series
      this.myChart.setOption(option);
    },

  }
};
</script>