<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="(attribute, index) in checkedAttributeList">
            <el-tag
              style="margin: 5px 10px"
              :key="attribute.name"
              closable @close="removeChecked(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-form :inline="true" :model="attributeQuery" class="demo-form-inline">
            <el-form-item label="属性编码">
              <el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
            </el-form-item>
            <el-form-item label="属性名称">
              <el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryAttribute">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
            <el-checkbox
              v-model="attributeIdList"
              :key="attribute.id"
              :value="attribute.id"
              :label="attribute.id"
              @change="checkedAttribute(attribute)"
              border>{{ attribute.name }}
            </el-checkbox>
          </el-col>
        </el-row>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="attributeQuery.pageNum"
          :limit.sync="attributeQuery.pageSize"
          @pagination="queryAttribute"
        />
      </el-card>
    </el-card>
  </el-row>
</template>

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

export default {
  name: "CheckAttribute",
  props: {
    value: {
      type: Array,
      default: []
    },
    checkedList: {
      type: Array,
      default: null
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val.toString() !== this.attributeIdList.toString()){
          this.attributeIdList = val;
          this.checkedAttributeList = []
        }
      },
      immediate: true,
    },
    checkedList: {
      handler(val){
        if (val !== undefined && val.length > 0){
          this.checkedAttributeList = val;
          this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      attributeIdList: [],
      checkedAttributeList: [],
      attributeQuery: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null
      },
      attributeTotal: 0,
      attributeList: []
    }
  },
  created() {
    this.queryAttribute();
  },
  methods: {
    /**
     * 选中值触发方法
     */
    checkedAttribute(attribute) {
      let isCheck = this.attributeIdList.indexOf(attribute.id) > -1;
      if (isCheck) {
        this.checkedAttributeList.push(attribute);
      } else {
        // 删除
        this.checkedAttributeList.splice(
          this.checkedAttributeList.indexOf(attribute), 1
        )
      }
      this.$emit("input", this.attributeIdList);
    },
    /**
     * 删除选中值
     * @param index
     */
    removeChecked(index) {
      this.checkedAttributeList.splice(index, 1);
      this.attributeIdList.splice(index, 1);
    },

    /**
     * 查询属性
     */
    queryAttribute() {
      listAttribute(this.attributeQuery).then(response => {
        this.attributeList = response.data.rows;
        this.total = response.data.total;
      });
    },
  }
}
</script>

<style scoped>

</style>
