<template>
    <med-container
        class="disScreen_page"
        title="查疾病"
        :new-home-url="homeurl"
        hide-header
    >
        <view class="disScreen_wrapper">
            <top-bar
                :new-home-url="homeurl"
                :hide-home="isOppoWebview"
                :hide-back="isOppoWebview"
                title="百度健康医典"
                @topbarHeightHandle="topbarHeightHandle"
                @introPageHome="disscreenIndexUbcSend('ctlb_dingbuhome')"
            >
                <view
                    id="search-top"
                    class="search-top"
                    :style="{'top': topHeight + 'px'}"
                >
                    <view v-if="search && search.unifiUrl" class="search-input">
                        <b-navigate
                            :url="search.unifiUrl"
                            :extra="{type: 'ydSearch'}"
                            :log="{type: 'clk', value: 'ctlb_sousuo'}"
                        >
                            <view class="content">
                                <c-icon name="search" class="icon"/>
                                <view class="input c-font-13 c-color">{{ search.placeHolder }}</view>
                            </view>
                        </b-navigate>
                    </view>
                    <c-navs
                        v-show="mainNavs && mainNavs.length > 1"
                        class="search-navs"
                        :options="mainNavs"
                        :selected-index="selectedIndexNavMain"
                        border-bottom
                        selected-color="#00D2C9"
                        @itemtap="onNavMainTap"
                    />
                    <c-navs
                        v-show="navs && navs.length > 1"
                        class="search-navs"
                        :options="navs"
                        :selected-index="selectedIndex"
                        border-bottom
                        :bottom-line="false"
                        selected-color="#00D2C9"
                        @itemtap="onNavTap"
                    />
                </view>
            </top-bar>
            <view class="swiper-wrap" :style="{marginTop: navs && navs.length > 1 ? '142px' : '100px'}">
                <c-page-loading v-if="loading" :z-index="2"/>
                <swiper
                    v-if="mainNavs && mainNavs.length > 0"
                    :style="{
                        height: navs && navs.length > 1 ? 'calc(100vh - 142px)' : 'calc(100vh - 100px)',
                    }"
                    class="swiper-wrap"
                    :current="selectedIndexNavMain"
                    @change="swiperChange"
                >
                    <swiper-item
                        v-for="(item, index) in mainNavs"
                        :key="index"
                    >
                        <view v-if="leftData && leftData.length > 0" class="swiper-content">
                            <scroll-view
                                scroll-y
                                :scroll-top="scrollTop"
                                class="left-scroll"
                                @scroll="myScroll"
                            >
                                <view
                                    v-for="(itemData, indexData) in leftData"
                                    :key="indexData"
                                    class="line c-font-15 c-line-clamp1"
                                    :class="indexData === currentIndex ? 'line-act' : ''"
                                    @tap.stop="checkSecondTab(indexData)"
                                >
                                    {{ itemData.name }}
                                </view>
                            </scroll-view>
                            <scroll-view
                                scroll-y
                                :scroll-top="scrollTop"
                                class="right-scroll"
                                :lower-threshold="120"
                                @scroll="myScroll"
                                @scrolltolower="onBottom"
                            >
                                <view
                                    v-for="(itemData, indexData) in rightData"
                                    :key="indexData"
                                    class="line c-font-15 c-line-clamp1"
                                    :class="indexData === currentSubIndex ? 'line-act' : ''"
                                    @tap.stop="goSearchDisc(indexData,itemData.jumpUrl)"
                                >
                                    {{ itemData.name }}
                                </view>
                                <list-loading
                                    v-if="moreLoadStatus !== 'complete'"
                                    status="loading"
                                    class="list-loading"
                                />
                                <c-page-loading v-if="loadingRight" :z-index="2"/>
                            </scroll-view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </med-container>
</template>
<script>
    // 注意：vue 文件中使用组件按照 vue 规范的 components 字段配置即可，无需在 config 中配置 usingComponents
import Icon from '@baidu/med-ui/components/Icon/Icon';
import pageloading from '../../../../components/common/pageloading';
import ListLoading from '../../../../components/common/list-loading';
import Navs from '@baidu/med-ui/components/Navs/Navs';
import container from '../../../../components/common/container';
import Navigate from '../../../../components/common/navigate';
import {request} from '../../../../utils/request';
import * as conf from '../../../../utils/conf';
import {navigate} from '../../../../utils/navigate';
import {shareBdBox} from '../../../../utils/share';
import TopBar from '../../../../components/common/topbar';
import {COOKIE_KEY} from '@utils/constant';
import cookie from '@utils/cookie';
import { ubcSend} from '@utils/log';

/**
 * @file 百度医典疾病筛选页
 * @author yumingzhi
 */
export default {
    config: {
        navigationStyle: 'custom'
    },
    components: {
        TopBar: TopBar,
        'med-container': container,
        'c-icon': Icon,
        'c-navs': Navs,
        'c-page-loading': pageloading,
        'b-navigate': Navigate,
        'list-loading': ListLoading
    },
    data() {
        let isOppoWebview = false;
        if (process.env.MARS_ENV === 'h5') {
            isOppoWebview = !!cookie(COOKIE_KEY.IS_OPPO_WEBVIEW);
        }
        return {
            search:{},
            entityType: 1,
            navsType: '',
            selectedIndexNavMain: 0, // 一级分类选中索引
            selectedIndex: 0, // 二级分类选中索引
            currentIndex:0,
            currentSubIndex:-1,
            mainNavs: [],
            navs: [],
            cascaderHeight:500,
            topHeight: 0,
            loading:true,
            loadingRight:false,
            moreLoadStatus: 'init',
            pageNum: 0,
            pageSize: 30,
            scrollTop:0,
            leftData:[],
            rightData:[],
            shareInfo4Bd: {
                title: '疾病百科 - 百度健康医典',
                content: '点击查找疾病，获取权威疾病科普知识',
                imageUrl: 'https://med-fe.cdn.bcebos.com/yd%2Fyd-share-dis.png'
            },
            isOppoWebview: isOppoWebview,
            homeurl: '/pages/speTopic/dict/home/index', //指定home跳转地址
        };
    },
    onLoad(options) {
        this.entityType = options.entityType || '1';
        this.getPageData(0);
        if (process.env.MARS_ENV === 'h5') {
            shareBdBox(this.shareInfo4Bd);
        }
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    methods: {
        getPageData(type) {
            //type 0 是第一次加载以及切换tab 1是点击左侧tab
            let reqData = {};
            Object.assign(
                reqData,
                {entityType: this.entityType},
                {type: this.navsType},
                {item: this.leftData.length > 0 ? this.leftData[this.currentIndex].name : ''},
                {pn: this.pageNum * this.pageSize},
                {rn: this.pageSize}
            );
            request({
                url: conf.apiHost + '/med/page/jp/yidian/getdiseaselist',
                method: 'GET',
                data: reqData,
                isNeedLogin: false,
                isFirstScreen: true,
            })
                .then(({data, update}) => {
                    if (type === 0){
                        this.search = data.search;
                        this.navs = data.navs;
                        this.mainNavs = data.tabs || [];
                        for (let i = 0; i < this.mainNavs.length; i++) {
                            if (this.entityType === this.mainNavs[i].type) {
                                this.selectedIndexNavMain = parseInt(this.mainNavs[i].type, 10) - 1;
                            }
                        }
                        this.leftData = data.itemList;
                        this.rightData = data.itemDiseaseList;
                        this.scrollTop = 0;
                    } else if (type === 1){
                        this.rightData = this.rightData.concat(data.itemDiseaseList);
                    }
                    if (data.itemDiseaseList && data.itemDiseaseList.length < this.pageSize) {
                        this.moreLoadStatus = 'complete';
                    } else {
                        this.moreLoadStatus = 'init';
                    }
                    update.call(this);
                    this.$mpUpdated(() => {
                        this.loading = false;
                        this.loadingRight = false;
                    });
                })
                .catch(error => console.error(error));
        },
        topbarHeightHandle(e) {
            if (process.env.MARS_ENV === 'h5') {
                this.topHeight = e;
            }
            this.topHeight = e;
        },
        onNavTap(obj) {
            this.disscreenIndexUbcSend('ctlb_2jishanxuan');
            if (this.selectedIndex === obj.index) {
                return false;
            }
            this.selectedIndex = obj.index;
            this.navsType = this.navs[obj.index]['type'];
            this.checkFirstTab();
        },
        onNavMainTap(obj) {
            this.disscreenIndexUbcSend('ctlb_1jishaixuan');
            if (this.selectedIndexNavMain === obj.index) {
                return false;
            }
            this.selectedIndexMainNav = obj.index;
            this.selectedIndex = 0;
            this.navsType = '';
            this.entityType = this.mainNavs[obj.index]['type'];
            this.checkFirstTab();
        },
        swiperChange(e){
            if (e.detail.source === 'touch') {
                this.selectedIndexNavMain = Number(e.detail.current);
                this.navsType = '';
                this.entityType = this.mainNavs[this.selectedIndexNavMain]['type'];
                this.selectedIndex = 0;
                this.checkFirstTab();
            }
        },
        checkFirstTab(){
            this.currentIndex = 0;
            this.currentSubIndex = -1;
            this.pageNum = 0;
            this.loading = true;
            this.leftData = [];
            this.rightData = [];
            this.getPageData(0);
        },
        checkSecondTab(index){
            this.disscreenIndexUbcSend('ctlb_3jishaixuan');
            if (this.currentIndex !== index){
                this.pageNum = 0;
                this.loadingRight = true;
                this.currentIndex = index;
                this.currentSubIndex = -1;
                this.rightData = [];
                this.getPageData(1);
            }
        },
        goSearchDisc(index, url){
            this.disscreenIndexUbcSend('ctlb_dangecitiao');
            this.currentSubIndex = index;
            navigate({url:url});
        },
        onBottom(){
            if (this.moreLoadStatus !== 'loading' && this.moreLoadStatus !== 'complete') {
                // 加载更多
                this.moreLoadStatus = 'loading';
                this.pageNum++;
                this.getPageData(1);
            }
        },
        // 滚动监听
        myScroll() {
            this.scrollTop = 1;
        },
        disscreenIndexUbcSend(dotValue) {
            ubcSend({
                type: 'clk',
                value: dotValue,
                page: 'pages/speTopic/dict/disscreen/index'
            });
        }
    }
};

</script>
<style lang="less">
    .disScreen_wrapper {
        position: relative;
        .search-top {
            z-index: 100;
            position:fixed;
            top:0;
            width:100%;
            background:#fff;
            transition: top .16s cubic-bezier(0, 0, .3, 1);
        }
        .search-navs {
            width:100%;
            background:#fff;
            transition: top .16s cubic-bezier(0, 0, .3, 1);
        }
        .search-input {
            position: relative;
            padding: 10px 17px;
            background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
            .content {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-radius: 19px;
                height: 38px;
                line-height: 38px;
                background-color: #f6f6f6;
            }
            .icon {
                padding: 0 .1rem 0 .15rem;
                color: #bbb;
                font-weight: 900;
            }
            .input {
                height: 38px;
                color: #BBBBBB;
                line-height: 38px;
            }
        }
        .swiper-wrap{
            position: relative;
            margin-top: 90px;
        }
        .swiper-content{
            width: 100vw;
            display: flex;
            align-items: center;
            height: 100%;
            .left-scroll{
                width: 40%;
                height: 100%;
                background: #F8F8F8;
            }
            .right-scroll{
                width: 60%;
                height: 100%;
                background: #ffffff;
                position: relative;
            }
            .line{
                width: 100%;
                height: 44px;
                line-height: 44px;
                color: #333333;
                padding-left: .17rem;
                box-sizing: border-box;
            }
            .line-act{
                color: #00D2C9;
                background: #ffffff;
                font-weight: bold;
            }
        }
    }
</style>
<style lang="less" target="swan" scoped>
    .swiper-wrap {
        height: calc(100vh - 154px);
    }
</style>
