<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="(brand, index) in checkedBrandList">
            <el-tag
              style="margin: 5px 10px"
              :key="brand.nam"
              closable @close="removeChecked(index)">
              {{ brand.nam }}
            </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="brandQuery" class="demo-form-inline">
            <el-form-item label="品牌名称">
              <el-input v-model="brandQuery.nam" placeholder="品牌名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryBrand">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-col style="padding: 5px 10px" :span="3" v-for="brand in brandList">
            <el-checkbox
              v-model="brandIdList"
              :key="brand.id"
              :value="brand.id"
              :label="brand.id"
              @change="checkedBrand(brand)"
              border>{{ brand.nam }}
            </el-checkbox>
          </el-col>
        </el-row>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="brandQuery.pageNum"
          :limit.sync="brandQuery.pageSize"
          @pagination="queryBrand"
        />
      </el-card>
    </el-card>
  </el-row>
</template>

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

export default {
  name: "CheckBrand",
  props: {
    value: {
      type: Array,
      default: []
    },
    checkedList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      brandIdList: [],
      checkedBrandList: [],
      brandQuery: {
        pageNum: 1,
        pageSize: 10,
        name: null
      },
      brandTotal: 0,
      brandList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val.toString() !== this.brandIdList.toString()){
          this.brandIdList = val;
          this.checkedBrandList = []
        }
      },
      immediate: true,
    },
    checkedList: {
      handler(val){
        if (val !== undefined && val.length > 0){
          this.checkedBrandList = val;
          this.brandIdList = this.checkedBrandList.map(checked => checked.id);
        }
      },
      immediate: true
    }
  },
  created() {
    this.queryBrand();
  },
  methods: {
    /**
     * 选中值触发方法
     */
    checkedBrand(brand) {
      let isCheck = this.brandIdList.indexOf(brand.id) > -1;
      if (isCheck) {
        this.checkedBrandList.push(brand);
      } else {
        // 删除
        this.checkedBrandList.splice(
          this.checkedBrandList.indexOf(brand), 1
        )
      }
      this.$emit("input", this.brandIdList);
    },
    /**
     * 删除选中值
     * @param index
     */
    removeChecked(index) {
      this.checkedBrandList.splice(index, 1);
      this.brandIdList.splice(index, 1);
    },

    /**
     * 查询品牌
     */
    queryBrand() {
      listBrand(this.brandQuery).then(response => {
        this.brandList = response.data.rows;
        this.total = response.data.total;
      });
    },
  }
}
</script>

<style scoped>

</style>
