<template>
  <el-collapse class="collapse" v-model="collapse" @change="collapseChange" accordion>
    <el-collapse-item title="患者信息" 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="huanZheXinXi.inpatientNo" @keydown.enter="queryPatientInfoClick"/>
          {{ huanZheXinXi.admissTimes }}
        </span>
            <span v-else>
          住院号:{{ huanZheXinXi.inpatientNo }}_{{ huanZheXinXi.admissTimes }}
          </span>
          </div>
          <div>
            床号：{{ huanZheXinXi.bedNo }}
          </div>
          <div>
            姓名：{{ huanZheXinXi.name }}
          </div>
          <div>
            身份证号：{{ huanZheXinXi.socialNo }}
          </div>
          <div>
            出生日期：{{ huanZheXinXi.birthDate }} {{ companyFunc(huanZheXinXi.age, '岁') }}
          </div>
          <div>
            性别：{{ huanZheXinXi.sexName }}
          </div>
          <div>
            联系电话：{{ huanZheXinXi.homeTel }}
          </div>
          <div>
            入院日期：{{ huanZheXinXi.admissDate }}
            {{ companyFunc(huanZheXinXi.actIptDays, '天') }}
          </div>
        </div>

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

        </div>

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

<script setup name="HuanZheXinXi">

import {isDev, needRule} from "@/utils/public";
import {clickOnThePatient} 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("0")

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' ? 100 : 22
  emit('isShow', collapse.value === '1', height)
}

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>
