<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 v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228"/>
      <reservation-info v-else :list="list" @refresh="getList"></reservation-info>
    </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 ReservationInfo from "/@/viewsPc/center/info/reservationInfo.vue";

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

onMounted(() => {
  getList()
})


function getList() {
  newbilllist({createById: user.userId}).then(res => {
    list.value = res.rows || []
    for (let b of list.value) {
      b.messageObj = JSON.parse(b.message) || {}
      b.extJsonObj = JSON.parse(b.extJson) || {}
      if (b.orderType == 5) {
        try {
          b.extJsonObj.ticketDate = b.extJsonObj.ticketDate ? JSON.parse(b.extJsonObj.ticketDate) : {}
          b.extJsonObj.ticketType = b.extJsonObj.ticketType ? JSON.parse(b.extJsonObj.ticketType) : {}
        } catch (e) {
          console.log(e)
        }
      }
      if ( b.status == '0') {
        b.countdown = Number(b.surplus)
      }
    }
  })
}

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

<style lang="scss" scoped>
.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>