<template>
  <div class="productRange-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 操作按钮 -->
      <div class="table-operator">
        <a-button id="productRange-brand" type="primary" class="button-error" @click="choosePModal('PRODUCT_BRAND')">选择产品品牌</a-button>
        <a-button id="productRange-type" type="primary" class="button-info" @click="choosePModal('PRODUCT_TYPE')">选择产品分类</a-button>
        <a-button id="productRange-product" type="primary" class="button-success" @click="choosePModal('SUPPLIER')">选择供应商</a-button>
      </div>
      <!-- 选择产品品牌 -->
      <chooseBrandModal :openModal="openBrandModal" :chooseData="chooseBrand" @close="openBrandModal=false" @ok="handleBrandOk" />
      <!-- 选择产品分类 -->
      <chooseTypeModal :openModal="openTypeModal" :chooseData="chooseType" @close="openTypeModal=false" @ok="handleTypeOk" />
      <!-- 选择供应商 -->
      <chooseSupplierModal :openModal="openSupplierModal" :chooseData="chooseSupplier" @close="openSupplierModal=false" @ok="handleSupplierOk" />
      <!-- 列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :showPagination="false"
        :scroll="{ y: tableHeight }"
        bordered>
        <!-- 操作 -->
        <template slot="action" slot-scope="text, record">
          <a-button
            size="small"
            type="link"
            class="button-error"
            @click="handleDel(record)"
            id="productRange-del-btn">删除</a-button>
        </template>
      </s-table>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable } from '@/components'
import ChooseBrandModal from '@/views/common/chooseBrandModal.vue'
import ChooseTypeModal from '@/views/common/chooseTypeModal.vue'
import ChooseSupplierModal from '@/views/common/chooseSupplierModal.vue'
import { predictRangeList, predictRangeDel } from '@/api/predict'
export default {
  name: 'ProductRange',
  mixins: [commonMixin],
  components: { STable, ChooseBrandModal, ChooseTypeModal, ChooseSupplierModal },
  props: {
    itemSn: {
      type: [String, Number],
      default: ''
    },
    tableHeight: {
      type: [String, Number],
      default: 400
    }
  },
  data () {
    return {
      spinning: false,
      openBrandModal: false, //  选择产品品牌
      openTypeModal: false, //  选择产品分类
      openSupplierModal: false, //  选择供应商
      chooseBrand: [], //  所选品牌
      chooseType: [], //  所选分类
      chooseSupplier: [], //  所选供应商
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '类型', dataIndex: 'rangeTypeName', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '类型名称', dataIndex: 'rangeDataName', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return predictRangeList({ 'sn': this.itemSn }).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            for (var i = 0; i < data.length; i++) {
              data[i].no = i + 1
            }
            this.listData = data
          }
          return data
        })
      },
      listData: []
    }
  },
  methods: {
    // 选择
    choosePModal (type) {
      const brandList = []
      const typeList = []
      const supplierList = []
      this.listData.map(item => {
        if (item.rangeType == 'PRODUCT_BRAND') {
          brandList.push(Object.assign(item, { goodsSn: item.rangeDataSn, brandSn: item.rangeDataSn }))
        } else if (item.rangeType == 'PRODUCT_TYPE') {
          typeList.push(Object.assign(item, { goodsSn: item.rangeDataSn, productTypeSn: item.rangeDataSn }))
        } else if (item.rangeType == 'SUPPLIER') {
          supplierList.push(Object.assign(item, { supplierSn: item.rangeDataSn }))
        }
      })
      if (type == 'PRODUCT_BRAND') { //  选择品牌
        this.chooseBrand = brandList
        this.openBrandModal = true
      } else if (type == 'PRODUCT_TYPE') { //  选择分类
        this.chooseType = typeList
        this.openTypeModal = true
      } else if (type == 'SUPPLIER') {
        this.chooseSupplier = supplierList
        this.openSupplierModal = true
      }
    },
    // 品牌
    handleBrandOk (obj) {
      this.chooseBrand = obj
      this.changeData('PRODUCT_BRAND')
    },
    // 分类
    handleTypeOk (obj) {
      this.chooseType = obj
      this.changeData('PRODUCT_TYPE')
    },
    // 供应商
    handleSupplierOk (obj) {
      this.chooseSupplier = obj
      this.changeData('SUPPLIER')
    },
    changeData (type) {
      const _this = this
      const dataList = []
      if (type == 'PRODUCT_BRAND') { //  选择品牌
        if (_this.chooseBrand.length > 0) {
          _this.chooseBrand.map(item => {
            dataList.push({
              rangeType: type,
              rangeDataSn: item.brandSn,
              stockPredictSn: this.itemSn
            })
          })
        }
      } else if (type == 'PRODUCT_TYPE') { //  选择分类
        if (_this.chooseType.length > 0) {
          _this.chooseType.map(item => {
            dataList.push({
              rangeType: type,
              rangeDataSn: item.productTypeSn,
              stockPredictSn: this.itemSn
            })
          })
        }
      } else if (type == 'SUPPLIER') { //  选择供应商
        if (_this.chooseSupplier.length > 0) {
          _this.chooseSupplier.map(item => {
            dataList.push({
              rangeType: type,
              rangeDataSn: item.supplierSn,
              stockPredictSn: this.itemSn
            })
          })
        }
      }
      console.log('----------------选择', dataList)
      this.$emit('ok', dataList)
    },
    // 删除
    handleDel (row) {
      const _this = this
      this.$confirm({
        title: '提示',
        content: '删除后不可恢复，确定要进行删除吗？',
        centered: true,
        onOk () {
          _this.spinning = true
          predictRangeDel({ stockPredictSn: row.stockPredictSn, rangeDataSn: row.rangeDataSn }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
              _this.spinning = false
            } else {
              _this.spinning = false
            }
          })
        }
      })
    },
    // 刷新数据
    refreshList () {
      this.$refs.table.refresh()
    }
  }
}
</script>
