<template>
  <Card class="sales-statistics-con">
    <div class="chart-opt">
      <Select
        v-if="!isBrand"
        v-model="pieReq.brandId"
        class="good-select"
        placeholder="品牌商"
        @on-change="brandOnChange"
        size="small"
      >
        <Option :value="0">全部品牌商</Option>
        <Option
          v-for="(item, index) of brandList"
          :value="item.brandId"
          :key="'line-option-' + index"
          >{{ item.brandName | nameFilter }}</Option
        >
      </Select>
      <Select
        size="small"
        placeholder="统计类型"
        v-model="pieReq.type"
        @on-change="typeOnChange"
        class="type-select"
      >
        <Option :value="1">销量</Option>
        <Option :value="2">订单量</Option>
        <Option :value="3">购买人数</Option>
      </Select>
      <DatePicker
        placeholder="时间"
        v-model="pieCreateTime"
        type="daterange"
        placement="bottom-end"
        class="search-date"
        @on-change="handleDateChange(pieCreateTime)"
        :editable="false"
        separator=" ~ "
        size="small"
        :options="dateOptions"
      ></DatePicker>
    </div>
    <div class="no-data" v-show="!pieData || pieData.length == 0">暂无数据</div>
    <Spin size="large" fix v-if="pieLoading"></Spin>
    <chart-pie
      style="height: 360px"
      :value="pieData"
      text="销量统计"
      ref="chartPie"
    ></chart-pie>
  </Card>
</template>

<script>
import { ChartPie } from '_c/charts'
export default {
  props: ['brandList'],
  components: {
    ChartPie
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      pieLoading: true,
      pieData: [],
      pieReq: {
        brandId: 0,
        type: 1,
        startTime: null,
        endTime: null
      },
      pieCreateTime: [],

      dateOptions: {
        disabledDate (date) {
          let b1 = date && date.valueOf() < Date.now() - 31 * 24 * 60 * 60 * 1000
          let b2 = date && date.valueOf() > Date.now() - 24 * 60 * 60 * 1000
          return b1 || b2
        }
      }
    }
  },
  methods: {
    handleDateChange (createTime) {
      if (
        createTime &&
        createTime.length == 2 &&
        createTime[0] &&
        createTime[1]
      ) {
        this.pieReq.startTime = new Date(createTime[0]).getTime()
        this.pieReq.endTime =
          new Date(createTime[1]).getTime() + 24 * 60 * 60 * 1000 - 1
      } else {
        this.pieReq.startTime = null
        this.pieReq.endTime = null
      }
      this.requestPie()
    },
    brandOnChange (val) {
      this.requestPie()
    },
    typeOnChange (val) {
      this.requestPie()
    },
    requestPie () {
      this.pieLoading = true
      let { brandId } = this.pieReq
      brandId = brandId || null
      // this.api({
      //   apiName: 'getSalesStatistics',
      //   postdata: { ...this.pieReq, brandId },
      //   success: (res) => {
      //     this.pieData = res.data.map((item) => {
      //       return {
      //         name:
      //           item.name.length > 12
      //             ? item.name.slice(0, 12) + '...'
      //             : item.name,
      //         value: item.num
      //       }
      //     })
      //     this.pieLoading = false
      //   }
      // })
    }
  },
  filters: {
    nameFilter (val) {
      if (val && val.length > 10) {
        return val.slice(0, 10) + '....'
      }
      return val
    }
  },
  mounted () {
    let endTime = +new Date() - 24 * 60 * 60 * 1000
    let startTime = +new Date() - 7 * 24 * 60 * 60 * 1000
    this.pieCreateTime = [new Date(startTime), new Date(endTime)]
    this.requestPie()
  }
}
</script>

<style lang="less">
.sales-statistics-con {
  .chart-opt {
    position: absolute;
    z-index: 6;
    right: 16px;
    top: 16px;
  }
  .chart-opt .type-select {
    width: 90px;
    margin-right: 5px;
  }
  .chart-opt .address-select {
    width: 140px;
    margin-right: 5px;
  }
  .no-data{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5;
    text-align: center;
    line-height: 330px;
    height: 340px;
    background: #ffffff;
    color: #808695;
    font-size: 16px;
  }
}
</style>
