<template>
  <el-collapse class="collapse" v-model="collapse" @change="collapseChange" accordion>
    <el-collapse-item :title="titleName()" name="1">
      <div class="header" style="border: 0;color: #000000">
        <div class="box">
          <div>
        <span v-if="isDev || needRule(1)">
          <el-input style="width: 90px" v-model="props.huanZheXinXi.inpatientNo"
                    @keydown.enter="queryPatientInfoClick"/>
          {{ props.huanZheXinXi.admissTimes }}
        </span>
            <span v-else>
          住院号:{{ props.huanZheXinXi.inpatientNo }}_{{ props.huanZheXinXi.admissTimes }}
          </span>
          </div>
          <div>
            床号：{{ props.huanZheXinXi.bedNo }}
          </div>
          <div>
            姓名：{{ props.huanZheXinXi.name }}
          </div>
          <div>
            身份证号：{{ props.huanZheXinXi.socialNo }}
          </div>
          <div>
            出生日期：{{ props.huanZheXinXi.birthDate }} {{ companyFunc(props.huanZheXinXi.age, '岁') }}
          </div>
          <div>
            性别：{{ props.huanZheXinXi.sexName }}
          </div>
          <div>
            联系电话：{{ props.huanZheXinXi.homeTel }}
          </div>
          <div>
            入院日期：{{ props.huanZheXinXi.admissDate }}
            {{ companyFunc(props.huanZheXinXi.actIptDays, '天') }}
          </div>
        </div>

        <div class="box">
          <div>
            管床医生：{{ props.huanZheXinXi.referPhysicianName }}
          </div>
          <div>
            病区：{{ props.huanZheXinXi.admissWardName }}
          </div>
          <div>
            入院医生：{{ props.huanZheXinXi.admissPhysicianName }}
          </div>
          <div>
            入院诊断：{{ props.huanZheXinXi.admissDiagStr }}
          </div>
          <div>
            小科室：{{ props.huanZheXinXi.zkWardName }}
          </div>
          <div>
            身份：{{ props.huanZheXinXi.medTypeName }}
          </div>

        </div>

        <div class="box">
          <div>
            总费用：{{ props.huanZheXinXi.totalCharge }}
            <span style="color: red">
            {{ props.huanZheXinXi.balance }}
            </span>
          </div>
          <div>
            药品占比：{{ props.huanZheXinXi.yp }}
          </div>
          <div>
            检验检查：{{ props.huanZheXinXi.jyjc }}
          </div>
          <div>
            医保：{{ props.huanZheXinXi.chargeYb }} {{ props.huanZheXinXi.yb }}
          </div>

        </div>

        <div class="box">
          <div>
            付费权重：{{ props.huanZheXinXi.groupInfoWeight }}
          </div>
          <div>
            分组结果：{{ props.huanZheXinXi.groupInfoName }}
          </div>
          <div>
            倍率（DRG）：{{ props.huanZheXinXi.groupInfoBl }}
          </div>
          <div>
            盈亏额：{{ props.huanZheXinXi.groupInfoProfit }}
          </div>
          <div>
            标杆费用：{{ props.huanZheXinXi.groupInfoFeeStand }}
          </div>
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup name="HuanZheXinXi">

import {isDev, needRule} from "@/utils/public";
import {clickOnThePatient, huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {stringNotBlank} from "@/utils/blank-utils";

const props = defineProps({
  huanZheXinXi: {
    type: Object
  }
})

const emit = defineEmits(['isShow'])

const collapse = ref(isDev ? "0" : "1")

const queryPatientInfoClick = () => {
  clickOnThePatient(props.huanZheXinXi.inpatientNo)
}

const companyFunc = (val, company) => {
  if (stringNotBlank(val)) {
    return val + company
  } else {
    return ''
  }
}

const collapseChange = async () => {
  let height = collapse.value === '1' ? 130 : 22
  emit('isShow', collapse.value === '1', height)
}

const titleName = () => {
  if (props.huanZheXinXi.inpatientNo) {
    return `患者 【${props.huanZheXinXi.name}】`;
  }
  return `请选择患者`;
}

onMounted(() => {
  collapseChange()
})

</script>

<style lang="scss" scoped>
.collapse {
  :deep(.el-collapse-item__content) {
    padding-bottom: 0
  }
}

.header {
  width: 100%;

  :deep(.el-collapse) {
    border-top: 0;
    border-bottom: 0;

    .el-collapse-item__content {
      padding-bottom: 2px;
    }
  }

  div {
    white-space: nowrap;
    padding: 0 5px;
  }

  .box {
    display: flex;
    border: 1px solid;

    div {
      border-left: 1px solid;
      border-right: 1px solid;
    }
  }

}

.el-col-4 span {
  border-bottom: 1px solid;
}

:deep(.el-collapse-item__header) {
  height: 20px;
}
</style>
