<template>
  <LayoutApp class="ufo-font" :class="classes">
    <ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" @pullingUp="onPullingUp">
      <div class="order-page">
        <div class="title">出售中</div>
        <div class="product">
          <ImgSize class="pro-img" :src="productInfo.imageUrl" :width="200" :height="200"></ImgSize>
          <div class="pro-info">
            <p class="pro-name">{{productInfo.productName}}</p>
            <p class="stock-info">{{productInfo.colorName}}，{{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
          ref="productList"
          :skcs="skcs"
          @on-change-price="onChangePrice"
          @on-no-sale="onNoSale"
          ></ProductList>
      </div>
    </ScrollView>
    <ModalPrice
      v-if="modalLoad"
      ref="modalPrice"
      @on-change-price="onChangePriceSure">
    </ModalPrice>
    <ModalUnstock
      v-if="modalLoad"
      ref="modalUnstock"
      @on-no-sale="onNoSaleSure">
    </ModalUnstock>
  </LayoutApp>
</template>

<script>
import ModalPrice from './components/modal-price';
import ModalUnstock from './components/modal-unstock';
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';


Vue.use(Toast);

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

export default {
  name: 'OrderPage',
  data() {
    return {
      classes: {},
      page: 1,
      modalLoad: false,
      pageSize: 10,
    };
  },
  mounted() {
    this.modalLoad = true;
  },
  computed: {
    ...mapState(['productInfo', 'skcs']),
  },
  asyncData({store, router}) {
    return store.dispatch('ufo/order/fetchProduct', {productId: router.params.orderId});
  },
  methods: {
    ...mapActions(['fetchProduct', 'postChangePrice', 'postNoSale']),
    async onPullingUp() {
      const beginCount = this.skcs.length;

      await this.fetchProduct({
        productId: this.$route.params.orderId,
        page: this.page + 1,
        pageSize: this.pageSize
      });
      const afterCount = this.skcs.length;

      if (afterCount > beginCount) {
        this.page++;
      }
      this.$refs.scroll.forceUpdate();
    },
    onChangePrice(skc) {
      this.$refs.modalPrice.show({skc, product: this.productInfo});
    },
    onNoSale(skc) {
      this.$refs.modalUnstock.show({skc});
    },
    refreshProduct(storageId) {
      const findInx = this.skcs.findIndex(skc => skc.goodsInfo.storageId === storageId);
      const findPage = parseInt(findInx / this.pageSize, 10) + ((findInx % this.pageSize) ? 1 : 0);

console.log(findInx, findPage)
      this.fetchProduct({
        productId: this.$route.params.orderId,
        page: findPage,
        refresh: false,
        storageId
      });
    },
    async onChangePriceSure({skc, price}) {
      this.refreshProduct(skc.storageId);
      return;
      const result = await this.postChangePrice({
        product_id: this.productInfo.productId,
        storage_id: skc.storageId,
        new_price: price,
        old_price: skc.price,
        num: skc.storageNum
      });

      if (result && result.code === 200) {
        this.$refs.modalPrice.hide();
        this.$createToast({
          txt: '调价成功',
          type: 'success',
        }).show();
        this.refreshProduct(skc.storageId);
      } else {
        this.$createToast({
          txt: result.message || '调价失败',
          type: 'warn',
        }).show();
      }
    },
    async onNoSaleSure({skc, num}) {
      const result = await this.postNoSale({
        product_id: this.productInfo.productId,
        storage_id: skc.storageId,
        old_price: skc.price,
        num: num
      });

      if (result.code === 200) {
        this.$refs.modalUnstock.hide();
        this.$refs.productList.reset();
        this.$createToast({
          txt: '下架成功',
          type: 'correct'
        }).show();
        this.refreshProduct(skc.storageId);
      } else {
        this.$createToast({
          txt: result.message || '下架失败',
          type: 'warn',
        }).show();
      }
      this.slideSkc = {};
    },
  },
  components: {Button, ScrollView, ProductList, ImgSize, ModalPrice, ModalUnstock}
};
</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>