<template>
  <LayoutApp :show-back="true">
    <div class="body">
      <TitleComp txt="出售"></TitleComp>
      <ProductInfo :data="{}" class="product-info"></ProductInfo>
      <InputPrice @input="changePrice" :value="price" class="input-price" @on-blur="compute"></InputPrice>
      <OrderMargin class="order-item order-margin" :data="fee"></OrderMargin>
      <OrderFee class="order-item" :data="fee"></OrderFee>
      <AddressInfo :data="address" class="order-item"></AddressInfo>
    </div>
    <div class="footer">
      <OrderAgree :value="agree" @input="changeAgree" class="agree-wrapper"></OrderAgree>
      <YohoButton :txt="txt" @click="onClick" :disable="!agree"></YohoButton>
    </div>
  </LayoutApp>
</template>

<script>

import ProductInfo from './components/confirm/product';
import InputPrice from './components/confirm/input-price';
import AddressInfo from './components/confirm/address';
import TitleComp from './components/confirm/title';
import OrderMargin from './components/confirm/order-margin';
import OrderFee from './components/confirm/order-fee';
import OrderAgree from './components/confirm/agree';
import { Types } from 'store/order/order-confirm';

import { createNamespacedHelpers } from 'vuex';

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

const UserType = {
  sell: 'sell',
  buy: 'buy'
};

export default {
  name: 'OrderConfirm',
  props: {
    code: {
      type: String,
      default: ''
    },
  },
  components: {
    ProductInfo,
    AddressInfo,
    InputPrice,
    TitleComp,
    OrderMargin,
    OrderFee,
    OrderAgree
  },
  data() {
    return {
      txt: '提交',
      error: false
    };
  },
  mounted() {
    this.fetchUserStatus();
    this.fetchOrderAddress({ tabType: UserType.sell });
  },
  computed: {
    ...mapState(['productDetail', 'address', 'fee', 'price', 'agree'])
  },
  methods: {
    ...mapActions(['fetchOrderAddress', 'fetchUserStatus', 'fetchOrderPrice', 'submitOrder', 'fetchPayList']),
    ...mapMutations([Types.CHANGE_PRICE, Types.CHANGE_AGREE]),

    onClick() {
      this.submit();
    },
    compute() {
      return this.fetchOrderPrice({
        address_id: this.address.address_id,
        num: 1,
        price: this.price,
        storage_id: 10000128,
      }).then(result => {
        if (result.error) {
          this.error = result.error;
          this.$createToast({
            time: 1500,
            txt: result.error,
            type: 'txt'
          }).show();
        }
        this.error = false;
      });
    },
    changePrice(val) {
      this[Types.CHANGE_PRICE](val);
    },
    changeAgree(val) {
      this[Types.CHANGE_AGREE](val);
    },
    async submit() {
      await this.compute();

      if (this.error) {
        return;
      }

      const orderResult = await this.submitOrder({
        address_id: this.address.address_id,
        num: 1,
        price: this.price,
        storage_id: 10000128,
      });

      if (orderResult.code !== 200) {
        this.$createToast({
          time: 1500,
          txt: '创建订单失败',
          type: 'txt'
        }).show();
        return;
      }

      const { orderCode } = orderResult.data;

      const payListResult = await this.fetchPayList({
        order_code: orderCode
      });

      this.$createOrderPayType({
        data: payListResult.data,
        price: this.fee.earnestMoneyStr,
        desc: '保证金'
      }).show();
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

.body {
  height: 100%;
  margin: 0 40px;
  padding-bottom: 200px;
  overflow-y: auto;
}

.order-item {
  padding-top: 40px;
  padding-bottom: 40px;
}

.order-item + .order-item {
  border-top: 1px solid #eee;
}

.agree-wrapper {
  height: 60px;
  background-color: white;
  border-top: 1px solid #eee;
  padding: 0 40px;
  line-height: 60px;
}
</style>