<template>
    <div class="h-full flex flex-col workbench">
        <DocNavBar title="慢病管理" class="shrink-0" home>
            <template #right>
                <doc-icon type="doc-config" style="color: #262626" class="mr-3 text-16"
                    @click="toConfig"/>
                <doc-icon type="doc-search" style="color: #262626"  class="text-16"
                    @click="toSearch"/>
            </template>
        </DocNavBar>
        <div class="grow flex flex-col" style="min-height: 0;position: relative;" ref="list">
            <div class="shrink-0 workbench-tab">
                <div class="back"></div>
                <div class="flex workbench-tab-inner" ref="tab-inner">
                    <div v-for="(item, index) in configTab" :key="item.key" @click="tabSelect(item, index)"
                        :class="['item', { 'item-active': item.key == tabActive.key }]">{{item.name}}</div>
                </div>
            </div>
            <div class="grow" style="background: #F8FAFC;min-height: 0;">
                <component :is="tabActive.component"
                    :ref="tabActive.key"
                    :searchType="configRange"/>
                <van-popup v-model:show="configVisible" position="top" :style="{ height: '20%' }"
                    style="position: absolute;transition: none"
                    :overlay-style="{ position: 'absolute' }"
                    transition="viewer-fade"
                    :teleport="(() => $refs.list)()">
                    <div class="h-full flex flex-col workbench-search-box">
                        <div class="px-4 py-3 grow">
                            <div class="mb-3">查询范围</div>
                            <van-radio-group v-model="configValue.range" direction="horizontal">
                                <van-radio :name="1">本科室</van-radio>
                                <van-radio :name="2">本人</van-radio>
                            </van-radio-group>
                        </div>
                        <div class="text-16 flex shrink-0 text-center bt-group">
                            <div class="grow py-3 submit-btn" @click="saveConfig">确定</div>
                        </div>
                    </div>
                </van-popup>
            </div>
        </div>
    </div>
</template>

<script>
import { getUserConfig, addUserConfig, updateUserConfig } from '@/api/doctor/resident.js'
import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
import TableWork from './tables/Work.vue'
import TableVisit from './tables/Visit.vue'
import TableReceive from './tables/Receive.vue'
import TableFirstScreen from './tables/FirstScreen.vue'
import TableHighRisk from './tables/HighRisk.vue'

export default {
    name: 'Workbench',
    components: {
        DocNavBar,
        TableWork,
        TableVisit,
        TableReceive,
        TableFirstScreen,
        TableHighRisk
    },
    data() {
        return {
            configTab: [
                { key: 'work', component: 'TableWork', name: '工作记录' },
                { key: 'visit', component: 'TableVisit', name: '慢病待随访' },
                { key: 'receive', component: 'TableReceive', name: '待接诊居民' },
                // { key: 'screenRecord', component: 'TableScreenRecord', name: '当年待筛查记录' }, 
                { key: 'firstScreen', component: 'TableFirstScreen', name: '初筛高危待筛查' },
                { key: 'highRisk', component: 'TableHighRisk', name: '高危待诊断' }
            ],
            tabActive:{},
            configName: '慢病APP个性化配置',
            configVisible: false,
            // 工作台查询范围 1:本科室 2:本人
            configRange: 1,
            configValue: { range: 1 },
            configOption: null
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.tabActive = this.configTab[0]
            // 加载配置
            getUserConfig().then(res => {
                const result = res.data || {}
                const config = result.find(e => e.configName === this.configName)
                this.configOption = config
                if (config) {
                    this.configValue = JSON.parse(config.configValue)
                    this.configRange = this.configValue.range
                }
            })
        },
        toSearch() {
            this.$router.push({
                path: '/doctor/search'
            })
        },
        toConfig() {
            this.configVisible = true
        },
        saveConfig() {
            const func = this.configOption ? updateUserConfig : addUserConfig
            const configValue = this.configValue
            let query = [{
                configName: this.configName,
                configValue: JSON.stringify(configValue),
                id: this.configOption?.id
            }]
            func(query).then(res => {
                this.configVisible = false
                this.configRange = configValue.range
            })
        },
        tabSelect(item, index) {
            this.tabActive = item
            const dom = this.$refs['tab-inner']
            if (!dom) return
            // console.log(dom.children[index].offsetLeft, dom.scrollLeft, dom.clientWidth, dom.scrollWidth, scrollNum)
            // dom.children[index].scrollIntoView({ behavior: 'smooth', inline: 'start' })
            const scrollNum = dom.children[index].offsetLeft - (dom.clientWidth - dom.children[index].clientWidth) / 2
            dom.scrollTo({ left: scrollNum > 0 ? scrollNum : 0, behavior: 'smooth' })
        }
    }
}
</script>

<style lang="less" scoped>
.workbench {
    background: linear-gradient(to bottom, #C6DBF9, #EFF2F7);
}
.workbench-tab {
    color: #4D5665;
    background: #C6DBF9;
    padding-top: 10px;
    position: relative;
    .workbench-tab-inner {
        align-items: flex-end;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .back {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 42px;
        background-color: #E7F1FF;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    .item {
        flex: 1 0 auto;
        position: relative;
        padding: 0 16px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        &:first-child {
            border-top-left-radius: 12px;
        }
        &:last-child {
            border-top-right-radius: 12px;
        }
    }
    .item-active:first-child {
        border-top-left-radius: 12px;
        &::before {
            display: none;
        }
    }
    .item-active:last-child {
        border-top-right-radius: 12px;
        &::after {
            display: none;
        }
    }
    .item-active {
        background-color: #F8FAFC;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        font-size: 16px;
        height: 46px;
        line-height: 46px;
        font-weight: 600;
        &::after {
            content: '';
            display: inline-block;
            position: absolute;
            right: -26px;
            bottom: 0;
            background: url('@/assets/image/doctor/tab-bg.png') no-repeat;
            background-size: auto 100%;
            background-position-x: -20px;
            height: 100%;
            width: 34px;
            z-index: 1;
        }
        &::before {
            content: '';
            display: inline-block;
            position: absolute;
            left: -26px;
            bottom: 0;
            background: url('@/assets/image/doctor/tab-bg.png') no-repeat;
            background-size: auto 100%;
            background-position-x: -20px;
            height: 100%;
            width: 34px;
            z-index: 1;
            transform: rotateY(180deg);
        }
    }
}
:deep(.workbench-search-box) {
    color: #595959;
    .bt-group {
        border-top: 1px solid #EBEBEC;
        color: #262626;
        .submit-btn {
            color: #fff;
            background-color: var(--van-primary-color);
        }
    }
}
</style>