<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}}</p>
        </div>
      </div>
      <div class="input-container">
        <InputUfo type="number" placeholder="定价需以9结尾.例如1999"
                  :maxlength="8" class="ipt-number" v-model="chgPrice">
          <span class="prepend" slot="prepend">¥</span>
        </InputUfo>
      </div>
      <div class="earnest-container">
        <p>需支付保证金：</p><p class="earnest-money">{{earnestMoney}}</p>
        <p class="desc">所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金</p>
      </div>
      <div class="fee-container">
        <div class="fee-line">
          <p class="fee-title">平台费用:</p>
          <p class="fee-price">{{platformFee}}</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>
  </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';

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

export default {
  name: 'noEntryDetail',
  components: {InputUfo, ScrollView, LayoutApp, ImgSize},
  data() {
    return {
      title: '',
      platformFee: '-¥0',
      bankTransferFee: '-¥0',
      income: '¥0',
      errorTip: '',
      chgPrice: '',
      calced: false,
      earnestMoney: '¥0',
    };
  },
  asyncData({store, router}) {
    return store.dispatch('order/priceChange/fetchOrder', {orderCode: router.params.orderCode});
  },
  mounted() {
    // this.fetchOrder({orderCode: this.$route.params.orderCode});
  },
  computed: {
    ...mapState(['noEntryOrderInfo']),
  },
  methods: {
    ...mapActions(['fetchOrder'])
  }
};
</script>

<style lang="scss" scoped>
  .order-page {
    -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;
      }
    }

    .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;
          }
        }
      }
    }

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

      .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;
      }
    }
  }
</style>