<template>
  <action-sheet position="right" ref="popup"
                @hidden="onHidden"
                @shown="onShown"
                :panelStyle="{background: 'transparent', paddingLeft: '20%'}"
                :hasBorderRadius="false"
                :emulateMask="true">
      <div class="buy-sheet">
        <a class="header" href="https://activity.yoho.cn/feature/6761.html?share_id=9467&title=UFO求购功能说明">求购<i class="cubeic-question"></i></a>
        <div class="title">
          <div class="title-thumbnail">
            <square-img :src="imageUrl" :width="300" :height="300"/>
          </div>
          <div>选择尺码填写理想的价格发布求购</div>
          <div>{{productDetail.product_name}} {{goodsName}}</div>
        </div>
        <div class="size-list">
          <cube-scroll ref="scroll" :data="sizeViewList">
            <ul>
              <li :class="['size-item', item.available ? '': 'disable']" 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">最高求购价 ¥{{item.price}} <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],
          price,
          storage_id: info.storage_id,
          available: info.storage_num > 0 && price !== '-',
          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');
    },
    onShown() {
      // refresh list
      if (this.$refs.scroll) {
        this.$refs.scroll.refresh();
      }
    },
    buy(product) {
      this.$yoho.auth()
        .then(() => {
          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.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,
            })
            this.$router.push({
              name: 'buyerAskOrder',
              query: {
                storageId: data.storageId || ''
              },
            });
          });
        })

    },
    hide() {
      this.$refs.popup.hide();
    },
  },
};
</script>

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

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

  .size-list {
    flex: 1;
    overflow: hidden;
  }

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

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

      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;

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

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