<!--卖家求购变现-->
<template>
  <LayoutApp :show-back="true">
    <div class="body">
      <TitleComp txt="变现"></TitleComp>
      <ProductInfo :data="originProductData" class="product-info" :priceType="'现货最高求购价：'"></ProductInfo>
      <div class="inputView">
        <span class="inputViewIcon">
          ¥
        </span>
        <span class="wordText">{{price}}</span>
      </div>
      <OrderMargin class="order-item order-margin" :data="computeTip" :url="url" :superSell="isEntry" ></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" :desc="agreeDesc" :url="url"></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,
      hiddenIcon: true,
      agreeDesc: '有货卖家协议',
      url: 'http://m.yohobuy.com/activity/student/detail/renzhen?openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"url\":\"https://activity.yoho.cn/feature/3187.html?title=卖家协议\"}}',
      isEntry: false,
    };
  },

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

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

    ]),

  },

  mounted() {
    this.isEntry = false;
    this.fetchSellerEntryStatus({})
      .then((res)=> {
        console.log(res);
        if (res) {
          this.isEntry = get(res, 'entrySellerType', 0) !== 0;
        }
      });
    this.fetchSellerOrderCount({tabType: 'sell'});// 19268
    this.sellerCompute({price: this.price, skup: this.skup});

  },

  watch: {
    isShowTip(val) {

      if (val) {
        this.showToast();
      }
    }
  },

  methods: {
    ...mapMutations([
      'SELLER_ASK_SET_IS_SHOWTOAST',
    ]),
    ...mapActions([
      'fetchSellerOrderCount',
      'sellerCompute',
      'sellerPublish',
      'fetchSellerEntryStatus',

    ]),
    submitClick() {

      if (this.isEntry) {
        this.$createDialog({
          type: 'confirm',
          title: '',
          content: `确定以¥${this.price}立即出售此商品`,
          confirmBtn: {
            text: '确定出售',
            active: true,
            disabled: false,
            href: 'javascript:;',
          },
          cancelBtn: {
            text: '我再想想',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            this.sellerPublish({price: this.price, skup: this.skup, address_id: this.addressInfo.address_id})
              .then((res) => {

                if (res && res.code && res.code == 200) {
                  this.$createToast({
                    time: 1000,
                    type: 'txt',
                    txt: '出售成功'
                  }).show();

                  this.$router.go(-1);
                } else {
                  this.$createToast({
                    time: 1000,
                    type: 'txt',
                    txt: res.message
                  }).show();

                }

              });
          },
          onCancel: () => {
            this.computePrice();
          }
        }).show();
      } else {
        this.sellerPublish({price: this.price, skup: this.skup, address_id: this.addressInfo.address_id})
          .then(() => {
            this.payOrder();
          });
      }

    },
    payOrder() {

      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();
    },

    showToast() {
      this.SELLER_ASK_SET_IS_SHOWTOAST(false);
      this.$createToast({
        time: 1000,
        type: 'txt',
        txt: this.toastMessage
      }).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>