<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.checkedAttributeIds}}</span>
          <span>属性：：{{this.checkedAttributeList}} </span>
        </div>
        <el-row :gutter="20"  style="height: 100px">
          <el-col :span="3" v-for="(attribute,index) in checkedAttributeList">
            <el-tag
              style="margin: 0 10px"
              :key="attribute.name"
              closable
              @close="removeCheck(index)">
              {{attribute.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="attribute in attributeList">
            <el-checkbox
              v-model="checkedAttributeIds"
              :value="attribute.id"
              :key="attribute.id"
              :label="attribute.id"
              @change="handleCheckedAttributeChange(attribute)"
              border>
              {{attribute.name}}
            </el-checkbox>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </el-row>
</template>
<script>

import {listAttribute} from "@/api/product/attribute";

export default {
  name:"AttributeGroupElement",
  // 接参
  props: {
    value: {
      type: Array,
      default: []
    },
    checkedAttribute:{
      type: Array,
      default: null
    }
  },
  data() {
    // 数据
    return{
      checkedAttributeIds: [],
      //已选属性数组
      checkedAttributeList: [],
      //商品属性表
      attributeList: [],
      // 属性组数据
      groupList: [],
      // 总条数
      total: 0,

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

<style scoped lang="scss">

</style>
