<template>
  <el-dialog v-model="dialog" title="患者费用信息"
             width="90%"
             @closed="emit('close')">
    <el-tag>
      总费用: {{ props?.sum?.sum }} 元
    </el-tag>
    <el-tag type="success">
      数量: {{ props?.sum?.amount }} 条
    </el-tag>
    <div :style="{height: getWindowSize.h - 400 + 'px'}">
      <el-auto-resizer class="table__v2">
        <template #default="{ height, width }">
          <el-table-v2 :columns="colums"
                       :data="data"
                       :sort-by="sortBy"
                       :width="width"
                       fixed
                       @column-sort="onSort"
                       :height="height"/>
        </template>
      </el-auto-resizer>
    </div>
  </el-dialog>

</template>

<script setup name='DoctorSOrderFee'>
import {getWindowSize} from "@/utils/window-size";
import {TableV2SortOrder} from "element-plus";
import {clone} from "@/utils/clone";

const props = defineProps({
  data: {
    type: Array,
  },
  sum: {
    type: Object
  }
})

const colums = [
  {
    key: 'chargeDate',
    dataKey: 'chargeDate',
    title: '日期',
    width: 150,
    fixed: true,
    sortable: true
  }, {
    key: 'orderCode',
    dataKey: 'orderCode',
    title: '收费码',
    width: 80,
  }, {
    key: 'chargeName',
    dataKey: 'chargeName',
    title: '名称',
    width: 150,
  }, {
    key: 'drugSpecification',
    dataKey: 'drugSpecification',
    title: '规格',
    width: 150,
  }, {
    key: 'chargeStatusName',
    dataKey: 'chargeStatusName',
    title: '上账',
    width: 120,
  }, {
    key: 'chargeAmount',
    dataKey: 'chargeAmount',
    title: '数量',
    width: 70,
  }, {
    key: 'chargeFee',
    dataKey: 'chargeFee',
    title: '金额',
    width: 70,
  }, {
    key: 'orderName',
    dataKey: 'orderName',
    title: '药品单号',
    width: 150,
  }, {
    key: 'execUnitName',
    dataKey: 'execUnitName',
    title: '执行科室',
    width: 150,
  }, {
    key: 'deptCodeName',
    dataKey: 'deptCodeName',
    title: '病房',
    width: 150
  }
]
let sortBy = $ref({
  key: 'chargeDate',
  order: TableV2SortOrder.ASC,
})

const onSort = (_sortBy) => {
  if (!data) return
  data = data.reverse()
  sortBy = _sortBy
}

const emit = defineEmits(['close'])
const dialog = true

let data = $ref([])

onMounted(() => {
  data = clone(props.data)
  if (!data) return
  data.sort((a, b) => {
    return b.chargeDate.localeCompare(a.chargeDate)
  })
})

</script>

<style scoped lang="scss">
.table__v2 {
  :deep(.el-table-v2__main) {
    font-size: 12px;
  }
}
</style>
