<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>
        </div>
        <el-row>
          <el-col :span="2" v-for="(attributeGroup, index) in checkedAttributeGroupList">
            <el-tag
              style="margin: 5px 10px"
              :key="attributeGroup.name"
              closable @close="removeChecked(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-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
            <el-form-item label="属性组名称">
              <el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryAttributeGroup">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-col style="padding: 5px 10px" :span="3" v-for="attributeGroup in attributeGroupList">
            <el-checkbox
              v-model="attributeGroupIdList"
              :key="attributeGroup.id"
              :value="attributeGroup.id"
              :label="attributeGroup.id"
              @change="checkedAttributeGroup(attributeGroup)"
              border>{{ attributeGroup.name }}
            </el-checkbox>
          </el-col>
        </el-row>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="attributeGroupQuery.pageNum"
          :limit.sync="attributeGroupQuery.pageSize"
          @pagination="queryAttributeGroup"
        />
      </el-card>
    </el-card>
  </el-row>
</template>

<script>
import {listAttributeGroup} from "@/api/product/attributeGroup";

export default {
  name: "CheckAttributeGroup",
  props: {
    value: {
      type: Array,
      default: []
    },
    checkedList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      attributeGroupIdList: [],
      checkedAttributeGroupList: [],
      attributeGroupQuery: {
        pageNum: 1,
        pageSize: 10,
        name: null
      },
      attributeGroupTotal: 0,
      attributeGroupList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val.toString() !== this.attributeGroupIdList.toString()){
          this.attributeGroupIdList = val;
          this.checkedAttributeGroupList = []
        }
      },
      immediate: true,
    },
    checkedList: {
      handler(val){
        if (val !== undefined && val.length > 0){
          this.checkedAttributeGroupList = val;
          this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
        }
      },
      immediate: true
    }
  },
  created() {
    this.queryAttributeGroup();
  },
  methods: {
    /**
     * 选中值触发方法
     */
    checkedAttributeGroup(attributeGroup) {
      let isCheck = this.attributeGroupIdList.indexOf(attributeGroup.id) > -1;
      if (isCheck) {
        this.checkedAttributeGroupList.push(attributeGroup);
      } else {
        // 删除
        this.checkedAttributeGroupList.splice(
          this.checkedAttributeGroupList.indexOf(attributeGroup), 1
        )
      }
      this.$emit("input", this.attributeGroupIdList);
    },
    /**
     * 删除选中值
     * @param index
     */
    removeChecked(index) {
      this.checkedAttributeGroupList.splice(index, 1);
      this.attributeGroupIdList.splice(index, 1);
    },

    /**
     * 查询属性
     */
    queryAttributeGroup() {
      listAttributeGroup(this.attributeGroupQuery).then(response => {
        this.attributeGroupList = response.data.rows;
        this.total = response.data.total;
      });
    },
  }
}
</script>

<style scoped>

</style>
