<template>
  <div>
    <div style="padding: 10px">
      <el-select v-model="ids" @change="changeProduct" filterable placeholder="请选择" style="width: 100%;margin-bottom: 5px" size="small">
        <el-option
                v-for="item in productList"
                :key="item.cid"
                :label="item.cname"
                :value="item.cid">
        </el-option>
      </el-select>
      <el-date-picker
              @change="getList()"
              v-model="dateRangeValue"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <el-table
            :data="tableData"
            stripe
            show-summary
            style="width: 100%">
      <el-table-column prop="date" label="日期" align="center"> </el-table-column>
      <el-table-column prop="num" label="销量" align="center"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import moment from 'moment/moment'
  import {getUseList,getStockList} from "@/api/inventory"
  export default {
    data(){
      return{
        tableData:[],
        ids:0,
        productList:[],
        shopId:0,
        startDate:'',
        endDate:'',
        dateRangeValue:'',
        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]);
            }
          }]
        },
      }
    },
    mounted() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.dateRangeValue = [moment(start).format("YYYY-MM-DD"),moment(end).format("YYYY-MM-DD")]
      this.ids = parseInt(this.$route.query.id)
      this.shopId = this.$route.query.shopId
      this.getProductList()
      this.getList()
    },
    methods:{
      changeProduct(v){
        this.ids = v
        this.getList()
      },
      getProductList(){
        getStockList
          .request({
            "shopId": this.shopId,// 临沂 15616    聚丰园15617
            "page": 1,
            "pageSize": 100
          })
          .then((res) => {
            this.productList = res.data.list
          })
          .catch(() => this.loading = false)
      },
      getList(){
        console.log('======',this.dateRangeValue)
        getUseList
          .request({
            ids: this.ids,
            shopId: this.shopId,
            startDate: this.dateRangeValue[0],
            endDate: this.dateRangeValue[1]
          })
          .then((res) => {
            this.tableData = res.data[0]
          })
          .catch(() => this.loading = false)
      }
    }
  }
</script>

<style scoped>

</style>
