<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="recordsdetails" :style="{marginTop: 'calc('+ height +'px + 20rpx)', marginBottom: '100rpx'}">
        <view>
            <van-cell title="姓名" :value="BasicDetail.patName" />
            <van-cell title="性别" :value="BasicDetail.patSexDesc" />
            <van-cell title="年龄" :value="BasicDetail.patAge" />
        </view>
        <view class="can-cell-T">
            <van-cell-group :title="item.IEMRTempElementDesc" style="margin-top: 15rpx" v-for="(item, index) in MedicalRecordDetail" :key="index">
                <block v-if="item.IEMRTempElementDesc !== '基本信息'">
                    <van-cell :title="item.IEMRTempElementData" v-if="item.elementTypeCode !== 'Labelarea'" />
                    <view class="dur" style="margin-top: 2rpx" v-if="item.IEMRTempElementDesc == '诊断'">
                        <view class="T" v-for="(item, index) in diagnoseObj" :key="index">{{ index + 1 }}. {{ item.ICDDesc }}</view>
                    </view>
                    <view class="dur" v-if="item.IEMRTempElementDesc == '医嘱'">
                        <view class="chufang-box">
                            <block v-for="(itemName, index) in orderPresc" :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="(itemName1, idx) in itemName.comPresc" :key="idx">
                                                                <view class="herbstemp">
                                                                    <view class="herbs-item-comPrincipletemp"
                                                                        style="background-color:{{itemName1.comPrinciple == '君' ? '#FFA23E' : (itemName1.comPrinciple== '臣' ? '#39D1D1' : (itemName1.comPrinciple== '佐' ? '#FA5AB2' :(itemName1.comPrinciple== '使' ? '#AA71F9' :'' )))}}">
                                                                        {{ itemName1.comPrinciple + '药' }}</view>
                                                                    <view class="herbs-item-medItemMed"> {{
                                                                        itemName1.ordDesc }}
                                                                        {{ itemName1.spec }}</view>
                                                                    <view class="herbs-item-decoctMethodMed">
                                                                        {{ itemName1.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 ? '共' +
                                                            itemName.durStr :
                                                            '' }}</text></view>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                        <view v-for="(val, idx) in itemName.childOrd" :key="idx">
                                            <block v-if="itemName.childOrd.length > 0">
                                                <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 ? '共:' + val.durStr
                                                                    :
                                                                    '' }}</text></view>
                                                            </view>
                                                        </view>
                                                    </view>
                                                </view>
                                            </block>
                                        </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>
                            </block>
                        </view>
                    </view>
                </block>
            </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: "病历"
            },
            IEMRTemplateID: '',
            MedicalRecordDetail: [],
            BasicDetail: {},
            RecordDetailID: '',
            diagnoseObj: [],
            orderPresc: [],
        }
    },
    onLoad: function (options) {
        this.setData({
            IEMRTemplateID: options.id
        })
    },
    onReady: function () {
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('data', (val) => {
            this.setData({
                RecordDetailID: val.dataList
            });
        });
        this.getMedicalRecordDetail();
        this.getBasicDetail();
    },
    methods: {
        // 获取病历详情接口
        getMedicalRecordDetail: function () {
            let userid = this.$cache.get('userData') ? this.$cache.get('userData') : {};
            let data = {
                params: [{
                    IEMRTemplateID: this.IEMRTemplateID,
                    admID: this.RecordDetailID,
                    // patID:userid.patID,
                    // hisHospID: userid.hisHospID
                }]
            }
            $http.post("urlS", this, {
                code: "10020002",
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            MedicalRecordDetail: res.result
                        });
                    } else {
                        this.setData({
                            MedicalRecordDetail: []
                        });
                    }
                }
            });
        },
        // 获取病历详情基础接口
        getBasicDetail: function () {
            let userid = this.$cache.get('userData') ? this.$cache.get('userData') : {};
            let data = {
                params: [{
                    admID: this.RecordDetailID,
                    hospID: userid.hospID,
                    hisHospID: userid.hisHospID
                }]
            }
            $http.post("urlS", this, {
                code: "10020004",
                data: data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        // let arrPT = res.result.orderPresc ? res.result.orderPresc.filter(function(item){ return item.prescTypeCode == 'PT'}) : [];
                        // let arrCM = res.result.orderPresc ? res.result.orderPresc.filter(function(item){ return item.prescTypeCode == 'CM'}) : [];
                        this.setData({
                            BasicDetail: res.result.baseInfo,
                            diagnoseObj: res.result.diagnoseObj,
                            orderPresc: res.result.orderPresc,
                        });
                    } else {
                        this.setData({
                            BasicDetail: {}
                        });
                    }
                }
            });
        }
    }
}
</script>

<style>
.recordsdetails .can-cell-T {
  margin-top: 20rpx;
}

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

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

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

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

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

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

.recordsdetails .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;
}

/*通用横排*/
.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;
}

/* .usetemp{
  margin-left: 42rpx;
} */
.child2 {
  margin-left: 2rpx;
  margin-top: -20rpx;

}
</style>