<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="details" :style="{ marginTop: 'calc('+ height +'px + 18rpx)', marginBottom: '100rpx' }">
        <view>
            <van-cell title="就诊人" :value="medicalDataDetail.patName" />
            <van-cell title="科室" :value="admInfo.admLocDesc" />
            <van-cell title="医生" :value="admInfo.admDocDesc" />
            <van-cell title="日期" :value="admInfo.admDate" />
        </view>
        <view class="can-cell-T">
            <van-cell-group title="诊断" style="margin-top: 15rpx" v-if="diagnoseList.length > 0">
                <van-cell :title="(index + 1) + '.' + (item.ICDDesc)" v-for="(item, index) in diagnoseList" :key="index" />
            </van-cell-group>
            
            <van-cell-group title="医嘱" style="margin-top: 15rpx" v-if="orderPrescList.length > 0">
                <view class="chufang-box">
                    <block v-for="(itemName, index) in orderPrescList" :key="index">
                        <view class="chufang2" v-if="itemName.prescTypeCode == 'CM'">
                            <view class="item-main">
                                <view class="onebox">
                                    <view class="one">
                                        <view class="left">
                                            <!-- 中药-->
                                            <view class="name" style="display:flex;" v-if="itemName.comPresc.length > 0">
                                                <view style="flex:0 0 auto;">{{ index + 1 }}、</view>
                                                <view style="flex:1 1 auto">
                                                    <block v-for="(itemName, index) in itemName.comPresc" :key="index">
                                                        <view class="herbstemp">
                                                            <view class="herbs-item-comPrincipletemp"
                                                                :style="{ backgroundColor: itemName.comPrinciple == '君' ? '#FFA23E' : (itemName.comPrinciple == '臣' ? '#39D1D1' : (itemName.comPrinciple == '佐' ? '#FA5AB2' : (itemName.comPrinciple == '使' ? '#AA71F9' : ''))) }">
                                                                {{ itemName.comPrinciple + '药' }}</view>
                                                            <view class="herbs-item-medItemMed"> {{ itemName.ordDesc }}
                                                                {{ itemName.spec }}</view>
                                                            <view class="herbs-item-decoctMethodMed">{{ itemName.comMark }}
                                                            </view>
                                                        </view>
                                                    </block>
                                                    <view class="child2">
                                                        <text>
                                                            用法：{{ itemName.comPresc[0].durStr }},
                                                            {{ itemName.prescHerbalFormDesc }},
                                                            {{ itemName.comPresc[0].frequenceDesc }},
                                                            {{ itemName.prescDoseQty }},
                                                            {{ itemName.prescUsageDesc }}, {{ itemName.prescCookTypeDesc }},
                                                            {{ itemName.prescUsageExplainDesc }}
                                                        </text>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--西药-->
                        <block v-if="itemName.prescTypeCode == 'PT'">
                            <view v-if="itemName.childOrd.length > 0" class="PTclass">
                                <view>{{ index + 1 }}、{{ itemName.ordDesc }}</view>
                                <view class="chufang1">
                                    <view class="item-aside"></view>
                                    <view class="item-main">
                                        <view class="onebox">
                                            <view class="one">
                                                <view class="left">
                                                    <view class="name">
                                                        <!-- <text>{{val.ordDesc}}</text> -->
                                                    </view>
                                                    <view class="yaopinguige flex-row">
                                                        <view class="guige">
                                                            <text>{{ itemName.spec }}</text>
                                                        </view>
                                                        <view class="num">x<text>{{ itemName.qtyUomStr ? '共' : '' }}{{
                                                            itemName.qtyUomStr }}</text></view>
                                                        <view class="ke">{{ itemName.doseUnitStr }}</view>
                                                    </view>
                                                </view>
                                                <view class="right">x<text>{{ itemName.durStr }}</text></view>
                                            </view>
                                        </view>
                                    </view>
                                </view>

                                <view v-for="(val, idx) in itemName.childOrd" :key="idx">
                                    <view class="chufang1">
                                        <view class="item-aside"></view>
                                        <view class="item-main">
                                            <view class="onebox">
                                                <view class="one">
                                                    <view class="left">
                                                        <view class="name">
                                                            <text>{{ val.ordDesc }}</text>
                                                        </view>
                                                        <view class="yaopinguige flex-row">
                                                            <view class="guige">
                                                                <text>{{ val.spec }}</text>
                                                            </view>
                                                            <view class="num">x<text>{{ val.qtyUomStr ? '共' : '' }}{{
                                                                val.qtyUomStr }}</text></view>
                                                            <view class="ke">{{ val.doseUnitStr }}</view>
                                                        </view>
                                                    </view>
                                                    <view class="right">x<text>{{ val.durStr }}</text></view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <!-- <view>{{val.ordDesc}}</view> -->
                                </view>
                                <view class="use"> 用法：{{ itemName.frequenceDesc }}，{{ itemName.usageDesc }}</view>
                            </view>
                            <view v-if="itemName.childOrd.length == 0" class="PTclass">
                                <view>{{ index + 1 }}、{{ itemName.ordDesc }} {{ itemName.spec }} {{ itemName.qtyUomStr ? '共'
                                    : '' }}{{ itemName.qtyUomStr }}</view>
                                <view class="use">用法：{{ itemName.doseUnitStr + '/次' }}, {{ itemName.frequenceDesc }}
                                    {{ itemName.usageDesc }},
                                    {{ itemName.durStr ? '共' + itemName.durStr : '' }} {{ itemName.note ? '( ' +
                                        itemName.note + ' )' : '' }}</view>
                            </view>
                        </block>
                        <view class="chufang2 med-other" v-if="itemName.prescTypeCode == ''">
                            <text>{{ itemName.ordDesc }}</text>
                            <text>{{ itemName.spec }}</text>
                            <view><text>{{ itemName.qtyUomStr ? '共' : '' }}{{ itemName.qtyUomStr }}</text></view>
                        </view>
                    </block>
                </view>
            </van-cell-group>
            <!-- 病历卡片：展示03100165接口返回的结构化病历数据 -->
            <van-cell-group title="病历" style="margin-top: 15rpx" v-if="medicalRecord && medicalRecord.templateName">
                <!-- <template v-for="(key, index) in medicalRecordKeys">
                {{ medicalRecord[key] }}
                </template> -->
                <template v-for="(key, index) in medicalRecordKeys">
                    <van-cell :key="index" v-if="medicalRecord[key]" :title="medicalRecordText[key]" :value="medicalRecord[key]" />
                </template>
            </van-cell-group>


            <!-- <van-cell-group title="检验检查" style="margin-top: 15rpx"
                v-if="medicalDataDetail.checkArr && medicalDataDetail.checkArr.length > 0">
                <view class="check" v-for="(item, index) in medicalDataDetail.checkArr" :key="index">{{ item.desc }}</view>
            </van-cell-group> -->
        </view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import NavBar from '@/components/navBar/index'
import VanCellGroup from '@/components/cell-group/index'
import VanCell from '@/components/cell/index'
const app = getApp()
export default {
    components: {
        'nav-bar': NavBar,
        'van-cell-group': VanCellGroup,
        'van-cell': VanCell,
    },
    data() {
        return {
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "记录详情"
            },
            medicalID: '',
            medicalDataDetail: {},
            MedicalRecordList: [],
            orderPrescList: [],
            diagnoseList: [],
            admInfo: {},
            medicalRecordText: {
                chiefComplaint: '主诉',
                currentMedicalHhistory: '现病史',
                allDiagStr: '诊断',
                CureAdvice: '处理意见',
            },
            medicalRecord: {}, // 03100165 接口返回的病历结构化数据
            medicalRecordKeys: [],
            medicalRecordValues: []
        }
    },
    onLoad: function (options) {
        this.setData({ medicalID: options.id })
    },
    onReady: function () {
        this.getMedicalDataDetail();
        this.getMedicalRecordList();
    },
    methods: {
        // 获取病历接口
        getMedicalRecordList: function () {
            let userid = this.$cache.get('userData') ? this.$cache.get('userData') : {};
            let data = {
                params: [{
                    admID: this.medicalID,
                    hospCode: userid.hisHospID // 原：hisHospID: userid.hisHospID
                }]
            }
            $http.post("urlS", this, {
                code: "03100165", // 原：10020001
                data: data,
                namespace: 'Y',
                success: function (res) {
                    console.log(res.result)
                    if (+res.errorCode === 0) {
                        this.setData({
                            // MedicalRecordList: res.result.TemplateList,
                            medicalRecord: res.result, // 病历结构化数据（chiefComplaint、currentMedicalHhistory、allDiagStr、CureAdvice）
                            medicalRecordKeys: Object.keys(this.medicalRecordText),
                            medicalRecordValues: Object.values(res.result)
                        });
                    } else {
                        this.setData({ MedicalRecordList: {}, medicalRecord: {} });
                    }
                    console.log(this.medicalRecordKeys)
                }
            });
        },

        RecordList: function (e) {
            let id = e.currentTarget.dataset.id;
            let that = this;
            uni.navigateTo({
                url: '../RecordsDetails/RecordsDetails?id=' + id,
                success: (res) => {
                    res.eventChannel.emit('data', {
                        dataList: that.medicalID
                    })
                }
            })
        },

        /**请求诊疗记录详情列表数据**/
        getMedicalDataDetail: function () {
            let userid = this.$cache.get('userData') ? this.$cache.get('userData') : {};
            let data = {
                params: [{
                    admID: this.medicalID,
                    hospID: userid.hospID,
                    hisHospID: userid.hisHospID
                }]
            }
            $http.post("urlS", this, {
                code: "10020004",
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({ medicalDataDetail: res.result.baseInfo, diagnoseList: res.result.diagnoseObj, orderPrescList: res.result.orderPresc, admInfo: res.result.admInfo });
                    } else {
                        this.setData({ medicalDataDetail: {}, diagnoseList: [], orderPrescList: [], admInfo: {} });
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.details .can-cell-T {
    margin-top: 20rpx;
}

.details .can-cell-T .van-cell-group__title {
    background: #fff;
    color: #333;
    margin-top: 20rpx;
}

.details .can-cell-T van-cell-group {
    margin-top: 20rpx;
}

.details .can-cell-T .van-cell__title {
    color: #999;
}

.details .dur {
    background-color: #fff;
    padding: 10rpx 25rpx;
    color: #999;
    margin-top: 4rpx;
}

.details .tit {
    margin-top: 10rpx;
}

.details .dur .T {
    font-weight: 700;
}

.details .check {
    color: #096dd9;
    padding-left: 30rpx;
    background-color: #fff;
    height: 50rpx;
    line-height: 50rpx;
}

.chufang-box {
    /* margin-top: 8px; */
    padding: 0 10px;
    background-color: #fff;
    color: #999;
}

/*通用横排*/
.chufang1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20rpx;
}

.chufang1 .item-aside {
    padding-top: 20rpx;
    flex: 0 0 auto;
    width: 40rpx;
}

.chufang1 .item-main {
    flex: 1 1 auto;
}

/*一个药品*/
.chufang1 .one {
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.chufang1 .one .left {
    flex: 1 1 auto;
    border-right: 1px solid #ccc;
}

.chufang1 .one .right {
    flex: 0 0 140rpx;
    text-align: center;
    align-self: center;
}

.chufang1 .yaopinguige {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.chufang1 .yaopinguige .guige {
    flex: 1 1 60%;
}

.chufang1 .yaopinguige .num {
    flex: 1 1 20%;
    text-align: center;
}

.chufang1 .yaopinguige .ke {
    flex: 1 1 20%;
    text-align: center;
}

.chufang2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 10rpx;
}

.chufang2 .item-aside {
    padding-top: 20rpx;
    flex: 0 0 auto;
    width: 40rpx;
}

.chufang2 {
    /* padding: 10rpx 0; */
    border-bottom: 1px solid #dedede;
}

.PTclass {
    border-bottom: 1px solid #dedede;
    padding: 10rpx 0;
}

.chufang2 .one {
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.chufang2 .one .left {
    flex: 1 1 auto;
    /* border-right:1px solid #ccc; */
}

.chufang2 .one .right {
    flex: 0 0 140rpx;
    text-align: center;
    align-self: center;
}

.chufang2 .yaopinguige {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.chufang2 .yaopinguige .guige {
    flex: 1 1 60%;
}

.chufang2 .yaopinguige .num {
    flex: 1 1 20%;
    text-align: center;
}

.chufang2 .yaopinguige .ke {
    flex: 1 1 20%;
    text-align: center;
}

.custombutton {
    height: 80rpx;
    font-size: 30rpx;
    color: #fff;
    padding: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 10px 10px;
    display: flex;
}

.custom-btnleft {
    flex: 1;
    margin: 0 10rpx;
    align-items: center;
    justify-content: center;
    display: flex;

}

.custom-btnright {
    flex: 1;
    margin: 0 10rpx;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #1890FF;
    color: #ffffff;
}

.fixed {
    position: fixed;
    top: 100rpx;
    left: 0;
    background: #fff;
    width: 100%;
    z-index: 99;
}

.fixedTop {
    padding-top: 250rpx;
}

.herbstemp {
    display: flex;
    background-color: #fff;
    /* padding-left: 10rpx; */
    padding-bottom: 12rpx;
}

.herbs-item-comPrincipletemp {
    font-size: 24rpx;
    height: 40rpx;
    width: 72rpx;
    padding-top: 6rpx;
    text-align: center;
    color: #ffffff;
}

.herbs-item-medItemMed {
    font-size: 28rpx;
    margin-left: 25rpx;

}

.herbs-item-decoctMethodMed {
    margin-left: 25rpx;

}

.use {
    margin-left: 42rpx;
    margin-bottom: 10rpx;
}

.child2 {
    margin-left: 2rpx;
    margin-top: -20rpx;

}

.med-other {
    padding: 20rpx;
}

/* 病历卡片样式 - 与页面现有 van-cell-group 风格一致 */
.medical-record-card {
    margin-top: 15rpx;
}

.medical-record-card .card-section-title {
    background: #fff;
    color: #333;
    font-size: 28rpx;
    padding: 20rpx 30rpx 10rpx;
    font-weight: 500;
}

.medical-record-card .card-content {
    background-color: #fff;
    padding: 0 30rpx 24rpx;
}

.medical-record-card .card-field-label {
    color: #999;
    font-size: 24rpx;
    padding: 16rpx 0 6rpx;
}

.medical-record-card .card-field-value {
    color: #333;
    font-size: 32rpx;
    line-height: 1.6;
    padding-bottom: 8rpx;
}
</style>