<template>
  <el-dialog  v-model="show" :title="title" width="1000px" append-to-body @close="close">
    <el-table height="50vh" ref="allBills" :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :label="language==0?'选择':'Selection'" :selectable="selectable"/>
      <el-table-column prop="id" :label="language==0?'订单号':'No.'"></el-table-column>
      <el-table-column prop="id" :label="language==0?'订单类型':'Order Type'">
        <template #default="scope">
          <span v-if="scope.row.orderType == '0'">{{language==0?'酒店订单':'Hotel Order'}}</span>
          <span v-if="scope.row.orderType == '1'">{{language==0?'接送订单':'Car Order'}}</span>
          <span v-if="scope.row.orderType == '2'">{{language==0?'餐饮订单':'Food Order'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" :label="language==0?'订单明细':'Detail'">
        <template #default="scope">
          <div v-if="scope.row.orderType == 0">
            <p>{{scope.row.messageObj.roomName}}</p>
            <p>{{scope.row.messageObj.roomInfo}}</p>
            <p>{{scope.row.messageObj.roomType}}</p>
            <p>{{scope.row.messageObj.roomStayDate}}</p>
          </div>
          <div v-if="scope.row.orderType == 1">
            <div v-for="(car,index) in scope.row.messageObj.carsList" :key="index">
              <p v-if="car.num>0">{{car.name}}：{{car.num}} 辆</p>
            </div>
          </div>
          <div v-if="scope.row.orderType == 2">
            <div v-for="(n,index) in scope.row.messageObj.foodsList" :key="index">
              <p v-if="n.num > 0">
                {{n.name}}({{n.categoryName}}) <text>{{n.num}} 份</text>
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="total" :label="language==0?'金额':'Amount'"></el-table-column>
    </el-table>
    <paginationPc
        v-show="total>0"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="total"
        @pagination="getList"
    />
        <template #footer>
          <div class="dialog-footer text-center">
            <el-button type="primary" @click="submit">{{language==0?'确定':'Confirm'}}</el-button>
            <el-button @click="cancel">{{language==0?'取消':'Cancel'}}</el-button>
          </div>
        </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, toRefs, watch} from 'vue'
import {getCurrentInstance} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
import {getCanInvoiceBills} from "@/apiPc/booking";
import {ElMessage} from "element-plus";
const {proxy} = getCurrentInstance()
const emit = defineEmits([ 'transfer'])
const language= useStorage('language',0)
const data = reactive({
  tableData: [],
  show: false,
  loading: false,
  title: '选择开票订单',
  query:{
    // activeId:'',
    // createById:'',
    // invoiced:'1',
    status:1
  },
  total:0
})
const { tableData,show,loading,title,query,total} = toRefs(data)
let choosedList = []
const choosedIds = []
const open = (params) => {
  title.value = params.title
  show.value = true
  choosedList = params.choosedList
  for (const p of choosedList) {
    choosedIds.push(p.id)
  }
  getList()
}
defineExpose({
  open
})
const getList = () => {
  loading.value = true
  getCanInvoiceBills(query.value).then(res=>{
    loading.value = false
    tableData.value = res.rows
    total.value = res.total

    for (var b of tableData.value) {
      b.messageObj = JSON.parse(b.message)
    }
  })
}
function handleSelectionChange(val) {
  // console.log(val)
  choosedList = val
}
const submit = () => {
  if(choosedList.length==0){
    ElMessage.warning(language.value==0?'请至少选择一个订单':'Please select at least one order')
    return
  }
  emit('transfer', choosedList)
  show.value = false
}
const cancel = () => {
  show.value = false
}


</script>

<style scoped lang="scss">

</style>