<template>
  <Card class="area-statistics-con">
    <div class="chart-opt">
      <Select
        v-if="!isBrand"
        v-model="barReq.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="barReq.goodsNo"
        class="good-select"
        placeholder="商品名称"
        size="small"
        @on-change="goodOnChange"
      >
        <Option :value="0">全部商品</Option>
        <Option
          v-for="(item, index) of goodList"
          :value="item.goodsNo"
          :key="'line-option-' + index"
          >{{ item.goodName | nameFilter }}</Option
        >
      </Select>
      <Select
        v-model="barReq.provinceCode"
        class="address-select"
        placeholder="省"
        @on-change="provinceOnChange"
        label-in-value
        size="small"
      >
        <Option
          v-for="(item, index) of provinceList"
          :value="item.code"
          :key="'line-poption-' + index"
          >{{ item.areaName }}</Option
        >
      </Select>
      <Select
        v-model="barReq.cityCode"
        class="address-select"
        placeholder="城市"
        size="small"
        label-in-value
        @on-change="cityOnChange"
      >
        <Option
          v-for="(item, index) of cityList"
          :value="item.code"
          :key="'line-coption-' + index"
          >{{ item.areaName }}</Option
        >
      </Select>
    </div>
    <div class="no-data" v-show="!barData || barData.xAxisData.length == 0">暂无数据</div>
    <chart-bar style="height: 360px" :value="barData" text="区域总销量" />
    <Spin size="large" fix v-if="barLoading"></Spin>
  </Card>
</template>

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

      barLoading: true,
      barData: {
        xAxisData: [],
        seriesData: [],
        legend: []
      },
      barReq: {
        brandId: 0,
        goodsNo: 0,
        province: '',
        city: '',

        provinceCode: '',
        cityCode: ''
      }
    }
  },
  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.barLoading = true
      this.barReq.goodsNo = 0
      if (brandId) {
        this.requestGoodListByBrand(brandId)
      } else {
        this.requestGoodList()
      }
      this.requestBar()
    },
    goodOnChange () {
      this.requestBar()
    },

    requestProvince () {
      // this.api({
      //   apiName: 'getProvinceList',
      //   success: (res) => {
      //     this.provinceList = res.data || []
      //     //   let defaultProvince = res.data[0];
      //     let defaultProvince = this.provinceList.find(item => item.areaName == '江苏省')
      //     this.barReq.provinceCode = defaultProvince.code
      //     this.provinceOnChange({
      //       value: defaultProvince.code,
      //       label: defaultProvince.areaName
      //     })
      //   }
      // })
    },
    provinceOnChange (data) {
      let { value, label } = data
      this.barReq.province = label
      this.api({
        apiName: 'getCityList',
        postdata: {
          code: value
        },
        success: (res) => {
          this.cityList = res.data || []
          let defaultCity = res.data[0]
          this.barReq.cityCode = defaultCity.code
          this.cityOnChange({
            value: defaultCity.code,
            label: defaultCity.areaName
          })
        }
      })
    },
    cityOnChange (data) {
      let { value, label } = data
      this.barReq.city = label

      this.requestBar()
    },

    requestBar () {
      this.barLoading = true
      let { brandId, goodsNo } = this.barReq
      brandId = brandId || null
      goodsNo = goodsNo || null
      this.api({
        apiName: 'getAreaStatistics',
        postdata: { ...this.barReq, brandId, goodsNo },
        success: (res) => {
          let xAxisData = []
          let seriesData = []

          res.data.forEach((item) => {
            let { area, num } = item
            xAxisData.push(area)
            seriesData.push(num)
          })
          this.barData = { xAxisData, seriesData }

          this.barLoading = false
        }
      })
    }
  },
  filters: {
    nameFilter (val) {
      if (val && val.length > 10) {
        return val.slice(0, 10) + '....'
      }
      return val
    }
  },
  mounted () {
    this.requestGoodList()
    this.requestProvince()
    // this.requestProvince();
  }
}
</script>

<style lang="less">
.area-statistics-con {
  .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>
