<template>
  <div class="shop-details" v-if="shopInfo.id">
    <div class="shop-top">
      <shop-top v-model="isShow" title="商品详情"></shop-top>
    </div>
    <div class="shop-box">
      <div class="info-box">
        <div class="img-box">
          <img
            v-for="(item, index) in shopInfo.imgs"
            :key="index"
            :src="`${item}?x-oss-process=style/commodity_cover`"
            v-photoswipe="{ group: 'shop', origin: item }"
            alt=""
          />
        </div>
        <div class="right-box">
          <div class="name">{{ shopInfo.name || '' }}</div>
          <div class="price-box">￥{{ shopInfo.price }}</div>
          <div class="limit" v-if="shopInfo.limitNum">限购 {{ shopInfo.limitNum }} 件</div>
          <div class="stock">剩余 {{ shopInfo.stock }} 件</div>
        </div>
      </div>
      <div class="content-box" v-if="shopInfo.context">
        <div class="title">/ 宝贝详情 /</div>
        <div class="content" v-html="shopInfo.context"></div>
      </div>
    </div>
    <div class="shop-sub">
      <div class="btn" v-if="shopInfo.stock" @click="sub">立即购买</div>
      <div class="btn stock" v-else>已售罄</div>
    </div>
    <transition name="move-bottom">
      <div class="shop-choice" v-if="showChoice">
        <shop-choice v-model="showChoice" :shopInfo="shopInfo"></shop-choice>
      </div>
    </transition>
  </div>
</template>
<script>
import { getGoodsMsg } from '@/plugins/API/apiShop';
import { mapGetters } from 'vuex';
import shopTop from '../common/top';
import shopChoice from './choice';
export default {
  name: 'shop-details',
  components: {
    shopTop,
    shopChoice
  },
  props: {
    value: {},
    goodsId: {}
  },
  data() {
    return {
      shopInfo: {},
      showChoice: false
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      channelInfo: 'channelInfo'
    }),
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  mounted() {
    this.getGoodsMsg();
  },
  methods: {
    async getGoodsMsg() {
      const res = await getGoodsMsg({
        uin: this.channelInfo.uin,
        goodsId: this.goodsId
      });
      if (res.code === 200 && res.errorCode === 0) {
        this.shopInfo = res.data || {};
      } else {
        this.$layer.msg(res.errorMessage);
      }
    },
    sub() {
      if (!this.userInfo.id) {
        this.$layer.msg('请先登录!~');
        this.$Bus.$emit('bus-showLogin', true);
        return false;
      } else {
        this.showChoice = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.shop-details {
  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 {
  .info-box {
    padding: 0.06rem 0;
    display: flex;
    .img-box {
      flex: 0 0 auto;
      margin-right: 0.1rem;
      width: 0.88rem;
      height: 0.88rem;
      border-radius: 0.04rem;
      overflow: hidden;
      img {
        display: none;
        width: 100%;
        height: 100%;
        &:nth-child(1) {
          display: block;
        }
      }
    }
    .right-box {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      .name {
        margin-bottom: 0.05rem;
        flex: 0 0 auto;
        line-height: 0.17rem;
        font-size: 0.12rem;
        word-break: break-all;
        color: #000;
      }
      .price-box {
        flex: 1;
        line-height: 0.2rem;
        color: #ff4802;
        font-size: 0.16rem;
        font-weight: bold;
      }
      .limit {
        flex: 0 0 auto;
        margin-top: 0.1rem;
        line-height: 0.2rem;
        color: #fc5147;
        font-size: 0.12rem;
      }
      .stock {
        position: absolute;
        bottom: 0;
        right: 0.1rem;
        line-height: 0.2rem;
        font-size: 0.12rem;
        color: #999999;
      }
    }
  }
  .content-box {
    .title {
      line-height: 0.3rem;
      text-align: center;
      font-size: 0.12rem;
      color: #ff4802;
    }
    .content {
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: #000000;
      ::v-deep * {
        max-width: 100%;
      }
    }
  }
}
.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;
    &.stock {
      background: #666;
      color: #fff;
    }
  }
}
.shop-choice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
