<template>
  <action-sheet position="right" ref="popup"
                @hidden="onHidden"
                @hide="onHide"
                @shown="onShown"
                :panelStyle="{background: 'transparent', paddingLeft: '20%'}"
                :hasBorderRadius="false"
                :emulateMask="true"
                :full="true">
      <div class="buy-sheet">
        <a href="javascript:;" class="header" @click="gotoNewPage">求购<i class="iconfont iconquestion"></i></a>
        <div class="title">
          <div class="title-thumbnail">
            <square-img :src="imageUrl" :width="600" :height="600"/>
          </div>
          <div>选择尺码填写理想的价格发布求购</div>
          <div>{{productDetail.product_name}} {{goodsName}}</div>
        </div>
        <div class="size-list">
          <cube-scroll ref="scroll" :data="sizeViewList" class="size-list-scroll">
            <ul>
              <li class="size-item" v-for="(item, idx) in sizeViewList" :key="idx" @click="buy(item)">
                <div class="size"><span>{{item.name}}</span><span v-if="item.subName">{{item.subName}}</span></div>
                <div class="price">最高求购价 <span>¥{{item.price}}</span> <i class="cubeic-arrow"></i></div>
              </li>
            </ul>
          </cube-scroll>
        </div>
    </div>
  </action-sheet>
</template>

<script>
import { Scroll } from 'cube-ui';
import { get } from 'lodash';
import { createNamespacedHelpers, mapActions } from 'vuex';

import ActionSheet from './action-sheet';
import stateShortCutsMixins from '../mixins';
import SquareImg from './square-img';

const { mapActions: mapProductAction } = createNamespacedHelpers('product');

export default {
  name: 'BuySheet',
  props: {
    productId: Number,
  },
  mixins: [stateShortCutsMixins],
  components: {
    SquareImg,
    ActionSheet,
    'cube-scroll': Scroll,
  },
  computed: {
    sizeList() {
      return get(this.productDetail, 'goods_list[0].size_list', []);
    },
    sizeViewList() {
      return this.sizeList.map(info => {
        let price;

        if (info.bid_moster_price > 0) {
          price = `${info.bid_moster_price}`;
        } else {
          price = '-';
        }

        const name = info.size_name.split(/\s+/);

        return {
          size_id: info.size_id,
          name: name[0],
          subName: name[1],
          size_name: info.size_name,
          price,
          storage_id: info.storage_id,
          skup: info.skup,
          least_price: info.least_price,
          bid_moster_price: info.bid_moster_price,
        };
      });
    },
    imageUrl() {
      return get(this.productDetail, 'goods_list[0].image_list[0].image_url', '');
    },
    goodsName() {
      return get(this.productDetail, 'goods_list[0].goods_name', '');
    },
  },
  mounted() {
    this.$refs.popup.show();
  },
  methods: {
    ...mapActions('order/buyerAskOrder', [
      'BUYER_ASK_SET_PRODUCTINFO'
    ]),
    ...mapProductAction(['updateTradeInfo']),
    onHidden() {
      this.$emit('hidden');
    },
    onHide() {
      this.$emit('hide');
    },
    onShown() {
      // refresh list
      if (this.$refs.scroll) {
        this.$refs.scroll.refresh();
      }
    },
    buy(product) {
      this.$yoho.auth()
        .then((res) => {
          if (res) {
            this.hide();
            this.updateTradeInfo({
              productId: this.productDetail.product_id,
              sizeInfo: product,
            }).then((data) => {
              /**
               * 跳转到求购确认页面
               * data:
               *   productId: number
               *   sizeId: number
               *   storageId: number
               */
              this.$store.commit('order/buyerAskOrder/BUYER_ASK_SET_PRODUCTINFO', {
                bid_moster_price: get(product, 'bid_moster_price', ''),
                least_price: get(product, 'least_price', ''),
                sizeName: product.size_name,
                sizeId: get(data, 'sizeId', ''),
                colorName: get(this.productDetail, 'goods_list[0].color_name', ''),
                product_name: this.goodsName,
                productId: get(data, 'productId', ''),
                image: this.imageUrl,
                skup: product.skup,
              });

              /**
               * 数据埋点
               * 购买确认订单
               * 购买-选择尺码生成订单
               * 商品详情页-选择尺码确认后上报
               * 商品详情页点击出售/购买/求购按钮
               * 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: data.productId,
                    PRD_SKU: product.skup,
                    PRD_SIZE: product.size_id,
                    ORD_TYPE: 3,
                  },
                },
              });

              this.$router.push({
                name: 'buyerAskOrder',
                query: {
                  storageId: data.storageId || ''
                },
              });
            });
          }
        });
    },
    hide() {
      this.$refs.popup.hide();
    },
    gotoNewPage() {
      this.hide();
      this.$router.push({
        name: 'strategySub',
        params: {
          subName: 'qiugouExplain',
        },
      });
    }
  },
};
</script>

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

  .buy-sheet {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 40px;
    background: #fff;
  }

  .size-list {
    flex: 1;
    overflow: hidden;
    position: relative;

    &-scroll {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  .header {
    position: absolute;
    top: 0;
    right: 40px;
    line-height: 88px;
    font-size: 28px;
    color: #999;
    letter-spacing: 0;
    text-align: right;

    .iconfont {
      margin-left: 5px;
      font-size: inherit;
    }
  }

  .title-thumbnail {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: block;
  }

  .title {
    font-size: 24px;
    color: #999;
    letter-spacing: 0;
    text-align: center;
    padding-bottom: 28px;
  }

  .size-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
    line-height: 120px;
    border-bottom: 1px solid #eee;

    .size {
      display: flex;
      align-items: baseline;
      font-size: 40px;
      letter-spacing: 0;

      @include num;

      span:nth-child(2) {
        font-size: 0.8em;
        margin-left: 10px;
        display: inline-block;
      }
    }

    .price {
      display: flex;
      align-items: center;
      font-size: 24px;
      letter-spacing: 0;
      text-align: right;

      span {
        margin-left: 5px;

        @include num;
      }

      i {
        display: inline-block;
        margin-left: 5px;
        color: #888;
      }
    }

    &.disable {
      .size,
      .price {
        color: #999;
      }
    }
  }
</style>