<style>
  .order_detail {
    margin: 0 auto 20px;
    width: 100%;
    max-width: 800px;
    /* padding: 40px 20px; */
  }

  .order_content {
    color: #666;
    font-size: 15px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
  }

  .order_header {
    display: flex;
    align-items: center;
    background-color: #00afff;
  }

  .header_content {
    flex-basis: 100%;
    padding: 30px;
    color: #fff;
    font-weight: 600;
  }

  .tour_code {
    margin-bottom: 5px;
  }

  .tour_name {
    font-size: 22px;
  }

  .order_content .d_list {
    padding: 20px 30px;
    display: flex;
    flex-flow: row wrap;
  }

  .order_content .d_list:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

  .d_list .d_row {
    padding: 10px 0;
    flex: 1 50%;
  }

  .d_row .d_title {
    display: block;
    color: #333;
    padding: 0 5px;
  }

  .d_content {
    padding-top: 2px;
    color: #999;
    padding: 0 5px;
  }

  .d-block-title {
    padding-bottom: 10px;
    font-weight: 700;
    color: #333;
  }

  .d-row-between {
    display: flex;
    padding: 5px 0;
    flex: 1 100%;
    justify-content: space-between;
  }

  .order-price .d-title {
    display: flex;
    flex-basis: 85px;
  }

  .total-price {
    margin-top: 5px;
    padding-top: 25px;
    border-top: 1px dashed #eee;
    font-weight: 700;
  }

  .d-Mytitle {
    flex-basis: 85px;
    color: #333;
    text-align: right;
  }

  .total-price b {
    color: #ff9a14;
    font-size: 24px;
    line-height: 1;
  }

  .d_titleBtm {
    color: #333;
    padding: 0 5px;
  }

  .d_contentBtm {
    padding-top: 2px;
    color: #999;
    padding: 0 5px;
  }

  .detail-footer {
    display: flex;
    padding: 0 10px;
  }

  .detail-footer>* {
    flex: 1;
    margin: 20px 10px;
  }

</style>
<template>
  <q-page>
    <div class="order_detail">
      <div class="order_content">
        <div class="order_header">
          <div class="header_content">
            <div class="tour_code">{{InfoData.OrderId}}【{{InfoData.TCNUM}}({{InfoData.TCID}})】</div>
            <div class="tour_name">
              {{InfoData.Title}}
            </div>
          </div>
        </div>
        <div class="d_list">
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont icontext"></i> 訂購日期
            </div>
            <div class="d_content">{{toTime(InfoData.CreateDate)}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont iconhangbanxinxicopy"></i> 出團日期
            </div>
            <div class="d_content">{{InfoData.StartDate}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont icontime"></i> 訂單狀態
            </div>
            <div class="d_content">{{InfoData.OrderStateStr}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont iconfazhuangtai"></i> 付款狀態
            </div>
            <div class="d_content">{{InfoData.PayStateStr}}</div>
          </div>
        </div>
        <div class="d_list order-price">
          <div class="d-block-title">付款資訊</div>
          <div class="d-row-between">
            <div class="d-Mytitle">成人</div>
            <div class="d-Mytitle">{{InfoData.Unit_Price}}</div>
            <div class="d-Mytitle">X{{InfoData.ManNum}}</div>
            <div class="d-Mytitle">{{(InfoData.Unit_Price*InfoData.ManNum)}}
            </div>
          </div>
          <div class="d-row-between">
            <div class="d-Mytitle">小孩</div>
            <div class="d-Mytitle"> {{InfoData.Unit_Price+modelPrice.BabyChargePrice-modelPrice.DiscountPrice}}</div>
            <div class="d-Mytitle">X{{InfoData.ChirdNum}}</div>
            <div class="d-Mytitle">
              {{(InfoData.Unit_Price+modelPrice.BabyChargePrice-modelPrice.DiscountPrice)*InfoData.ChirdNum}}</div>
          </div>
          <div class="d-row-between">
            <div class="d-Mytitle">退签证</div>
            <div class="d_content"></div>
            <div class="d_content"></div>
            <div class="d-content">-{{(modelPrice.BackVisaPrice)*(InfoData.ChirdNum+InfoData.ManNum)}}</div>
          </div>
          <div class="d-row-between">
            <div class="d-Mytitle">小孩不占床</div>
            <div class="d_content"></div>
            <div class="d_content"></div>
            <div class="d-content">-{{(InfoData.ChirdNum-InfoData.ChirdNeedBedNum)*modelPrice.ChildNoNeedPrice}}</div>
          </div>
          <div class="d-row-between total-price">
            <div class="d-Mytitle">總計</div>
            <div class="d_content">
              <b>{{InfoData.PreferPrice}}</b>
            </div>
          </div>
        </div>
        <div class="d_list">
          <div class="d-row-between">
            <div class="d_titleBtm">備註</div>
            <div class="d_contentBtm">
              {{InfoData.Remarks}}
            </div>
          </div>
        </div>
        <div class="detail-footer">
          <q-btn color="primary" style="height:50px;font-size:17px;font-weight:bold;" label="前往付款" />
          <q-btn color="amber" @click="CommonJump('/passengerList/'+InfoData.OrderId+'',{})"
            style="height:50px;font-size:17px;font-weight:bold;" label="填寫旅客資料" />
        </div>
      </div>
    </div>
  </q-page>
</template>
<script>
  export default {
    props: [],
    data() {
      return {
        orderId: 0,
        InfoData: {},
        modelPrice: {},
      };
    },
    created() {
      if (this.$route.params.id) {
        this.orderId = this.$route.params.id;
      }
    },
    mounted() {
      this.getdemandInfo()
    },
    methods: {
      getdemandInfo() {
        if (this.orderId > 0) {
          this.$q.loading.show()
          this.apipost(
            "sellorder_post_GetOrderEntity", {
              ID: this.orderId
            },
            res => {
              this.$q.loading.hide()
              if (res.data.resultCode == 1) {
                this.InfoData = res.data.data.model;
                this.modelPrice = res.data.data.modelPrice;
              }
            },
            err => {}
          );
        }
      },
      toTime(date) {
        if (date) {
          return date.replace("T", " ");
        }
      },
    },
  };

</script>
