<template>
    <!-- pages/Entry/prescription/addPrescription/customDiagnostics/customDiagnostics.wxml -->
    <view class="diagnostic-wrapper" :class="{ 'diagnostic-wrapper--inspection': active == 2 || active == 3}" disabled>
        <view v-if="active == 0" class="diagnostic-wrapper__child">
            <western ref="western" id="western" :wListData="wListData" :editData="editData" :diagData="diagData" @addInfo="addInfo($event, { tagId: 'western' })" />
        </view>
        <view v-if="active == 1">
            <grass ref="grass" :gListcallData="gListcallData" :gListData="gListData" :editData="editData" :diagData="diagData" @addInfo="addInfo" />
        </view>
        <view v-if="active == 2 || active == 3" class="diagnostic-wrapper__inspection">
            <inspectionExamine :key="active" ref="inspectionExamine" :active="active" :diagData="diagData" />
        </view>
    </view>
</template>

<script>
import grass from './grass/grass';
import western from './western/western';
import inspectionExamine from './inspectionExamine/inspectionExamine';
// pages/Entry/prescription/addPrescription/customDiagnostics/customDiagnostics.js
export default {
    components: {
        grass,
        western,
        inspectionExamine
    },
    data() {
        return {};
    },
    /**
     * 可以使用全局样式
     */
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     */
    props: {
        wListData: {
            type: Array,
            //类型
            default: () => [] //默认值
        },

        gListData: {
            type: Array,
            //类型
            default: () => [] //默认值
        },

        gListcallData: {
            type: Object,
            //类型
            default: () => ({}) //默认值
        },

        active: {
            type: Number,
            //类型
            default: 0 //默认值
        },

        editData: {
            type: Object,
            //类型
            default: () => ({}) //默认值
        },

        diagData: {
            type: Object,
            //诊断对象（含 id / diagCode / diagDesc）
            default: () => ({}) //默认值
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    /**
     * 组件的方法列表
     */
    methods: {
        unSaveData: function () {
            return this.$refs.western?.totalSelected > 0 || this.$refs.grass?.gList?.length > 0;
        },
        ready: function (options) {
            console.log(this.gListData);
        },

        attached: function () {},

        // 获取子组件参数
        // 西药 草药
        addInfo(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            this.$emit('addInfo', {
                detail: e.detail
            }); //通过triggerEvent将参数传给父组件
        },

        searchSelect: function (selectData) {
            // H5 + Vue3 下 zpSelectComponent 通过 vnode.data.attrs.id 查找子组件不稳定,
            // 优先使用 Vue $refs 进行子组件调用,且 western 内部方法为 searchSelectFun。
            let child = (this.$refs && this.$refs.western) || null;
            if (!child && typeof this.zpSelectComponent === 'function') {
                try {
                    child = this.zpSelectComponent('#western');
                } catch (e) {
                    child = null;
                }
            }
            if (child && typeof child.searchSelectFun === 'function') {
                child.searchSelectFun(selectData);
            } else if (child && typeof child.searchSelect === 'function') {
                child.searchSelect(selectData);
            }
        },

        // 转发 grassPush 页面保存回传的 gList 给 grass 子组件
        setGListPush: function (newGList) {
            let child = (this.$refs && this.$refs.grass) || null;
            if (!child && typeof this.zpSelectComponent === 'function') {
                try {
                    child = this.zpSelectComponent('#grass');
                } catch (e) {
                    child = null;
                }
            }
            if (child && typeof child.setGListPush === 'function') {
                child.setGListPush(newGList);
            }
        }
    },
    created: function () {}
};
</script>
<style>
/* @import '../../../diagnostic/addDiagnostic/customDiagnostics/customDiagnostics.css'; */

/*
 * 西药分支（active === 0）也需要从父级 flex 容器继承明确高度，
 * 让 western 内的左右 scroll-view 能各自占据剩余空间并独立滚动。
 */
.diagnostic-wrapper {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.diagnostic-wrapper__child {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * 检验检查页内有左右两个 scroll-view。让该分支从父级 flex 容器继承明确高度，
 * H5 鼠标滚轮和移动端触摸滚动才能各自在对应区域内生效。
 * 仅作用于 active === 2，不改变西药、草药的既有布局。
 */
.diagnostic-wrapper--inspection {
    /* 父级 .diagnosticcontent 已是定位容器，直接填满其可用区域，避免底部栏被裁切。 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.diagnostic-wrapper__inspection {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.overlay {
    position: fixed;
    top: 328rpx;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
</style>
