<template>
  <div class="shop-choice-box">
    <div class="shop-top">
      <shop-top v-model="isShow" title="分类"></shop-top>
    </div>
    <div class="shop-box">
      <div class="commodity-box">
        <choice-commodity
          :shopInfo="shopInfo"
          :goodsInfo="goodsInfo"
          :choiceList="choiceList"
        ></choice-commodity>
      </div>
      <div class="choice-box" v-if="choiceList.length">
        <div class="title">商品分类</div>
        <div class="choice" v-for="choiceItem in choiceList" :key="choiceItem.id">
          <div class="name">{{ choiceItem.name }}</div>
          <div class="choice-list">
            <template v-for="(item, index) in choiceItem.spec_value">
              <div
                class="choice-item"
                :class="{ 'z-active': item.select }"
                :key="index"
                v-if="item.name"
                @click="changeChoice(choiceItem, item.id)"
              >
                {{ item.name }}
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="count-box">
        <shop-count v-model="shopNum" :stock="shopInfo.limitNum || goodsInfo.stock"></shop-count>
      </div>
    </div>
    <div class="shop-sub">
      <div class="btn" @click="sub">立即购买</div>
    </div>
    <transition name="move-bottom">
      <div class="shop-payment" v-if="showPayment">
        <shop-payment
          v-model="showPayment"
          :shopInfo="shopInfo"
          :goodsInfo="goodsInfo"
          :choiceList="choiceList"
          :shopNum="shopNum"
          @count="setCount"
        ></shop-payment>
      </div>
    </transition>
  </div>
</template>
<script>
import shopTop from '../common/top';
import shopCount from '../common/count';
import choiceCommodity from '../common/choiceCommodity';
import shopPayment from './payment';
export default {
  name: 'shop-choice',
  components: {
    shopTop,
    choiceCommodity,
    shopCount,
    shopPayment
  },
  props: {
    value: {},
    shopInfo: {}
  },
  data() {
    return {
      showPayment: false,
      choiceList: [],
      shopNum: 1
    };
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    },
    goodsKey() {
      let keyStr = '';
      const choiceList = this.choiceList || [];
      choiceList.forEach(choiceItem => {
        const spec_value = choiceItem.spec_value || [];
        spec_value.forEach(item => {
          if (item.select) {
            keyStr = keyStr ? `${keyStr}:${item.key}` : item.key;
          }
        });
      });
      return keyStr;
    },
    goodsInfo() {
      const shopInfo = this.shopInfo || {};
      const goodsList = shopInfo.specInfo || {};
      const goodsInfo = goodsList[this.goodsKey] || {
        price: shopInfo.price,
        stock: shopInfo.stock
      };
      return goodsInfo;
    }
  },
  mounted() {
    this.setChoiceList();
  },
  methods: {
    setChoiceList() {
      let choiceList = this.shopInfo.spec || [];
      choiceList = choiceList.map(choiceItem => {
        const spec_value = choiceItem.spec_value || [];
        return {
          id: choiceItem.id,
          name: choiceItem.name,
          spec_value: spec_value.map(item => {
            return {
              key: `${choiceItem.id}-${item.id}`,
              id: item.id,
              select: false,
              name: item.name
            };
          })
        };
      });
      this.choiceList = choiceList;
    },
    changeChoice(choiceItem, itemId) {
      for (let i = 0; i < choiceItem.spec_value.length; i++) {
        if (choiceItem.spec_value[i].id === itemId) {
          const select = !choiceItem.spec_value[i].select;
          choiceItem.spec_value[i].select = select;
        } else {
          choiceItem.spec_value[i].select = false;
        }
      }
    },
    sub() {
      const goodsKeyLen = this.goodsKey ? this.goodsKey.split(':').length : 0;
      if (this.choiceList.length && goodsKeyLen !== this.choiceList.length) {
        this.$layer.msg('请选择商品分类！');
        return false;
      }
      if (this.shopNum <= 0) {
        this.$layer.msg('请添加商品！');
        return false;
      }
      this.showPayment = true;
    },
    setCount(num) {
      this.shopNum = num;
    }
  },
  watch: {
    shopInfo() {
      this.setChoiceList();
    }
  }
};
</script>
<style lang="less" scoped>
.shop-choice-box {
  position: relative;
  height: 100%;
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
  background-color: #fff;
  .shop-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.4rem;
  }
  .shop-box {
    padding: 0 0.1rem;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .shop-sub {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.05rem 0.1rem;
    width: 100%;
    height: 0.5rem;
  }
}
.shop-box {
  .commodity-box {
    border-bottom: 0.01rem solid #f6f6f6;
  }
  .choice-box {
    border-bottom: 0.01rem solid #f6f6f6;
    .title {
      padding: 0.1rem 0;
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: #333333;
    }
    .choice {
      display: flex;
      .name {
        vertical-align: top;
        flex: 0 0 auto;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-right: 0.1rem;
        color: #999999;
        font-size: 0.12rem;
      }
      .choice-list {
        flex: 1;
        .choice-item {
          vertical-align: top;
          display: inline-block;
          height: 0.28rem;
          line-height: 0.28rem;
          padding: 0 0.2rem;
          margin: 0 0.1rem 0.12rem 0;
          background: #f8f8f8;
          color: #000000;
          font-size: 0.12rem;
          border-radius: 0.04rem;
          &.z-active {
            border: 0.01rem solid #ff4802;
            background: rgba(255, 217, 203, 0.27);
            color: #ff4802;
          }
        }
      }
    }
  }
  .count-box {
    padding: 0.1rem 0;
  }
}
.shop-sub {
  .btn {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    border-radius: 0.4rem;
    background: #fc5106;
    color: #fff;
    font-size: 0.16rem;
    text-align: center;
    cursor: pointer;
  }
}
.shop-payment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
