<template>
    <div class="prescription">
        <!-- 顶部筛选 -->
        <div class="screening flex-plane-start-b">

            <div class="screening-form flex-vertical-center-l flex-wrap">

                <div class="screening-item flex-vertical-center-l">
                    <span>疾病名称：</span>
                    <div class="input">
                        <el-input size="mini" v-model="form.name" placeholder="请输入" @keydown.enter.native="search()"></el-input>
                    </div>

                </div>

                <!-- <div class="screening-item flex-vertical-center-l">
                    <span>功效：</span>
                    <div class="input">
                        <el-input v-model="form.gongxiao" placeholder="请输入"></el-input>
                    </div>

                </div> -->
                <el-button size="mini" type="primary" @click="search">搜索</el-button>
                <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>

            </div>
            <!-- <div class="total">
                共 <span>123</span>味药
            </div> -->
        </div>

        <!-- 主体部分 -->
        <div class="prescr-body">
            <!-- 顶部tab -->
            <div class="p-tab flex-vertical-center-l flex-wrap">
                <div :class="tab_current==index?'flex-center p-active':'flex-center'" v-for="(item,index) in tabs"
                    :key="index" @click="tabCahnge(index);">
                    {{item.deptName}}
                </div>

            </div>
            <!-- 底部数据表格 -->
            <div ref="scrollableElement" class="table-data" :date-loading="page === 1 && loading"  v-loading="page === 1 && loading">

                <div class="flex-center table-name" v-for="(item,index) in list" :key="index" :title="item.disname"
                    @click="$router.push({path:'/index/diseased?disid='+item.disid})">{{item.disname}}</div>

                <div class="flex-center findmore" @click="!loading && loadMoreData()">
                    <span>更多</span>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import useScroll from '@/mixins/useScroll';
    import {
        getDiseaseList,
        getDiseaseClass
    } from '@/api/knowledge.js'

    let controller;

    export default {
        mixins: [useScroll],
        data() {
            return {
                loading: false,
                form: {
                    name: '',

                    gongxiao: ''
                },
                page: 1,
                list: [],
                loadMore: true,
                tabs: [],
                tab_current: 0
            }
        },
        created() {
            this.getDiseaseClass()

        },
        methods: {
            clearFilter() {
                this.form.name = ''
                this.search()
            },
            search() {
                this.page = 1
                this.loadMore = true
                this.tab_current = this.tabs.length - 1;
                this.getDiseaseList()
            },
            tabCahnge(index) {
                if (this.tab_current === index) this.scroll(0);
                else {
                  this.tab_current = index
                  this.page = 1
                  this.loadMore = true
                  this.getDiseaseList()
                }
            },
            loadMoreData() {
                this.getDiseaseList(this.loadMore)
            },
            // 获取疾病数据
            async getDiseaseList(load = true) {
                if (!load) {
                    this.$message.warning('没有更多数据')
                    return
                }
                if (controller) controller.abort();
                controller = new AbortController();
                if (this.page === 1) this.scroll(0, 'instant');
                this.loading = true;
                let params = {
                    keyword: this.form.name,
                    pageid: this.page,
                    pagesize: 100,
                    serchtype: '',
                    deptid: this.tabs[this.tab_current].deptId

                }
                let res = await getDiseaseList(params, controller.signal);
                if (res.code == 0) {
                    if (this.page > 1) {
                        this.list = [...this.list, ...res.data.diseases]
                    } else {
                        this.list = res.data.diseases
                    }

                    if (this.page <= res.data.TotalPageCount) {
                        this.page += 1
                    } else {
                        this.loadMore = false
                        this.$message.warning('没有更多数据')
                    }

                }
                this.loading = false;
            },
            // 获取疾病分类
            async getDiseaseClass() {
                let res = await getDiseaseClass()
                if (res.code == 0) {
                    this.tabs = res.data
                    this.tabs.push({
                      deptName: "检索结果",
                    });
                    this.getDiseaseList()
                }

            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../../style/common.scss';
    @import '../../style/base.scss';

    .prescription {
        .total {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-bottom: 20px;


            span {
                color: #FF3A3A;
            }
        }

        .prescr-body {
            margin-top: 10px;
            .p-tab {
              > div {
                margin-top: 2px;
                flex-shrink: 0;
                min-width: 70px;
                width: auto;
              }
            }
        }

        .table-data {
            padding: 10px 10px;
            background: #FFFFFF;
            border-radius: 0px 5px 5px 5px;
            height: 65vh;
            overflow: auto;

            &[date-loading="true"] {
              overflow: hidden;
            }

            div {
                display: inline-block;
                width: 90px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                background: #F5F5F5;
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
                margin: 0 10px 10px 0;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .findmore {
            background: #FFAE45 !important;
            color: #fff !important;
        }
    }
</style>
<style lang="scss" scoped>
    @media screen and (min-width:1681px) and (max-width:1920px) {
        .prescription {
            .table-data {
                height: 79vh;
            }
        }

    }

    @media screen and (min-width:1601px) and (max-width:1680px) {
        .prescription {
            .table-data {
                height: 78vh;
            }
        }

    }

    @media screen and (min-width:1361px) and (max-width:1600px) {
        .prescription {
            .table-data {
                height: 68vh;
            }
        }

    }

    @media screen and(min-width:1281px) and (max-width:1360px) {
        .prescription {
            .table-data {
                height: 68vh;
            }
        }


    }
</style>