<template>
    <div class="timeline-apply-form">
        <div class="tl-report-con">
            <div class="tl-report-name">
                <span>北京美中爱瑞肿瘤医院检查申请单</span>
                <div>
                    <barcode :value="item.daId" :options="barcode_option"></barcode>
                </div>
            </div>
            <div class="tl-sec-flex requestForm" style="border-top: 1px solid;padding-top: 5px;margin-bottom: 5px;">
                <div class="tl-info-item dataBox"  style="margin-left: 0px;">
                    <div>
                        <span class="label" style="font-size: 12px;color: #000;">
                            <span class="SimSun" style="font-size: 12px;color: #000;">患者</span>
                            <span class="Arial" style="font-size: 12px;color: #000;">ID/Patient ID：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.patientId}}</span>
                    </div>
                    <div>
                        <span class="label" style="font-size: 12px;color: #000;">
                            <span class="SimSun" style="font-size: 12px;color: #000;">科 室</span>
                            <span class="Arial" style="font-size: 12px;color: #000;">/Department：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.deptName}}</span>
                    </div>
                </div>
                <div class="tl-info-item">
                    <div>
                        <span class="label" style="font-size: 12px;color: #000;">
                            <span class="SimSun" style="font-size: 12px;color: #000;">姓 名</span>
                            <span class="Arial" style="font-size: 12px;color: #000;">/Patient Name：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.patientName}}</span>
                    </div>
                    <div>
                      <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">费别</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">/Payment CateGory：</span>
                      </span>
                      <span class="con" style="font-size: 12px;color: #000;">{{item.paymentType}}</span>
                    </div>
                </div>
                <div class="tl-info-item">
                    <div>
                        <span class="label" style="font-size: 12px;color: #000;">
                          <span class="SimSun" style="font-size: 12px;color: #000;">性 别</span>
                          <span class="Arial" style="font-size: 12px;color: #000;">/Gender：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.gender === "F"? "女": "男"}}</span>
                    </div>
                    <div>
                        <span class="label" style="font-size: 12px;color: #000;">
                          <span class="SimSun" style="font-size: 12px;color: #000;">开单科室</span>
                          <span class="Arial" style="font-size: 12px;color: #000;">/Department：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.applyDept}}</span>
                    </div>
                </div>
                <div class="tl-info-item">
                    <div>
                        <span class="label" style="font-size: 12px;color: #000;">
                            <span class="SimSun" style="font-size: 12px;color: #000;">年 龄</span>
                            <span class="Arial" style="font-size: 12px;color: #000;">/Age：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.age}}岁</span>
                    </div>
                </div>
            </div>
            <div class="tl-table-report-con requestForm_content" style="border-top: 1px solid;padding: 50px 0;border-bottom: 1px solid #333 !important;height: 362px;">
                <!-- 诊断名称 -->
                <div style="margin-bottom: 20px">
                    <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">诊断名称</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                    </span>
                    <span class="con" style="font-size: 12px;color: #000;">{{item.diagnoseName}}</span>
                </div>
                <!-- 病历摘要 -->
                <div  style="margin-bottom: 20px">
                    <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">病历摘要</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                    </span>
                    <span class="con" style="font-size: 12px;color: #000;">{{item.medicalRecords}}</span>
                </div>
                <!-- 辅助检查 -->
                <div  style="margin-bottom: 20px">
                    <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">辅助检查</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                    </span>
                    <span class="con" style="font-size: 12px;color: #000;">{{item.supplementaryExamination}}</span>
                </div>
                <!-- 检查目的 -->
                <div  style="margin-bottom: 20px">
                    <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">检查目的</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                    </span>
                    <span class="con" style="font-size: 12px;color: #000;">{{item.checkPurpose}}</span>
                </div>
                <!-- 检查部位 -->
                <div  style="margin-bottom: 20px">
                    <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">检查部位</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                    </span>
                    <span class="con" style="font-size: 12px;color: #000;">{{item.checkParts}}</span>
                </div>
                <!-- 申请项目 -->
                <div  style="margin-bottom: 20px">
                    <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">申请项目</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                    </span>
                    <span class="con" style="font-size: 12px;color: #000;">{{item.checkProName}}</span>
                </div>
            </div>
            <div class="tl-table_bottom">
                <el-row>
                    <!-- 申请医师 -->
                    <el-col style="width:72%">
                        <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">申请医师</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.applyForDoctor}}</span>
                    </el-col>
                    <!-- 申请时间 -->
                    <el-col style="width:28%">
                        <span class="label" style="font-size: 12px;color: #000;">
                        <span class="SimSun" style="font-size: 12px;color: #000;">申请时间</span>
                        <span class="Arial" style="font-size: 12px;color: #000;">：</span>
                        </span>
                        <span class="con" style="font-size: 12px;color: #000;">{{item.applyTime || ''}}</span>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import JsBarcode from 'jsbarcode'
import barcode from "@xkeshi/vue-barcode";
export default {
    props: {
        item: {
            type: Object,
            default: () => {
                return {
                    daId: '',
                    id: '',
                    patientId: '',
                    deptName: '',
                    patientName: '',
                    paymentType: '',
                    gender: '',
                    applyDept: '',
                    age: '',
                    diagnoseName: '',
                    medicalRecords: '',
                    supplementaryExamination: '',
                    checkPurpose: '',
                    checkParts: '',
                    checkProName: '',
                    applyForDoctor: '',
                    applyTime: ''
                }
            }
        }
    },
    components: { barcode },
    data() {
        return {
            barcode_option: {
                displayValue: true, //是否默认显示条形码数据
                background: '#fff', //条形码背景颜色
                height: '22px',
                width:'1.5px',
                fontSize: '12px',
                lineColor: '#000',
            }
        }
    },
    created() {
        this.$nextTick(() => {
            JsBarcode('#barcode', '12322222',{
                format:"CODE128",//条形码的格式
                width:1,//线宽
                lineColor:"#000",//线条颜色
                displayValue:false,//是否显示文字
                margin:2//设置条形码周围的空白区域
            })
        })
    },
}
</script>
<style lang="less" scoped>
.timeline-apply-form {
    background:#e6e7ec;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    .tl-report-con {
        background: #fff;
        padding: 40px;
        width: 850px;
        height: 600px;
        .tl-report-name {
            font-family: 'SimSun';
            text-align: center;
            font-size: 20px;
            color: #000;
            font-weight: bold;
            margin-bottom: 20px;
            position: relative;
            >div {
                position: absolute;
                top: -17px;
                right: 20px;
            }
        }
        .tl-sec-flex {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            .tl-info-item {
                flex-direction: column;
                // flex: 1;
                // padding: 0 5px;
            }
            &.requestForm{
                border-top: 1px solid;
                padding-top: 5px;
                margin-bottom: 5px;
                
            }
        }
        .tl-table-report-con {
            margin-bottom:20px;
            border-bottom: 1px solid #333 !important;
            &.requestForm_content{
                border-top: 1px solid;
                padding: 50px 0;
                div{
                margin-bottom: 20px;
                }
                .inspectionDaContent{
                margin: 1px 10px;
                border-bottom: 1px solid;
                }
            }
        }
        .tl-table_bottom{
            padding-bottom:80px
        }
        .label {
            .SimSun {
                font-family: "SimSun";
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #000;
            }
            .Arial {
                font-family: "Arial";
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #000;
            }
        }
        .con {
            font-family: "SimSun";
            line-height: 30px;
            font-size: 14px;
            color: #000;
        }
    }
}
</style>