<template>
  <div class="pd20">
    <div v-for="b in list" class="item">
      <div class="title">
        <label v-if="b.orderType == 0" class="blueTag"> {{ language == 0 ? '酒店' : 'HOTEL' }} </label>
        <label v-if="b.orderType == 1" class="purpleTag"> {{ language == 0 ? '车辆' : 'TRANSPORTATION' }} </label>
        <label v-if="b.orderType == 2" class="orangeTag"> {{ language == 0 ? '餐饮' : 'DINING' }} </label>
        <label v-if="b.orderType == 3" class="orangeTag"> {{ language == 0 ? '化妆' : 'MakeUp' }} </label>
        <label v-if="b.orderType == 4" class="orangeTag"> {{ language == 0 ? '拍摄' : 'Shooting ' }} </label>
        <label v-if="b.orderType == 5" class="orangeTag"> {{ language == 0 ? '票务' : 'TICKETING ' }} </label>

        <span>{{ language == 0 ? '订单编号：' : 'No.' }} {{ b.id }}</span>
      </div>

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

      <el-row align="middle" class="pd20 mt10" justify="space-between">
        <el-col :lg="9" :md="12" :sm="12" :xs="24">
          <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>

          <div v-if="b.orderType==5">
            <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]-->
              <!--                  }}-->
              {{ b.extJsonObj.ticketDate.name }}
            </p>
          </div>
        </el-col>
        <el-col :lg="6" :md="12" :sm="12" :xs="24">
          <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>
          <div v-if="b.orderType == 5">
            <p>{{ b.extJsonObj.packageName }}</p>
          </div>
        </el-col>
        <el-col :lg="3" :md="6" :sm="6" :xs="6" 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" :md="16" :sm="16" :xs="16">
          <div class="text-right mb20 text-danger" v-if="b.status == '0' && b.countdown>0">
            <el-countdown
                :value="b.countdown"
                format="D天 HH:mm:ss"
                value-style="color:#E60012;font-size:16px;"
                @finish="finish(b)"/>
          </div>

          <div class="text-right">
            <el-button v-if="(b.orderType == 0||b.orderType == 5)&&b.viewStatus!=0 &&!min" class="mb10" plain round
                       size="small" type="success"
                       @click="Rebook(b)">
              {{ language == 0 ? '再次预订' : 'Rebook' }}
            </el-button>
            <el-button class="mb10" plain round size="small" type="primary" @click="goDetail(b)">
              {{ language == 0 ? '详情' : 'Detail' }}
            </el-button>
            <el-button v-if="b.status == '0' &&!min" class="mb10"
                       plain round size="small" type="primary" @click="goDetail(b)">
              <span
                  v-if="b.paymentType=='4'||b.paymentType=='5'">{{
                  language == 0 ? '上传凭证' : 'Upload Payment Proof'
                }}</span>
              <span v-else>{{ language == 0 ? '支付' : 'Pay' }}</span>
            </el-button>
            <el-button class="mb10" plain round size="small" type="warning" @click="downInvoice(b)">
              <span>{{ language == 0 ? '下载缴费单' : 'Download Invoice' }}</span>
            </el-button>
            <el-button v-if="b.viewStatus==0 &&!min" class="mb10" plain round size="small" type="warning"
                       @click="cancel(b)">
              {{ language == 0 ? '取消订单' : 'Cancel Order' }}
            </el-button>
            <el-button v-if="b.viewStatus==5 && !min" class="mb10" plain round size="small" @click="unsubscribe(b)">
              {{ language == 0 ? '退订' : 'Unsubscribe' }}
            </el-button>

          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import {useStorage} from "@vueuse/core";
import {cancelOrder, cancelOrder2} from "/@/apiPc/booking";
import {ElMessage} from "element-plus";
import {getCurrentInstance} from "@vue/runtime-core";

defineProps({
  list: {
    type: Array,
    default: () => []
  },
  min: {
    type: Boolean,
    default: false
  },
})

const {proxy} = getCurrentInstance()
const emit = defineEmits(['refresh'])

const language = useStorage('language', 0)
const router = useRouter()

function finish(bill) {
  bill.status = '2'

  // emit('refresh')
}

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

function goDetail(b) {
  router.push({
    name: 'bookingPay',
    query: {
      orderId: b.id,
      orderType: b.orderType
    }
  })
}

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

      emit('refresh')
    })
  })
}

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

      emit('refresh')
    })
  })
}

const downInvoice = (row) => {
  proxy.download(``, {
    id: row.id
  }, `Invoice_${new Date().getTime()}.pdf`)
}

</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>