<template>
    <nav-bar :navbar-data="navbarData" />
    <view :style="{ marginTop: height + 'px', height: 'calc(100vh - '+ height +'px)' }">
        <view :style="{ position: 'fixed', width: '100%', left: 0, top: height +'px', zIndex: 999, background: '#fff'}">
            <uni-search-bar :value="descripts" placeholder="搜索医生或科室" @change="onChange" :focus="focusFlag"
                @search="onSearch" @focus="onFocus" shape="round">
                <!-- <view slot="action" bind:tap="onClick">搜索</view> -->
            </uni-search-bar>
            <view v-if="flag && beforeSearch.length > 0" style="background: #f5f4f4;" id="mjltest">
                <view class="before">
                    <view class="before-search">历史搜索</view>
                    <uni-icons size="40rpx" custom-class="clear-icon" @click="clearBeforeSearch" type="trash-filled" />
                </view>
                <view style="padding:0 20rpx 20rpx 20rpx">
                    <text class="before-show" v-for="(item, index) in beforeSearch" :key="index" @tap="showSearch"
                        :data-index="item">{{ item }}</text>
                </view>
            </view>
            <view class="search-tip" v-if="totalCount > 0">共搜索到{{ totalCount }}位相关医生</view>
        </view>
        <view :style="{ paddingTop: 'calc('+ height +'px + '+ (36 + (flag ? beforeHeight : 0) * 2) + 'rpx)' }"></view>

        <view v-if="totalCount > 0">
            <view class="img-text-dropdown-context">
                <view v-for="(item, index) in docList" :key="index">
                    <doctorInfo :doctorInfo="item" path="../../pages/doctorInfo/doctorInfo" />
                </view>
            </view>
        </view>

        <view class="newh-card newh-card-loc" v-if="totalCount <= 0 && noSearch">
            <view class="newh-card-head border-bottom-after">
                <view class="newh-card-head-left">
                    <text>按科室 找医生</text>
                </view>
                <view class="newh-card-head-right" :data-page="1111" @tap.stop="turnMoreLoc">
                    全部科室
                    <uni-icons type="right" size="36rpx" />
                </view>
            </view>
            <view class="newh-card-content">
                <view class="newh-card-content-grid">
                    <view class="newh-card-content-grid-item" v-for="(item, index) in locList" :key="index"
                        @tap.stop="locTurnMoreDoctor" :data-loc="item.locID" :data-locdesc="item.locDesc">
                        <view class="loc-img" :data-key="key" :style="{ backgroundColor: randomColorArr[index] }">{{
                            item.imgDesc }}</view>
                        <view class="newh-card-content-grid-item-doc" style="text-align: center;">{{ item.locDesc }}</view>
                    </view>
                </view>
                <view class="loc-nodata" v-if="locList.length == 0">暂无数据</view>
            </view>
        </view>

        <view style="display: flex;align-items: center;justify-content: center;">
            <image v-if="totalCount == 0 && !noSearch" width="351rpx" height="293rpx"
                :src="imgHost + '/images/icon/no-search.png'" />
        </view>

        <view v-if="totalCount == 0 && !noSearch" style="text-align:center;margin-top:100rpx">
            <view class="tip-css">没有找到匹配的医生</view>
            <view><text style="color:#999">建议您修改关键词重新搜索</text></view>
        </view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import doctorInfo from '../components/doctorInfo/doctorInfo'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'doctorInfo': doctorInfo
    },
    data() {
        return {
            imgHost: httpConfig && httpConfig.imgHost,
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "搜索医生或科室"
            },
            // 自定义自己喜欢的颜色
            colorArr: ["#FA541C", "#1890FF", "#EB2F96", "#13C2C2"],
            // 存储随机颜色
            randomColorArr: [],
            descripts: "",
            docList: [],
            totalCount: -1,
            beforeSearch: [],
            flag: true,
            locList: [],
            beforeHeight: 0,
            focusFlag: true,
            noSearch: true
        }
    },
    onLoad: function (options) {
        this.setData({
            beforeSearch: this.$cache.get('beforeSearch')
        })
        if (options && options.locDesc) {
            this.setData({
                descripts: options.locDesc
            }, () => {
                this.getDoctorList()
            })
        } else {
            this.allLoc();
        }
        let self = this,
            labLen = 6,
            colorArr = self.colorArr,
            colorLen = colorArr.length,
            randomColorArr = [];
        //判断执行
        do {
            let random = colorArr[Math.floor(Math.random() * colorLen)];
            randomColorArr.push(random);
            labLen--;
        } while (labLen > 0)

        self.setData({
            randomColorArr: randomColorArr
        }, () => {
            console.log(this.randomColorArr)
        });

    },
    methods: {
        allLoc: Util.debounce(function () {
            let data = {
                params: [{
                    hospCode: this.$cache.get('userData').hisHospID,
                }]
            }
            $http.post("urlS", this, {
                code: "03100114",
                data: data,
                namespace: "Y",
                success: function (res) {
                    if (+res.errorCode === 0) {
                        for (var i = 0; i < res.result.data.length; i++) {
                            res.result.data[i].imgDesc = res.result.data[i].locDesc.slice(0, 1)
                        }
                        this.setData({
                            locList: res.result.data.slice(0, 6)
                        });
                    } else {
                        this.setData({
                            locList: []
                        });
                    }
                }
            });
        }),

        turnMoreLoc: Util.debounce(function (event) {
            uni.navigateTo({
                url: "../allLoc/allLoc",
            })
        }),

        locTurnMoreDoctor: Util.debounce(function (event) {
            // let locID = event.currentTarget.dataset["loc"]
            let locDesc = event.currentTarget.dataset["locdesc"]
            // uni.navigateTo({
            //   url: "../moreDoctor/moreDoctor?locID=" + locID + "&locDesc=" + locDesc,
            // })
            this.setData({
                descripts: locDesc
            }, () => {
                this.getDoctorList()
            })

        }),

        ///搜索框内容变更事件
        onChange(e) {
            console.log(e)
            this.setData({
                descripts: e.detail
            }, () => {
                if (!e.detail || e.detail == '') {
                    this.setData({
                        noSearch: true
                    })
                }
                // if((e.detail!='' || e.detail) && this.inputFlag==false){
                //   this.setData({
                //     noSearch:false
                //   })
                // }
            });
        },

        ///搜索事件
        onSearch() {
            this.getDoctorList();
        },

        ///搜索按钮事件
        onClick() {
            this.getDoctorList();
        },

        onFocus() {
            this.setData({
                focusFlag: true,
                flag: true
            }, () => {
                //创建节点选择器
                var query = uni.createSelectorQuery();
                //选择id
                query.select('#mjltest').boundingClientRect()
                query.exec((res) => {
                    //res就是 所有标签为mjltest的元素的信息 的数组
                    console.log(12, res);
                    //取高度
                    if (res[0] == null) {
                        var height = 0
                    } else {
                        var height = res[0].height
                    }
                    this.setData({
                        beforeHeight: height
                    })
                })
            })
        },

        clearBeforeSearch: function () {
            this.$cache.set('beforeSearch', [])
            this.setData({
                beforeSearch: []
            })
        },

        showSearch(e) {
            let descript = e.currentTarget.dataset.index
            this.setData({
                descripts: descript,
                //flag:true
            }, () => {
                this.onSearch()
            })
        },

        ///调接口获取医生列表
        getDoctorList: function () {
            let userData = this.$cache.get('userData');
            var beforeSearch = this.$cache.get('beforeSearch');
            var descripts = [this.descripts]
            let data = {
                params: [{
                    hospCode: userData.hisHospID,
                    name: this.descripts
                }]
            }
            if (this.descripts.replace(/\s+/g, '') === '' || !this.descripts.replace(/\s+/g, '')) {
                uni.showToast({
                    title: '请输入搜索内容',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if (!beforeSearch || beforeSearch.length == 0) {
                this.$cache.set('beforeSearch', descripts)
                var beforeSearch = descripts
            } else {
                if (beforeSearch.length >= 10) {
                    beforeSearch.splice(10, 1)
                    beforeSearch = descripts.concat(beforeSearch.filter(o => o != this.descripts));
                    this.$cache.set('beforeSearch', beforeSearch)
                } else {

                    beforeSearch = descripts.concat(beforeSearch.filter(o => o != this.descripts));

                    this.$cache.set('beforeSearch', beforeSearch)
                }
            }
            uni.showLoading({
                mask: true
            })
            $http.post("urlS", this, {
                namespace: "Y",
                code: "03100043",
                data: data,
                success: function (res) {
                    uni.hideLoading();
                    if (+res.errorCode === 0) {
                        if (res.result.length > 0) {
                            this.setData({
                                docList: res.result,
                                totalCount: res.docNum,
                                beforeSearch: beforeSearch,
                                flag: false
                            });
                        } else {
                            this.setData({
                                docList: res.result,
                                totalCount: res.docNum,
                                beforeSearch: beforeSearch,
                                noSearch: false
                                //flag: false
                            });
                        }

                    } else {
                        this.setData({
                            docList: []
                        });
                    }
                }
            });
        },

        ///查看医生主页
        doctorDetail: function (e) {
            app.globalData.docObj = e.currentTarget.dataset.docobj;
            uni.navigateTo({
                url: '../../pages/doctorInfo/doctorInfo',
            })
        },
    }
}
</script>

<style>
.search-tip {
    font-size: 26rpx;
    padding: 6rpx 30rpx;
    background-color: white;

}

.img-text-dropdown-context {
    padding-top: 10rpx;
    box-sizing: border-box;
}

.itdc-head {
    font-size: 26rpx;
    width: 100%;
    height: 100%;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    margin-bottom: 20rpx;
}

.itdc-head .itdc-head-portrait {
    width: 120rpx;
    height: 120rpx;
}

.itdc-head-title {
    margin-left: 12rpx;
}

.itdc-text {
    margin-bottom: 26rpx;
}

.itdc-introduct {
    padding: 0 30rpx 30rpx 0;
}

.font-css-gray {
    color: gray;
}

.font-css-orange {
    color: orange;
}

.tip-css {
    font-size: 36rpx;
    font-weight: 550;
    padding-bottom: 14rpx;
}

.clear-button {
    float: right;
    background-color: #f5f4f4 !important;
    border: 0 !important;
}

.before-search {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
}

.before {
    padding: 20rpx 30rpx 20rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.before-show {
    font-size: 32rpx;
    font-family: PingFang SC;
    color: #666666;
    margin-right: 20rpx;
    padding: 5rpx 10rpx 5rpx 10rpx;
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 10rpx;
    background: rgba(204, 204, 204, 0.2);
    border-radius: 32rpx;
}

.newh-card-content {
    min-height: 160rpx;
}

.newh-card-content-grid {
    width: 100%;
    padding: 24rpx;
    padding-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.newh-card-content-grid-item {
    width: 33.33333333333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
}

.loc-img {
    display: inline-block;
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    line-height: 80rpx;
    text-align: center;
    color: white;
    font-size: 48rpx;

}

.newh-card-content-grid-item-doc {
    font-weight: 700;
    margin: 12rpx 0 16rpx 0;
}

.newh-card-content-grid-item-doc text,
.newh-card-content-grid-item-loc {
    font-weight: normal;
    font-size: 28rpx;
    color: #666;
}

.newh-card-content-grid-item-doc text {
    color: #1890FF;
    padding: 4rpx 8rpx;
    font-weight: bold;
    border: 1PX solid #1890FF;
    border-radius: 4rpx;
    font-size: 24rpx;
}

.loc-nodata {
    width: 100%;
    height: 160rpx;
    text-align: center;
    line-height: 160rpx;
    color: #ccc;
}

.newh-card-head {
    justify-content: space-between;
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
}

.newh-card-head-left {
    float: left;
    font-weight: 700;
    font-size: 32rpx;
    color: #333;
    display: flex;
    align-items: center;
}

.newh-card-head-left text {
    font-weight: normal;
    font-size: 28rpx;
    color: #999;
    margin-left: 19rpx;
}

.newh-card {
    background: #fff;
}

.newh-card-loc {
    margin: 20rpx;
    border-radius: 5%;
    margin-top: 200rpx;
}

.newh-card-head-right {
    color: #999;
    float: right;
    display: flex;
    font-size: 28rpx;
    align-items: center;
}

.newh-card-head-right .iconfont {
    font-size: 24rpx;
}

.clear-icon {
    float: right;
}
</style>