<template>
  <xc-table-v3 :data="tempYzData"
               :height="400"
               :click-to-select="false"
               :columns="header"
               :row-class-name="rowClassName"
               @row-click="rowClick"/>
</template>

<script setup name='YzTableV2' lang="tsx">
import XcTableV3 from "@/components/xiao-chan/xc-table-v3/XcTableV3.vue";
import {
  selectedData,
  tempYzData,
  yiZhuData,
  associateOrders,
  clearAssociate,
  drugManual
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {XcColumn} from "@/components/xiao-chan/xc-table-v3/XcColumn";
import {stringIsBlank} from '@/utils/blank-utils'
import {defineEmits, defineProps, h} from 'vue'
import {getFormatDatetime} from "@/utils/date";

const props = defineProps({
  voidOrders: Function
})

const emits = defineEmits(['rowClick', 'clickAssociate'])

const header: XcColumn<any>[] = [
  {
    type: 'selection',
    title: '',
    width: 20
  },
  {
    type: 'index',
    title: '序号',
    width: 40
  },
  {
    title: '组',
    key: 'orderGroup',
    cellRenderer: ({cellData}) => (
        <span style="color:red">{cellData}</span>
    ),
    width: 20
  },
  {
    title: '状态',
    key: 'statusFlag',
    cellRenderer: ({row, cellData}) => (
        getYiZhuFlag(cellData)
    ),
    width: 40
  },
  {
    key: 'actOrderNo',
    title: '医嘱号',
    width: 100
  },
  {
    key: 'orderName',
    title: '医嘱号',
    width: 250
  },
  {
    key: 'dose',
    title: '剂量',
    width: 40,
    cellRenderer: ({row}) => (
        <span>{row.dose} {row.doseUnitName}</span>
    )
  },
  {
    key: 'frequCode',
    title: '频率',
    width: 120
  },
  {
    key: 'supplyCodeName',
    title: '给药方式',
    width: 60
  }, {
    key: 'startTime',
    title: '开始时间',
    width: 120,
    cellRenderer: ({cellData}) => (
        timeFomat(cellData)
    )
  }, {
    key: 'endTime',
    title: '结束时间',
    width: 120,
    cellRenderer: ({cellData}) => (
        timeFomat(cellData)
    )
  }, {
    key: 'emergencyFlag',
    title: '紧急',
    width: 40,
    cellRenderer: ({cellData}) => (
        <span>{cellData === '1' ? '√' : ''}</span>
    )
  }, {
    key: 'ybSelfFlag',
    title: '自费',
    width: 40,
    cellRenderer: ({cellData}) => (
        <span>{cellData === '1' ? '√' : ''}</span>
    )
  }, {
    key: 'physicianName',
    title: '医生',
    width: 40,
  }, {
    key: 'selfBuyName',
    title: '标志',
    width: 60,
  }, {
    key: 'execUnitName',
    title: '执行',
    width: 60,
  }, {
    key: 'drugQuan',
    title: '领量',
    width: 40,
    cellRenderer: ({row}) => (
        <span>{row.drugQuan} {row.drugQuanName}</span>
    )
  }, {
    key: 'groupNoName',
    title: '药房',
    width: 90,
  }, {
    key: 'serial',
    title: '序号',
    width: 20,
  }, {
    key: 'instruction',
    title: '嘱托',
    width: 120
  }, {
    key: 'instruction',
    title: '操作',
    width: 70,
    fixed: 'left',
    cellRenderer: ({row}) => {
      return h('button',
          {
            onClick: (e: Event) => {
              e.stopPropagation()
              props.voidOrders(row)
            }
          },
          '作废')
    }
  }
]

const rowClassName = (row) => {
  if (row.actOrderNo === yiZhuData.value.actOrderNo) {
    return 'selected_order'
  }


}

const rowClick = (row) => {
  emits('rowClick', row)
}
const timeFomat = (val) => {
  return <span> {getFormatDatetime(val, 'YY-MM-DD HH:mm')}</span>
}

function getYiZhuFlag(val) {
  if (stringIsBlank(val)) {
    return (<span> </span>)
  }
  switch (val) {
    case '1':
      return (<span style="color: #05ff00">R</span>)
    case '2':
      return (<span style="color: #0000fb">Q</span>)
    case '3':
      return (<span style="color: #ff07f3">Z</span>)
    case '4':
      return (<span style="color:  #ff07f3">Z</span>)
    case '5':
      return (<span style="color: red">T</span>)
    case '6':
      return (<span style="color: #00ffe0">D</span>)
    default:
      return (<span style="color: #00ffe0">val</span>)
  }
}
</script>

<style lang="scss">
.selected_order {
  background: rgba(0, 58, 241, 0.68) !important;
  color: #000;
}
</style>
