<template>
  <LayoutApp :title="title">
    <div class="order-page">
      <div class="product">
        <ImgSize
          class="pro-img"
          :src="goodsInfo.goodImg || ''"
          :width="200"
          :height="200"
        ></ImgSize>
        <div class="pro-info">
          <p class="pro-name">
            {{ goodsInfo.colorName }}, {{ goodsInfo.sizeName }}码
          </p>
          <p class="stock-info ufo-font">
            最低售价： ¥{{ goodsInfo.leastPrice || "-" }}
          </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">{{ userAddress.consignee }}</p>
          <p class="user-address">
            {{ userAddress.area }} {{ userAddress.address }}
          </p>
          <p class="user-phone">
            {{ 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>-->
        <OrderCheck
          v-model="isAgree"
          :desc="`卖家协议`"
          :url="agreementURL"
        ></OrderCheck>
      </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"
            >平台服务费({{ platformFee.goodsPaymentRatePercent }})</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';
import OrderCheck from '../components/confirm/agree';

const { mapState, mapActions } = createNamespacedHelpers('order/priceChange');
// orderCode = 1233499619151
export default {
  name: 'noEntryDetail',
  components: {
    OrderCheck,
    Modal,
    InputUfo,
    ScrollView,
    LayoutApp,
    ImgSize,
    Checkbox
  },
  data() {
    return {
      title: '调价',
      agreementURL:
        'https://activity.yoho.cn/feature/3187.html?share_id=5851&title=ufo-%E5%8D%96%E5%AE%B6%E5%8D%8F%E8%AE%AE',
      platformFeeModalVisible: false,
      platformFee: {
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00',
        goodsPaymentRatePercent: '0.00%',
        payChannelPercentage: '0.00%'
      },
      bankTransferFee: '-¥0',
      income: '¥0',
      errorTip: '',
      chgPrice: '',
      calced: false,
      earnestMoney: '¥0',
      // 保证金
      earnestPrice: 0,
      isAgree: false,
      labelOption: {
        label: '我已阅读并同意'
      },
      time: 15000
    };
  },
  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']),
    goodsInfo() {
      return this.noEntryOrderInfo.goodsInfo || {};
    },
    userAddress() {
      return this.noEntryOrderInfo.userAddress || {};
    }
  },
  watch: {
    chgPrice() {
      this.calced = false;
      this.platformFee = {
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00',
        goodsPaymentRatePercent: '0.00%',
        payChannelPercentage: '0.00%'
      };
      this.bankTransferFee = '-¥0';
      this.income = '¥0';
      this.earnestMoney = '¥0';
      this.earnestPrice = 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,
              earnestPrice: this.earnestPrice,
              skup: this.goodsInfo.skup
            });
          }
        }).show();
      }
    },
    async calcPrice(price) {
      const result = await this.postNoEntryCalcPrice({
        price: price,
        skup: this.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.earnestPrice = get(result, 'data.earnestMoney', 0);
        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');
      this.$xianyu.goXianyuNewPage({ url: this.agreementURL });
    },

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

      if (result.code === 200 && result.data.orderCode) {
        console.log(result);
        this.$createOrderPayType({
          orderCode: result.data.orderCode,
          price: parseFloat(`${earnestPrice}`).toFixed(2),
          desc: '保证金',
          extra: JSON.stringify({
            type: 'sell',
            back: {
              name: 'InSaleOrderList'
            },
            forward: {
              name: 'SellPayOk',
              query: {
                orderCode: result.data.orderCode
              }
            }
          }),
          onCloseAction() {
            that.clearData();
            that.$router.replace({
              name: 'sellOrderDetail',
              params: {
                owner: 'sell',
                code: result.data.orderCode
              }
            });
          }
        }).show();
      } else {
        this.$createToast({
          txt: result.message || '调价失败',
          type: 'txt'
        }).show();
      }

      // console.log(result);
    },
    clearData() {
      // 清空数据状态
      // console.log(this.$router);
      this.platformFeeModalVisible = false;
      this.platformFee = {
        amount: '-¥0',
        appraiseFee: '¥0.00',
        packageFee: '¥0.00',
        serviceFee: '¥0.00',
        goodsPaymentRatePercent: '0.00%',
        payChannelPercentage: '0.00%'
      };
      this.bankTransferFee = '-¥0';
      this.income = '¥0';
      this.errorTip = '';
      this.chgPrice = '';
      this.calced = false;
      this.earnestMoney = '¥0';
      this.isAgree = false;
    }
  }
};
</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: 55%;
    }

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

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

  .agree-container {
    width: 100%;
    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 {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #fff;

    button {
      display: block;
      width: 670px;
      height: 88px;
      border-radius: 60px;
      margin: 0 auto;
      color: #fff;
      background-color: #ccc;
      border: none;
    }

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