<!--买家求购确认页-->
<template>
  <LayoutApp :show-back="true" title="出价求购">
    <div class="body" ref="body">
<div class="topContainer">
      <!--<div class="topView">-->
        <!--<div class="title"></div>-->
      <!--</div>-->
      <!--商品信息-->
      <div class="productDetail">
        <div class="productImageWrapper">
          <ImageFormat class="image" :lazy="lazy" :src="originProductData.image" :width="136" :height="180"></ImageFormat>
        </div>
        <div class="productPrice">
          <span class="size">{{sizeInfo}}</span>
          <div class="pricedetail">
            <div>
              <span class="priceTitle">现货最低售价： </span>
              <span class="price">¥{{originProductData.least_price || '-'}}</span>
            </div>
            <div>
              <span class="priceTitle">现货最高求购价： </span>
              <span class="price">¥{{originProductData.bid_moster_price || '-'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="inputView">
        <span class="inputViewIcon">
          ¥
        </span>
        <Input ref="myinput" class="wordText" v-model="inputPrice"  type="number" placeholder="定价需以9为结尾" @input="onTextChange"></Input>
      </div>

      <div>
        <div class="sales">
          <span class="tipHeaderText">需要支付定金：</span>
          <span class="tipPriceText">¥{{computeInfo.depositAmount}}</span>
        </div>

      </div>

      <div class="saleDetailTips">
        {{configTip.tips}}
      </div>

      <div class="space"></div>
      <div class="line"></div>
      <div class="space"></div>

      <div class="feeContainer" v-for="(item,index ) in computeInfo.promotionFormulaList">
        <span :class="{'feeCommonText': true, 'feeTotalLeft':index === computeInfo.promotionFormulaList.length - 1}">{{item.promotion}}</span>
        <span :class="{'feeCommonText': true, 'feeTotalRight':index === computeInfo.promotionFormulaList.length - 1}">{{item.promotionAmount}}</span>
      </div>
  <div class="space"></div>
  <div class="line"></div>
  <div class="space"></div>

      <order-address  :data="addressInfo"></order-address>

      <div class="line"></div>
      <div class="space"></div>
      <!--<day-choose :chooseDay="chooseDay" :options="dayOptions" :choose="BUYER_ASK_SET_CHOOSEDAY"></day-choose>-->
      <div class="dayChoose" @click="showPicker">
        <span class="leftText" >求购期限：</span>
        <div class="rightWrapper">
          <span class="rightText">{{chooseDay || '7天'}}</span>
          <i class="cubeic-arrow" ></i>
        </div>
      </div>

      <div class="space"></div>
      <div class="line"></div>

</div>
    </div>
    <div class="bottomContainer">
      <OrderAgree :value="isAgreeTerms" @input="isAgreeTerms = !isAgreeTerms" class="agree-wrapper" :desc="agreeDesc" :url="url"></OrderAgree>
      <div class="btn-wrapper">
        <YohoButton class="submit-btn" :txt="submitText" :disable="!isAgreeTerms"  @click="submitClick"></YohoButton>
      </div>
    </div>
  </LayoutApp>
</template>

<script>

import {Input, Button} from 'cube-ui';
import OrderAddress from './components/confirm/address';
import DayChoose from './components/askorder/day-choose';
import OrderAgree from './components/confirm/agree';
import { createNamespacedHelpers } from 'vuex';
import {debounce, get} from 'lodash';
const {mapState, mapActions, mapMutations, mapGetters} = createNamespacedHelpers(
  'order/buyerAskOrder'
);

export default {
  name: 'BuyerAskOrder',
  components: {Button, Input, DayChoose, OrderAddress, OrderAgree},
  props: ['lazy', 'storageId'],
  component: {
    Input,
    OrderAddress,
    Button,
  },
  data() {
    return {
      inputPrice: '',
      isAgreeTerms: false,
      url: 'https://activity.yoho.cn/feature/6775.html?share_id=9481&title=%E9%97%B2%E9%B1%BC%E4%B9%B0%E5%AE%B6%E5%8D%8F%E8%AE%AE',
      agreeDesc: '有货买家协议',
      submitText: '提交',
    };
  },

  computed: {
    ...mapState([
      'notFirstOrder',
      'addressInfo',
      'originProductData',
      'configTip',
      'computeInfo',
      'isShowToast',
      'toasMessage',
      'chooseDay',
      'isShowDialog',
      'preTip',
      'publishresult',
    ]),
    ...mapGetters([
      'dayOptions',
      'chooseDayId',
    ]),
    sizeInfo: {
      get() {
        return this.originProductData.colorName + ',  ' + this.originProductData.sizeName + '码';// '黑色， 48码';
      }
    },

  },

  beforeRouteEnter(to, from, next) {

    next(vm => {
      // 通过 `vm` 访问组件实例
      if (from.name !== 'address') {
        vm.inputPrice = '';
        vm.BUYER_ASK_RESET_DATA();
      }

    });

  },

  mounted() {

    this.BUYER_ASK_SET_STORAGEID(this.storageId);
    this.fetchBuyerOrderCount({ tabType: 'buy'});
    this.fetchConfig();
    this.$on('addressinfo', function(address) {
      console.log(address);
    });
  },

  watch: {
    isShowToast(val) {

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

    // isShowDialog(val) {
    //   if (val) {
    //     this.showDialog();
    //   }
    // },

    addressInfo(val) {

      if (this.inputPrice && val) {
        this.computePrice();
      }

    },

    inputPrice(val) {
      console.log(val);
    }
  },

  methods: {
    ...mapMutations([
      'BUYER_ASK_SET_SHOWTOAST',
      'BUYER_ASK_SET_CHOOSEDAY',
      'BUYER_ASK_SET_SHOWDIALOG',
      'BUYER_ASK_SET_STORAGEID',
      'BUYER_ASK_RESET_DATA',
    ]),
    ...mapActions([
      'fetchConfig',
      'fetchBuyerOrderCount',
      'buyerCompute',
      'buyerPrePublish',
      'buyerPublish',
    ]),

    onTextChange: debounce(function() {
      if (this.originProductData.least_price && this.originProductData.skup && this.originProductData.least_price <= this.inputPrice) {
        this.showBuyDialog();
      } else {
        this.computePrice();
      }
    }, 500, {leading: false, trailing: true}),

    showToast() {
      this.BUYER_ASK_SET_SHOWTOAST(false);
      this.$createToast({
        time: 1000,
        type: 'txt',
        txt: this.toasMessage
      }).show();
    },

    showBuyDialog() {
      this.$refs.myinput.blur();
      this.$createDialog({
        type: 'confirm',
        title: '求购价格过高',
        content: '您的出价高于当前售价，建议直接购买',
        confirmBtn: {
          text: '去购买',
          active: true,
          disabled: false,
          href: 'javascript:;',
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          this.$router.push({
            name: 'OrderBuyConfirm',
            query: {
              storageId: this.storageId || '',
              skup: this.originProductData.skup || '',
              productId: this.originProductData.productId || '',
            },
          });
        },
        onCancel: () => {
          this.computePrice();
        }
      }).show();
    },

    showDialog() {
      this.BUYER_ASK_SET_SHOWDIALOG(false);
      let that = this;

      if (this.preTip) {
        this.$createDialog({
          type: 'confirm',
          title: this.preTip.title || '',
          content: this.preTip.content || `确认以${this.inputPrice}元的价格求购`,
          confirmBtn: {
            text: this.preTip.confirm,
            active: true,
            disabled: false,
            href: 'javascript:;',
          },
          cancelBtn: {
            text: this.preTip.cancel,
            active: false,
            disabled: false,
            href: 'javascript:;'
          },

          onConfirm: () => {
            that.publishProduct();
          },

          onCancel: () => {

          }

        }).show();
      } else {
        that.publishProduct();
      }

    },

    submitClick:  debounce(function() {
      this.buyerPrePublish({price: this.inputPrice, storage_id: this.storageId, address_id: this.addressInfo.address_id})
        .then((res) => {
          if (res && res.code == 200) {
            this.showDialog();
          }
        });
    }, 500, {leading: false, trailing: true}),

    publishProduct() {
      this.buyerPublish({price: this.inputPrice, storage_id: this.storageId, address_id: this.addressInfo.address_id, time_limit_id: this.chooseDayId}).then(() => {
        this.payOrder();
      });
    },

    computePrice() {
      if (!this.inputPrice) {
        console.log('inputPrice is null');
        return;
      }
      this.buyerCompute({price: this.inputPrice, storage_id: this.storageId, address_id: this.addressInfo.address_id || '' });
    },

    payOrder() {
      let vm = this;

      this.$createOrderPayType({
        price: get(this.publishresult, 'depositAmount', ''),
        desc: '定金',
        orderCode: get(this.publishresult, 'orderCode', ''),
        extra: JSON.stringify({
          type: 'buy',
          back: {
            name: 'ProductDetail',
            params: {
              productId: get(this.originProductData, 'productId', '')
            }
          },
          forward: {
            type: 'buy',
            name: 'buyOrderDetail',
            params: {
              code: get(this.publishresult, 'orderCode', ''),
              owner: 'buy',
            }
          }
        }),
        onCloseAction() {
          vm.onClose(get(vm.publishresult, 'orderCode', ''));
        }
      }).show();
    },
    showPicker() {

      console.log(this.options);
      this.$createPicker({
        title: '选择求购时限',
        data: [this.dayOptions],
        onSelect: (value) => {
          this.BUYER_ASK_SET_CHOOSEDAY(value[0]);
        },
        selectedIndex: [2],
        onCancel: () => {

        }

      }).show();
    },

    onClose(orderCode) {
      if (orderCode) {
        this.$router.replace({
          name: 'buyOrderDetail',
          params: {
            owner: 'buy',
            code: orderCode
          }
        });
      }
    }

  }
};
</script>

<style lang="scss" scoped>

  .dayChoose {
    height: 60px;
    font-family: PingFang-SC-Regular;
    font-size: 14*2px;
    color: #000000;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  .body {
    height: 100%;
    /*position: relative;*/
    padding-bottom: 200px;
    overflow-y: auto;
  }

  .topContainer {
    /*height: calc(100% - 100*2px);*/
    padding-left: 20*2px;
    padding-right: 20*2px;
    /*margin-bottom: 200px;*/
  }

  .topView {
    width: 100%;
    height: 167px;
    display: flex;
    align-items: flex-start;
    background-color: white;

  }

  .title {
    font-weight: bold;
    font-size: 34*2px;
    color: #000;
    letter-spacing: 0.41*2px;
    line-height: 41*2px;
    margin-left: 20*2px;
    margin-top: 5*2px;
  }

  .productDetail {
    display: flex;
    flex-direction: row;
    width: calc(100% - 40*2px);
    height: 120*2px;
    margin-left: 20*2px;
    align-items: center;
    margin-top: 5*2px;
    background-color: white;
  }

  .productImageWrapper {
    width: 120*2px;
    height: 120*2px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .productImage {
    width: 110*2px;
    height: 110*2px;
  }

  .productPrice {

    width: calc(100% - 120*2px  - 10*2px);
    height: 120*2px;
    margin-left: 10*2px;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }

  .size {
    font-family: "PingFang SC";
    font-size: 12*2px;
    color: #999;
    letter-spacing: 0;
  }

  .pricedetail {
    height: 30*2px;
    margin-top: 5*2px;
  }

  .priceTitle {
    font-family: "PingFang SC";
    font-size: 14*2px;
    color: #000;
    letter-spacing: 0;
  }

  .price {
    font-family: "DIN Alternate";
    font-size: 14*2px;
    color: #000;
    line-height: 20.5*2px;
    letter-spacing: 0px;
  }

  .priceTip {
    font-family: "PingFang SC";
    font-size: 12*2px;
    color: #D0021B;
    letter-spacing: 0px;
    width: 80*2px;
    text-align: right;
  }

  .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: 20*2px;
    height: 100%;
    line-height: 100%;
    color: #000;
    width: 100%;
    background-color: transparent;
  }

  .sales {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .tipHeaderText {
    font-family: "PingFang SC";
    font-size: 14*2px;
    color:#000;
    letter-spacing: 0;
    //<!--margin-left: 20*2px;-->
    margin-top: 15*2px;
  }

  .tipPriceText {
    font-family: "PingFang SC";
    font-size: 14*2px;
    color: #D0021B;
    letter-spacing: 0;
    margin-top: 15*2px;
  }

  .saleDetailTips {
    font-family: "PingFang SC";
    font-size: 12*2px;
    color: #999;
    letter-spacing: 0px;
    margin-top: 5*2px;
    //<!--margin-left: 20*2px;-->
    width: calc(100% - 40*2px);
  }

  .space {
    width: 100%;
    background-color: white;
    height: 20*2px;
  }

  .line {
    width: 100%;
    height: 1*2px;
    background-color: #eee;
  }

  .priceCell {
    display: flex;
    width: 100%;
    height: 25*2px;
    align-items: center;
    justify-content: space-between;
  }

  .feeContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 6*2px;
  }

  .feeCommonText {
    font-family: PingFang-SC-Regular;
    font-size: 14*2px;
    color: #999999;
    letter-spacing: 0;
  }

  .feeTotalLeft {
    font-family: PingFang-SC-Regular;
    font-size: 14*2px;
    color: #000000;
    letter-spacing: 0;
  }

  .feeTotalRight {
    font-family: PingFangSC-Regular;
    font-size: 14*2px;
    color: #D0021B;
    letter-spacing: 0;
    text-align: right;
  }

  .bottomContainer {
    position: absolute;
    bottom: 0px;
    /*height: 100px;*/
    width: 100%;
    left: 0px;
    z-index: 1;
  }

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

  .submit-btn {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
  }

  .btn-wrapper {
    padding: 0 40px 40px;
    background-color: white;
  }

  .cube-picker-panel {
    height: 273px;
    text-align: center;
    font-size: 14px;
    background: #fff;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
  }
</style>