<!--买家求购确认页-->
<template>
  <LayoutApp :show-back="true">
    <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="" :width="136" :height="180"></ImageFormat>-->
        </div>
        <div class="productPrice">
          <span class="size">{{sizeInfo}}</span>
          <div class="pricedetail">
            <span class="priceTitle">最低售价</span>
            <span class="price">{{''}}</span>
          </div>
        </div>
      </div>
      <div class="inputView">
        <span class="inputViewIcon">
          ¥
        </span>
        <Input class="wordText" v-model="inputPrice" clearable="true" type="number" placeholder="定价需以9为结尾，例如1999"></Input>
      </div>

      <div>
        <div class="sales">
          <span class="tipHeaderText">需要支付保证金：</span>
          <span class="tipPriceText">¥{{''}}</span>
        </div>

      </div>

      <div class="saleDetailTips">
        {{terms}}
      </div>

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

      <div>
        <span>商品金额：</span>
        <span>{{''}}</span>
      </div>
      <div>
        <span>运费：</span>
        <span>{{''}}</span>
      </div>
      <div>
        <span>预计实付金额：</span>
        <span>{{''}}</span>
      </div>

      <order-address></order-address>

      <div class="line"></div>
      <div class="space"></div>
      <day-choose></day-choose>
      <div class="space"></div>
      <div class="line"></div>

  <div class="bottomContainer">

    <Button type="submit" disabled="true">提交</Button>
  </div>

</div>

    </div>
  </LayoutApp>
</template>

<script>

import {Input, Button} from 'cube-ui';
import OrderAddress from './components/confirm/address';
import DayChoose from './components/askorder/day-choose';

export default {
  name: 'BuyerAskOrder',
  components: {Button, DayChoose, OrderAddress},
  props: {
    lazy: Boolean,
    product: Object,
  },
  component: {
    Input,
    OrderAddress,
    Button,
  },
  data() {
    return {
      inputPrice: '',
      terms: '求购须支付定金。\n卖家接单后，你需要在24小时内支付商品款。卖家将在你付款后36小时内发货。'
    };
  },

  computed: {

    sizeInfo: {
      get() {
        return '44'
        // return goodsInfo ? goodsInfo.colorName + ',' + goodsInfo.sizeName : ''
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .body {
    height: 100%;

    position: relative;
  }

  .topContainer {
    height: calc(100% - 100px);
    padding-left: 20px;
    padding-right: 20px;
  }

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

  }

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

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

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

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

  .productPrice {

    width: calc(100% - 120px - 40px - 10px);
    height: 120px;
    margin-left: 10px;
  }

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

  .pricedetail {
    display: flex;
    flex-direction: row;
    height: 30px;
    margin-top: 5px;
    align-items: flex-end;
  }

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

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

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

  .inputView {
    width: calc(100% - 40px);
    height: 50px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f5f5f5;
  }

  .inputViewIcon{
    line-height: 50px;
    font-size: 20px;
    color: #000;
    margin-left: 10px;
  }

  .wordText {
    margin-left: 10px;
    font-family: "DIN Alternate";
    font-size: 16px;
    color: #000;
    width: 100%;
    background-color: transparent;
  }

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

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

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

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

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

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

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

  .bottomContainer {
    position: absolute;
    bottom: 0px;
    height: 100px;
    display: flex;
    align-items: stretch;
    width: 100%;
    left: 0px;
  }

</style>