<template>
  <div class="goods-specifications">
    <div class="check-title">
      选择规格
      &nbsp;
      <load-select v-model="specvalue" 
        @scrollload="loadMore"
        :load="load"
        @change-load="changeLoad">
        <gic-load-item
          v-for="item in speOptions"
          :key="item.standardId"
          :value="item.standardId"
          :label="item.standardName">
        </gic-load-item>
      </load-select>

      <!-- 规格类型筛选 -->
      <div class="spe-type" v-if="speCVal">
        <el-radio v-model="speRadio" label="1">通过规格值组筛选</el-radio>
        <el-radio v-model="speRadio" label="2">通过规格值筛选</el-radio>
      </div>
    </div>

    <div class="spe-con">
      <spes v-if="speCVal && speRadio == '1'"></spes>
      <spe-group v-if="speCVal && speRadio == '2'"></spe-group>
    </div>
    <slot></slot>
  </div>
</template>


<script>
import Spes from "./spes";
import SpeGroup from "./spe-group";
import LoadSelect from './load-select';
import GicLoadItem from './load-item';

export default {
  name: "goods-specifications",

  components: {
    Spes,
    SpeGroup,
    LoadSelect,
    GicLoadItem
  },

  data() {
    return {
      speCVal: "",
      speOptions: [], // 规格
      speRadio: "1",
      currentPage: 1,
      load: false,
      specvalue: ''
    };
  },

  methods: {
    loadMore() {
      if (this.speOptions.length == (this.currentPage - 1) * 20) {
        this.getOptionsData('success');
      } else {
        this.load = true;
      }
    },
    // 规格查找
    getOptionsData(suc) {
      const param = {
        type: 'TYP_NORMAL',
        currentPage: this.currentPage,
        pageSize: 20
      };
      this.axios
        .get(`${this.baseUrl}/api-goods/page-standard?requestProject=goods`, {
          params: param
        }).then(res => {
          let data;
          if (res.data.errorCode === 0) {
            data = res.data.result;
            this.speOptions = this.speOptions.concat(data.result);
            this.currentPage++;
            if (suc == 'success') {
              this.load = true;
            }
          } else {
            this.$message.error(res.data.message);
          }
        }).catch(err => {
          this.$message.error(error);
        });
    },

    changeLoad() {
      this.load = false;
    },
    resiver(val) {
      // 选中的值
      this.specvalue = val;

    },
    // 查询是规格值还是规格值组
    // () {
      
    // }
  },

  mounted() {
    this.$on('pass-item', this.resiver);
  },

  beforeMount() {
    this.baseUrl = window.location.origin.includes("localhost")
      ? "http://gicdev.demogic.com"
      : window.location.origin;
    this.getOptionsData();
  }
};
</script>
<style lang="less" scoped>
.goods-box {
  .check-title {
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-bottom: none;
    background-color: #f5f7fa;
  }
  .spe-con {
    max-height: 285px;
    padding: 10px 20px;
    border: 1px solid #dcdfe6;
    border-top: none;
    overflow: hidden;
  }
  .spe-type {
    float: right;
    margin-right: 20px;
  }
}
</style>
