<!--卖家求购变现-->
<template>
  <LayoutApp :show-back="true">
    <div class="body">
      <TitleComp txt="变现"></TitleComp>
      <ProductInfo :data="originProductData" class="product-info"></ProductInfo>
      <div class="inputView">
        <span class="inputViewIcon">
          ¥
        </span>
        <span class="wordText">{{price}}</span>
      </div>
      <OrderMargin class="order-item order-margin" :data="computeTip"></OrderMargin>
      <OrderFee  class="order-item" :data="computeTip"></OrderFee>
      <AddressInfo :data="addressInfo" class="order-item"></AddressInfo>
    </div>
    <div class="footer">
      <OrderAgree :value="isAgreeTerms" @input="isAgreeTerms = !isAgreeTerms" class="agree-wrapper"></OrderAgree>
      <div>
        <Button :disabled="!isAgreeTerms" type="submit" @click="submitClick">提交</Button>
      </div>
    </div>
  </LayoutApp>
</template>

<script>
import {Button} from 'cube-ui';
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 {get} from 'lodash'

import { createNamespacedHelpers} from 'vuex';
const { mapState, mapActions, mapMutations, mapGetters} = createNamespacedHelpers(
  'order/sellerAskOrder'
);

export default {
  name: 'seller-ask-order',
  props: {
    skup: Number,
    price: Number,
  },
  components: {
    Button,
    ProductInfo,
    AddressInfo,
    InputPrice,
    TitleComp,
    OrderMargin,
    OrderFee,
    OrderAgree
  },

  data() {
    return {
      isAgreeTerms: false,
    };
  },

  computed: {
    ...mapState([
      'originProductData',

      // 'price',
      'computeTip',
      'addressInfo',
      'publishinfo',
    ]),
    ...mapGetters([

    ]),

  },

  mounted() {
    this.fetchSellerOrderCount({tabType: 'sell'});// 19268
    this.sellerCompute({price: this.price, skup: this.skup});

  },

  watch: {

  },

  methods: {
    ...mapMutations([

    ]),
    ...mapActions([
      'fetchSellerOrderCount',
      'sellerCompute',
      'sellerPublish',
    ]),
    submitClick() {
      this.sellerPublish({price: this.price, skup: this.skup, address_id: this.addressInfo.address_id})
        .then(() => {
          this.payOrder();
        });
    },
    payOrder() {
      let vm = this;

      this.$createOrderPayType({
        price: get(this.computeTip, 'earnestMoney', 0),
        desc: '保证金',
        orderCode: get(this.publishinfo, 'orderCode', ''),
        extra: JSON.stringify({
          type: 'sell',
          back: {
            name: 'ProductDetail',
            params: {
              productId: get(this.originProductData, 'productId', '')
            }
          },
          forward: {
            name: 'SellPayOk',
            query: {
              orderCode: get(this.publishinfo, 'orderCode', '')
            }
          }
        }),
        onCloseAction() {
          // vm.onClose(orderResult.data.orderCode);
        }
      }).show();
    }
  }

};
</script>

<style lang="scss" scoped>
  .body {
    height: 100%;
    margin: 0 40px;
    padding-bottom: 200px;
    overflow-y: auto;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
  }

  .inputView {
    width: calc(100%);
    height: 50*2px;
    border-radius: 5*2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f5f5f5;
  }

  .inputViewIcon{
    line-height: 50*2px;
    font-size: 20*2px;
    color: #000;
    margin-left: 10*2px;
  }

  .wordText {
    margin-left: 10*2px;
    font-family: "DIN Alternate";
    font-size: 28*2px;
    height: 50*2px;
    line-height: 50*2px;
    color: #000;
    width: 100%;
    background-color: transparent;
  }

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

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

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

</style>