<template>
    <view style="height: 100%">
        <custom-nav-bar left-text="家庭医生进网格" left-arrow />

        <image class="doctor-header" src=""></image>

        <view class="people-section">
            <view class="second-block" v-for="(item, index) in 2" :key="index">
                <view class="menu flex flex-v-center flex-between" v-if="index === 0">
                    <view class="menu-item" v-for="(itemName, idx) in 5" :key="idx">
                        <navigator
                            class="line-navigator"
                            :url="
                                idx === 0
                                    ? '/packages/people/pages/doctor-archives/doctor-archives'
                                    : idx === 1
                                    ? '/packages/public/pages/service-record/service-record'
                                    : idx === 2
                                    ? '/packages/people/pages/doctor-my/doctor-my'
                                    : ''
                            "
                            hover-class="none"
                        ></navigator>

                        <image class="menu-item-ic-img" src=""></image>

                        <text class="menu-item-name">{{ '测试' + idx }}</text>
                    </view>
                </view>

                <view class="second-model flex flex-v-center flex-between" v-else>
                    <view :class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')" v-for="(itemName, idx) in 3" :key="idx">
                        <navigator
                            class="line-navigator"
                            :url="idx === 0 ? '/packages/people/pages/apply-doctor/apply-doctor' : idx === 1 ? '/packages/public/pages/service-record/service-record' : ''"
                            hover-class="none"
                        ></navigator>

                        <image class="line-bg" src=""></image>

                        <view class="line-title">{{ '测试2' }}</view>

                        <view v-if="itemName.remark" class="line-msg">{{ '我是测试描述' }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="second-tabs">
            <van-tabs id="doctorTabs" @change="onTabsChange($event, { tagId: 'doctorTabs' })">
                <van-tab :title="it" v-for="(key, index) in 2" :key="index"></van-tab>
            </van-tabs>
        </view>

        <view class="second-section">
            <view class="section-item flex flex-between" :data-item="item" @tap="headleDetails" v-for="(item, index) in 4" :key="index">
                <view class="section-item-left flex1 flex flex-between flex-col">
                    <view class="consult-content-title multi-line">{{ 'item.title' }}</view>
                    <view class="consult-content-block">
                        <text>{{ toods.getDateTime(item.createTime) }}</text>
                        <!-- <text class="ml-30">{{' item.publisher' }}</text> -->
                    </view>
                </view>

                <image class="section-item-right" :src="item.pics" mode="aspectFill"></image>
            </view>
        </view>

        <view @tap="jumpRelease" class="publish flex flex-center flex-col">
            <image class="icon-people" src="/static/packages/people/images/ic-Inquiries.png"></image>
            <text class="icon-text">问诊</text>
        </view>
    </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
export default {
    components: {
    },
    data() {
        return {
            nearFlag: '',
            it: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    methods: {
        onTabsChange(event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            this.setData({
                nearFlag: event.detail.name
            });
            this.hospitalPageApi();
        },

        headleDetails(event) {
            const { id } = event.currentTarget.dataset.item;
            // console.log(categoryId, id);
            uni.navigateTo({
                url: `/packages/public/pages/details/details?name=${this.recursionObj.name}详情&&referId=${id}`
            });
        },

        jumpRelease() {
            uni.navigateTo({
                url: '../inquiries-create/inquiries-create'
            });
        }
    }
};
</script>
<style lang="less">
.doctor-header {
    width: 100%;
    height: 330rpx;
}

.line-navigator {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
}

.second-block {
    &:nth-child(1) {
        margin-top: 50rpx;
    }
    &:nth-child(2) {
        margin-top: 60rpx;
    }

    .second-model {
        margin-top: 40rpx;
        flex-wrap: wrap;

        .second-line {
            width: 343rpx;
            height: 110rpx;
            justify-content: center;
            padding-left: 39rpx;
            position: relative;

            &:not(:first-child) {
                margin-top: 16rpx;
            }

            .line-bg {
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
            }

            .line-title {
                font-size: 32rpx;
                font-weight: 300;
                line-height: 32rpx;
            }

            .line-msg {
                margin-top: 21rpx;
                font-size: 26rpx;
                font-weight: 300;
                color: #ffffff;
                line-height: 26rpx;
            }
        }

        .line1 {
            width: 100%;
            height: 171rpx;

            .line-title {
                font-size: 40rpx;
                font-weight: 300;
                line-height: 40rpx;
            }
        }
    }

    .menu {
        display: grid;
        grid-template-columns: repeat(4, 110rpx);
        grid-gap: 60rpx;
        justify-content: center;

        .menu-item {
            width: 112rpx;
            text-align: center;
            // margin-top: 50rpx;
            // margin-right: 72rpx;
            position: relative;

            // &:nth-child(4n) {
            //   margin-right: 0;
            // }

            .menu-item-ic-img {
                margin-bottom: 16rpx;
                width: 100rpx;
                height: 100rpx;
            }

            .menu-item-name {
                font-size: 28rpx;
                font-weight: 500;
                color: #333333;
                line-height: 28rpx;
            }
        }
    }
}

.second-tabs {
    padding: 22rpx 0 50rpx;

    .van-tabs__wrap::before {
        content: '';
        position: absolute;
        z-index: 0;
        // top: 84rpx;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #e1e1e1;
    }
}

.second-section {
    padding: 0 40rpx 0;
}
.section-item {
    padding: 24rpx 0;
    border-bottom: 1px solid #e1e1e1;

    &:first-child {
        padding-top: 0;
    }

    .section-item-left {
        margin-right: 50rpx;

        .consult-content-title {
            font-size: 32rpx;
            font-weight: 400;
            color: #333333;
        }

        .consult-content-block {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
        }
    }

    .section-item-right {
        width: 200rpx;
        height: 150rpx;
        border-radius: 8rpx;
    }
}

.publish {
    background-color: #0090fc;
    position: fixed;
    bottom: 40rpx;
    right: 40rpx;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    z-index: 10;

    .icon-people {
        width: 64rpx;
        height: 64rpx;
    }

    .icon-text {
        margin-top: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 32rpx;
    }
}
</style>
