<!--
 * @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="商品详情" class="second-detail-wrap">
    <LayoutScroll
      ref="pageScroll"
      @scroll-end="false"
      :loading="{hide: true, noMore: true}">
        <cube-slide ref="slide" v-if="info.imageList" :options="slideOptions" :data="info.imageList">
          <cube-slide-item v-for="(item, index) in info.imageList" :key="index">
            <image-format
              :lazy="false"
              alt="图片加载失败"
              :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}} <span>全新¥{{info.newProductPrice}}</span><span class="red"> 省¥{{info.savePrice}}</span></p>
            <p class="size">{{info.sizeName}}</p>
          </div>
          <p class="name">{{info.productName}} {{info.colorName}} {{info.productCode}}</p>
        </div>
        <div class="other-info">
          <p>{{info.gender}} {{info.brandName}}</p>
          <p>状况：{{ info.shoeQualityDesc }}</p>
          <p>鞋盒：{{ info.shoeBoxDesc }}</p>
          <p v-show="info.soldTime">售出时间：{{ 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>
    </LayoutScroll>
    <div class="fixed-footer">
      <cube-button v-if="info.status==1" class="active" @click="buy">购买 <span class="price">¥{{info.price}}</span></cube-button>
      <cube-button v-else class="disable">商品已售出</cube-button>
    </div>
  </LayoutApp>
</template>

<script>
import { Button, Slide } from 'cube-ui';
import { mapState, mapActions } from 'vuex'
import ImgSize from '@/components/img-size';
// 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,
    yasParams: {
      TAB_ID: '',
      TAB_NAME: '',
      PRD_ID: '',
    }
  },
  // 服务端渲染函数
  asyncData({store, router}) {
    return store.dispatch('second/fetchDetailById', { skup: router.params.skup });
  },
  data(){
    return {
      slideOptions: {
        eventPassthrough: 'vertical'
      },

      // info
    }
  },
  created() {},
  mounted() {},
  activated() {
    console.log(this.info);

    this.fetchDetailById({ skup: this.skup })
    this.refresh();

    /*
      [二手商品详情页打开时]
      1.FP_NAME：来源页面名称；eg：XY_UFO...
      2.FP_PARAM：来源页面参数；搜索关键词，系列ID，品牌ID，商品池ID；
      3.TAB_ID：tab切id，1-人气，2-价格，3-新品；
      4.TAB_NAME：tab切名称，人气，价格，新品；
      5.PRD_ID：商品id；
      6.PRD_TYPE：1-二手，2-全新瑕疵；
    */
    // let { TAB_ID, TAB_NAME, PRD_ID } = this.yasParams;

    this.$store.dispatch('reportYas', {
      params: {
        appop: 'XY_UFO_PRD_DT_INFO',
        param:{
          FP_NAME: `XY_UFO${this.$route.name}`,
          FP_PARAM: this.skup,
          TAB_ID: this.yasParams?.TAB_ID,
          TAB_NAME: this.yasParams?.TAB_NAME,
          PRD_ID: this.yasParams?.PRD_ID,
          PRD_TYPE: this.info.sechondHandTypeName == '全新瑕疵' ? 2 :1
        }
      }
    });
  },
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {},
  methods: {
    ...mapActions('second',['fetchDetailById']),

    refresh() {
      this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh();
    },

    // 购买
    buy() {
      /*
        新增二手商品订单：二手商品详情页-购买按钮点击
        1.P_NAME：页面名称；
        2.PRD_ID：商品ID；
        3.PRD_SKU：商品SKU；
        4.PRD_SIZE：尺码；
        5.ORD_TYPE：订单类型；1-出售，2-购买，3-求购，4-变现；5-二手；6-全新瑕疵；
      */
      const { sizeName, describeInfo } = this.info;
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
          param:{
            P_NAME: `XY_UFO${this.$route.name}`,
            PRD_ID: this.yasParams?.pid,
            PRD_SIZE: this.info.sizeName,
            ORD_TYPE: this.info.sechondHandTypeName == '全新瑕疵' ? 2 :1
          }
        }
      });

      this.$router.push({
        name: 'OrderBuyConfirm',
        query: {
          type: 'second',
          skup: this.skup
        }
      });

      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_SECOND_PRD_DT_BUY_C',
          param: {
            PRD_ID: this.info.productId,
            PRD_SKU: this.skup,
            PRD_SIZE: this.info.size_name,
            ORD_TYPE: this.info.sechondHandTypeName == '全新瑕疵' ? 2 :1
          },
        },
      });
    }
  },
  computed: {
    ...mapState('second', ['info'])
  },
  watch: {},
  components: {
    ImgSize,

    '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 {
  display: flex;
}
/deep/ .layout-context {
  margin-bottom: 130px;
}

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

/* banner */
.cube-slide {
  height: 396px;
  max-height: 396px;
  /deep/ .cube-slide-dots {
    padding: 0;
  }
  .cube-slide-item {
    img {
      display: flex;
      height: 375px;
      min-height: 375px;
      max-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;
    }
    & > span {
      font-size: 24px;
      color: #000;
      &.red {
        color: #D0021B;
      }
    }
  }
  .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 0;
  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: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 112px;
  padding: 16px 30px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
  text-align: center;
  background: #fff;
  z-index: 5;
  @include cube-ufo-btn;

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

</style>

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