<template>
<div>
  <div class="case-box" v-if="caseInfo.goodsInfo.id" :style="{bottom: !(open || !isClose) ?'0.48rem' : '0.4rem'}">
      <div class="goods" :style="{transform: (open && !isClose) ? 'unset' : 'translate3d(0, 120%, 0)', display: (open || !isClose) ? 'block' : 'none'}" @click="_enterMarket">
        <div class="image-box">
          <div class="swiper-container" ref="swiper">
            <div class="swiper-wrapper">
              <span class="swiper-slide" v-for="(item, index) in real_img" :key="index" >
                <div class="image" :style="{'background-color': '#fff', backgroundImage: `url(${ item })`}"/>
              </span>
            </div>
          </div>
          <div class="state">
            <span class="icon-box">
              <div class="loader">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
              </div>
            </span>
            <span style="padding-left: 5px;">正在讲解</span>
          </div>
        </div>
        <div class="name">{{ caseInfo.goodsInfo.name }}</div>
        <div class="price">
          <div class="small">￥</div>
          <div>{{ ((caseInfo.goodsInfo.price || caseInfo.goodsInfo.shop_price) + '').split('.')[0] }}</div>
          <div class="small">{{ ((caseInfo.goodsInfo.price || caseInfo.goodsInfo.shop_price) + '').split('.')[1] ? '.' + ((caseInfo.goodsInfo.price || caseInfo.goodsInfo.shop_price) + '').split('.')[1] : '' }}</div>
        </div>
      </div>
      <div class="case">
        <div class="underway">正在讲解的商品</div>
        <div class="icon" @click="open = !open">
          <img :src="openIcon" alt="">
        </div>
      </div>
   </div>
    <transition name="fade">
      <div class="shop-link-box" v-transfer-dom v-if="isShow && caseInfo.goodsInfo.source == 1">
        <source-link v-model="isShow" :content="caseInfo.goodsInfo.sourceContent"></source-link>
      </div>
    </transition>
    <transition name="fade">
      <div class="shop-command-box" v-transfer-dom v-if="isShow && caseInfo.goodsInfo.source == 2">
        <source-command v-model="isShow" :content="caseInfo.goodsInfo.sourceContent"></source-command>
      </div>
    </transition>
</div>
</template>

<script>
const sourceLink = r => require(['@/components/shop/source/link'], r);
const sourceCommand = r => require(['@/components/shop/source/command'], r);
import { mapGetters } from 'vuex';
export default {
  components: {
    sourceLink,
    sourceCommand
  },
  data() {
    return {
      open: true,
      isShow: false,
      isClose: false,
      swiper: null,
      real_img: []
    }
  },
  mounted() {
    this.real_img = this.caseInfo.goodsInfo.real_img ? JSON.parse(JSON.stringify(this.caseInfo.goodsInfo.real_img)) : ''
    this.$nextTick(() => {
      this._initSwiper();
    });
  },
  computed: {
    ...mapGetters({
      caseInfo: 'caseInfo',
      channelInfo: 'channelInfo',
    }),
    openIcon() {
      return this.open ? require('./img/shrink.png') : require('./img/magnify.png')
    }
  },
  methods: {
    _initSwiper() {
      const self = this;
      const option = {
        effect: 'fade',
        autoplay: self.real_img.length > 1 ? { delay: 2000 } : false
      };
      this.swiper = new this.$swiper(this.$refs.swiper, option);
    },
    _enterMarket() {
      if (this.caseInfo.goodsInfo.type === 2){
        this.isShow = !this.isShow
      } else {
        this.$emit('enterMarket', `/showcase?uin=${this.channelInfo.uin}&caseId=${this.caseInfo.caseId}&goodsId=${this.caseInfo.goodsInfo ? this.caseInfo.goodsInfo.id : ''}`)
      }
    }
  },
  watch: {
    open(newVal) {
      if (newVal) {
         setTimeout(() => {
          this.isClose = !newVal
         })
      } else {
          setTimeout(() => {
          this.isClose = !newVal
        }, 300)
      }
    },
    caseInfo:{
				immediate:true,
				deep:true,
				handler(newVal){
          if (newVal.goodsInfo.id){
            this.real_img = newVal.goodsInfo.real_img ? JSON.parse(JSON.stringify(newVal.goodsInfo.real_img)) : ''
            this.$nextTick(() => {
              this._initSwiper();
            });
          }
				}
			},

  }
}
</script>

<style lang="less" scoped>
.swiper-wrapper {
  transform: translate3d(0, 0, 0) !important;
}
.swiper-slide {
  transition: all 1.5s !important;
  position: absolute ;
  opacity: 0 !important;
  &:first-child {
    position: relative;
  }
}
.swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1 !important;
}
.swiper-slide-prev {
    transform: scale(1.1) !important;
}
.swiper-slide-next {
    transform: scale(1.1) !important;
}


.shop-link-box,
.shop-command-box {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.case-box {
   position: absolute;
   bottom: 0.4rem;
   transform: scale(0.9) translateX(-50%);
   font-size: .1rem;
   border-radius: 3px;
   overflow: hidden;
    .case {
     z-index: 1111;
     width: 1.2rem;
     height: .25rem;
     background: linear-gradient(90deg, #FF789A 0%, #FF366A 100%);
     border-radius: 3px;
     padding: 0.02rem 0.05rem;
     display: flex;
     justify-content: space-between;
     position: relative;
     align-items: center;
     .underway {
       color: #fff;
       font-size: .12rem;
       overflow:hidden;
       white-space:nowrap;
       text-overflow:ellipsis;
     }
     .icon {
       width: .15rem;
       height: .15rem;
       img {
         width: 100%;
         height: 100%;
       }
     }
   }
   .goods {
     width: 1.2rem;
     background-color: #fff;
     border-radius: 4px;
     font-weight: 800;
     font-size: 0.12rem;
     transition: all .3s;
     border: 1px solid rgba(0, 0, 0, 0.1);
     .image-box {
       position: relative;
         .image {
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #eef3ff;
            position: relative;
            height: 0;
            padding-top: 100%;
            background-position: center;
            background-size: cover;
          }
       .state {
         position: absolute;
         top: 0;
         left: 0;
         background-color: #FCE7E2;
         color: #E9355F;
         padding: .02rem;
         border-radius: 2px;
         transform: scale(0.8) translateX(-8%);
         height: .2rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         z-index: 2;
         .icon-box {
          margin: 0 0.02rem;
          display: inline-block;
          min-height: 12px;
          min-width: 12px;
          width: 0.1rem;
          height: 0.1rem;
          .loader {
            transform: rotate(-90deg) translateX(25%);
            height: 100%;
            width: 100%;
            margin: 0 0.03rem;
            .line {
              width: 0.05rem;
              height: 1px;
              margin-bottom: 4px;
              background-color: #E9355F;
              animation: expand 1s ease-in-out infinite;
              &:nth-child(2) {
                animation-delay: 180ms;
              }
              &:nth-child(3) {
                animation-delay: 360ms;
              }
              &:nth-child(4) {
                animation-delay: 540ms;
              }
              &:last-child {
                margin-bottom: 0px;
              }
              @keyframes expand {
                0% {
                    transform: scale(1);
                }
                25% {
                    transform: scale(2);
                }
              }
            }
          }
         }
         
       }
     }
     .name {
       font-size: 0.13rem;
       width: 100%;
       padding: 0 0.04rem;
       overflow:hidden;
       white-space:nowrap;
       text-overflow:ellipsis;
       margin: .07rem 0;
     }
     .price {
       color: #E9355F;
       margin: .07rem 0;
       padding: 0 0.04rem;
       display: flex;
       align-items: flex-end;
       font-size: .14rem;
       div {
         display: inline-block;
       }
       .small {
         transform: scale(0.8);
         transform-origin: 0 100% 0;
         padding-left: 0.02rem;
       }
     }
   }
}
      
</style>