<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-card class="box-card" style="margin-bottom: 15px">
      <div slot="header" class="clearfix">
        <el-button v-show="isShowDelete" style="float: right; padding: 3px 0" type="text" @click="$emit('delete')">删除</el-button>
      </div>
      <el-form-item :label="'商标' + (index + 1)">
        <el-input v-model="form.brandName" placeholder="商标"></el-input>
      </el-form-item>
      <el-form-item :label="`商标${index + 1}分类`">
        <el-select v-model="form.productTypeId" :placeholder="`请选择商标${index + 1}分类`" @change="form.productIds = [0], updateValue()">
          <el-option
            v-for="item in productTypeList"
            :key="item.id"
            :label="item.titleZh"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="`商标${index + 1}商品`">
        <el-select v-model="form.productIds" :placeholder="`请选择商标${index + 1}商品`" multiple filterable clearable @change="updateValue">
          <el-option
            v-for="item in getProductListByTypeId(form.productTypeId)"
            :key="item.id"
            :label="item.titleZh"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "BrandForm",
  props: {
    isShowDelete: {
      type: Boolean,
      default: true
    },
    productTypeList: {
      type: Array,
      default: []
    },
    productList: {
      type: Array,
      default: []
    },
    value: {
      type: Object,
      default: {
        "brandName": "",
        "trademarkCategoryRelList": []
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      form :{
        id: undefined,
        productBrandId: undefined,
        brandName: '',
        productTypeId: 0,
        productIds: []
      }
    }
  },
  mounted() {
    this.updateForm(this.value)
  },
  methods: {
    getProductListByTypeId(typeId) {
      return [
        {id: 0, titleZh: '全部'},
        ...(typeId === 0 ? [] : this.productList.filter((p) => p.typeId === typeId))
      ]
    },
    // 删除商品0
    delete0(){
      if (this.form.productIds.length > 1){
        const index = this.form.productIds.indexOf(0)
        if (index !== -1) {
          this.form.productIds.splice(index, 1)
        }
      }
    },
    updateValue() {
      this.delete0()
      const trademarkCategoryRelList = []
      this.form.productIds.forEach(productId => {
        trademarkCategoryRelList.push({
          productCategoryId: this.form.productTypeId,
          productId,
        })
      })
      this.$emit('input', {
        brandName: this.form.brandName,
        id: this.form.id,
        productBrandId: this.form.productBrandId,
        trademarkCategoryRelList
      })
    },
    updateForm(e){
      if (!!e){
        this.form.brandName = e.brandName
        this.form.id = e.id
        this.form.productBrandId = e.productBrandId
        if (e.trademarkCategoryRelList && e.trademarkCategoryRelList.length > 0) {
          this.form.productTypeId = e.trademarkCategoryRelList[0].productCategoryId
          this.form.productIds = []
          e.trademarkCategoryRelList.forEach(f => {
            this.form.productIds.push(f.productId)
          })
        }
      }
    }
  },
  watch: {
    value(e) {
      this.updateForm(e)
    }
  }
}
</script>

<style scoped>

</style>
