<template>
  <div class="layout">
    <LayoutHeader class="layout-header" :show-back="true" title="商品详情"></LayoutHeader>
    <div class="layout-context fixscroll">
      <LayoutScroll
        ref="pageScroll"
        class="cube-scroll-wrapper"
        @scroll-end="scrollEndHandler">
        <div class="slide">
          <cube-slide ref="slide" :options="slideOptions" :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" :key="item">&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" ref="resourceImg" v-if="resource.src" @click.prevent="gotoNewPage">
          <img-size :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" @click="_toggleFav"><i class="iconfont" :class="[isFav ? 'icon-star-fill': 'icon-star-outline']" /><span>收藏</span></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';
import trackingMixins from './tracking-mixins';

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

export default {
  name: 'ProductDetail',
  mixins: [stateShortCutsMixins, trackingMixins],
  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 {
      slideOptions: {
        eventPassthrough: 'vertical',
      },
      prdDetailTip,
      prdDetailImage,

      showActivitySheet: false,

      showBidSheet: false,

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

      /**
       * 商品详情页-推荐商品曝光时
       * XY_UFO_SHOW_EVENT
       * 1.P_NAME：页面名称，XY_UFOProductDetail；
       * 2.P_PARAM：页面参数；
       * 3.I_INDEX：曝光顺序；
       * 4.PRD_SKN：商品id；
       * 5.POS_ID: 1：相关商品，2： 推荐推荐，3： 相关商品列表页面
       */
      recommendYasParams: {
        P_NAME: 'XY_UFOProductDetail',
        P_PARAM: this.productId,
        POS_ID: 2,
      },
      recommendYasIndex: 0, // 推荐商品爆光顺序
    };
  },
  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() {
    this.$store.dispatch('getSysConfigQiugou');

    // 在action-sheet显示控制与对应关闭方法
    this.actionSheetCloseMap = {
      showActivitySheet: 'onActivitySheetHide',
      showBidSheet: 'onBidSheetHide',
      showSizeSelectSheet: 'onSizeSelectSheetHide',
      showSizeRequestSheet: 'onSizeRequestHide',
    };

    // create watcher for list data
    this.watchList = [];
    ['resource.url', 'topList', 'recommend'].forEach(key => {
      this.watchList.push(this.$watch(key, val => {
        if (val) {
          this.listDataDirty = true;
        }
      }));
    });
  },
  beforeDestroy() {
    if (this.watchList) {
      this.watchList.forEach(item => {
        item && item();
      });
      this.watchList = null;
    }
  },
  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.yasResourceAvailable();
    } else {
      this._resourceImgWatcher = this.$watch(() => {
        return this.resource && this.resource.url;
      }, (url) => {
        if (url) {
          this._resourceImgWatcher && this._resourceImgWatcher();
          this.yasResourceAvailable();
        }
      });
    }

    // 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；
     */
    let param = {
      P_NAME: `XY_UFO${this.$route.name}`,
      P_PARAM: this.productId,
      PRD_ID: this.productId,
    };

    const yasParmas = this.$route.params.yasParams;

    if (yasParmas) {
      if (yasParmas.P_NAME) {
        yasParmas.FP_NAME = yasParmas.P_NAME
      }
      if (yasParmas.P_PARAM) {
        yasParmas.FP_PARAM = yasParmas.P_PARAM
      }
      param = {...yasParmas, ...param};
    }

    this.$store.dispatch('reportYas', {
      params: {
        appop: 'XY_UFO_PRD_DT_INFO',
        param,
      }
    });
    this.$nextTick(() => {
      /*
       * @ description: 配置打开闲鱼导航栏右上角分享按钮 && 配置分享信息 && 上报数据埋点
       * @ author: huzhiming
       * @ date: 2019-11-13 19:58:50
       * @ version: v1.0.0
      */
      this.settingShareHandler();
    });
  },
  deactivated() {
    if (this._resourceImgWatcher) {
      this._resourceImgWatcher();
      this._resourceImgWatcher = null;
    }

    this.$xianyu.closeNavRightItem(); // 触发 关闭导航右侧分享按钮
  },
  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();
    },
    collectTrackingInfo(viewInfo, force) {
      if (!this.yasTargets) {
        this.yasTargets = {};
      }

      // banner
      if (this.$refs.resourceImg && this.resource.url && (!this.yasTargets.banner || force)) {
        /**
         * 商品详情页中的资源位曝光
         * XY_UFO_SHOW_EVENT
         * 1.P_NAME：当前页面名称，XY_UFOProductDetail；
         * 2.P_PARAM：当前页面资源位code；
         * 3.PRD_ID：商品ID；
         * 4.ACTION_URL：资源位跳转URL；
         */
        this.yasTargets.banner = {
          el: {
            offsetTop: this.$refs.resourceImg.offsetTop,
            offsetHeight: this.$refs.resourceImg.offsetHeight,
          },
          yasParams: {
            P_NAME: 'XY_UFOProductDetail',
            P_PARAM: this.resourceContentCode,
            PRD_ID: this.productId,
            ACTION_URL: this.resource.url,
          }
        };
      }

      // 相关商品
      if (this.$refs.topList && this.topList && (!this.yasTargets.topList0 || force)) {
        const elInfo = {
          offsetTop: this.$refs.topList.$el.offsetTop,
          offsetHeight: this.$refs.topList.$el.offsetHeight,
        };

        /**
         * 1.P_NAME：页面名称，XY_UFOProductDetail；
         * 2.P_PARAM：页面参数；
         * 3.I_INDEX：曝光顺序；
         * 4.PRD_SKN：商品id
         * 5.POS_ID: 1：相关商品，2： 推荐推荐，3： 相关商品列表页面
         */
        this.topList.slice(0, 3).forEach((value, i) => {
          this.yasTargets[`topList${i}`] = {
            el: elInfo,
            yasParams: {...this.recommendYasParams, I_INDEX: i + 1, PRD_SKN: value.id, POS_ID: 1},
          };
        });
      }

      // 推荐商品
      if (this.$refs.recommendList && this.recommend && this.recommend.length > 0 && (!this.yasTargets.productItem0 || force)) {
        let productElList = document.querySelectorAll('.product-list-item');

        if (productElList && productElList.length > 0) {
          this.recommend.forEach((item, i) => {
            if (productElList[i] && item) {
              const id = `productItem${i}`;

              this.yasTargets[id] = {
                el: {
                  offsetTop: productElList[i].offsetTop,
                  offsetHeight: productElList[i].offsetHeight,
                },
                yasParams: {...this.recommendYasParams, I_INDEX: i + 1, PRD_SKN: item.id},
              };
            }
          });
        }
      }
    },
    yasResourceAvailable() {
      this.scrollEndHandler();
      if (this._resourceImgWatcher) {
        this._resourceImgWatcher();
        this._resourceImgWatcher = null;
      }
    },
    sizeImg(src, width = 720, height = 144) {
      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() {
      /**
       * 数据埋点
       * 商品详情页点击出售/购买/求购按钮
       * 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_SALE_C',
          param: {
            TAB_ID: 2,
            PRD_ID: this.productId
          },
        }
      });
      this.resetSelectedSize();
      this.selectSizeConfig = {
        dest: 'OrderBuyConfirm',
        type: 'buy',
        title: '购买',
      };
      this.showSizeSelectSheet = true;
    },

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

      if (!userInfo) {
        return;
      }

      /**
       * 数据埋点
       * 商品详情页点击出售/购买/求购按钮
       * 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_SALE_C',
          param: {
            TAB_ID: 1,
            PRD_ID: this.productId
          },
        }
      });
      this.resetSelectedSize();
      this.selectSizeConfig = {
        dest: 'OrderSellConfirm',
        type: 'sell',
        title: '出售',
      };
      this.showSizeSelectSheet = true;
    },

    // 选择出售或购买
    async onSelectTradeProduct(tradeProduct) {
      /**
       * 数据埋点
       * 购买确认订单
       * 购买-选择尺码生成订单
       * 商品详情页-选择尺码确认后上报
       * 商品详情页点击出售/购买/求购按钮
       * event: XY_UFO_PRD_DT_BUY_SEL_C
       * 1.PRD_ID：商品ID；
       * 2.PRD_SKU：商品SKU；
       * 3.PRD_SIZE：尺码；
       * 新增字段：
       * 4.ORD_TYPE：订单类型；1-出售，2-购买，3-求购，4-变现；
       */
      this.$store.dispatch('reportYas', {
        params: {
          appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
          param: {
            PRD_ID: tradeProduct.productId,
            PRD_SKU: tradeProduct.skup,
            PRD_SIZE: tradeProduct.size_id,
            ORD_TYPE: this.selectSizeConfig.type === 'buy' ? 2 : 1
          },
        }
      });
      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, // 待付款
                  },
                });
              },
            }).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;

      /**
       * 数据埋点
       * 商品详情页点击出售/购买/求购按钮
       * 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_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});
    },
    /*
     * @ description: 配置打开闲鱼导航栏右上角分享按钮 && 配置分享信息 && 上报数据埋点
     * @ author: huzhiming
     * @ date: 2019-11-13 20:00:55
     * @ version: v1.0.0
    */
    async settingShareHandler() {
      /*
       * @ description: [数据上报]@hooks: 分享链接进入pv，查看闲鱼淘口令，地址栏会附带shareUserId参数，目前淘口令查看事件未知，后期若知道淘口令打开事件可调整此数据埋点
       * @ author: huzhiming
       * @ date: 2019-11-13 20:36:00
       * @ version: v1.0.0
      */
      if ( get(this.$route,'query.shareUserId','') !='' ) {
        this.$store.dispatch('reportYas', {
          params: {
            appop: 'XY_SHARE_SUCCESS_L',
            param: {
              SHARE_TYPE: '淘口令',
              SHARE_URL: location.href
            }
          }
        });
      }

      let image = this.sizeImg(get(this.imageList,'[0].image_url',''),200,200),
          yasReportHandler = {
            // [数据上报]@hooks: 拉起分享弹窗触发
            XY_SHARE_PRODUCT: ()=>{
              this.$store.dispatch('reportYas', {
                params: {
                  appop: 'XY_SHARE_PRODUCT',
                  param: {
                    PRD_ID: this.productId,
                    SHARE_URL: location.href
                  }
                }
              });
            },
            // [数据上报]@hooks: 点击对应分享平台触发
            XY_SHARE_TYPE: (data) =>{
              this.$store.dispatch('reportYas', {
                params: {
                  appop: 'XY_SHARE_TYPE',
                  param: {
                    SHARE_TYPE: data.pluginKey,
                    SHARE_URL: location.href
                  }
                }
              });
            }
          }

      await this.$xianyu.setNavRightItem({
        shareType: 'activity', // 类型，默认activity
        image,
        url: `${location.href}?isNeedRefresh=false`, // 分享链接
        link: `${location.href}?isNeedRefresh=false`, // 和url保持
        title: `淘口令#${this.productDetail.product_name}`, // 分享标题
        text: '' // 分享描述
      }, yasReportHandler);
    }
  },
};
</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;
  }

  .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;
    min-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;

    button {
      height: 80px;
    }

    .fav {
      margin-right: auto;
      text-align: center;
      width: 48px;
      color: #888;
      line-height: 0;

      .icon-star-fill,
      .icon-star-outline {
        font-size: 48px;
        line-height: 48px;
      }

      span {
        display: inline-block;
        font-size: 22px;
        line-height: 32px;
      }

      .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>