<template>
  <div class="orderCount">
    <el-form ref="searchFrom" inline :model="searchFrom" label-width="100px">
      <el-form-item label="商品">
        <el-select
          style="width: 600px"
          v-model="searchFrom.priceList"
          collapse-tags
          multiple
          filterable
          placeholder="请选择"
          @change="searchPage">
          <el-option
            v-for="item in goodsList"
            :key="item.id"
            :label="item | filterGoods"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起止日期">
        <el-date-picker
          v-model="searchFrom.dateValue"
          unlink-panels
          type="daterange"
          :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="searchPage">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="searchPage()">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        v-for="data in headList"
        :key="data"
        :label="data">
        <template slot-scope="scope">
          <span v-if="data === '时间'">
          {{ scope.row['cur_date'] }}
          </span>
          <span v-if="data === '注册数'">
          {{ scope.row['register_num'] }}
          </span>
          <span v-if="data === '总金额'">
          {{ scope.row['total_money']}}
          </span>
          <span v-if="data !== '时间' && data !== '注册数' && data !== '总金额'">
          {{ scope.row[data] | toFixed2}}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getGoodsListApi,orderCountApi} from "../../service/api";
  import {GOODSTYPE} from "../../util/wordbook";
  export default {
    name: "monthOrderCount",
    data(){
      return {
        goodsList:[],
        headList:[],
        today:{
          text:'今天',
          onClick:(vm)=>{
            vm.$emit('pick',[this.formatTime(new Date()),this.formatTime(new Date())] )
          }
        },
        yesterday:{
          text:'昨天',
          onClick:(vm)=>{
            let preDate = this.formatTime(new Date(new Date().getTime() - 24*60*60*1000));
            vm.$emit('pick',[preDate,preDate] )
          }
        },
        last7Day:{
          text:'过去7天',
          onClick:(vm)=>{
            let preDate = this.formatTime(new Date(new Date().getTime() - 7*24*60*60*1000));
            vm.$emit('pick',[preDate,this.formatTime(new Date())] );
          }
        },
        last30Day:{
          text:'过去30天',
          onClick:(vm)=>{
            let preDate = this.formatTime(new Date(new Date().getTime() - 30*24*60*60*1000));
            vm.$emit('pick',[preDate,this.formatTime(new Date())] );
          }
        },
        tableData:[],
        searchFrom:{
          priceList:[],
          dateValue:[]
        },
      }
    },
    mounted(){
      this.defaultTime();
      this.initPage()
    },
    filters:{
      toFixed2(value){
        if(typeof value === 'number'){
          let v2 = value.toString().split(".");
          if(v2.length > 1 && v2[1].length > 2){
            return Number(value).toFixed(2)
          }else{
            return value
          }
        }else {
          return value
        }
      },
      filterGoods(val){
          return '[' +val.id + ']' + '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      }
    },
    methods:{
      formatTime(date){
        let year = date.getFullYear();
        let Month = date.getMonth()+1;
        if(Month < 10){
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if(Day<10)Day = `0${Day}`;
        return `${year}-${Month}-${Day}`;
      },
      defaultTime(){
        let date = new Date();
        let year = date.getFullYear();
        let Month = date.getMonth()+1;
        if(Month < 10){
          Month = `0${Month}`
        }
        let Day = date.getDate();
        if(Day<10)Day = `0${Day}`
        let star = `${year}-${Month}-01`;
        let end = `${year}-${Month}-${Day}`
        this.searchFrom.dateValue = [star,end]
      },
      initPage(){
        getGoodsListApi({limit:99999,course_type:0,status:"1,2"}).then(res=>{
          res.list.forEach(i=>{
            this.searchFrom.priceList.push(i.id)
          });
          this.goodsList=res.list;
          this.searchPage();
        })
      },
      searchPage(){
        console.log(this.searchFrom.dateValue)
        if(this.searchFrom.dateValue.length<2){
          this.$message.error('请先选择起止日期');
        }else{
          let json = {
            start_at:this.searchFrom.dateValue[0],
            end_at:this.searchFrom.dateValue[1],
            goods_ids:this.searchFrom.priceList.toString(),
          };
          orderCountApi(json).then(res=>{
            if(res.length>0){
              let f = res[0];
              this.tableData = res;
              this.headList=[];
              for(let s in f){
                if(s==='cur_date'){
                  this.headList.push('时间')
                }else if(s==='register_num'){
                  this.headList.push('注册数')
                }else if(s==='total_money'){
                  this.headList.push('总金额')
                }else{
                  this.headList.push(s)
                }
              }
            }
          })
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .orderCount{
    padding: 10px;
  }

</style>