<template>
  <div class="layout">
    <LayoutHeader class="layout-header" :show-back="true" :title="'\u200E'"></LayoutHeader>
    <div class="layout-context fixscroll">
      <LayoutScroll
        ref="pageScroll"
        class="cube-scroll-wrapper"
        @scroll-end="scrollEndHandler">
        <div class="slide">
          <cube-slide ref="slide" :data="imageList">
            <cube-slide-item v-for="(item, index) in imageList" :key="index">
              <a click="javascript:void 0" class="square-img-container">
                <square-img v-if="!item.initial" :src="item.image_url" :width="600" :height="600" />
                <square-img v-else :src="item.image_url" :width="274" :height="274" /> <!-- 利用缓存, productList使用的size -->
              </a>
            </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">&bull;</span>
              </div>
            </template>
          </cube-slide>
          <div class="qiugou" v-if="isQiugouEnabled" @click="qiugou"></div>
        </div>

        <div class="info-basic">
          <div class="info-price">
            <template v-if="productDetail.least_price == null">{{'\u200E'}}</template>
            <template v-else><i>¥</i>{{productDetail.least_price}}</template>
          </div>
          <div class="info-name"><div>{{productDetail.product_name}}</div></div>
        </div>
        <a class="banner" v-show="resource" @click.prevent="gotoNewPage">
          <img-size ref="resourceImg" :src="sizeImg(resource.src)"/>
        </a>
        <div class="info">
          <transition-group name="info-list" tag="div" class="info-list">
            <div class="info-list-item" transtion="fade" v-if="activity && activity.length !== 0" @click="showActivity" key="促销">
              <div class="info-list-name">促销</div>
              <div class="info-list-value info-promote">
                <span>{{activity[0].promotionTypeStr}}</span>
                <i class="cubeic-arrow"></i>
              </div>
            </div>
            <div class="info-list-item" v-for="desc in productDec" :key="desc.text">
              <div class="info-list-name">{{desc.text}}</div>
              <div class="info-list-value">{{desc.value}}</div>
            </div>
          </transition-group>
          <!-- 相关商品 -->
          <top-list ref="topList" v-if="topList && topList.length !== 0" :list="topList" @itemClick="gotoProduct" @allClick="gotoBrand" />
          <img class="ref-img" v-lazy="prdDetailTip"/>
        </div>

        <img class="ref-img"  v-lazy="prdDetailImage" />

        <div class="recommend" v-if="recommend"><h2>相关推荐</h2>
          <product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/>
        </div>
      </LayoutScroll>
      <div class="footer">
        <div class="fav">
          <div class="icon-fav" @click="_toggleFav">
            <i class="iconfont" :class="[isFav ? 'icon-star-fill': 'icon-star-outline']" />
          </div>
          收藏
        </div>
        <cube-button class="sell" @click="sell">出售</cube-button>
        <cube-button class="buy active" @click="buy">购买</cube-button>
      </div>
      <buy-sheet v-if="showBidSheet" @hide="onBidSheetHide" :productId="productId"/>
      <size-request-sheet v-if="showSizeRequestSheet" @hide="onSizeRequestHide" :productId="productId"/>
    </div>
    <activity-list-sheet v-if="showActivitySheet" :list="activity" @hide="onActivitySheetHide"/>
    <size-select-sheet v-if="showSizeSelectSheet"
                       :list="sizeList"
                       :product="productDetail"
                       :image-list="imageList"
                       :config="selectSizeConfig"
                       @hide="onSizeSelectSheetHide"
                       @select="onSelectTradeProduct"
                       @add="onRequestSize"/>
  </div>
</template>

<script>
import { Button, Slide, Popup } from 'cube-ui';
import { get } from 'lodash';
import { createNamespacedHelpers, mapGetters } from 'vuex';

import ImgSize from '../../components/img-size';
import { getImgUrl } from '../../common/utils';
import ProductList from '../list/components/productList';

import ActivityListSheet from './components/activity-list-sheet';
import prdDetailTip from '../../statics/image/product/prdDetailTip.png';
import prdDetailImage from '../../statics/image/product/prdDetailImage.png';
import SizeSelectSheet from './components/size-select-sheet';
import SizeRequestSheet from './components/size-request-sheet';
import BuySheet from './components/buy-sheet';
import TopList from './components/top-list';
import SquareImg from './components/square-img';
import stateShortCutsMixins from './mixins';

const { mapActions, mapState } = createNamespacedHelpers('product');

export default {
  name: 'ProductDetail',
  mixins: [stateShortCutsMixins],
  components: {
    SizeSelectSheet,
    ActivityListSheet,
    SizeRequestSheet,
    BuySheet,
    ImgSize,
    ProductList,
    TopList,
    SquareImg,
    'cube-button': Button,
    'cube-slide': Slide,
    'cube-slide-item': Slide.Item,
    'cube-popup': Popup,
  },
  props: {
    productId: {
      required: true,
    },
  },
  data() {
    return {
      prdDetailTip,
      prdDetailImage,

      showActivitySheet: false,

      showBidSheet: false,

      showSizeSelectSheet: false,
      showSizeRequestSheet: false,
      selectSizeConfig: {},

      /**
       * 商品详情页-推荐商品曝光时
       * XY_UFO_SHOW_EVENT
       * 1.P_NAME：页面名称，UFOProductDetail_LIST；
       * 2.P_PARAM：页面参数；
       * 3.I_INDEX：曝光顺序；
       * 4.PRD_SKN：商品id；
       */
      recommendYasParams: {
        P_NAME: 'UFOProductDetail_LIST',
      },
    };
  },
  computed: {
    ...mapGetters(['isQiugouEnabled']),
    ...mapState(['resourceContentCode']),
    productDec() {
      const goods = get(this.productDetail, 'goods_list[0]', {});

      return [
        {
          text: '颜色',
          value: goods.goods_name || '',
        }, {
          text: '品牌',
          value: this.productDetail.brand_name
        }, {
          text: '系列',
          value: this.productDetail.series_name
        }, {
          text: '发售时间',
          value: this.productDetail.sale_time
        }, {
          text: '发售价格',
          value: this.productDetail.offer_price
        }, {
          text: '货号',
          value: this.productDetail.product_code
        }
      ];
    },
    sizeList() {
      return get(this.productDetail, 'goods_list[0].size_list', null);
    },
    title() {
      return get(this.productDetail, 'product_name', '商品详情');
    },
  },
  mounted() {
    // if (this.isQiugouEnabled === null) {
    this.$store.dispatch('getSysConfigQiugou');
    // }

    // 在action-sheet显示控制与对应关闭方法
    this.actionSheetCloseMap = {
      showActivitySheet: 'onActivitySheetHide',
      showBidSheet: 'onBidSheetHide',
      showSizeSelectSheet: 'onSizeSelectSheetHide',
      showSizeRequestSheet: 'onSizeRequestHide',
    };
  },
  asyncData({store, router}) {
    const productId = parseInt(router.params.productId, 10);

    if (isNaN(productId)) {
      throw new Error('无效的商品ID');
    }

    /**
     * 接收初始化数据
     */
    const initialProductInfo = router.params.productInfo;

    if (initialProductInfo) {
      store.dispatch('product/setupInitialProductInfo', initialProductInfo);
    }

    return store.dispatch('product/fetchProductInfo', {productId});
  },
  activated() {
    if (this.$refs.pageScroll) {
      this.$refs.pageScroll.scrollTop = 0;
    }

    this.loadData(this.productId);
    this.refresh();

    if (this._resourceImgWatcher) {
      this._resourceImgWatcher();
    }

    if (this.resource && this.resource.url) {
      this.yasResourceVisible();
    } else {
      this._resourceImgWatcher = this.$watch(() => {
        return this.resource && this.resource.url;
      }, (url) => {
        if (url) {
          this._resourceImgWatcher && this._resourceImgWatcher();
          this.yasResourceVisible();
        }
      }, {
        immediate: true,
      });
    }

    // yas
    /**
     * 商品详情页打开时
     * XY_UFO_PRD_DT_INFO
     * 1.FP_NAME：来源页面名称；eg：XY_UFOSearchList，XY_UFOSeriesList，XY_UFOBrandList、XY_UFOProductPoolList、UFOProductDetail_LIST等；
     * 2.FP_PARAM：页面参数；搜索关键词，系列ID，品牌ID，商品池ID；
     * 3.TAB_ID：tab切id，1-人气，2-价格，3-新品；
     * 4.TAB_NAME：tab切名称，人气，价格，新品；
     * 5.PRD_ID：商品id；
     */
    this.$store.dispatch('reportYas', {
      params: {
        appop: 'XY_UFO_PRD_DT_INFO',
        param: {
          FP_NAME: `XY_${this.$route.name}`,
          FP_PARAM: this.productId,
          PRD_ID: this.productId,
          ...this.$route.params.yasParams
        },
      }
    });
  },
  deactivated() {
    if (this._resourceImgWatcher) {
      this._resourceImgWatcher();
      this._resourceImgWatcher = null;
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (this.historyBackGuard() === false) {
      return next(false);
    }

    next();
  },
  beforeRouteLeave(to, from, next) {
    if (this.historyBackGuard() === false) {
      return next(false);
    }

    next();
  },
  methods: {
    ...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'setupInitialProductInfo',
      'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
    historyBackGuard() {
      for (let key of Object.keys(this.actionSheetCloseMap)) {
        if (this[key]) {
          this[this.actionSheetCloseMap[key]]();
          return false;
        }
      }

      return true;
    },
    refresh() {
      this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh();
    },
    scrollEndHandler({y}) {
      const scrollTop = Math.abs(y);
      const pageScrollHeight = this.$refs.pageScroll.$el.offsetHeight;

      // 相关商品
      if (!this._topListYas && this.$refs.topList) {
        if (this._topListTop === undefined) {
          this._topListTop = this.$refs.topList.$el.offsetTop;
        }

        if (scrollTop < this._topListTop && (scrollTop + pageScrollHeight) > this._topListTop) {
          const DATA = this.topList.slice(0, 3).map((value, i) => {
            return {...this.recommendYasParams, I_INDEX: i, PRD_ID: value.id, PRD_SKN: value.id};
          });

          this.$store.dispatch('reportYas', {
            params: {
              param: {DATA},
              appop: 'XY_UFO_SHOW_EVENT'
            }
          });
          this._topListYas = true;
        }
      }

      // 推荐商品
      if (this._productItemHeight === undefined) {
        let item = document.querySelector('.product-list-item');

        if (item) {
          this._productItemHeight = item.offsetHeight;
        }
      }

      if (this.$refs.recommendList) {
        const listTop = this.$refs.recommendList.$el.offsetTop;
        const productListScrollTop = scrollTop + pageScrollHeight - listTop - this._productItemHeight;

        if (productListScrollTop > 0) {
          this.$refs.recommendList.yasShowEvent(productListScrollTop);
        }
      }
    },
    yasResourceVisible() {
      /**
       * 商品详情页中的资源位曝光
       * XY_UFO_SHOW_EVENT
       * 1.P_NAME：当前页面名称，XY_UFOProductDetail；
       * 2.P_PARAM：当前页面资源位code；
       * 3.PRD_ID：商品ID；
       * 4.ACTION_URL：资源位跳转URL；
       */
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_SHOW_EVENT',
          param: {
            P_NAME: 'XY_UFOProductDetail',
            P_PARAM: this.resourceContentCode,
            PRD_ID: this.productId,
            ACTION_URL: this.resource.url,
          },
        }
      });
      if (this._resourceImgWatcher) {
        this._resourceImgWatcher();
        this._resourceImgWatcher = null;
      }
    },
    sizeImg(src, width = 360, height = 72) {
      if (src) {
        return getImgUrl(src, width, height);
      }
    },

    // 加载商品详情数据
    loadData(productId = this.productId) {
      this.fetchBrandTop({productId});
      this.fetchFav({productId});
    },

    /**
     * 登录|认证
     * needCert: 需要实名认证
     */
    async auth(needCert = false) {
      if (needCert) {
        const authInfo = await this.$yoho.authRealName();

        if (authInfo && authInfo.code === 403) { // 此时已经异步登录，当前页面取消业务处理
          return;
        }

        return authInfo;
      }

      return this.$yoho.auth();
    },

    // toggle收藏
    async _toggleFav() {
      const userInfo = await this.auth();

      if (!userInfo) {
        return;
      }

      const isFav = !this.isFav;

      this.toggleFav({productId: this.productId, isFav}).then(() => {
        const txt = isFav ? '收藏成功' : '取消收藏成功';

        this.$createToast({
          txt,
          type: 'txt',
        }).show();
      });
    },

    // 进入商品详情
    gotoProduct(product) {
      this.$router.push({
        name: this.$route.name,
        params: {
          productId: product.id,
          productInfo: product,
        },
      });
    },

    // 打开产品品牌或系列TOP
    gotoBrand() {
      this.$router.push({
        name: 'BrandProductList',
        params: {
          productId: this.productId,
        },
      });
    },

    // 显示活动列表
    showActivity() {
      this.showActivitySheet = true;
    },

    // 关闭活动列表
    onActivitySheetHide() {
      this.showActivitySheet = false;
    },

    // 选择尺寸
    onSizeSelectSheetHide() {
      this.showSizeSelectSheet = false;
    },

    // 购买
    buy() {
      this.resetSelectedSize();
      this.selectSizeConfig = {
        dest: 'OrderBuyConfirm',
        type: 'buy',
        title: '购买',
      };
      this.showSizeSelectSheet = true;
    },

    // 出售
    async sell() {
      // 出售需要实名认证
      const userInfo = await this.auth(true);

      if (!userInfo) {
        return;
      }

      this.resetSelectedSize();
      this.selectSizeConfig = {
        dest: 'OrderSellConfirm',
        type: 'sell',
        title: '出售',
      };
      this.showSizeSelectSheet = true;
    },

    // 选择出售或购买
    async onSelectTradeProduct(tradeProduct) {
      /**
       * 数据埋点
       * 商品详情页点击出售/购买/求购按钮
       * event: XY_UFO_PRD_DT_SALE_C
       * params: 1.TAB_ID：1-出售，2-购买，3-求购；
       *         2.PRD_ID：商品ID；
       */
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
          param: {
            TAB_ID: this.selectSizeConfig.type === 'buy' ? 2 : 1,
            PRD_ID: tradeProduct.productId
          },
        }
      });
      if (this.selectSizeConfig.type === 'buy') {
        try {
          const info = await this.payment({
            skup: tradeProduct.skup,
          });

          /**
           * {
           *  "message": "您有未支付的订单,支付或取消后可提交新的订单",
           *  "code": 512
           * }
           */
          if (info.code === 512) {
            return this.$createDialog({
              type: 'confirm',
              content: info.message,
              confirmBtn: {
                text: '查看订单',
                active: true,
                disabled: false,
                href: 'javascript:;'
              },
              cancelBtn: {
                text: '取消',
                active: false,
                disabled: false,
                href: 'javascript:;'
              },
              onConfirm: () => {
                this.showSizeSelectSheet = false;

                this.$router.push({
                  name: 'OrderList',
                  params: {
                    owner: this.selectSizeConfig.type,
                    status: 2, // 待付款
                    isRefetch: true
                  },
                });
              },
            }).show();
          }
        } catch (e) {
          // e
        }
      }

      this.showSizeSelectSheet = false;

      this.$router.push({
        name: this.selectSizeConfig.dest,
        query: tradeProduct
      });
    },

    // 添加尺寸
    onRequestSize() {
      this.showSizeSelectSheet = false;
      this.showSizeRequestSheet = true;
    },

    // 添加尺寸关闭
    onSizeRequestHide() {
      this.showSizeRequestSheet = false;
    },

    // 打开求购列表
    qiugou() {
      this.showBidSheet = true;
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_DT_SALE_C',
          param: {
            TAB_ID: 3,
            PRD_ID: this.productId,
          },
        }
      });
    },

    // 购买
    onBidSheetHide() {
      this.showBidSheet = false;
    },

    // 资源位
    gotoNewPage() {
      if (!this.resource || !this.resource.url) {
        return;
      }

      const url = this.resource.url;

      /**
       * 商品详情页中的资源位点击
       * XY_UFO_GDS_DT_BANNER_C
       * 1.PRD_ID：商品ID
       * 2.ACTION_URL：跳转的URL
       */
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_GDS_DT_BANNER_C',
          param: {
            PRD_ID: this.productId,
            ACTION_URL: url,
          },
        }
      });
      this.$xianyu.goXianyuNewPage({url});
    },
  },
};
</script>

<style lang="scss" scoped>
  @import "./product-detail";

  .cube-btn {
    border-radius: 0;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 300ms linear;
  }

  .icon-fav {
    box-shadow: none;
    background: none;
  }

  .slide {
    height: 520px;

    .square-img-container {
      display: block;
      width: 520px;
      height: 520px;
      margin: 0 auto;
    }

    /deep/ .cube-slide-dots {
      margin-bottom: -2px;
    }

    .dot-wrap {
      padding-bottom: 10px;
    }

    .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);
      }
    }

    .qiugou {
      position: absolute;
      top: 0;
      right: 58px;
      width: 58px;
      height: 48px;
      background: top left url("~statics/image/product/qiugou@3x.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .cube-slide-item {
    img {
      margin: 0 auto;
    }
  }

  .banner {
    display: block;
    height: 132px;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .banner-title {
    /* font-family: PingFang-SC-Light; */
    border: 1px solid #000;
    font-size: 30px;
    line-height: 100px;
    text-align: center;
  }

  .info-promote {
    display: flex;
    align-items: center;
    justify-content: right;

    span {
      display: inline-block;
      border: 1px solid #feabac;
      color: #d0021b;
      line-height: 1.8;
      margin-right: 15px;
      font-size: 0.8em;
      padding: 0 1.2em;
    }

    i {
      color: #999;
    }
  }

  .info-basic {
    padding: 46px 40px 30px;

    .info-price {
      color: #d0021b;
      font-size: 48px;

      @include num;

      font-weight: bold;
      line-height: 56px;
      height: 56px;
      text-align: center;
      letter-spacing: 0;

      i {
        font-style: normal;
        font-size: 36px;
      }
    }

    .info-name {
      margin-top: 14px;
      color: #999;
      text-align: center;
      height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      div {
        font-size: 28px;
        font-weight: bold;
        line-height: 32px;
        max-height: 64px;
        white-space: normal;
        word-break: break-all;
      }
    }
  }

  .info {
    padding: 0 40px;

    &-list {
      line-height: 104px; // PM: 60 -> 52
      white-space: nowrap;

      &-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        font-size: 28px;
        box-sizing: border-box;
      }

      &-name {
        /* font-family: PingFang-SC-Regular; */
        color: #999;
      }

      &-value {
        /* font-family: SFProText-Medium; */
        color: #000;
        letter-spacing: 0;
        font-weight: bold;
      }
    }

    .ref-img {
      margin-top: 40px;
      width: 670px;
      height: 100px;
    }
  }

  .ref-img {
    display: block;
    width: 750px;
    height: 628px;
  }

  .recommend {
    padding-top: 20px;
    background-color: #f2f2f2;
    background-image: linear-gradient(180deg, #fefefe 0%, #f2f2f2 320px);

    h2 {
      font-size: 36px;
      font-weight: bold;
      line-height: 50px;
      padding: 20px 0 0;
      margin: 0 40px;
    }
  }

  .layout-context {
    display: flex;
    flex-direction: column;
  }

  .cube-scroll-wrapper {
    flex: 1 0 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .footer {
    display: flex;
    text-align: center;
    padding: 16px 30px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);

    @include cube-ufo-btn;

    .fav {
      margin-right: auto;
      text-align: center;
      width: 3em;
      color: #888;
      font-size: 22px;

      .icon-star-fill,
      .icon-star-outline {
        font-size: 42px;
      }

      .icon-star-outline {
        color: #b2b2b2;
      }

      .icon-star-fill {
        color: #002b47;
      }
    }

    .sell,
    .buy {
      flex: 0 0 6em;
    }
  }

  .info-list-item {
    transition: all 0.1s;
  }

  .info-list-enter,
  .info-list-leave-to {
    opacity: 0;
    transform: translateX(-30%);
  }

  .info-list-leave-active {
    position: absolute;
  }
</style>