<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" v-if="detail.OrderStatus === 1">請在您下單成功後30分鐘內完成支付，否則訂單會被系統自動取消</div>
            </div>
            <div class="">
                <div class="f12 text-grey-6">訂單編號：#{{detail.OrderNo}}</div>
                <div class="f12 text-grey-6 q-mt-md">下單日期：{{detail.SelectStartTime}}</div>
            </div>
        </div>
        <q-separator color="grey-2" class="q-my-md" />
        <div v-if="detail.OrderNo">
          <carPriceDetail v-if="[12,13,14].includes(detail.GoodsType)"  :orderInfo="detail"></carPriceDetail>
          <groupPriceDetail v-if="[1,2,3].includes(detail.GoodsType)" :orderInfo="detail"></groupPriceDetail>
          <hotelPriceDetail v-if="[8,9,10,11].includes(detail.GoodsType)" :orderInfo="detail"></hotelPriceDetail>
          <ticketPriceDetail v-if="[4,5,6,7].includes(detail.GoodsType)" :orderInfo="detail"></ticketPriceDetail>
          </div>
        <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="row items-center">
                <q-btn color="primary"  flat dense class="q-mr-md q-px-md" @click="navigateToWechat">
                    <i class="iconfont iconmessage1"></i>联系客服</q-btn>
                <q-btn color="primary"  dense flat class="q-mr-md q-px-md" @click="showCode = true">
                    <i class="iconfont iconiconfontscan"></i>扫码咨询</q-btn>
                <!-- <q-btn color="primary" outline dense label="取消訂單" @click="cancalOrder" class="q-mr-md q-px-md"/>
                <q-btn color="primary" unelevated dense label="前往付款" @click="goPayOrder" class="q-px-md"/> -->
                
            <div class="text-right" v-if="detail.OrderStatus==1">
               <q-btn color="primary" dense outline class="q-px-sm" label="取消訂單" @click="cancalOrder(detail.OrderNo)" />
               <q-btn color="primary" dense unelevated class="q-px-sm q-ml-sm" label="立即支付" @click="CommonJump('/pay/'+detail.OrderNo,{},'blank')" />
            </div>
            <!-- <div class="text-right" v-else>
              <q-btn color="dark" dense flat class="q-px-sm" @click="CommonJump('/orderinfo/'+orderNo,{},'blank')" label="查看訂單" />
           </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="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">{{detail.OrderMake}}</div>
              <!-- <div class="q-mt-sm text-dark">
                出行日期：{{detail.SelectStartTime}}（本地时间）
              </div> -->
              <div class="q-mt-sm text-grey-6">
                商品類型：{{goodTypeList[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">
                {{detail.Remarks}}
            </div>
        </div> -->
    </q-card>
    <q-card class="rounded-borders q-pa-md q-mt-md" flat v-if="![1,2,3].includes(detail.GoodsType)&&detail.GoodsType!=15">
        <div v-if="detail.OrderNo">
          <car-map v-if="[12,13,14].includes(detail.GoodsType)"  :orderInfo="detail"></car-map>
          <!-- <groupMap v-if="[1,2,3].includes(detail.GoodsType)" :orderInfo="detail"></groupMap> -->
          <hotelMap v-if="[8,9,10,11].includes(detail.GoodsType)" :orderInfo="detail"></hotelMap>
          <ticketMap v-if="[4,5,6,7].includes(detail.GoodsType)" :orderInfo="detail"></ticketMap>
          </div>
    </q-card>
    <div v-if="(!orderNo || orderNo == '') && !loading" class="text-center q-my-xl">
      <none-data
        iconType="order"
        title="沒有找到您的訂單信息哦"
        subtitle="趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
      ></none-data>
    </div>
    <q-dialog v-model="showCode">
      <img src="../../../assets/img/kefu.png"/>
    </q-dialog>
  </div>
</template>

<script>
import noneData from 'src/components/common/noneData.vue'

import carPriceDetail from './carPriceDetail.vue'
import groupPriceDetail from './groupPriceDetail.vue'
import hotelPriceDetail from './hotelPriceDetail.vue'
import ticketPriceDetail from './ticketPriceDetail.vue'
import carMap from './carMap.vue'
import groupMap from './groupMap.vue'
import hotelMap from './hotelMap.vue'
import ticketMap from './ticketMap.vue'
export default {
    components: {noneData, carPriceDetail,groupPriceDetail,hotelPriceDetail,ticketPriceDetail,carMap,groupMap,hotelMap,ticketMap},
    // GoodsType: this.productType,//商品类型（见枚举） 12包车 13 接机 14送机
data() {
    return {
      goodTypeList: ['','一日游','多日游','小包团','景点门票','主题乐园','博物馆','历史景点','温泉饭店','星级饭店','度假村','民宿','包车','接机','送机','签证'],
      showCode: false,
        detail: {},
        orderIcon: '',
        iconColor: '',
        orderNo: '',
        loading: true,
    }
},
created() {},
mounted() {
    const {orderNo} = this.$route.params
    if(orderNo) {
    this.getOrderDetail(orderNo)
    } else {
        this.goHomeHandler()
    }
},
methods: {
  goPayOrder() {
    this.CommonJump('/pay/' + this.orderNo)
  },
    cancalOrder() {
      this.$q.dialog({
        title: '取消確認',
        message: '訂單取消後，系統將立即釋放位置，請問是否執行?',
        cancel: true,
        persistent: true
      }).onOk(() => {
        this.apipost('GetCancelOrder_post',{OrderNo: this.orderNo},r=>{
          if(r.data.resultCode==1){
            this.$message.success('訂單取消成功')
            window.location.reload()
          }else{
            this.$message.error('訂單取消失敗，請重新嘗試')
          }
        })
      }).onCancel(() => {
        
      })
    },
    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=res.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
      );
    },
    navigateToWechat() {
      window.open('https://work.weixin.qq.com/kfid/kfcaec7130ac124872a', '_blank')
    }
}
}
</script>

<style>

</style>