<template>
  <div class="goods-properties">
    <div class="check-title">
      选择属性
      <el-select v-model="propVal" filterable placeholder="请选择" size="medium">
        <el-option
          v-for="item in propOptions"
          :key="item.propertyId"
          :label="item.propertyName"
          :value="item.propertyId">
        </el-option>
      </el-select>
    </div>

    <div class="prop-content">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

      <div class="box-group">
        <el-checkbox-group v-model="checkedSpes" @change="handleCheckedSpesChange">
          <el-checkbox v-for="spe in spes" :label="spe" :key="spe.id">
            {{ spe.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'goods-properties',

  props: {

  },

  data() {
    return {
      propOptions: [],
      propVal: [],
      checkAll: false,
      checkedSpes: [],
      spes: [
      ],
      isIndeterminate: false
    };
  },

  methods: {
    handleCheckAllChange(val) {
      this.checkedSpes = val ? this.spes : [];
      this.isIndeterminate = false;
    },
    handleCheckedSpesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.spes.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.spes.length;
    },
    // 商品属性列表下拉数据
    getPropData() {
      const param = {
        currentPage: 1,
        pageSize: 20
      };
      this.axios.get(`${this.baseUrl}/api-goods/page-property?requestProject=goods`, { params: param }).then(res => {
        if (res.data.errorCode === 0) {
          let data = res.data.result;
          this.propOptions = data.result;
        } else {
        }
      }).catch(err => {
        this.$message.error(error);
      });
    }
  },
  
  beforeMount() {
    this.baseUrl = window.location.origin.includes("localhost")
      ? "http://gicdev.demogic.com"
      : window.location.origin;
    this.getPropData();
  }
}
</script>

<style lang="less" scoped>
.goods-properties {
  .check-title {
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    border: 1px solid #dcdfe6;
    border-bottom: none;
    background-color: #f5f7fa;
    font-size: 14px;
    color: #606266;
  }
  .prop-content {
    padding: 10px 20px;
    border: 1px solid #dcdfe6;
    border-top: none;
    .box-group {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #dcdfe6;
    }
  }
}
</style>

