<template>
    <view>
        <!-- pages/diagnosticEntry/diagnostic/addDiagnostic/addDiagnostic.wxml -->
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="add-diagnostic-page" :style="'top: ' + (height * 2 + 10) + 'rpx;'">
            <view class="diagnosticEntry plr20">
                <view class="header-wrapper">
                    <view class="diagnosticheader">
                        <view class="header-flex" :data-index="index" @tap="tapChange" v-for="(item, index) in array" :key="index">
                            <view :class="'diagnosticheaderBox ' + (select == index ? 'select' : '') + ' ' + (index != 1 ? 'borderRight' : '')">{{ item.title }}</view>
                        </view>
                    </view>
                </view>

                <view class="diagnosticcontent">
                    <!-- <view class="row">
        <view class="col clearn ">
          <view class="col-12"> -->
                    <!-- <view wx:if="{{select === 0}}"> -->
                    <!-- 自定义诊断 -->
                    <!-- <customDiagnostics id="customDiagnostics" editData="{{editData}}" editSyndromeList="{{editSyndromeList}}" arryLength="{{arryLength}}"></customDiagnostics>
            </view> -->
                    <view v-if="select == 0" class="diag-pane">
                        <!-- 历史诊断 -->
                        <historicalDiagnosis :arryLength="arryLength"></historicalDiagnosis>
                    </view>
                    <!-- <view v-if="select == 1">
                        诊断模板
                        <templateDiagnostic :arryLength="arryLength"></templateDiagnostic>
                    </view> -->
                    <!-- </view>
        </view>
      </view> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navBar from '@/pages/components/navbar/index';
import customDiagnostics from './customDiagnostics/customDiagnostics';
import historicalDiagnosis from './historicalDiagnosis/historicalDiagnosis';
import templateDiagnostic from './templateDiagnostic/templateDiagnostic';
// pages/diagnosticEntry/diagnostic/addDiagnostic/addDiagnostic.js
const app = getApp();
export default {
    components: {
        navBar,
        customDiagnostics,
        historicalDiagnosis,
        templateDiagnostic
    },
    data() {
        return {
            select: 0,

            // 选中的值tabbox
            array: [
                //   {
                //   title: '自定义诊断'
                // },
                {
                    title: '历史诊断'
                },
                // {
                //     title: '诊断模板'
                // }
            ],

            // tab选项
            editData: {},

            //当前编辑数据
            editSyndromeList: [],

            //当前编辑证型数据
            navbarData: {
                isGoBack: true,
                background: '',
                title: '添加诊断',
                //导航栏 中间的标题
                bottom: false
            },

            height: app.globalData.height,
            arryLength: '',

            /**
             * 组件的属性列表
             */
            properties: {
                editData: String
            },

            addText: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log('options', options);
        this.setData(
            {
                arryLength: options.arryLength,
                select: options.select
            },
            () => {
                console.log('set-success', this);
            }
        );

        // 接收wList
        this.optionsUrl(options);
    },
    methods: {
        // 接收 url传参
        optionsUrl: function (options) {
            if (options.editData) {
                let editData = JSON.parse(options.editData); //解析得到对象
                let editSyndromeList = JSON.parse(options.editSyndromeList); //解析得到对象
                this.setData({
                    editData,
                    editSyndromeList: editSyndromeList
                });
            }
        },

        // 获取选中的select数据
        searchSelect: function (selectData) {
            this.customDiagnostics = this.zpSelectComponent('#customDiagnostics');
            this.customDiagnostics.searchSelect(selectData);
        },

        // 自定义导航栏切换
        navigationBarTitleText: function (i) {
            let { navbarData, array } = this;
            navbarData.title = array[i].title;
            this.setData({
                navbarData
            });
        },

        // 点击切换
        tapChange: function (event) {
            let { currentTarget } = event;
            let { array } = this;
            let dataset = currentTarget.dataset;
            this.navigationBarTitleText(dataset.index); //自定义导航栏切换
            this.setData({
                select: dataset.index,
                // 选中的tab
                addText: array[dataset.index].addText // 添加按钮名称
            });
        }
    }
};
</script>
<style scoped>
.add-diagnostic-page {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: #f4f7fb;
}

.diagnosticEntry {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.header-wrapper {
    flex-shrink: 0;
    margin: 8rpx 16rpx;
    border-radius: 12rpx;
    overflow: hidden;
    background: #fff;
}

.diagnosticheader {
    display: flex;
    height: 74rpx;
    background-color: #fff;
    align-items: center;
}

.header-flex {
    flex: 1;
    text-align: center;
}

.diagnosticheaderBox {
    font-size: 28rpx;
    height: 74rpx;
    line-height: 74rpx;
    color: #1f2937;
}

.select {
    color: #1687ff;
    font-weight: 600;
}

.borderRight {
    border-right: 1rpx solid #edf1f6;
}

.diagnosticcontent {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 12rpx;
}

/* 子页面容器：必须给出确定高度，否则内部 height:100% 会退化为 auto，
   底部操作栏会被 .diagnosticcontent 的 overflow:hidden 裁掉 */
.diag-pane {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
</style>
