<template>
    <div class="timeline-text-report">
        <div class="tl-text-container" :class="{'dialogTextWidth':widthThe < 2700,'dialogTextWidths':widthThe > 2700}">
            <span style="text-align: center;font-size:20px;font-weight: bolder;color: black;padding: 20px;">文字报告</span>
            <section class="tl-sec-Text">
              <div class="tl-text-title">
                <i></i><span>患者基本信息</span>
              </div>
              <div class="tl-text-con patient-info">
                <el-row class="tl-bor-row" type="flex">
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">就诊卡号</span></span>
                    <span class="value">{{textInfo.inpatientId}}</span>
                  </el-col>
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">姓名</span></span>
                    <span class="value">{{textInfo.patientName}}</span>
                  </el-col>
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">检查号</span></span>
                    <span class="value">{{textInfo.checkCode}}</span>
                  </el-col>
                </el-row>
                <el-row class="tl-bor-row  border-top-none" type="flex">
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">病案号</span></span>
                    <span class="value">{{textInfo.patientId}}</span>
                  </el-col>
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">性别</span></span>
                    <span class="value">{{textInfo.gender}}</span>
                  </el-col>
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">患者来源</span></span>
                    <span class="value">{{textInfo.type}}</span>
                  </el-col>
                </el-row>
                <el-row  class="tl-bor-row border-top-none" type="flex">
                  <el-col class="tl-text-item" :span="16">
                    <span class="label"> <span class="pos-a">检查内容</span></span>
                    <span class="value">{{textInfo.examination}}</span>
                  </el-col>
                  <el-col class="tl-text-item" :span="8">
                    <span class="label"><span class="pos-a">检查日期</span></span>
                    <span class="value">{{textInfo.checkDateStr}}</span>
                  </el-col>
                </el-row>
              </div>
            </section>
            <section class="tl-sec-Text">
              <div class="tl-text-title">
                <i></i><span>诊断印象</span>
              </div>
              <div class="tl-text-con">
                <span v-html="textInfo.findings"></span>
              </div>
            </section>
            <section class="tl-sec-Text last-child">
              <div class="tl-text-title">
                <i></i><span>诊断结论</span>
              </div>
              <div class="tl-text-con">
                {{textInfo.impression}}
              </div>
            </section>
            <div class="remark">*本报告非电子签章报告，报告内容仅供临床医师参考</div>
          </div>
    </div>
</template>
<script>
export default {
    props: {
        widthThe: {
          type: Number,
          default: 1920
        },
        textInfo: {
            type: Object,
            default: () => {
                return {
                    inpatientId: '',
                    patientName: '',
                    checkCode: '',
                    patientId: '',
                    gender: '',
                    type: '',
                    examination: '',
                    checkDateStr: '',
                    findings: '',
                    impression: ''
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.timeline-text-report {
    background: #e6e7ec;
    display: flex;
    justify-content: center;
    // padding: 30px 0;
    width: 70%;
    min-width: 900px;
    height: 100%;
    margin: 20px 0;
    padding-bottom: 20px;
    .tl-text-container {
      width: 100%;
      padding: 30px 0;
      background-color: #fff;
        min-height: 700px;
        display: flex;
        flex-direction: column;
        // background: #ffffff;
        // padding: 20px 30px;
        padding: 20px 0px;
        >span {
          background-color: #fff;
        }
        &.dialogTextWidth{
          // width: 70%;
        }
        &.dialogTextWidths{

        }
        .tl-sec-Text {
            padding-bottom: 32px;
            padding-left: 30px;
            padding-right: 30px;
            background-color: #fff;
            .tl-text-title {
                margin-bottom: 8px;
                i {
                display: inline-block;
                width: 5px;
                height: 14px;
                opacity: 1;
                background: #407df3;
                border-radius: 3px;
                margin-right: 7px;
                }
                span {
                width: 97px;
                height: 31px;
                opacity: 1;
                font-size: 16px;
                font-family: "PingFangSC", "PingFangSC-Medium";
                font-weight: 500;
                text-align: justify;
                color: #000000;
                line-height: 31px;
                }
            }
            .tl-text-con {
                opacity: 1;
                font-size: 14px;
                font-family:  "PingFangSC", "PingFangSC-Medium";
                font-weight: 400;
                text-align: left;
                color: #000000;
                line-height: 27px;
            }
            &.last-child {
              margin-bottom: 0;
              padding-bottom: 32px;
            }
        }
        .remark {
          background-color: #fff;
          padding: 0 30px;
          margin-bottom: 32px;
        }
    }
    .tl-bor-row {
        border: 1px solid #dddddd;
        .tl-text-item {
            border-right: 1px solid #dddddd;
            // border-bottom: 1px solid #dddddd;
            line-height: 50px;
            min-height: 50px;
            display: flex;
            .label {
                position: relative;
                padding: 12px;
                width: 120px;
                line-height: 26px;
                background: #f6f8fd;
                border-right: 1px solid #dddddd;
                opacity: 0.8;
                font-size: 14px;
                font-family:  "PingFangSC", "PingFangSC-Medium";
                font-weight: 500;
                color: #000000;
            }
            .value {
                flex: 1;
                padding: 12px;
                line-height: 26px;
                font-family:  "PingFangSC", "PingFangSC-Medium";
                font-weight: 400;
                text-align: left;
                color: #000000;
            }
            .pos-a {
                position: absolute;
                width: 100px;
                height: 26px;
                top: 50%;
                margin-top: -13px;
                left: 12px;
            }
        }
        .tl-text-item:nth-of-type(3),.tl-text-item:nth-of-type(6),.tl-text-item:nth-of-type(8) {
            border-right: none;
        }
        .tl-text-item:nth-of-type(7),.tl-text-item:nth-of-type(8) {
            border-bottom: none;
        }

        .tl-text-item:last-child {
          border-right: none;
        }
        &.border-top-none {
            border-top: none;
        }
    }
}
</style>
