<!-- 门诊病历 -->
<template>
    <div class="outpatient-records">
        <div class="title">门诊病历</div>
        <!-- 顶部患者信息 -->
        <div class="header flex flex-row-between flex-wrap">
            <div class="header-item">
                <span>就诊日期：{{info.treatmentTime}}</span>
            </div>
            <div class="header-item flex flex-row-left">
                <span>姓名：{{info.name}}</span>
                <span style="margin-left:28%;">性别：{{info.sex}}</span>
            </div>
            <div class="header-item flex flex-row-left">
                <span>年龄：{{info.age}}</span>
                <span style="margin-left:16%;">电话：{{info.phone}}</span>
            </div>
            <div class="header-item ">
                <span>就诊科室：{{info.clinic}}</span>

            </div>
            <div class="header-item ">
                <span>身份证：{{info.idCard}}</span>

            </div>
            <div class="header-item ">
                <span class="ellipsis-line1">地址：{{info.address}}</span>

            </div>
        </div>

        <!-- 底部病历信息 -->
        <div class="case-msg">
            <div class="msg-item flex flex-row-left flex-col-center">
                <div class="name">主诉：</div>
                <div class="desc flex-none">{{info.chiefcomplaint}}</div>
                <el-button type="primary" size="mini" v-if="zbl" @click="_patiensTrunCase">转病历</el-button>
            </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">现病史：</div>
                <div class="desc">
                    {{info.historypresent}}
                </div>
            </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">既往史：</div>
                <div class="desc">
                    {{info.pasthistory}}
                </div>
            </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">中医四诊：</div>
                <div class="desc">
                    {{info.fourmedicine}}
                </div>
            </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">体格检查：</div>
                <div class="desc">
                    {{info.physicalexamination}}
                </div>
            </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">辅助检查：</div>
                <div class="desc">
                    {{info.supplementaryexamination}}
                </div>
            </div>

          <div class="msg-item flex flex-row-left flex-col-top" v-if="info.image1 && info.image1.length>0">
            <div style="margin: 4px 0 8px;">报告图片：</div>
            <el-image
                :preview-src-list="info.image1"
                :src="item"
                :key="index"
                style="width:64px;height: 64px;margin-right: 10px;"
                alt
                v-for="(item,index) in info.image1"
            />
          </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">诊断：</div>
                <div class="desc">
                    <div class="flex flex-row-left">中医诊断：{{info.tcmDiagnosis}}</div>
                    <div class="flex flex-row-left">西医诊断：{{info.westernMedicineDiagnosis}}</div>
                </div>
            </div>

            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">治法：</div>
                <div class="desc">
                    {{info.treatment}}
                </div>
            </div>


            <div class="msg-item flex flex-row-left flex-col-top">
                <div class="name">处置方式：</div>
                <div class="desc">
                    <!-- 中药处方 -->
                    <div class="zycf" v-for="(item,index) in info.zhongyaochufangVos" :key="index">
                        <div class="recipe-title flex flex-col-center">
                            <span>中药处方{{index+1}}</span>
                            <el-button type="primary" size="mini" v-if="zyzf" @click="zyTurn(item)">转方</el-button>
                        </div>
                        <!-- 中药处方药品 -->
                        <div class="flex flex-row-left flex-wrap">
                            <div class="zy-item" v-for="(item1,index1) in item.prescriptiondetailVos" :key="index1">
                                {{item1.drugName}} {{item1.dose}}{{item1.unit}} </div>
                        </div>
                        <div class="zy-spec flex flex-row-left">
                            <span>剂数：{{item.num}} <span v-if="item.agency>0">(代煎)</span> </span>
                            <span>{{item.dosageForm}}</span>
                            <span>{{item.usestr}}</span>
                            <span>每次{{item.strongFried}}</span>
                            <span>{{item.frequency}}</span>
                            <span>{{item.eatMedicineTime}}</span>
                        </div>
                        <div class="flex flex-row-left flex-col-top">
                            <span>嘱托：</span>
                            <span>{{item.command}}</span>
                        </div>
                    </div>

                    <!-- 中药制剂处方 -->
                    <div class="zyzj" v-for="(item,index) in info.zhongyaozhijiVos" :key="index">
                        <div class="recipe-title flex flex-col-center">
                            <span>中药制剂处方</span>
                            <el-button type="primary" size="mini" v-if="zyzjzf">转方</el-button>
                        </div>
                        <!-- 中药制剂药品 -->
                        <div class="zyzj-item flex flex-row-left flex-col-top"
                            v-for="(item1,index1) in item.prescriptionpatentmedicinedetailVos" :key="index1">
                            <div class="zyzj-desc flex flex-row-left flex-col-top">
                                <div>{{item1.seqn}}.</div>
                                <div style="flex:1;">
                                    <div>{{item1.drugName}} {{item1.specification}}</div>
                                    <div class="zyzj-spec">
                                        <span>{{item1.usagestr}}</span>
                                        <span>{{item1.secondDose}}</span>
                                        <span>{{item1.frequency}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="zyzj-num">数量：{{item1.dose}}{{item1.unit}}</div>
                        </div>

                        <div class="flex flex-row-left flex-col-top">
                            <span>嘱托：</span>
                            <span>{{item.command}}</span>
                        </div>
                    </div>

                    <!-- 适宜技术处方 -->
                    <div class="syjs" v-for="(item,index) in info.shiyijishuVos" :key="index">
                        <div class="recipe-title flex flex-col-center">
                            <span>适宜技术处方</span>
                            <el-button type="primary" size="mini" v-if="syjszf && index === 0" @click="syjsTurn">转方</el-button>
                        </div>
                        <div class="syjs-rp">
                            <div class="syjs-rp-detail">
                                <!-- 类型 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="item.technologyTypeName">
                                    <div class="option-name">类型：</div>
                                    <div class="option-right flex flex-wrap">{{item.technologyTypeName}}</div>
                                </div>
                                <!-- 穴位 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="hasSyjsDetail(item, 'detailPoint')">
                                    <div class="option-name">穴位：</div>
                                    <div class="option-right flex flex-wrap">
                                        <template v-for="(treatItem, ti) in (item.treatmentList || [])">
                                            <div class="syjs-rp-item" v-for="(point, pi) in (treatItem.detailPoint || [])" :key="'syjs-point-'+index+'-'+ti+'-'+pi">
                                                {{point.name}}<span v-if="point.num">{{point.num}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <!-- 经络 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="hasSyjsDetail(item, 'detailMeridian')">
                                    <div class="option-name">经络：</div>
                                    <div class="option-right flex flex-wrap">
                                        <template v-for="(treatItem, ti) in (item.treatmentList || [])">
                                            <div class="syjs-rp-item" v-for="(meridian, mi) in (treatItem.detailMeridian || [])" :key="'syjs-meridian-'+index+'-'+ti+'-'+mi">
                                                {{meridian.name}}<span v-if="meridian.num">{{meridian.num}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <!-- 耳穴 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="hasSyjsDetail(item, 'detailEarPoint')">
                                    <div class="option-name">耳穴：</div>
                                    <div class="option-right flex flex-wrap">
                                        <template v-for="(treatItem, ti) in (item.treatmentList || [])">
                                            <div class="syjs-rp-item" v-for="(ear, ei) in (treatItem.detailEarPoint || [])" :key="'syjs-ear-'+index+'-'+ti+'-'+ei">
                                                {{ear.name}}<span v-if="ear.num">{{ear.num}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <!-- 部位 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="hasSyjsDetail(item, 'detailBodyPart')">
                                    <div class="option-name">部位：</div>
                                    <div class="option-right flex flex-wrap">
                                        <template v-for="(treatItem, ti) in (item.treatmentList || [])">
                                            <div class="syjs-rp-item" v-for="(part, bi) in (treatItem.detailBodyPart || [])" :key="'syjs-body-'+index+'-'+ti+'-'+bi">
                                                {{part.name}}<span v-if="part.num">{{part.num}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <!-- 其他详情 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="hasSyjsDetail(item, 'detailOther')">
                                    <div class="option-name">其他详情：</div>
                                    <div class="option-right flex flex-wrap">
                                        <template v-for="(treatItem, ti) in (item.treatmentList || [])">
                                            <div class="syjs-rp-item" v-for="(other, oi) in (treatItem.detailOther || [])" :key="'syjs-other-'+index+'-'+ti+'-'+oi">
                                                {{other.name}}<span v-if="other.num">{{other.num}}</span>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <!-- 次数 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="hasSyjsTreatNum(item)">
                                    <div class="option-name">次数：</div>
                                    <div class="option-right flex flex-wrap">
                                        <template v-for="(treatItem, ti) in (item.treatmentList || [])">
                                            <span class="syjs-rp-item" v-if="treatItem.treatNum" :key="'syjs-treatnum-'+index+'-'+ti">{{treatItem.treatNum}}次</span>
                                        </template>
                                    </div>
                                </div>
                                <!-- 嘱托 -->
                                <div class="syjs-rp-option flex flex-col-top flex-row-left" v-if="item.command">
                                    <div class="option-name">嘱托：</div>
                                    <div class="option-right flex flex-wrap">{{item.command}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import {
        patiensTrunCase
    } from '@/api/business.js';
    import {
        mapGetters,
        mapMutations
    } from 'vuex';
    export default {
        props: {
            info: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 是否支持转病历
            zbl: {
                type: Boolean,
                default: true
            },
            // 中药转方
            zyzf: {
                type: Boolean,
                default: true
            },
            //中药制剂转方
            zyzjzf: {
                type: Boolean,
                default: true
            },
            // 适宜技术转方
            syjszf: {
                type: Boolean,
                default: true
            }
        },
        created() {
            console.log(this.$route, 'route')
        },
        methods: {
            // 检查适宜技术某类详情（穴位/经络/耳穴/部位/其他）是否有数据
            hasSyjsDetail(item, detailType) {
                if (!item || !item.treatmentList || !item.treatmentList.length) return false;
                return item.treatmentList.some((t) => {
                    const d = t[detailType];
                    return Array.isArray(d) && d.length > 0;
                });
            },
            // 检查适宜技术是否有治疗次数
            hasSyjsTreatNum(item) {
                if (!item || !item.treatmentList || !item.treatmentList.length) return false;
                return item.treatmentList.some((t) => t.treatNum);
            },
            // 适宜技术转方：跳转开方页面带 recordId(来源就诊记录id)，由开方页面调 getRecipeBySuitTech 回显
            syjsTurn() {
                const pid = this.info.pid;
                if (this.$route.path == '/index/prescribing') {
                    console.log('当前页面是开方页面，跳转到适宜技术转方页面', pid)
                    this.$router.replace({
                        path: '/index/trunPage?suitRecordId=' + pid
                    })
                } else {
                    this.$router.replace({
                        path: '/index/prescribing?suitRecordId=' + pid
                    })
                }
                this.$parent.$parent.$parent.showCase = false
            },
            // 中药转方
            zyTurn(item) {
                console.log(this.$route, '页面路由')
                if (this.$route.path == '/index/prescribing') {
                    this.$router.replace({
                        path: '/index/trunPage?recipeID=' + item.pid
                    })
                } else {
                    this.$router.replace({
                        path: '/index/prescribing?recipeID=' + item.pid
                    })
                }

                this.$parent.$parent.$parent.showCase = false
            },
            // 转病例
            async _patiensTrunCase() {
                let res = await patiensTrunCase({
                    pid: this.info.diagnosisId,
                    recordsid: this.getPatiensInfo.pid
                })
                if (res.ResultCode == 0) {
                    this.$message.success('操作成功')
                    // sessionStorage.setItem('outpatientDiagnosis', JSON.stringify(res.Data.outpatientDiagnosis))
                    this.setOutpatientDiagnosis(JSON.stringify(res.Data.outpatientDiagnosis))
                    let route = this.$route
                    if (route.fullPath.indexOf('/index/diagnosis') != -1) {
                        // console.log(this.$parent, 'paraent')
                        this.$parent.$parent.$parent.showCase = false
                        return
                    }
                    this.$router.push({
                        path: '/index/diagnosis?type=trun'
                    })
                    this.$parent.$parent.$parent.showCase = false
                } else {
                    this.$message.error(res.ResultInfo)
                }
            },
            ...mapMutations({
                setOutpatientDiagnosis: 'user/setOutpatientDiagnosis'
            })
        },
        computed: {
            ...mapGetters(['getuserinfo', 'getPatiensInfo'])
        },

    }
</script>

<style lang="scss" scoped>
    @import url('~@/style/common.scss');

    .outpatient-records {
        padding: 10px;

        .title {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #000;
        }

        .header {
            padding-bottom: 5px;
            border-bottom: 1px solid #999;
            margin-top: 20px;
            color: #000;

            .header-item {
                flex: 0 0 33%;
                margin-bottom: 5px;
                font-size: 14px;
                // margin-right: 10px;
            }
        }

        .case-msg {
            padding: 10px 0;
            font-size: 14px;
            color: #000;

            .msg-item {
                margin-bottom: 10px;
            }

            .name {}

            .desc {
                margin-right: 10px;
                flex: 1;
            }


            .recipe-title {
                font-weight: 600;
                margin-bottom: 10px;

                span {
                    margin-right: 10px;
                }
            }

            .zycf {
                margin-bottom: 15px;
            }

            .zy-item {
                flex: 0 0 25%;
                margin-bottom: 10px;
            }

            .zy-spec {
                margin-bottom: 10px;

                span {
                    margin-right: 10px;
                }
            }

            .zyzj {
                margin-bottom: 15px;
            }

            .zyzj-item {
                margin-bottom: 10px;

            }

            .zyzj-desc {
                flex: 0 0 70%;
                margin-right: 20px;

                .zyzj-spec {
                    span {
                        margin-right: 10px;
                    }
                }
            }

            .zyzj-num {
                flex: 0 0 20%;
            }

            // 适宜技术 Rp 区（参考 suitMadePad 处方笺）
            .syjs-rp {
                margin-top: 5px;
                padding-left: 10px;

                .syjs-rp-detail {
                    font-size: 14px;
                }

                .syjs-rp-option {
                    margin-bottom: 8px;
                    padding-left: 20px;

                    .option-name {
                        flex-shrink: 0;
                        white-space: nowrap;
                    }

                    .option-right {
                        flex: 1;
                    }
                }

                .syjs-rp-item {
                    margin-right: 12px;
                    margin-bottom: 4px;

                    span {
                        margin-left: 2px;
                    }
                }
            }



        }
    }
</style>