<template>
  <LayoutApp :title="title">
    <div class="order-page">
      <div class="title">出售</div>
      <div class="product">
        <ImgSize class="pro-img" :src="noEntryOrderInfo.goodsInfo.goodImg || ''" :width="200" :height="200"></ImgSize>
        <div class="pro-info">
          <p class="pro-name">{{noEntryOrderInfo.goodsInfo.colorName}}, {{noEntryOrderInfo.goodsInfo.sizeName}}码</p>
          <p class="stock-info ufo-font">最低售价： ¥{{noEntryOrderInfo.goodsInfo.leastPrice || noEntryOrderInfo.goodsInfo.price}}</p>
        </div>
      </div>
      <div class="input-container">
        <InputUfo type="number" placeholder="定价需以9结尾.例如1999"
                  :maxlength="8" class="ipt-number ufo-font" v-model="chgPrice" @blur="onChange">
          <span class="prepend" slot="prepend">¥</span>
        </InputUfo>
      </div>
      <div class="earnest-container">
        <p>需支付保证金：</p><p class="earnest-money">{{earnestMoney}}</p><i class="iconfont iconquestion icon-earnest" @click="showEarnestQuestion"></i>
        <p class="desc">所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金</p>
      </div>
      <div class="fee-container">
        <div class="fee-line">
          <p class="fee-title">平台费用: <i class="iconfont iconquestion" @click="showFeeDetail"></i></p>
          <p class="fee-price">{{platformFee.amount}}</p>
        </div>
        <div class="fee-line">
          <p class="fee-title">银行转账费(1%):</p>
          <p class="fee-price">{{bankTransferFee}}</p>
        </div>
        <div class="fee-line total">
          <p class="fee-title">实际收入:</p>
          <p class="fee-price">{{income}}</p>
        </div>
      </div>
      <div class="address-container">
        <div class="icon-container">
          <i class="iconfont iconaddress"></i>
        </div>
        <div class="address-info">
          <p class="user-name">{{noEntryOrderInfo.userAddress.consignee}}</p>
          <p class="user-address">
            {{noEntryOrderInfo.userAddress.area}} {{noEntryOrderInfo.userAddress.address}}
          </p>
          <p class="user-phone">
            {{noEntryOrderInfo.userAddress.mobile}}
          </p>
        </div>
      </div>
      <div class="white-space"></div>
    </div>
    <div class="submit-container">
      <div class="agree-container">
        <div class="checkbox">
          <Checkbox :option="labelOption" shape="square" v-model="isAgree"></Checkbox>
        </div>
        <a @click="showAgreement">卖家协议</a>
      </div>

      <div :class="['submit-button', (isAgree && calced) ? 'active' : '']">
        <button @click="changePrice">提交</button>
      </div>
    </div>
    <Modal v-model="platformFeeModalVisible" :transfer="true" cancel-text="我知道了">
      <div class="fee-dialog-container">
        <p class="modal-title">平台费用</p>

        <p class="fee-line">
          <span class="fee-title">商品鉴定费：</span>
          <span class="fee-price">{{platformFee.appraiseFee}}</span>
        </p>
        <p class="fee-line">
          <span class="fee-title">商品包装费：</span>
          <span class="fee-price">{{platformFee.packageFee}}</span>
        </p>
        <p class="fee-line total">
          <span class="fee-title">平台服务费：</span>
          <span class="fee-price">{{platformFee.serviceFee}}</span>
        </p>
      </div>
    </Modal>
  </LayoutApp>
</template>

<script>
import LayoutApp from '../../../components/layout/layout-app';
import ScrollView from '../../../components/layout/scroll-view';
import ImgSize from '../../../components/img-size';
import {createNamespacedHelpers} from 'vuex';
import InputUfo from './components/input-ufo';
import {Checkbox} from 'cube-ui';
import {get} from 'lodash';
import Modal from './components/modal';

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

export default {
  name: 'noEntryDetail',
  components: {Modal, InputUfo, ScrollView, LayoutApp, ImgSize, Checkbox},
  data() {
    return {
      title: '',
      platformFeeModalVisible: false,
      platformFee: {
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00'
      },
      bankTransferFee: '-¥0',
      income: '¥0',
      errorTip: '',
      chgPrice: '',
      calced: false,
      earnestMoney: '¥0',
      isAgree: false,
      labelOption: {
        label: '我已阅读并同意'
      }
    };
  },
  asyncData({store, router}) {
    return store.dispatch('order/priceChange/fetchOrder', {orderCode: router.params.orderCode});
  },
  mounted() {
    // this.fetchOrder({orderCode: this.$route.params.orderCode});
    // this.inputChange = debounce(this.onChange.bind(this), 500);
  },
  computed: {
    ...mapState(['noEntryOrderInfo', 'fetching']),
    postLoading() {
      return this.fetchingChangePrice || !this.calced;
    }
  },
  watch: {
    chgPrice() {
      this.calced = false;
      this.platformFee = '-¥0';
      this.bankTransferFee = '-¥0';
      this.income = '¥0';
      this.earnestMoney = '¥0';
    }
  },
  methods: {
    ...mapActions(['fetchOrder', 'postNoEntryCalcPrice', 'postNoEntryChangePrice']),
    checkPrice(price) {
      let valid = false;

      if (!price) {
        this.errorTip = '没有价格';
        return false;
      } else if (!/^\d+$/.test(price)) {
        this.errorTip = '价格只能为正整数';
      } else if (!/9$/.test(price)) {
        this.errorTip = '出售价格必须以9结尾';
      } else {
        this.errorTip = '';
        valid = true;
      }
      console.log(this.errorTip, valid);
      return valid;
    },
    changePrice() { // 点击提交按钮
      if (this.isAgree && this.calced) {
        this.$createDialog({
          type: 'confirm',
          content: '重新出售后本次出售保证金原路返回',
          confirmBtn: {
            text: '我再想想',
            active: true,
            disabled: false,
          },
          cancelBtn: {
            text: '重新出售',
            active: false,
            disabled: false
          },
          onCancel: () => {
            this.onPriceChangeConfirm({
              price: this.chgPrice,
              skup: this.noEntryOrderInfo.goodsInfo.skup
            });
          }

        }).show();
      }
    },
    async calcPrice(price) {
      const result = await this.postNoEntryCalcPrice({
        price: price,
        skup: this.noEntryOrderInfo.goodsInfo.skup
      });

      console.log(result);

      if (result && result.code === 200) {
        this.platformFee = get(result, 'data.platformFee', '');
        this.bankTransferFee = get(result, 'data.bankTransferFee', '');
        this.income = '¥' + get(result, 'data.income', '');
        this.earnestMoney = '¥' + get(result, 'data.earnestMoney', '');
        this.calced = true;
      } else {
        if (result.message) {
          this.errorTip = result.message;
        }
        this.calced = false;

        this.$createToast({
          txt: this.errorTip,
          type: 'txt'
        }).show();
      }
    },
    onChange(price) { // 价格改变时(文本框离开焦点)
      if (this.checkPrice(price)) {
        this.calcPrice(price);
      } else {
        this.$createToast({
          txt: this.errorTip,
          type: 'txt'
        }).show();
      }
    },
    showFeeDetail() { // 显示平台费用详情
      this.platformFeeModalVisible = true;
    },

    showEarnestQuestion() { // 跳转保证金页面
      console.log('showEarnest');
    },
    showAgreement() { // 跳转卖家协议
      console.log('showAgreement');
    },

    /**
     * 点提交后的弹出框确认
     * @param price
     * @param skup
     * @returns {Promise<void>}
     */
    async onPriceChangeConfirm({price, skup}) {
      const result = await this.postNoEntryChangePrice({
        price,
        skup
      });

      console.log(result);
    }
  }
};
</script>

<style lang="scss" scoped>
  .order-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;

    .title {
      line-height: 82px;
      font-size: 68px;
      font-weight: bold;
      padding: 2px 40px 0 40px;
    }

    .product {
      margin: 20px auto;
      padding: 0 30px;
      height: 200px;
      display: flex;

      .pro-img {
        width: 200px;
        height: 200px;
        overflow: hidden;
        display: flex;
        align-items: center;

        img {
          width: 100%;
          height: auto;
        }
      }

      .pro-info {
        padding: 64px 40px 0 40px;
        line-height: 32px;
        overflow: hidden;

        .pro-name {
          font-size: 24px;
          color: #444;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .stock-info {
          position: relative;
          color: #000;
          margin-top: 24px;
          font-size: 28px;
        }

        .stock-text {
          text-indent: 128px;
          font-size: 28px;
          font-weight: 600;
          line-height: 44px;
        }
      }
    }

    .input-container {
      position: relative;
      display: block;
      width: 690px;
      margin: 0 auto;
      overflow: hidden;
    }

    .ipt-number {
      /deep/ .prepend {
        width: 40px;
        margin-left: 20px;
        text-align: left;
      }
    }

    .earnest-container {
      width: 690px;
      margin: 10px auto;
      border-bottom: 1px solid #f0f0f0;

      p {
        display: inline-block;
        font-size: 28px;
        line-height: 60px;
      }

      .earnest-money {
        color: #c94353;
      }

      .desc {
        font-size: 24px;
        color: #999;
        line-height: 32px;
        padding-bottom: 30px;
      }

      .icon-earnest {
        font-size: 28px;
        color: #999;
        margin-left: 20px;
      }
    }

    .fee-container {
      width: 690px;
      margin: 40px auto 20px auto;
      overflow: hidden;
      border-bottom: 1px solid #f0f0f0;

      .fee-line {
        margin-bottom: 20px;
        color: #999;
        font-size: 28px;
        display: flex;

        .fee-title {
          width: 50%;
        }

        .fee-price {
          width: 50%;
          text-align: right;
        }

        &.total {
          margin-bottom: 40px;

          .fee-title {
            color: #000;
          }

          .fee-price {
            color: #c94353;
          }
        }

        .iconquestion {
          font-size: 28px;
        }
      }
    }

    .white-space {
      position: relative;
      width: 100%;
      height: 180px;
    }

    .address-container {
      position: relative;
      width: 690px;
      margin: 40px auto 40px auto;
      overflow: hidden;

      .icon-container {
        position: absolute;
        width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
          position: absolute;
          font-size: 40px;
          font-weight: 500;
          color: #000;
        }
      }

      .address-info {
        overflow: hidden;
        padding: 0 0 20px 100px;

        .user-name {
          font-size: 32px;
          font-weight: 500;
          line-height: 36px;
          margin-bottom: 10px;
        }

        .user-address {
          font-size: 24px;
          color: #999;
          line-height: 30px;
          margin-bottom: 10px;
        }

        .user-phone {
          font-size: 28px;
          font-weight: bold;
          line-height: 32px;
        }
      }
    }
  }

  /deep/ .modal-content {
    width: 570px;
  }

  .fee-dialog-container {
    width: 100%;

    .modal-title {
      line-height: 120px;
      text-align: center;
      font-size: 28px;
    }

    .fee-line {
      margin-bottom: 20px;
      color: #000;
      font-size: 28px;
      display: flex;

      .fee-title {
        width: 50%;
      }

      .fee-price {
        width: 50%;
        text-align: right;
      }
    }
  }

  .submit-container {
    width: 100%;
    height: 180px;
    position: fixed;
    bottom: 0;
    z-index: 9;

    .agree-container {
      width: 100%;
      height: 80px;
      border-top: 1px solid #f0f0f0;
      background-color: #fff;

      a {
        display: inline-block;
        text-decoration: underline;
        color: #64ad88;
      }

      .checkbox {
        display: inline-block;
      }

      /deep/ .cube-checkbox-wrap {
        padding: 10px 0;
        color: #999;

        .cube-checkbox-label {
          font-size: 0.6rem;
        }
      }

      /deep/ .cube-checkbox_checked .cube-checkbox-ui i {
        color: #0c2b48;
      }
    }

    .submit-button {
      width: 100%;
      height: 100px;
      background-color: #ccc;

      button {
        width: 100%;
        height: 100%;
        color: #fff;
      }

      &.active {
        background-color: #0c2b48;
      }
    }
  }
</style>