<template>
    <view>
        <!-- pages/myConsultRoom/page/historyTreatment/historyTreatment.wxml -->
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
            <van-tabs :active="select" @change="onChangeTap" class="tabs" color="#1890FF" title-active-color="#1890FF">
                <van-tab :title="item.title" v-for="(item, index) in Type == 1 ? array2 : array1" :key="index">
                    <van-row>
                        <view class="Row">
                            <van-col span="8" v-if="select == 0">
                                <view class="contentHeight" :style="'height: calc(100vh - ' + (height * 2 + 220) + 'rpx)'">
                                    <picker @change="bindPickerChange1" :value="leftArrayIndex" :range="leftArray" range-key="descripts">
                                        <van-cell :title="leftArray[leftArrayIndex].descripts" is-link arrow-direction="down" />
                                    </picker>
                                    <van-sidebar :active-key="leftDataIndex" @change="onChangeleftData" color="#1890FF" title-active-color="#1890FF">
                                        <van-sidebar-item :title="item.IEMRMoudleDesc" v-for="(item, index1) in leftData" :key="index1"></van-sidebar-item>
                                    </van-sidebar>
                                </view>
                            </van-col>
                            <van-col span="8" v-if="select == 1">
                                <view class="contentHeight" :style="'height: calc(100vh - ' + (height * 2 + 220) + 'rpx)'">
                                    <van-sidebar :active-key="leftDataIndex2" @change="onChangeleftData2" color="#1890FF" title-active-color="#1890FF">
                                        <van-sidebar-item :title="item.admLocDesc" v-for="(item, index1) in leftData2" :key="index1"></van-sidebar-item>
                                    </van-sidebar>
                                </view>
                            </van-col>
                            <van-col span="16">
                                <view class="contentHeight" :style="'height: calc(100vh - ' + (height * 2 + 220) + 'rpx)'">
                                    <view v-if="select == 0">
                                        <picker @change="bindPickerChange3" :value="rightArrayIndex2" :range="rightArray2" range-key="name">
                                            <van-cell :label="rightArray2[rightArrayIndex2].name" is-link arrow-direction="down">
                                                <view slot="title">
                                                    <view class="van-cell-text">
                                                        {{ entryedText2 }}
                                                        <van-tag round type="danger">{{ rightArray2.length }}</van-tag>
                                                    </view>
                                                </view>
                                            </van-cell>
                                        </picker>
                                    </view>
                                    <view v-if="select == 1">
                                        <picker @change="bindPickerChange2" :value="rightArrayIndex" :range="rightArray" range-key="name">
                                            <van-cell :label="rightArray[rightArrayIndex].name" is-link arrow-direction="down">
                                                <view slot="title">
                                                    <view class="van-cell-text">
                                                        {{ entryedText }}
                                                        <van-tag round type="danger">{{ rightArray.length }}</van-tag>
                                                    </view>
                                                </view>
                                            </van-cell>
                                        </picker>
                                    </view>
                                    <view class="gre">
                                        <view v-if="select == 0">
                                            <van-cell-group>
                                                <van-cell
                                                    value-class="textLeft"
                                                    title-width="140rpx"
                                                    :title="item.IEMRTempElementDesc"
                                                    :value="!item.IEMRMoudleElementData || item.IEMRMoudleElementData == '' ? ' ' : item.IEMRMoudleElementData"
                                                    v-for="(item, index1) in rightData"
                                                    :key="index1"
                                                ></van-cell>
                                            </van-cell-group>
                                        </view>
                                        <view v-if="select == 1">
                                            <van-cell-group>
                                                <view class="row" v-for="(item, index1) in rightData" :key="index1">
                                                    <van-cell
                                                        value-class="textLeft"
                                                        title-width="140rpx"
                                                        class="fontS30"
                                                        :title="item.IEMRTempElementDesc"
                                                        v-if="item.IEMRTempElementCode == 'DE05.01.025.00' && item.elementTypeCode == 'Labelarea'"
                                                        is-link
                                                        center
                                                        clickable
                                                        use-label-slot
                                                    >
                                                        <block v-for="(item, index2) in diagnoseObj" :key="index2">
                                                            <view :id="'goods-' + item.gid">{{ index + 1 }}、{{ item.ICDDesc }}</view>
                                                        </block>
                                                    </van-cell>

                                                    <van-cell
                                                        value-class="textLeft"
                                                        title-width="140rpx"
                                                        class="fontS30"
                                                        :title="item.IEMRTempElementDesc"
                                                        v-if="item.IEMRTempElementCode == 'DE06.00.289.00' && item.elementTypeCode == 'Labelarea'"
                                                        is-link
                                                        center
                                                        clickable
                                                        use-label-slot
                                                    >
                                                        <view class="chufang-box">
                                                            <block v-for="(itemName, index2) in orderPresc" :key="index2">
                                                                <view class="chufang2">
                                                                    <!-- <view class="item-aside"></view> -->
                                                                    <view class="item-main">
                                                                        <view class="onebox">
                                                                            <view class="one">
                                                                                <view class="left">
                                                                                    <!-- 中药 -->
                                                                                    <view class="name" v-if="itemName.prescTypeCode == 'CM'" style="display: flex">
                                                                                        <view style="flex: 0 0 auto">{{ index + 1 }}、</view>
                                                                                        <view style="flex: 1 1 auto">
                                                                                            <block v-for="(itemName, index3) in itemName.comPresc" :key="index3">
                                                                                                <view class="herbstemp">
                                                                                                    <view
                                                                                                        class="herbs-item-comPrincipletemp"
                                                                                                        :style="
                                                                                                            'background-color:' +
                                                                                                            (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.comPresc[0].frequenceDesc
                                                                                                    }}， {{ itemName.prescDoseQty }}，{{ itemName.prescUsageExplainDesc }} ，
                                                                                                    {{ itemName.prescUsageDesc }}
                                                                                                </text>
                                                                                            </view>
                                                                                        </view>
                                                                                    </view>
                                                                                </view>
                                                                            </view>
                                                                        </view>
                                                                    </view>
                                                                </view>

                                                                <!-- 西药 -->

                                                                <block v-if="itemName.prescTypeCode == 'PT'">
                                                                    <view v-if="itemName.childOrd.length > 0">
                                                                        <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 }}</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 }}</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">
                                                                        <view>{{ index + 1 }}、{{ itemName.ordDesc }} {{ itemName.spec }} {{ itemName.qtyUomStr }}</view>
                                                                        <view class="use">
                                                                            用法：{{ itemName.frequenceDesc }}，{{ itemName.usageDesc }}，{{ '每次' + itemName.doseUnitStr }}，{{
                                                                                itemName.durStr
                                                                            }}
                                                                        </view>
                                                                    </view>
                                                                </block>
                                                            </block>
                                                        </view>
                                                    </van-cell>

                                                    <van-cell
                                                        value-class="textLeft"
                                                        title-width="140rpx"
                                                        class="fontS30"
                                                        :value="!item.IEMRTempElementData || item.IEMRTempElementData == '' ? ' ' : item.IEMRTempElementData"
                                                        is-link
                                                        center
                                                        clickable
                                                        use-label-slot
                                                        :data-value="item.IEMRTempElementData"
                                                        :data-name="item.IEMRTempElementDesc"
                                                        @tap.native="tapSelect($event, { value: item.IEMRTempElementData, name: item.IEMRTempElementDesc })"
                                                        v-if="item.elementTypeCode !== 'Labelarea'"
                                                    >
                                                        <view slot="title">
                                                            <view>{{ item.IEMRTempElementDesc }}</view>
                                                        </view>
                                                    </van-cell>
                                                </view>
                                            </van-cell-group>
                                        </view>
                                    </view>
                                </view>
                            </van-col>
                        </view>
                    </van-row>
                </van-tab>
            </van-tabs>
            <view>
                <button class="diagnostibutton" @tap="sureChange" v-if="Type != 1">引用此病历</button>
            </view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import navBar from '@/pages/components/navbar/index';
// pages/myConsultRoom/page/historyTreatment/historyTreatment.js
const app = getApp();
import { $http } from '../../../../config/https';
export default {
    components: {
        navBar
    },
    data() {
        return {
            select: 0,

            // tab选中的值tabbox
            Type: 1,

            //类型 1历史诊疗 2历史病历

            TypeArr: [
                {
                    title: '历史诊疗记录'
                },
                {
                    title: '引用病历'
                }
            ],

            // tab选项
            array1: [
                {
                    title: '病历模板'
                },
                {
                    title: '历史病历'
                }
            ],

            // tab选项
            array2: [
                {
                    title: '历史病历'
                }
            ],

            // tab选项
            navbarData: {
                isGoBack: true,
                background: '',
                title: '引用病历',
                //导航栏 中间的标题
                bottom: false,
                result: ''
            },

            height: app.globalData.height,
            leftArray: [],

            //获取左侧select数据
            leftArrayIndex: 0,

            //获取左侧select数据index
            rightArray: [],

            //获取右侧select数据
            rightArrayIndex: 0,

            //获取右侧select数据index
            rightArray2: [],

            //获取右侧select数据
            rightArrayIndex2: 0,

            //获取右侧select数据index
            leftData: [],

            //获取左侧列表数据
            leftDataIndex: 0,

            // 侧边选中的值tabbox
            leftData2: [],

            //获取左侧列表数据
            leftDataIndex2: 0,

            // 侧边选中的值tabbox
            rightData: [],

            //获取右侧列表数据
            entryedText: '',

            // entryedText
            entryedText2: '',

            // entryedText
            diagnoseObj: [],

            // 诊断
            // 处方
            orderPresc: [],

            result: '',
            descripts: '',
            name: '',

            val: {
                ordDesc: '',
                spec: '',
                qtyUomStr: '',
                doseUnitStr: '',
                durStr: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 接收wList
        this.optionsUrl(options);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        this.rightArray2Fun(); // 右侧select
        this.leftArrayFun(); //获取左侧select数据
        this.leftData2Fun(); // 获取左侧列表 第二个
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onChangeCheckBox(event) {
            console.log('11111444655', event);
            if (event.detail == this.result) {
                this.setData({
                    result: ''
                });
                return;
            }
            this.setData({
                result: event.detail
            });
        },

        // 接收 url传参
        optionsUrl: function (options) {
            let Type = JSON.parse(options.Type); //解析得到对象
            this.setData(
                {
                    Type
                },
                () => {
                    let { Type } = this;
                    this.navigationBarTitleText(Type);
                }
            );
        },

        // 自定义导航栏切换
        navigationBarTitleText: function (i) {
            console.log(i);
            let { navbarData, TypeArr } = this;
            navbarData.title = TypeArr[i - 1].title;
            this.setData({
                navbarData
            });
            if (i == 1) {
                this.setData(
                    {
                        select: 1
                    },
                    () => {
                        setTimeout(() => {
                            this.onChangeleftData2();
                        }, 500);
                    }
                );
            }
        },

        /**
         * 切换Tab
         */
        onChangeTap(event) {
            let index = event.detail.name;
            let { Type } = this;
            this.setData(
                {
                    select: index,
                    rightData: [] //获取右侧列表数据
                },
                () => {
                    if (index == 0) {
                        this.bindPickerChange1();
                    }
                    if (index == 1) {
                        this.onChangeleftData2();
                    }
                }
            );
        },

        // 获取左侧select数据
        leftArrayFun: function () {
            $http.post('urlDeault', this, {
                code: '10020008',
                data: {
                    params: [{}],
                    pagination: [
                        {
                            pageSize: 10,
                            currentPage: 1
                        }
                    ]
                },
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData(
                            {
                                leftArray: res.result.data || []
                            },
                            () => {
                                this.bindPickerChange1();
                            }
                        );
                    }
                }
            });
        },

        // 左侧select数据Change
        bindPickerChange1: function (event) {
            this.setData(
                {
                    leftArrayIndex: event ? event.detail.value : 0,
                    rightData: [] //获取右侧列表数据
                },
                () => {
                    let { leftArrayFun: leftArray, leftArrayIndex, rightArray2Fun: rightArray2, rightArrayIndex2 } = this;
                    let templetTypeID = leftArray[leftArrayIndex].id;
                    let IEMRTemplateID = rightArray2[rightArrayIndex2].IEMRTemplateID;
                    $http.post('urlDeault', this, {
                        code: '10020013',
                        data: {
                            params: [
                                {
                                    IEMRTemplateID: IEMRTemplateID,
                                    templetTypeID: templetTypeID,
                                    IEMRMoudleDesc: ''
                                }
                            ]
                        },
                        success: function (res) {
                            let errorCode = res.errorCode;
                            if (errorCode === '0') {
                                this.setData(
                                    {
                                        leftData: res.result.data || []
                                    },
                                    () => {
                                        this.onChangeleftData();
                                    }
                                );
                            }
                        }
                    });
                }
            );
        },

        // 右侧select数据Change
        bindPickerChange3: function (event) {
            this.setData(
                {
                    rightArrayIndex2: event ? event.detail.value : 0,
                    rightData: [] //获取右侧列表数据
                },
                () => {
                    let { leftArrayIndex } = this;
                    let e = {
                        detail: {
                            value: leftArrayIndex
                        }
                    };
                    this.bindPickerChange1(e);
                }
            );
        },

        // 右侧select数据Change
        bindPickerChange2: function (event) {
            this.setData(
                {
                    rightArrayIndex: event ? event.detail.value : 0,
                    rightData: [] //获取右侧列表数据
                },
                () => {
                    let patientData = Cache.get('patientData');
                    let { patID } = patientData;
                    let { rightArrayIndex, rightArray, leftData2Fun: leftData2, leftDataIndex2 } = this;
                    let IEMRTemplateID = rightArray[rightArrayIndex].IEMRTemplateID;
                    let admID = leftData2[leftDataIndex2] && leftData2[leftDataIndex2].admID;
                    if (!admID) {
                        return;
                    }
                    $http.post('urlDeault', this, {
                        code: '10020002',
                        data: {
                            params: [
                                {
                                    IEMRTemplateID: IEMRTemplateID,
                                    admID: admID,
                                    patID: patID
                                }
                            ]
                        },
                        success: function (res) {
                            let errorCode = res.errorCode;
                            if (errorCode === '0') {
                                this.setData(
                                    {
                                        rightData: res.result || []
                                    },
                                    () => {
                                        this.zdcf(admID); //询病历模板默认信息
                                    }
                                );
                            }
                        }
                    });
                }
            );
        },

        // 询病历模板默认信息 诊断 医嘱处方
        zdcf: function (admID) {
            let userData = Cache.get('userData');
            let { hospID } = userData;
            $http.post('urlDeault', this, {
                code: '10020004',
                data: {
                    params: [
                        {
                            admID: admID,
                            hospID: hospID
                        }
                    ]
                },
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData({
                            diagnoseObj: res.result.diagnoseObj || [],
                            orderPresc: res.result.orderPresc || []
                        });
                    }
                }
            });
        },

        // 获取左侧列表 第二个
        leftData2Fun: function () {
            let patientData = Cache.get('patientData');
            let { patID } = patientData;
            $http.post('urlDeault', this, {
                code: '10020006',
                data: {
                    params: [
                        {
                            patID: patID
                        }
                    ]
                },
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData({
                            leftData2: res.result.data || []
                        });
                    }
                }
            });
        },

        // 右侧selkect
        rightArray2Fun: function (event) {
            $http.post('urlDeault', this, {
                code: '10020001',
                data: {
                    params: [
                        {
                            admID: ''
                        }
                    ],
                    pagination: [
                        {
                            pageSize: 10,
                            currentPage: 1
                        }
                    ]
                },
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData(
                            {
                                rightArray2: res.result.TemplateList || [],
                                entryedText2: res.result.entryedText
                            },
                            () => {
                                this.bindPickerChange3();
                            }
                        );
                    }
                }
            });
        },

        // 点击左侧列表
        onChangeleftData: function (event) {
            this.setData(
                {
                    leftDataIndex: event ? event.detail : 0
                },
                () => {
                    let { leftDataIndex, leftData } = this;
                    let IEMRMoudleID = leftData[leftDataIndex] && leftData[leftDataIndex].IEMRMoudleID;
                    if (!IEMRMoudleID) {
                        return;
                    }
                    $http.post('urlDeault', this, {
                        code: '10020011',
                        data: {
                            params: [
                                {
                                    IEMRMoudleID: IEMRMoudleID
                                }
                            ]
                        },
                        success: function (res) {
                            let errorCode = res.errorCode;
                            if (errorCode === '0') {
                                this.setData({
                                    rightData: res.result.data || []
                                });
                            }
                        }
                    });
                }
            );
        },

        // 点击左侧列表  第二个
        onChangeleftData2: function (event) {
            let userData = Cache.get('userData');
            let { hospID } = userData;
            let detail = event ? event.detail : 0;
            let { leftData2Fun: leftData2 } = this;
            let admID = leftData2[detail] && leftData2[detail].admID;
            if (!admID) {
                return;
            }
            this.setData({
                leftDataIndex2: event ? event.detail : 0
            });
            $http.post('urlDeault', this, {
                code: '10020001',
                data: {
                    params: [
                        {
                            hospID: hospID,
                            admID: admID
                        }
                    ],
                    pagination: [
                        {
                            pageSize: 10,
                            currentPage: 1
                        }
                    ]
                },
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData(
                            {
                                rightArray: res.result.TemplateList || [],
                                entryedText: res.result.entryedText
                            },
                            () => {
                                this.bindPickerChange2();
                            }
                        );
                    }
                }
            });
        },

        // 引用病历
        sureChange: function (event) {
            let obj = {};
            let { select, rightArray2Fun: rightArray2, rightArrayIndex2, rightData, rightArray, rightArrayIndex, diagnoseObj, orderPresc } = this;
            if (select == 0) {
                // 病历模板
                obj.select = rightArray2[rightArrayIndex2];
                obj.data = rightData;
            }
            if (select == 1) {
                obj.select = rightArray[rightArrayIndex];
                obj.data = rightData;
                // obj.diagnoseObj = diagnoseObj
                // obj.orderPresc = orderPresc
                // 历史病历
            }

            let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
            let prevPage = pages[pages.length - 2];
            prevPage.callDataEdit(obj);
            uni.navigateBack({
                delta: 1
            });
        },

        tapSelect(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            console.log('占位：函数 tapSelect 未声明');
        }
    }
};
</script>
<style>
/* pages/myConsultRoom/page/historyTreatment/historyTreatment.wxss */
.tabs .van-sticky {
    margin: 10rpx;
    position: fixed;
    width: 100%;
}

.van-sidebar {
    width: 100% !important;
}

.Row {
    padding: 0 10rpx;
    padding-top: 108rpx;
}

.contentHeight {
    background: #fff;
    overflow: auto;
    border: 2rpx solid #eee;
}

.diagnostibutton {
    background: #1890ff;
    font-size: 30rpx;
    color: #fff;
    padding: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 0px;
}

.gre .van-cell {
    background: var(--sidebar-background-color, #f7f8fa);
}

.textLeft,
.leftFont {
    text-align: left !important;
}
</style>
