<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
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChange">
          </el-date-picker>
    </div>
    <div class="totals">
      <p><span>总退单人数：</span><span @click='toReturnUser(1)'>{{list.total_return_order_person}}</span></p>
      <p><span>退单后仍会下单人数：</span><span @click='toReturnUser(2)'>{{list.total_return_order_once_more_person}}</span></p>
      <p><span>退单后不再下单人数：</span><span @click='toReturnUser(3)'>{{list.total_return_order_no_person}}</span></p>
      <p><span>不再下单人数占退单总退单人数比例：</span><span>{{returnPer(list.percentage)}}</span></p>
    </div>

  </div>
</template>

<script>
  import {
    returnCount
  } from '@/api/type'
  import {
    Message
  } from 'element-ui'
  export default {
    components: {},
    data() {
      return {
        select: {
          start_date:"2000-01-01",
          end_date:""
        },
        dateRange:[],
        list: {},
        today:''
      }
    },
    methods: {
      async initTotal(){
        const res = await returnCount({
          start_date:'2000-01-01',
          end_date:this.select.end_date
        })
        // this.total = res.total
        this.list = res.return_list.total
      },
      async getTotal() {
        const res = await returnCount({
          start_date:this.select.start_date,
          end_date:this.select.end_date
        })
        // this.total = res.total
        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()
      },
      returnPer(val){
        return val?val.toFixed(4)*100 + "%":0
      },
      toReturnUser(id){
        let url =`/admin/#/reports/userOrder?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.initTotal()
    }

  }
</script>

<style scoped lang="scss">
  .totals{
    border-bottom:1px solid #ddd;
    margin-top:20px;
  }
  .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;
  }
  .totals p span:last-child{
    color:#bf617c;
    cursor:pointer;
        text-decoration: underline;
  }
</style>
