<template>
  <el-dialog  v-model="show" :title="title" width="1000px" append-to-body @close="close">
    <el-table 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="订单号"></el-table-column>
      <el-table-column prop="id" label="订单类型"></el-table-column>
      <el-table-column prop="id" label="订单明细">
        <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="金额"></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";
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',
    // venueId:''
  },
  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.data.rows
    total.value = res.data.total

    for (var b of tableData.value) {
      b.messageObj = JSON.parse(b.message)
    }
  })
}
const submit = () => {

}
const cancel = () => {
  show.value = false
}


</script>

<style scoped lang="scss">

</style>