<template>
  <el-row>
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span>品牌关联关系</span>
      </div>
      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>已选品牌</span>
          <span>已选品牌ids ：：{{this.checkedBrandIds}}</span>
        </div>
        <el-row :gutter="20"  style="height: 100px">
          <el-col :span="3" v-for="(brand,index) in checkedBrandList">
            <el-tag
              style="margin: 0 10px"
              :key="brand.name"
              closable
              @close="removeCheck(index)">
              {{brand.name}}
            </el-tag>
          </el-col>
        </el-row>
      </el-card >
      <el-divider></el-divider>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>可选品牌</span>
        </div>
        <el-row>
          <el-col :span="3"
                  v-for="brand in brandList">
            <el-checkbox
              v-model="checkedBrandIds"
              :value="brand.id"
              :key="brand.id"
              :label="brand.id"
              @change="handleCheckedBrandChange(brand)"
              border>
              {{brand.name}}
            </el-checkbox>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </el-row>
</template>
<script>

import {listBrand} from "@/api/product/brand";

export default {
  name:"BrandElement",
  // 接参
  props: {
    value: {
      type: Array,
      default: []
    },
    checkBrand:{
      type: Array,
      default: null
    }
  },
  data() {
    // 数据
    return{
      //已选品牌ids
      checkedBrandIds: [],
      //已选品牌数组
      checkedBrandList: [],
      //品牌品牌表
      brandList: [],
      // 总条数
      total: 0,

    }
  },
  // 挂载方法
  created() {
    this.getBrand()
  },
  watch:{
    value: {
      handler(val) {
        console.log("进入初始化value::"+val.toString())
        if (val.toString() !== this.checkedBrandIds.toString()){
          this.checkedBrandIds = val
          this.checkedBrandList = []
        }
        console.log("选中的ids：："+this.checkedBrandIds)
      },
      immediate: true
    },
    checkBrand:{
      handler(val) {
        console.log("进入初始化checkedBrand::"+val.toString())
        if (val !==undefined && val.length>0){
          this.checkedBrandList = val
          this.checkedBrandIds = this.checkedBrandList.map(checked => checked.id)
        }
      },
      immediate: true
    }
  },
  // 方法
  methods: {
    /** 品牌复选框选择事件 */
    handleCheckedBrandChange(brand){
      let isChecked = this.checkedBrandIds.indexOf(brand.id) > -1;
      if (isChecked){
        this.checkedBrandList.push(brand)
      }else {
        //删除品牌
        this.checkedBrandList.splice(
          this.checkedBrandList.indexOf(brand),1
        )
      }
      this.$emit("input",this.checkedBrandIds)
      console.log(this.checkedBrandList)
      // this.checkedBrandList.splice(this.checkedBrandIds.indexOf(brand.id),1)
    },
    //关闭标签
    removeCheck(index) {
      console.log(index)
      this.checkedBrandList.splice(index,1);
      this.checkedBrandIds.splice(index,1)
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 查询品牌列表 */
    getBrand(){
      listBrand(this.queryParams).then(response => {
        console.log('品牌集合')
        console.log(response)
        this.brandList = response.data.rows;
        this.total = response.data.total;
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>

