<template>
  <div class="content-page order-preview">
    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">訂單狀態</div>
        <div class="q-mt-lg row">
            <div class="col">
                <div class="row items-center">
                    <q-icon name="iconfont iconsuccess" :class="`${orderIcon}`" size="32px" :color="`${iconColor}`" />
                    <div class="q-ml-md text-h6 text-weight-bold" :class="`text-${iconColor}`">{{["","待付款","已付款", "已完成", "已取消"][detail.OrderStatus]}}</div>
                </div>
                <div class="q-mt-md f12 text-grey-6">請在您下單成功後30分鐘內完成支付，否則訂單會被系統自動取消</div>
            </div>
            <div class="">
                <div class="f12 text-grey-6">訂單編號：#{{detail.OrderNo}}</div>
                <div class="f12 text-grey-6 q-mt-md">下單日期：{{detail.CreateTime}}</div>
            </div>
        </div>
        <q-separator color="grey-2" class="q-my-md" />
        <div class="row">
            <div class="text-subtitle1 col">
                <span>應付金額：</span>
                <span class="text-subtitle2">CNY</span>
                <span class="q-ml-sm text-weight-bolder">{{ moneyFormat(detail.TotalPrice,2) }}</span>
            </div>
            <div class="">
                <q-btn color="primary" outline dense class="q-mr-md q-px-md">
                    <i class="iconfont iconmessage1"></i>联系客服</q-btn>
                <q-btn color="primary" outline dense class="q-mr-md q-px-md">
                    <i class="iconfont iconiconfontscan"></i>扫码咨询</q-btn>
                <q-btn color="primary" outline dense label="取消訂單" class="q-mr-md q-px-md"/>
                <q-btn color="primary" unelevated dense label="前往付款" class="q-px-md"/>
            </div>
        </div>
    </q-card>

    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">商品訊息</div>
        <div class="row q-mt-md">
            <q-img
              :src="detail.GoodsPic"
              class="rounded-borders q-mr-md"
              spinner-color="grey-2"
              style="width: 150px"
            />
            <div class="col">
              <div class="text-body1 ellipsis">{{detail.GoodsName}}</div>
              <div class="q-mt-sm text-grey-6">2023-03-15從成都出發 成人x2; </div>
              <div class="q-mt-sm text-dark">
                出行日期：{{detail.SelectStartTime}}（本地时间）
              </div>
              <div class="q-mt-sm text-grey-6">
                商品類型：{{detail.GoodsType}}
              </div>
            </div>
          </div>
    </q-card>

    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">訂購人訊息</div>
        <div class="f12 q-mt-sm text-grey-6">如你的预订有任何变动，我们将及时通知你</div>
        <div class="row q-col-gutter-md q-mt-md">
            <div class="col-6">
                <div class="f12 text-grey-6">姓氏</div>
                <div class="q-mt-sm text-body1">{{detail.SurName}}</div>
            </div>
            <div class="col-6">
                <div class="f12 text-grey-6">名字</div>
                <div class="q-mt-sm text-body1">{{detail.Name}}</div>
            </div>
            <div class="col-6">
                <div class="f12 text-grey-6">手機號碼</div>
                <div class="q-mt-sm text-body1">{{detail.ContactNumber}}</div>
            </div>
            <div class="col-6">
                <div class="f12 text-grey-6">邮箱 (用于接收订单确认邮件)</div>
                <div class="q-mt-sm text-body1">{{detail.Mailbox}}</div>
            </div>
        </div>
        <div>
            <q-separator color="grey-2" class="q-my-md" />
            <div class="text-subtitle1 text-weight-bolder">用戶備註</div>
            <div class="rounded-borders bg-orange-1 col q-mt-md q-pa-md text-orange">
                凍死了防控就是大陸飛科技阿斯蒂芬盧卡斯經費達拉斯
            </div>
        </div>
    </q-card>
    

    <q-card class="rounded-borders q-pa-md q-mt-md" flat>
        <div class="text-subtitle1 text-weight-bolder">使用地点</div>
        
          <div class="q-pa-md" :class="{
            'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
          }">
            <componentsMap :AddressObj="detail"/>
          </div>
          <carPriceDetail v-if="detail.OrderNo" :orderInfo="detail"></carPriceDetail>
    </q-card>
    <div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
      <none-data
        iconType="order"
        title="沒有找到您的訂單信息哦"
        subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
      ></none-data>
    </div>
  </div>
</template>

<script>
import componentsMap from "../../../components/car/Map.vue";
import carPriceDetail from './carPriceDetail.vue'
export default {
    components: {componentsMap, carPriceDetail},
data() {
    return {
        detail: {},
        orderIcon: '',
        iconColor: '',
        orderNo: '',
        loading: true,
    }
},
created() {},
mounted() {
    const {orderNo} = this.$route.params
    if(orderNo) {
    this.getOrderDetail(orderNo)
    } else {
        this.goHomeHandler()
    }
},
methods: {
    goHomeHandler(){
      this.loading=false
      setTimeout(() => {
          location.href = location.origin;
        }, 3000);
    },
    getOrderDetail(orderNo) {
      this.apipost(
        "GetDetailsByOrderNo_post",
        {OrderNo: orderNo
        },
        (res) => {
          if (res.data.resultCode == 1) {
            this.detail = res.data.data
            this.orderIcon = ["","icontime1","iconsuccess", "iconsuccess", "icontishi"][this.detail.OrderStatus]
            this.iconColor = ["","blue","blue", "green", "grey"][this.detail.OrderStatus]
            console.log('get detail', this.orderIcon, this.iconColor)
          this.orderNo=OrderNo
          this.orderInfo=r.data.data
          this.loading=false
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
}
}
</script>

<style>

</style>