<template>

    <div class="row items-center">
        <IconLeft :size="18" class="q-mr-md cursor-pointer" @click="forwardOrder"></IconLeft>
        <div class="text-weight-bold cursor-pointer" @click="forwardOrder">订单/发票</div>
    </div>
<div v-loading="CancelLoading">
    <template v-if="order && !loading">
        <div class="q-mt-xl q-pa-xl rounded bg-info">
            <el-steps style="max-width: 100%;margin: 0 auto;" :active="active" align-center>
                <el-step title="选择商品" description="" />
                <el-step title="确认下单" description="" />
                <el-step title="待支付" description="" />
                <el-step :title="order.status==3?'交易取消':'交易完成'" description="" />
            </el-steps>
            <div class="q-mt-xl text-center text-weight-bold" style="font-size: 18px;">订单状态：{{order.statusname}}</div>
            <div v-if="order.status==1" class="q-mt-md row items-center flex-center" style="font-size: 13px;">
                <span>请在 </span>
                <el-countdown title="" format="DD [天] HH:mm:ss" :value="countValue" value-style="font-size:13px;color:#f89c53;"
                    class="q-mx-md inline" />
                <span> 内完成转账，超时订单自动取消</span>
            </div>
            <div class="row items-center flex-center q-mt-xl" v-if="order.status==1">
                <el-button size="large" @click="goControls(2)">取消订单</el-button>
                <el-button type="primary" size="large" @click="goControls(1)">去支付</el-button>
            </div>
        </div>
        <div class="order-bar rounded row q-mt-xl">
            <div class="item" style="width: 280px !important; min-width: 280px; text-align: left;">商品信息</div>
            <div class="item col">时长</div>
            <div class="item col">单价</div>
            <div class="item col">数量</div>
            <div class="item none-width">
                <div style="background-color: rgba(0,0,0,.08);width:1px">&nbsp;</div>
            </div>
            <div class="item col">小计</div>
        </div>
        <div class="order-body q-mt-lg">
            <div class="order-item rounded">
                <div class="title">
                    <span>{{ order.create }}</span>
                    <span class="q-ml-md">{{ order.ordernum }}</span>
                </div>
                <div class="bg-white rounded row items-center">
                    <div class="item row items-center"
                        style="width: 280px !important; min-width: 280px; text-align: left;padding:24px;">
                        <img :src="order.cover" style="width:72px;" class="rounded">
                        <div class="q-ml-lg">{{ order.pricetypename }}_{{ order.vipname }}</div>
                    </div>
                    <div class="item col">{{ order.productname }}</div>
                    <div class="item col">¥{{ order.price.toFixed(2) }}</div>
                    <div class="item col">{{ order.use }}席位</div>
                    <div class="item none-width">
                        <div style="background-color: rgba(0,0,0,.08);width:1px;height:72px;">&nbsp;</div>
                    </div>
                    <div class="item col">
                        <div class="text-weight-bold q-mb-sm" style="font-size: 16px">¥{{ order.price.toFixed(2) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="q-mt-lg text-right">
            <span style="font-size: 14px;">订单总金额：￥</span>
            <span style="font-size: 18px" class="text-weight-bold text-dark">{{ order.price.toFixed(2) }}</span>
        </div>
        <div class="q-mt-lg text-right" v-if="order.status==2">
            <span style="font-size: 14px;">实付总金额：￥</span>
            <span style="font-size: 18px" class="text-weight-bold text-dark text-negative">{{ order.price.toFixed(2) }}</span>
        </div>
    </template>
    <div v-if="loading" style="height: 200px;margin-top: 100px;" v-loading="loading"></div>
    <div v-if="!order && !loading">
      <el-empty class="q-ma-xl" description="暂无数据" />
    </div>
</div>
    <WePay v-if="showPay" :orderid="order.orderid" @close="showPay=false" @success="showPay=false,getOrder()"></WePay> 
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios"
import OrderService from "@/services/OrderService"
import { ref } from "vue"
import { useRouter } from "vue-router"
import WePay from '@/components/Pay/WePay.vue'

const order = ref<any>()
const loading = ref(false)
const router = useRouter()

const countValue = ref(Date.now() + 1000 * 60 * 60 * 7)
const showPay = ref(false)
const active = ref(0)
const CancelLoading = ref(false)

const goControls = (type:Number) => {
   if(type==1) showPay.value = true
   else if(type==2) {
    ElMessageBox.confirm(
        `此操作将取消该订单，是否确定?`,
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(async () => {
            try {
              await CanceltOrders()
            } catch (error) { }
        })
        .catch(() => { });
  }
}

const CanceltOrders = async ()=>{
  if(CancelLoading.value)return
  CancelLoading.value=true
  const response = await OrderService.CancelPPTOrder(order.value.orderid)
  if(response.data.resultCode == ApiResult.SUCCESS){
    await getOrder()
  }

  CancelLoading.value=false
}

const forwardOrder = (id: string) => {
    router.push('/u/order')
}

const getOrder = async () => {
    const orderid = router.currentRoute.value.params.id?.toString()
    if (!orderid) return
    loading.value = true

    const response = await OrderService.GetOrder(orderid)
    if (response.data.resultCode == ApiResult.SUCCESS) {
        order.value = response.data.data
        if(order.value.status==1) active.value = 3
        if(order.value.status==2) active.value = 4
        if(order.value.expireddate) countValue.value = new Date(order.value.expireddate.replaceAll('-','/')).getTime()//order.value.expireddate//new Date(order.value.create.replaceAll('-','/')).getTime() + 1000 * 60 * 60 * 720
    }

    loading.value = false
}

getOrder()
</script>

<style scoped>
.order-bar {
    background: #f6f7f9 !important;
}

.order-bar .item,
.order-body .order-item .item {
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    color: gray;
    text-align: right;
    min-width: 108px;
}

.order-bar .item.none-width,
.order-body .order-item .item.none-width {
    min-width: unset;
}

.order-body {}

.order-body .order-item {
    background: #f6f7f9;
    border: 1px solid rgba(0, 0, 0, .08);
    font-size: 14px;

}

.order-body .order-item .title {
    padding: 0 24px;
    height: 45px;
    line-height: 45px;
    color: grey;
    white-space: nowrap;
    overflow: hidden;
}

.order-body .order-item .item {
    height: auto;
    line-height: 1;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
}
</style>