<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="板块订单统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>

      </lx-header>
    </div>
    <div>
      <el-date-picker style="margin-left:10px" v-model="dateRange" type="daterange" value-format="yyyy-MM-dd"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
      </el-date-picker>
      <el-cascader ref="typeCas" style="margin-left:10px;width:400px" v-model="typeCas" :options="options"
        :props="props" @change="changeType" @remove-tag="removeType" clearable></el-cascader>
        <!-- collapse-tags -->
      <el-button style="margin-left:10px" type="primary" @click="getTotal">查询</el-button>
    </div>
    <div class="totals">
      <p><span>下单人数：</span><span style=' color:#bf617c;cursor:pointer;text-decoration: underline;' @click='toReturnUser(6)'>{{list.add_total_members}}</span></p>
      <p><span>下单订单数：</span><span>{{list.add_total_order}}</span></p>
      <p><span>下单取消数：</span><span>{{list.add_total_order_canceled}}</span></p>
      <p><span>下单完成数：</span><span>{{list.add_total_order_finished}}</span></p>
      <p><span>多板块下单人数(不包含取消)：</span><span style=' color:#bf617c;cursor:pointer;text-decoration: underline;' @click='toReturnUser(4)'>{{list.total_order_more_type_person}}</span></p>
    </div>

  </div>
</template>

<script>
  import {
    index as getType
  } from "@/api/type"
  import {
    typeCount
  } from '@/api/type'
  import {
    Message
  } from 'element-ui'
  export default {
    components: {},
    data() {
      return {
        select: {
          start_date: "2000-01-01",
          end_date: "",
          product_type_list: []
        },
        typeCas:[],
        dateRange: [],
        list: {},
        today: '',
        options: [],
        props: {
          value: 'id',
          label: 'name',
          multiple: true,
          checkStrictly: true
        }
      }
    },
    methods: {
      async getTypes() {
        const res = await getType()
        this.options = res
      },
      changeType(e) {
        let _arr = this.$refs.typeCas.getCheckedNodes()
        let _data = []
        for(var k of _arr){
            _data.push(k.value)
        }
        const result = Array.from(new Set(_data))
        this.select.product_type_list = result
      },
      removeType(e) {
        this.$nextTick(()=>{
          let _arr = this.$refs.typeCas.getCheckedNodes()
          console.log("_arr",_arr)
          let _data = []
          for(var k of _arr){
              _data.push(k.value)
          }
          const result = Array.from(new Set(_data))
          this.select.product_type_list = result
        })
        
      },
      async initTotal() {
        const res = await typeCount({
          start_date: '2000-01-01',
          end_date: this.select.end_date
        })
        this.list = res.return_list.total
      },
      async getTotal() {
        console.log("this.select.product_type_list111",this.select.product_type_list)

        const res = await typeCount({
          start_date: this.select.start_date,
          end_date: this.select.end_date,
          product_type_list:this.select.product_type_list
        })
        this.list = res.return_list.total
      },
      dateChange(e) {
        if (e) {
          this.select.start_date = e[0]
          this.select.end_date = e[1]
        } else {
          this.select.start_date = '2000-01-01'
          this.select.end_date = this.today
        }
        this.getTotal()
      },
      toReturnUser(id){

        // return
        let product_type_list = ''
        if(this.select.product_type_list.length<1){
          product_type_list = ''
        }else{
          product_type_list = this.select.product_type_list.join(",")
        }
        let url =`/admin/#/reports/userOrder?product_type_list=`+product_type_list+`&total_related_person=`+id+`&start_date=`+this.select.start_date+`&end_date=`+this.select.end_date
        let seeBuy = window.open(url, 'seeBuy','location=0')
      }

    },
    mounted() {
      let date = new Date()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let dateDay = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      this.today = date.getFullYear() + '-' + month + '-' + dateDay
      this.select.end_date = this.today
      this.getTypes()
      this.initTotal()
    }

  }
</script>

<style scoped lang="scss">
  .totals {
    border-bottom: 1px solid #ddd;
    margin-top: 20px;
  }

  .typetitle {
    font-size: 20px;
    padding: 10px;
  }

  .totals p {
    font-size: 20px;
    border: 1px solid #ddd;
    border-bottom: none
  }

  .totals span {
    padding: 10px;
    width: 50%;
    display: inline-block;
    border-right: 1px solid #ddd;
  }
</style>
