<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;
  }
  .deman_Header{
    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-row-between{
    display: flex;
    padding: 5px 0;
    flex: 1 100%;
    justify-content: space-between;
  }
  .d_titleBtm{
    color:#333;
    padding:0 5px;
  }
  .d_contentBtm{
    padding-top:2px;
    color:#999;
    padding:0 5px;
  }
</style>
<template>
  <q-page>
    <div class="order_detail">
      <div class="order_content">
        <div class="order_header">
          <div class="deman_Header">
            <div class="tour_code">需求單號：{{InfoData.Id}}</div>
            <div class="tour_name">
              {{InfoData.TripTitle}}
            </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">{{InfoData.CreateDateStr}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont icontime"></i> 訂單狀態
            </div>
            <div class="d_content">{{InfoData.DemandStatusStr}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont iconwo"></i> 聯絡人
            </div>
            <div class="d_content">{{InfoData.Name}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont iconemail"></i> 電子郵件
            </div>
            <div class="d_content">{{InfoData.EMail}}</div>
          </div>
          <div class="d_row">
            <div class="d_title">
              <i class="iconfont icontelephone"></i> 聯絡電話
            </div>
            <div class="d_content">{{InfoData.Mobile}}</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>
    </div>
  </q-page>
</template>
<script>
  export default {
    props: [],
    data() {
      return {
        Id: 0,
        InfoData: {},
      };
    },
    created() {
      if (this.$route.params.id) {
        this.Id = this.$route.params.id;
      }
    },
    mounted() {
      this.getdemandInfo()
    },
    methods: {
      getdemandInfo() {
        this.$q.loading.show()
        if (this.Id > 0) {
          this.apipost(
            "ws_get_GetService", {
              Id: this.Id
            },
            res => {
              this.$q.loading.hide()
              if (res.data.resultCode == 1) {
                this.InfoData = res.data.data;
              }
              else if (res.data.resultCode == 10000 || res.data.resultCode == 10001) {
              localStorage.removeItem("b2bUser");
              this.CommonJump('/login', {})
            }
            },
            err => {}
          );
        }

      }
    },
  };

</script>
