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

import {listGroup} from "@/api/product/attribute_group";

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

    }
  },
  // 挂载方法
  created() {
    this.getList()
  },
  watch:{
    value: {
      handler(val) {
        console.log("进入初始化value::"+val.toString())
        if (val.toString() !== this.checkedAttributeGroupIds.toString()){
          this.checkedAttributeGroupIds = val
          this.checkedAttributeGroupList = []
        }
        console.log("选中的ids：："+this.checkedAttributeGroupIds)
      },
      immediate: true
    },
    checkedAttributeGroup:{
      handler(val) {
        if (val !==undefined && val.length>0){
          this.checkedAttributeGroupList = val
          this.checkedAttributeGroupIds = this.checkedAttributeGroupList.map(checked => checked.id)
        }
      },
      immediate: true
    }
  },
  // 方法
  methods: {
    /** 属性复选框选择事件 */
    handleCheckedAttributeChange(attribute){
      let isChecked = this.checkedAttributeGroupIds.indexOf(attribute.id) > -1;
      if (isChecked){
        this.checkedAttributeGroupList.push(attribute)
      }else {
        //删除属性
        this.checkedAttributeGroupList.splice(
          this.checkedAttributeGroupList.indexOf(attribute),1
        )
      }
      //将组件改变的值传给调用者
      this.$emit("input",this.checkedAttributeGroupIds)
      console.log(this.checkedAttributeGroupList)
      // this.checkedAttributeGroupList.splice(this.checkedAttributeGroupIds.indexOf(attribute.id),1)
    },
    //关闭标签
    removeCheck(index) {
      console.log(index)
      this.checkedAttributeGroupList.splice(index,1);
      this.checkedAttributeGroupIds.splice(index,1)
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 查询属性列表 */
    getList(){
      this.loading = true
      listGroup(this.queryParams).then(response => {
        this.groupList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>
