<template>
  <LayoutApp class="ufo-font" :class="classes">
    <ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" :pull-down-refresh="true" @pullingUp="onPullingUp" @pullingDown="onPullingDown">
      <div class="order-page">
        <div class="title">{{productInfo.statuStr}}</div>
        <div class="product">
          <ImgSize class="pro-img" :src="productInfo.goodsImg"></ImgSize>
          <div class="pro-info">
            <p class="pro-name">{{productInfo.productName}}</p>
            <p class="stock-info">{{productInfo.sizeNum}}个尺码，{{productInfo.storageNum}}个商品库存</p>
          </div>
        </div>
        <div class="arrival">
          <p class="arrival-time"><i class="iconfont icon-info"></i><span>尺码列表左滑选择 不卖了 ，下架当前尺码商品</span></p>
        </div>
        <ProductList :skcs="sizes"></ProductList>
      </div>
    </ScrollView>
  </LayoutApp>
</template>

<script>
import ImgSize from 'components/img-size';
import {Button} from 'cube-ui';
import ScrollView from 'components/scroll-view';
import ProductList from './components/product-list';
import Vue from 'vue';
import {Toast} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';

import {Style} from 'cube-ui';

Vue.use(Toast);

const {mapState} = createNamespacedHelpers('ufo/order');

export default {
  name: 'OrderPage',
  data() {
    return {
      tick: 1,
      classes: {},
      modalLoad: false,
      showModalPrice: false,
      showModalUnstock: false,
    };
  },
  computed: {
    ...mapState(['orderInfo']),
    productInfo() {
      return this.orderInfo.productInfo || {};
    },
    sizes() {
      return this.orderInfo.data || [];
    }
  },
  asyncData({store, router}) {
    return store.dispatch('ufo/order/fetchProduct', {orderId: router.params.orderId});
  },
  methods: {
    onPullingUp() {
      setTimeout(() => {
        this.$refs.scroll.forceUpdate();
      }, 500);
    },
    onPullingDown() {
      setTimeout(() => {
        this.$refs.scroll.forceUpdate();
      }, 500);
    },
    onClick() {
      this.showModalUnstock = true;
    },
  },
  components: {Button, ScrollView, ProductList, ImgSize}
};
</script>

<style lang="scss" scoped>
.order-page {
  & > .title {
    font-size: 82px;
    font-weight: bold;
    padding-top: 24px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .product {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    height: 192px;
    display: flex;

    .pro-img {
      width: 192px;
    }

    .pro-info {
      overflow: hidden;
      flex: 1;
      padding-left: 40px;
      padding-top: 62px;
    }

    .pro-name {
      font-weight: bold;
      color: #999;
      font-size: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .stock-info {
      color: #000;
      margin-top: 24px;
    }
  }

  .arrival {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
    width: 100%;

    .arrival-time {
      height: 56px;
      color: #999;
      font-size: 24px;
      padding-left: 14px;
      padding-right: 14px;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;

      i {
        font-size: 30px;
        margin-right: 10px;
        align-items: center;
      }
    }
  }
}
</style>