<template>
  <div>
    <el-card :body-style="{'padding':'0'}">
      <div class="indexTitle">
        <h3 class="leftboderTT">{{ language==0?'我的预订':'My reservation' }}
        </h3>

<!--        <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'发票开具':'Invoice' }}</el-button>-->
        <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>
      </div>
      <el-empty :image="`/img/order_no.png`" :image-size="228"  v-if="list?.length == 0"/>

      <div class="pd20">
        <div v-for="b in list" class="item">
          <div class="title">
            <label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label>
            <label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
            <label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
            <label class="orangeTag" v-if="b.orderType == 3"> {{ language==0?'化妆':'MakeUp' }} </label>
            <label class="orangeTag" v-if="b.orderType == 4"> {{ language==0?'拍摄':'Shooting ' }} </label>
            <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span>
          </div>

          <div class="status-po">
              <span  class="bg-warning" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'">
                {{ language == 0 ?'待支付':'Unpaid' }}
              </span>
            <span  class="bg-warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">{{ language == 0 ? '已取消' : 'Canceled' }}</span>
            <span  class="bg-blue" v-if="b.status == '1'">{{ language == 0 ?'支付成功':'successful' }}</span>
            <span class="bg-warning" v-if="b.status == '2'">{{ language == 0 ? '已取消' : 'Canceled' }}</span>
            <span class="bg-danger" v-if="b.status == '3'||b.status == '4'">{{ language == 0 ? '已退订' : 'Refunded' }}</span>
            <span class="bg-danger" v-if="b.status == '7'">{{ language == 0 ? '退款审核中' : 'Refund in review' }}</span>
          </div>

          <el-row class="pd20 mt10" justify="space-between" align="middle">
            <el-col :lg="9">
              <div v-if="b.orderType == 0">
                <h3 class="name">{{b.name}}</h3>
                <p v-if="language==0">{{b.messageObj?.roomStayDate}}</p>
                <p v-else>{{b.messageObj?.roomStayDate.replace('共',' total ').replace('晚',' days')}}</p>
                <p>{{b.messageObj?.roomInfo}}</p>

              </div>
              <div v-if="b.orderType == 1">
                <h3 class="name">{{b.name}}</h3>
                <div v-for="(car,index) in b.messageObj.carsList" :key="index">
                  <p v-if="car.num>0">{{car.typeName}}：{{car.name}}：{{car.num}} {{ language==0?'辆':'Cars' }}</p>
                </div>
<!--                <p>{{b.messageObj}}</p>-->
<!--                <p>{{b.extJsonObj}}</p>-->
              </div>
              <div v-if="b.orderType == 2">
                <h3 class="name">{{b.name}}</h3>
                <div v-for="(n,index) in b.messageObj.foodsList" :key="index">
                  <p v-if="n.num > 0">
                    {{n.name}}({{n.categoryName}}) * <span>{{n.num}} {{language==0?'份':'pcs'}}</span>
                  </p>
                </div>
                <p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p>

              </div>
              <div v-if="b.orderType==3 ||b.orderType == 4">
                <h3 class="name">{{b.name}}</h3>
                <p >
                  {{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }}
                </p>
              </div>
            </el-col>
            <el-col :lg="6">
              <div v-if="b.orderType == 0">
                <p>{{b.messageObj?.roomName}}</p>
                <p>{{b.messageObj?.roomInfo}}</p>
              </div>
              <div v-if="b.orderType == 1">
              </div>
              <div v-if="b.orderType == 2">
              </div>
              <div v-if="b.orderType == 3||b.orderType == 4">
                <p>{{ b.extJsonObj.packageName }}</p>
              </div>
            </el-col>
            <el-col :lg="3" class="text-center">
              <span class="text-warning"> {{ language==0?'¥':'€' }}
                <span class="bigMoney">{{language==0?b.total:b.totalEn}}</span>
              </span>
            </el-col>

            <el-col :lg="6" >
              <div class="text-right mb20 text-danger">
                <el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss" :value="b.countdown" @finish="finish(b)"/>
              </div>

              <div class="text-right">
                <el-button v-if="b.orderType == 0&&b.viewStatus!=0" class="mb10" plain round type="success" size="small" @click="Rebook(b)">
                  {{ language==0?'再次预订':'Rebook' }}</el-button>
                <el-button class="mb10" plain round type="primary" size="small" @click="goDetail(b)">
                  {{ language==0?'详情':'Detail' }}</el-button>
                <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)"
                           class="mb10" plain round type="primary" size="small" >
                  {{ language==0?'支付':'Pay' }}</el-button>
                <el-button v-if="b.viewStatus==0"  @click="cancel(b)"  class="mb10" plain round type="warning" size="small" >
                  {{ language==0?'取消订单':'Cancel Order' }}</el-button>
                <el-button v-if="b.viewStatus==5"  @click="unsubscribe(b)"  class="mb10" plain round type="" size="small" >
                  {{ language==0?'退订':'Unsubscribe' }}</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <div class="pd20"></div>

  </div>
</template>

<script setup>
import {onMounted,getCurrentInstance} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
import {newbilllist} from "@/apiPc/common";
import useUserStore from "@/store/modules/user";
import dayjs from 'dayjs'
import {cancelOrder2,cancelOrder} from "/@/apiPc/booking";

import {ElMessage} from "element-plus";

const router = useRouter()
const language= useStorage('language',0)
const list = ref([])
const user = useUserStore().user
const {proxy} = getCurrentInstance()

onMounted(()=>{
  getList()
})
function finish(bill){
  bill.status = '2'
  // getList()
}
function getList() {
  newbilllist({createById:user.userId}).then(res=>{
    list.value = res.rows
    for (var b of list.value) {
      b.messageObj = JSON.parse(b.message) || {}
      b.extJsonObj = JSON.parse(b.extJson) || {}
      if(b.surplus&&b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')){
        b.countdown = Date.now() + Number((b.surplus.split(',')[0]*60 + b.surplus.split(',')[1])*10)
      }
    }
  })
}
function goDetail(b) {
  router.push({
    name: 'bookingPay',
    query: {
      orderId: b.id,
      orderType: b.orderType
    }
  })
}

function Rebook(row){
  console.log(row)
  router.push({
    name:'hotelDetail',
    params:{
      cptId:row.activeId,
      hotelId:row.hotelId
    },
    query:{
      id:row.extId
    }
  })
}

const cancel = (row) => {
//取消订单
  proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => {
    return cancelOrder2(row.id).then(res=>{
      getList()
      ElMessage({
        message: language.value == 0?'操作成功':'Successful operation!',
        type: 'success'
      })
    })
  })
}

const unsubscribe = (row) => {
  proxy.$modal.confirm(language.value == 0 ?`确定退款吗 ?`:'Are you sure to refund?').then(() => {
    return cancelOrder(row.id).then(res=>{
      getList()
      ElMessage({
        message: language.value == 0?'已提交退款，请等待审核!':'Refund has been submitted, please wait for review!',
        type: 'success'
      })
    })
  })
}


function toInvoice(){
  router.push({
    name: 'invoice'
  })
}
</script>

<style scoped lang="scss">
.bigMoney{font-size: 24px;font-family: "DIN Alternate";}
.name{font-size: 18px;margin: 0;}
.status-po{position: absolute;right: 0;top: 0;font-size: 12px;
  color: #FFFFFF;
  span{border-radius: 0px 10px 0px 10px;padding: 4px 10px;}
  .bg-danger{background: #E60012;}
  .bg-warning{background: #e89f39;}
  .bg-pink{background: #F740A6;}
  .bg-primary{background: var(--el-color-primary)}
  .bg-blue{background: #00a0e9}
}
.indexTitle {
  margin: 20px 0 12px; overflow: visible;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;
  .fr{margin: -8px 0 0}
  h3 {display: inline-block;
    font-size: 16px;
    color: var(--el-color-primary);
  }
}
.item{
  .name{font-size: 18px;
    color: #000000;margin: 0 0 10px;}
  p{margin: 8px 0 0;color: #707070;font-size: 14px;}

  margin: 0 0 20px;border: 1px solid #E5E5E5;
  border-radius: 10px;
  position: relative;
  .bbody{padding: 0 15px 20px;}
  .title{background: #F7F7F7;border-bottom: 1px solid #E5E5E5;
    span{font-size: 14px;
      color: #4C5359;}
  }
  .title label{border-radius: 5px 0 5px 0; font-size: 12px; color: #fff;  padding:4px 10px;margin-right: 10px;}
  .blueTag{
    background-color: #1EC886;}
  .purpleTag {
    background-color: #717bef;
  }
  .orangeTag {
    background-color: #ff8124;
  }
}
.billFoot {
  .price {
    width: 100%;
    justify-content: space-between;
  }
}

.billFoot .tip {
  font-size: 24px;
  color: #999;
  font-weight: 500;
  margin: 0 20px;
}
.status {
  position: absolute;
  right: 10px;
  bottom: 60px;
  white-space: nowrap;

  .warning {
    color: #ff8124;
  }

  .danger {
    color: #da2a2a;
  }

  .gary {
    color: #666;
  }

  .success {
    color: #1EC886;
  }
}
</style>