<!--
 * @description: 二手商品详情
 * @fileName: detail.vue
 * @author: huzhiming
 * @date: 2019-11-21 10:28:52
 * @后台人员:
 * @version: v1.0.0
 * @path: 页面访问路径及参数说明 http://m.yohobuy.com:6001/xianyu/second/product/商品id.html
!-->
<template>
  <LayoutApp :show-back="true" title="商品详情">
    <LayoutScroll
      ref="pageScroll"
      class="second-detail-wrap"
      @scroll-end="''">
        <cube-slide v-if="info.imageList" :options="slideOptions" :data="info.imageList" :loop='false'>
          <cube-slide-item v-for="(item, index) in info.imageList" :key="index">
            <img-size :src="item" :width="375" :height="375" />
            <div class="pole-dot-area"></div>
          </cube-slide-item>
          <template slot="dots" slot-scope="props">
            <div class="dot-wrap">
              <span class="cube-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots" :key="item">&bull;</span>
            </div>
          </template>
        </cube-slide>
        <div class="primary">
          <div>
            <p class="price">¥{{info.price}}</p>
            <p class="size">{{info.sizeName}}</p>
          </div>
          <p class="name">{{info.productName}} {{info.colorName}} {{info.describeInfo}}</p>
        </div>
        <div class="other-info">
          <p>{{info.gender}} {{info.brandName}}</p>
          <p>状况：{{ info.shoeQualityDesc }}</p>
          <p>鞋盒：{{ info.shoeBoxDesc }}</p>
          <p>售出时间：{{ info.soldTime }}</p>
          <p>{{ info.describeInfo }}</p>
        </div>
        <div class="extra-card" @click="$router.push({name: 'ProductDetail', params: { productId: info.productId } })">
          <img-size class='image' :src="info.image" :width="70" :height="70" />
          <div class="middle" @click="'productId'">
            <p class="name ellipsis">{{ info.productName }}</p>
            <p class="number ellipsis">货号 {{ info.productCode }}</p>
          </div>
          <span class="iconfont iconright"></span>
        </div>
        <div class="fixed-footer">
          <cube-button class="buy active" @click="buy">购买 <span class="price">¥1209.00</span></cube-button>
        </div>
    </LayoutScroll>
    <Filtrate ref="filtrate" :yasParams="{P_NAME: 'XY_UFOSearchList', TYPE_ID: 1}"></Filtrate>
  </LayoutApp>
</template>

<script>
import { Button, Slide } from 'cube-ui';
import { mapState } from 'vuex'

import ImgSize from '@/components/img-size';
import Filtrate from './components/filter-list';


// const info = {
//     "brandName": "NIKE",
//     "colorName": "黑色",
//     "describeInfo": "ggAir Jordan 4 Retro Motorsport Away BG AJ4 赛车白40839787-002g",
//     "gender": "男款",
//     "image": "",
//     "imageList": [
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/01f5f36a2ce3e935b7481a658466c574af.jpg",
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/0150f24aed5fe9f26df7516c9479ee39c8.jpg",
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/01f247d64097dfadd5d510621e9d69abc3.jpg",
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/01e758d028aeb48d40e656a708488844dc.jpg",
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/017d63f422ee227a6fa519d44d7aa27f7f.jpg",
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/01a15766233785ea70f2fda57e1e906ce4.jpg",
//         "http://img11.static.yhbimg.com/goodsimg/2019/11/07/17/01701885a5ca6b7cf8cae2fca6c0e36795.jpg"
//     ],
//     "price": "99.00",
//     "productCode": "TB-011-A-BLK-GLD-49",
//     "productId": 10014795,
//     "productName": "DXF测试商品",
//     "sechondHandTypeName": "二手",
//     "shoeBoxDesc": "完好",
//     "shoeQualityDesc": "该商品没有明显瑕疵",
//     "sizeName": "37 2/3码",
//     "soldTime": "2019.03.12",
//     "status": 1
// }


export default {
  name: 'UfoSecondProductDetail',
  mixins: [],
  props: {
    skup: Number
  },
  // 服务端渲染函数
  asyncData({store, router}) {
    store.dispatch('second/fetchFilterData', { skup: router.params.skup });
    return store.dispatch('second/fetchDetailById', { skup: router.params.skup });
  },
  data(){
    return {
      slideOptions: {
        eventPassthrough: 'vertical'
      },

      // info
    }
  },
  created() {},
  mounted() {
    console.log('mounted', this.info);
  },
  activated() {},
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {},
  methods: {
    // 购买
    buy() {
      this.$router.push({
        name: 'OrderBuyConfirm',
        query: {
          type: 'second',
          skup: this.skup
        }
      });
    }
  },
  computed: {
    ...mapState('second', ['info'])
  },
  watch: {},
  components: {
    ImgSize,
    Filtrate,

    'cube-button': Button,
    'cube-slide': Slide,
    'cube-slide-item': Slide.Item,
  }
};
</script>

/* 定义局部样式,添加外围容器，scss嵌套尽量不要超过三层，会影响查找器性能 */
<style rel='stylesheet/scss' lang='scss' scoped>
@import '@/pages/product/product-detail.scss';
.second-detail-wrap {

}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

/* banner */
.cube-slide {
  /deep/ .cube-slide-dots {
    padding: 0;
  }
  .cube-slide-item {
    img {
      display: flex;
      height: 375px;
      margin: 0 auto;
      max-width: max-content;
    }
  }
  .pole-dot-area {
    width: inherit;
    height: 21px;
  }
  .cube-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 5px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    &.active {
      transform-origin: 50% 50%;
      transform: scale(1.5);
      background: rgba(0, 0, 0, 1);
    }
  }
}

// product information display
.primary {
  margin: 0 40px 40px;
  padding: 9px 0 0 0;
  border-bottom: 1px solid #eee;
  & > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
  }
  .price {
    font-size: 48px;
    line-height: 56px;
    color: #D0021B;
    &::first-letter {
      font-size: 36px;
      letter-spacing: 2px;
    }
  }
  .size {
    font-size: 32px;
    color: #000;
    line-height: 38px;
  }
  .name {
    margin-bottom: 16px;
    font-size: 28px;
    color: #999;
  }
}

// other-info
.other-info {
  margin: 0 40px 40px;
  color: #000;
  font-size: 28px;
  & > p:not(:last-child) {
    margin-bottom: 5px;
  }
}

// extra-card
.extra-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 40px 40px;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  .image {
    min-width: 140px;
    min-height: 140px;
    max-width: 140px;
    max-height: 140px;
    margin: 0 20px;
  }
  .middle {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 420px;
    height: 82px;
    font-size: 28px;
    line-height:  32px;
    .number {
      font-size: 24px;
      color: #999;
      line-height: 28px;
    }
  }
  .iconfont {
    font-size: 48px;
    color: #999;
    margin-right: 20px;
  }
}

// fixed-footer
.fixed-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  height: 120px;
  padding: 16px 30px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
  text-align: center;
  background: #fff;
  @include cube-ufo-btn;

  .price {
    font-size: 28px;
    line-height: 32px;
    color: #65AB85;
    &::first-letter {
      font-size: 20px;
      letter-spacing: 2px;
    }
  }
}

</style>

/* 定义全局样式,添加外围容器，避免覆盖全局样式, 若不需要，请删除 */
<style rel='stylesheet/scss' lang='scss'>
.second-detail-wrap {}
</style>