<template>
  <Card class="sales-trend-con">
    <div class="chart-opt">
      <Select
        v-if="!isBrand"
        v-model="lineReq.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
        v-model="lineReq.goodsNo"
        class="good-select"
        placeholder="商品名称"
        @on-change="goodOnChange"
        size="small"
      >
        <Option :value="0">全部商品</Option>
        <Option
          v-for="(item, index) of goodList"
          :value="item.goodsNo"
          :key="'line-option-' + index"
          >{{ item.goodName | nameFilter }}</Option
        >
      </Select>
    </div>
    <div class="no-data" v-show="!lineData || lineData.xAxisData.length == 0">暂无数据</div>
    <chart-line
      style="height: 360px"
      :value="lineData"
      text="销量趋势"
      ref="chartLine"
    ></chart-line>
    <Spin size="large" fix v-if="lineLoading"></Spin>
  </Card>
</template>

<script>
import { ChartLine } from '_c/charts'
import { formatTime } from '@/libs/tools'
export default {
  props: ['brandList'],
  components: {
    ChartLine
  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    }
  },
  data () {
    return {
      goodList: [],

      lineLoading: true,
      lineData: {
        xAxisData: [],
        seriesData: []
      },
      lineReq: {
        brandId: 0,
        goodsNo: 0
      }
    }
  },
  methods: {
    requestGoodList () {
      // this.api({
      //   apiName: 'getAllGoodList',
      //   success: (res) => {
      //     this.goodList = res.data || []
      //   }
      // })
    },
    requestGoodListByBrand (brandId) {
      // this.api({
      //   apiName: 'getAllGoodListByBrand',
      //   postdata: { brandId },
      //   success: (res) => {
      //     this.goodList = res.data || []
      //   }
      // })
    },

    brandOnChange (brandId) {
      this.lineLoading = true
      this.lineReq.goodsNo = 0
      if (brandId) {
        this.requestGoodListByBrand(brandId)
      } else {
        this.requestGoodList()
      }
      this.requestLine()
    },
    goodOnChange () {
      this.requestLine()
    },

    requestLine () {
      this.lineLoading = true
      let { brandId, goodsNo } = this.lineReq
      brandId = brandId || null
      goodsNo = goodsNo || null
      // this.api({
      //   apiName: 'getSaledTend',
      //   postdata: { brandId, goodsNo },
      //   success: (res) => {
      //     let xAxisData = []
      //     let seriesData = []

      //     res.data.forEach((item) => {
      //       let { salesTime, salesVolume } = item
      //       xAxisData.push(formatTime(salesTime, 'yyyy-MM-dd'))
      //       seriesData.push(salesVolume)
      //     })
      //     this.lineData = { xAxisData, seriesData }
      //     this.lineLoading = false
      //   }
      // })
    }
  },
  filters: {
    nameFilter (val) {
      if (val && val.length > 10) {
        return val.slice(0, 10) + '....'
      }
      return val
    }
  },
  mounted () {
    this.requestGoodList()
    this.requestLine()
  }
}
</script>

<style lang="less">
.sales-trend-con {
  position: relative;
  box-sizing: border-box;
  .chart-opt {
    position: absolute;
    z-index: 6;
    right: 16px;
    top: 16px;
  }
  .chart-opt .good-select {
    width: 160px;
    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>
