<template>
  <LayoutApp :class="classes">
    <ScrollView ref="scroll" :observe-dom="false" :pull-up-load="true" @pullingUp="onPullingUp" @pullingDown="onPullingDown">
      <div class="order-page">
        <div class="title">出售中</div>
        <div class="product" @click="onClickProduct">
          <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 LayoutApp from '../../components/layout/layout-app';
import ModalPrice from './components/modal-price';
import ModalUnstock from './components/modal-unstock';
import ImgSize from 'components/img-size';
import {Button} from 'cube-ui';
import {get} from 'lodash';
import ScrollView from '../../components/layout/scroll-ufo';
import ProductList from './components/product-list';
import {createNamespacedHelpers} from 'vuex';

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

export default {
  name: 'OrderPage',
  title: '订单',
  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: {
    ...mapMutations(['MERGE_CHANGEPRICE_DATA']),
    ...mapActions(['fetchProduct', 'postChangePrice', 'postNoSale']),
    onClickProduct() {
      this.$yoho.goPage('go.ufo', {
        pagename: 'productDetail',
        productId: this.$route.params.orderId,
      });
    },
    async onPullingUp() {
      const beginCount = this.skcs.length;

      const result = 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++;
      }
      const noMore = get(result, 'data.data', []).length;

      this.$refs.scroll.forceUpdate(noMore > 0);
    },
    onPullingDown() {
      this.page = 1;
      this.fetchProduct({
        productId: this.$route.params.orderId,
        page: 1,
        pageSize: this.pageSize,
        refresh: true
      }).then(() => {
        this.$refs.scroll.forceUpdate();
      });
    },
    onChangePrice(skc) {
      this.$refs.modalPrice.show({skc, product: this.productInfo});
    },
    onNoSale(skc) {
      if (skc.storageNum <= 1) {
        this.$createDialog({
          type: 'confirm',
          content: '您确定不卖此商品吗？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
          },
          onConfirm: () => {
            this.onNoSaleSure({skc, num: 1});
          },
        }).show();
      } else {
        this.$refs.modalUnstock.show({skc});
      }
    },
    async refreshProduct(noSale) {
      const result = await this.fetchProduct({
        productId: this.$route.params.orderId,
        page: this.page,
        pageSize: this.pageSize,
        refresh: true
      });

      if (noSale && !get(result, 'data.productInfo')) {
        this.$yoho.finishPage({});
      }
    },
    async onChangePriceSure({skc, price}) {
      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();
      } 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(true);
      } else {
        this.$createToast({
          txt: result.message || '下架失败',
          type: 'warn',
        }).show();
      }
      this.slideSkc = {};
    }
  },
  components: {LayoutApp, Button, ScrollView, ProductList, ImgSize, ModalPrice, ModalUnstock}
};
</script>

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

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

    .pro-img {
      width: 180px;
    }

    .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: #f5f5f5;
      display: flex;
      align-items: center;

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