<template>
  <div>
    <el-card :body-style="{'padding':'0'}">
      <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'我的预订':'My reservation' }}</h3></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="blueTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label>
            <label class="blueTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label>
            {{ language==0?'订单编号：':'No.' }} {{ b.id }}
          </div>
          <div class="status-po">
              <span  class="bg-warning" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'"
                     style="margin-right: 24px;"> 待支付
              </span>
            <span  class="bg-warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">已取消</span>
            <span  class="bg-blue" v-if="b.status == '1'">支付成功</span>
            <span class="bg-warning" v-if="b.status == '2'">已取消</span>
            <span class="bg-danger" v-if="b.status == '3'||b.status == '4'">已退订</span>
          </div>
          <div class="bbody" v-if="b.orderType == 0">
            <h3 class="name">{{b.name}}</h3>
            <p>{{b.messageObj?.roomStayDate}}</p>
            <p>{{b.messageObj?.roomName}}</p>
            <p>{{b.messageObj?.roomInfo}}</p>

            <el-row justify="space-between">
             <el-col :lg="8">
               <span class="bigMoney"> {{ language==0?'¥':'€' }} {{b.total}}</span>
             </el-col>

              <el-col :lg="8">
                <div class="text-right">
                  <el-button class="mb10" plain round type="primary" @click="goDetail(n)">
                    {{ language==0?'详情':'Detail' }}</el-button>
                  <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goPay(b)"
                             class="mb10" plain round type="primary" >
                    {{ language==0?'支付':'Pay' }}</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <!--        {{b}}-->
        </div>

      </div>
      <div class="pd20"></div>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
import {newbilllist} from "@/apiPc/common";
const language= useStorage('language',0)
const list = ref([])

onMounted(()=>{
  getList()
})
function getList() {
  newbilllist().then(res=>{
    list.value = res.rows
    for (var b of list.value) {
      b.messageObj = JSON.parse(b.message)
    }
  })
}
</script>

<style scoped lang="scss">
.bigMoney{font-size: 24px;font-family: "DIN Alternate";}
.name{font-size: 18px;margin: 15px 0 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;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;

  h3 {
    font-size: 16px;
    color: var(--el-color-primary);
  }
}
.item{
  margin: 0 0 20px;
  background: #FBFCFD;
  border-radius: 2px;
  position: relative;
  .bbody{padding: 0 15px 20px;}
  .title label{border-radius: 5px 0 5px 0;  color: #fff;  padding:4px 10px;margin-right: 10px;}
  p{margin: 5px 0;}
  .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>