clientManageSystem/src/views/myCustomer/myCustomerDetail/customerStatusOverview/index.vue

<template>
    <div class="message_overview">
        <!-- 左侧：产品概览与最新状态 -->
        <div class="left_panel ">
            <div class="product_summary">
                <div class="summary_title">跟进产品总数 {{ followUpProductSummary.total }}</div>
                <div class="summary_tags">
                    <span v-for="(item,index) in followUpProductSummary.differentStatusNum" :key="index"> {{item.statusName}} {{item.count}}</span>
                </div>
            </div>
            
            <div class="product_list hide_scrollbar" v-if="productsFollowStatistic?.length > 0">
                <template v-for="(item,index) in productsFollowStatistic" :key="item.productId" >
                    <div class="list_item">
                        <div class="item_title">{{item.productName}}</div>
                        <div class="item_info">跟进状态：{{item.followName}}</div>
                        <div class="item_info">联系人：{{item.customerPersonName}}</div>
                        <div class="item_info">跟进次数：{{item.count}}</div>
                        <div class="item_info">上次跟进时间：{{item.lastFollowTime}}</div>
                    </div>
                    <div v-if="index !== (productsFollowStatistic?.length - 1)" class="page_solid_line" />
                </template>
            </div>
        </div>

        <!-- 中间：搜索与 我的跟进 -->
        <div class="center_panel">
            <div class="page_content hide_scrollbar " ref="scrollDom"> 
                <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '176px',flexShrink:'0'}"></div>
                <div class="search_page" ref="headerDom">
                    <!-- 滚动头部筛选展示 -->
                    <DetailSelectSearch v-if="scrollMsg.isScrollTop"  @searchChange="HandleSearchChange" ></DetailSelectSearch>
                    <!-- 正常筛选展示 -->
                    <DetailBlockSearch  v-else @searchChange="HandleSearchChange"></DetailBlockSearch>
                </div>
                
                <FollowCard v-if="finalRenderData?.length > 0" :cardList="finalRenderData">
                    <template #operation="{row}">
                        <div style="" class="table_row_option">
                            <!-- 没有取消的待办，显示取消按钮 -->
                            <span v-if="row.orderType === 0 && [0,1].includes(row.orderStatus)"  class="button_delete" @click="OpenCancelAppointmentDialog(row)">取消预约</span>
                            <span class="option_button_editor" @click="OpenFollowlFormDialog(row,'currentFollowRecord')">详情</span>
                        </div>
                    </template>
                </FollowCard>
                <div v-else class="no_data_bg">
                    <span>暂无数据</span>
                </div>
            </div>

            <Pagination  :currentPage="currentPage" 
                :showPageSize="true"
                :pageSize="pageSize" :totalNum="totalNum"  
                @paginationChange="HandlePaginationChange">
                <template #paginationDesc>
                    共 {{ totalNum }} 条数据
                </template>
            </Pagination>
        </div>

        <!-- 右侧：待办与统计 -->
        <div class="right_panel">
            <div class="pending_appointments">
                <div class="panel_header">{{'预约待办 ('+ pendingAppointmentList?.length +'项)'}}</div>
                <ul class="task_list hide_scrollbar">
                    <template v-if="pendingAppointmentList?.length > 0">
                        <li  v-for="cardItm in pendingAppointmentList" :key="cardItm.id" class="todo_card">
                            <div class="card_top">
                                <span class="time">{{cardItm.createdAt}}</span>
                                <span class="title one_line_ellipsis">{{cardItm.productName}}</span>
                                <div class="table_row_option">
                                    <span class="button_editor"@click="OpenFollowlFormDialog(cardItm,'pendingAppointment')">详情</span>
                                </div>
                            </div>
                            <div class="card_tags">
                                <span v-if="[0,1].includes(cardItm.orderType)" class="task_type">{{cardItm.orderType ===0 ? '预约' : '待办' }}</span>
                                <span class="follow_status">{{cardItm.followName}}</span>
                            </div>
                            <div class="card_info">
                                <span>跟进人：{{ cardItm.claimUserName }}</span>
                                <span>联系人：{{ cardItm.customerPersonName }}</span>
                                <span>职务：{{ cardItm.positionName }}</span>
                            </div>
                            <div :title="cardItm.followContent" class="card_content two_line_ellipsis">
                                跟进内容：{{cardItm.followContent}}
                            </div>
                        </li>
                    </template>
                    <template v-else>
                        <li class="no_data">
                            <div class="no_data_bg">
                                <span>暂无数据</span>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>

            <!-- 之前归属人的跟进记录 -->
            <!-- 历史跟进的状态是否展示 要判断是否给当前用户开放历史跟进权限 -->
            <div v-if="historyFollowData" class="history_statistics">
                <div class="stat_header">
                    <span>历史跟进</span>
                    <el-button class="button_border" @click="OpenHistoryFollowDialog">历史跟进</el-button>
                </div>
                <div class="stat_numbers">
                    <div class="num_item">
                        <div class="num">{{historyFollowData.historyProductCount}}</div>
                        <div class="label">历史产品</div>
                    </div>
                    <div class="vertical_solid"></div>
                    <div class="num_item">
                        <div class="num">{{historyFollowData.historyPersonCount}}</div>
                        <div class="label">历史人员</div>
                    </div>
                    <div class="vertical_solid"></div>

                    <div class="num_item">
                        <div class="num">{{historyFollowData.historyFollowCount}}</div>
                        <div class="label">跟进次数</div>
                    </div>
                    <div class="vertical_solid"></div>

                    <div class="num_item">
                        <div class="num">{{historyFollowData.successCount}}</div>
                        <div class="label">赢单次数</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看跟进详情 -->
    <FollowFormDialog 
        v-if="followVisible"
        title="查看详情"
        :previewForm="true"
        v-model:visible="followVisible" 
        v-model:submitLoading="followDetailLoading"
        :defaultFormData="followDefaultFormData"
        @confirm="HandleFollowDetailConfirm"
        @close="CloseFollowlFormDialog"
    >
    </FollowFormDialog>

    <!-- 查看历史跟进 -->
    <PreviewDialog 
        v-if="historyFollowVisible"
        :title="'历史跟进'"
        :previewVisible="historyFollowVisible"
        :customFooter="true"
        @close="CloseHistoryFollowDialog">
        <SearchBlock :searchList="historyFollowSearchList" @searchChange="HandleSearchHistoryFollow"></SearchBlock>
        <FollowCard style="margin-top: 16px;" :cardList="historyFollowRecord">
            <template #operation>
                <i></i>
            </template>
        </FollowCard>
        <Pagination :currentPage="historyCurrentPage" 
            :showPageSize="true"
            :pageSize="historyPageSize" :totalNum="historyTotalNum" 
            @paginationChange="HandleHistoryPageChange">
            <template #paginationDesc>
                共 {{ historyTotalNum }} 条数据
            </template>
        </Pagination>
        <template #close>
            <el-button @click="CloseHistoryFollowDialog" class="button_background" >关闭</el-button>
        </template>
        <template #confirm><i></i></template>
     </PreviewDialog>

    <!-- 取消预约弹窗 -->
    <CancelAppointmentDialog
        interfaceSoruce="myCustomer" 
        v-model:visible="cancelVisible" 
        :defaultFormData="cancelDefaultFormData"
        @confirm="HandleCancelAppointmentConfirm">
    </CancelAppointmentDialog>

</template>

<script setup lang="ts">
import { ref, onMounted,watch } from 'vue';
import {useRoute} from 'vue-router'
import { ElMessage } from 'element-plus'

import DetailBlockSearch from '@/components/MyCustomerHeaderSearch/DetailBlockSearch/index.vue'
import {ongoingFollowSearchList} from '@/components/MyCustomerHeaderSearch/DetailBlockSearch/searchBlock'
import {searchParams} from '@/components/MyCustomerHeaderSearch/commonVar'

import DetailSelectSearch from '@/components/MyCustomerHeaderSearch/DetailSelectSearch/index.vue'
import {myFollowSearchSelectList} from '@/components/MyCustomerHeaderSearch/DetailSelectSearch/formSearchGroup'

import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'


import SearchBlock from '@/baseComponents/SearchBlock.vue';
import { historyFollowSearchList } from './searchBlock';
import FollowCard from '@/components/FollowCard.vue';
import Pagination from '@/baseComponents/Pagination.vue';
import FollowFormDialog from '@/components/FollowFormDialog/index.vue'
import PreviewDialog from '@/baseComponents/PreviewDialog.vue';
import CancelAppointmentDialog from '@/components/CancelAppointmentDialog/index.vue'

import {getOverviewDetailApi,getHistoryFollowListApi} from '@/api/myCustomer'
import {closeToDoTaskApi} from '@/api/appointmentAndTodo'

import {winnerCaseStatusMsg} from '@/components/dict'

import {
    getTodayRange,
    getYesterdayRange,
    getRecentDaysRange,
    getRecentWeeksRange,
    getRecentMonthsRange,
    formatTime
} from '@/utils/timeRangeGet'



interface ProductFollowRecord {
  productId: string;  // 产品ID
  productName: string; // 产品名称
  count?: number; // 数量
  followName: string; // 跟进名称
  customerPersonName: string; // 客户人员名称
  lastFollowTime: string | number; // 最后跟进时间
}


interface pendingAppointmentItm {
    id:string,
    createdAt:string,
    productName:string,
    orderType:number,
    followName:string,
    claimUserName:string,
    customerPersonName:string,
    positionName:string,
    followContent:string,
}

const props = defineProps({
    followReloadFlag:{
        type:Number,
    }
})
const route = useRoute()

const scrollDom = ref()
const headerDom = ref()

const scrollMsg  = useHeaderFixed(scrollDom,headerDom,176)  //搜索栏是否需要在滚动的时候固定到顶部

/**
 * 1. 左侧数据展示
 */
// 左侧——跟进产品总览
const followUpProductSummary = ref({
    total:0,
    differentStatusNum:[ ]
}) 
//左侧——跟进产品——统计分析
const productsFollowStatistic = ref<ProductFollowRecord[]>([]);  

/**
 * 中间数展示
 */

// 中间——当前客户跟进记录列表展示 及有关筛选操作
const finalRenderData = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const totalNum = ref(0)
const HandlePaginationChange = async (params)=>{
    const {type,val} = params
    if(type == 'currentPage'){
        currentPage.value = val
    }else if(type == 'pageSize'){
        pageSize.value = val
    }
    await GetOverviewDetail()
}
// 查看总览数据
const GetOverviewDetail = async ()=>{
    let rangeTime = {
        startTime: '',
        endTime: ''
    }
    switch(searchParams.value.time){
        case 'today':
            rangeTime = getTodayRange()
            break
        case 'yesterday':
            rangeTime = getYesterdayRange()
            break
        case 'last3days':
            rangeTime = getRecentDaysRange(3)
            break
        case 'last1week':
            rangeTime = getRecentWeeksRange(1)
            break
        case 'last1month':
            rangeTime = getRecentMonthsRange(1)
            break
        case 'custom':
            rangeTime = {
                startTime:formatTime(searchParams.value.startAndEndTime?.[0]) ,
                endTime: formatTime(searchParams.value.startAndEndTime?.[1]),
            }
            break
    }
    let params = {
        startDatetime: rangeTime.startTime,
        endDatetime: rangeTime.endTime,
        customerId: route.query.id,
        positionId: searchParams.value.position == 'all' ? '' : searchParams.value.position,
        productId: searchParams.value.product == 'all' ? '' : searchParams.value.product,
        followId: searchParams.value.followStatus == 'all' ? '' : searchParams.value.followStatus,
        // userId: '',
        pageNum: currentPage.value,
        pageSize: pageSize.value,
    }
    let res = await getOverviewDetailApi(params)
    if(res.code == 200){
        const {selectData,dataPageList,productCount,
            productData,statusOverviewData,
            followOverViewData,orderData
        } = res.data

        // 跟进产品总览 ——左
        followUpProductSummary.value = {
            total:productCount,
            differentStatusNum:statusOverviewData || []
        }
        // 跟进产品-各自分析 ——左
        productsFollowStatistic.value = productData || []
        // 历史跟进统计 —— 右
        historyFollowData.value = followOverViewData
        //预约待办展示 —— 右
        pendingAppointmentList.value = orderData || []
        // 中间 正在进行中的跟进记录 —— 中
        totalNum.value = dataPageList.total
        finalRenderData.value = dataPageList?.records?.map(item=>{
            let headerTags = []
            if(item.followName){
                headerTags.push(item.followName)
            }

            let statusTag = []
            //  auditStatus 审核状态：0-待审核，1-已通过，2-已驳回   successStatus 是否是赢单 0否 1是
            if([0,1,2].includes(item.auditStatus) && item.successStatus === 1){
                statusTag.push(winnerCaseStatusMsg(item.auditStatus))
            }
            return {
                headerTitleList:[
                    item.claimDatetime,
                    item.customerName,
                    item.productName
                ],
                headerTags,
                statusTag,
                middleDesc:[
                    `跟进人：${item.claimUserName}`,
                    `联系人：${item.customerPersonName}`,
                    `职务：${item.positionName}`
                ],
                // orderStatus 预约/待办状态，0-待开始，1-已结束，2-已取消(预约) null-已关闭(待办)
                taskType:[0,1].includes(item.orderType) && [0,1].includes(item.orderStatus) ? (item.orderType === 0 ? '预约' : '待办') : '',
                bottomDesc:`跟进内容：${item.followContent}`,
                ...item,
            }
        }) || []
        const {
            followData,
            positionData,
            productData:productList
        } = selectData || {}

        let productOption = productList?.map(item=>{
            return {
                label:item.name,
                value:item.id
            }
        })
        let followStatusOption = followData.map(item=>{
            return {
                label:item.name,
                value:item.id
            }
        })
        let positionOption = positionData.map(item=>{
            return {
                label:item.name,
                value:item.id
            }
        })
        // 头部筛选项赋值
        ongoingFollowSearchList.value = ongoingFollowSearchList.value.map(item=>{
            switch(item.key){
                case 'product':
                    item.options = [
                      { label: '全部', value: 'all' },
                      ...productOption,
                    ]
                    item.defaultValue = searchParams.value.product
                    break
                case 'followStatus':
                    item.options = [
                      { label: '全部', value: 'all' },
                      ...followStatusOption,
                    ]
                    item.defaultValue = searchParams.value.followStatus
                    break
                 case 'position':
                    item.options = [
                      { label: '全部', value: 'all' },
                      ...positionOption
                    ]
                    item.defaultValue = searchParams.value.position
                    break
                default:
                    item.defaultValue = searchParams.value[item.key]
                    break
            }
            return item
        })

        myFollowSearchSelectList.value = myFollowSearchSelectList.value.map(item=>{
            switch(item.key){
                case 'product':
                    item.options = [
                      { label: '全部产品', value: 'all' },
                      ...productOption,
                    ]
                    item.defaultValue = searchParams.value.product
                    break
                case 'followStatus':
                    item.options = [
                      { label: '全部状态', value: 'all' },
                      ...followStatusOption,
                    ]
                    item.defaultValue = searchParams.value.followStatus
                    break
                 case 'position':
                    item.options = [
                      { label: '全部职务', value: 'all' },
                      ...positionOption
                    ]
                    item.defaultValue = searchParams.value.position
                    break
                default:
                    item.defaultValue = searchParams.value[item.key]
                    break
            }
            return item
        })
    }
}

const HandleSearchChange = async (params,key)=>{
    searchParams.value = {
        ...searchParams.value,
        ...params
    }
    if(key == 'time' && params.time !== 'custom' ){
        searchParams.value.startAndEndTime = []
    }
    await GetOverviewDetail()
}

/**
 * 3. 右侧数据展示
 */
// 右侧 —— 预约待办数据
const pendingAppointmentList = ref<pendingAppointmentItm[]>([]) 

// 右侧—— 历史跟进 数据总览
interface  historyFollowData {
    historyProductCount:number,
    historyPersonCount:number,
    historyFollowCount:number,
    successCount:number,
}
const historyFollowData = ref<historyFollowData>()


/**
 * 4. 预约待办/客户 跟进弹窗详情（查看）有关数据及操作 
 */
const followVisible = ref(false)
const followDefaultFormData = ref({})
const currentFollowRow = ref({})  //当前查看的跟进数据
const followDetailLoading = ref(false)
const OpenFollowlFormDialog = (row,type)=>{
    currentFollowRow.value = row
    console.log('当前行信息',row)
    followVisible.value = true
    followDefaultFormData.value = {
        id:row.id,
        school:row.customerName,
        product:row.productName,
        status:row.followName,
        contact:row.customerPersonName,
        position:row.positionName,
        content:row.followContent,
        appointmentTime:row.orderDatetime,
        todoTime:row.orderDatetime,
        appointmentType:[0,1].includes(row.orderType) && [0,1].includes(row.orderStatus),  // extraAppointmentType 有值(为待办1)的前提下，—— 当前值为false 表示 待办已手动关闭
        extraAppointmentType:row.orderType,  //查看时候—— 附加的项
    }
}

const CloseFollowlFormDialog = ()=>{
    followVisible.value = false
    followDefaultFormData.value = {}
    followDetailLoading.value = false
}

const HandleFollowDetailConfirm = async (params)=>{
    const {formData} = params
    if([1].includes(currentFollowRow.value.orderType)){
        // 待办
        //  orderStatus 0 待开始 1 已结束  null 已关闭 
        // 如果是为关闭的待办 变成了关闭状态，调用关闭待办接口
        if([0,1].includes(currentFollowRow.value.orderStatus) &&  !(formData.appointmentType)){
            followDetailLoading.value = true
            // 关闭待办
            let res = undefined
            try{
                res = await closeToDoTaskApi(formData.id)
            }catch{}
            if(res?.code == 200){
                ElMessage.success('关闭成功')
                CloseFollowlFormDialog()
                // 刷新预约待办数据
                await GetOverviewDetail()
            }else{
                followDetailLoading.value = false
            }
        }else{
            CloseFollowlFormDialog()
        }
    }else{
        CloseFollowlFormDialog()
    }
}

/**
 * 5. 取消预约有关操作
 */
const cancelVisible = ref(false)
const cancelDefaultFormData = ref({})
const OpenCancelAppointmentDialog = async (row)=>{
    cancelVisible.value = true
    cancelDefaultFormData.value = {
        id:row.id,
        customerName:row.customerName,
        appointmentTime:row.claimDatetime,
        cancelReason:''
    } 
}
// 取消预约确认
const HandleCancelAppointmentConfirm = async ()=>{
    await GetOverviewDetail()
    cancelDefaultFormData.value = {}
}


/** 6. 查看历史跟进 弹窗有关数据  */
const historyFollowVisible = ref(false)
const OpenHistoryFollowDialog = async (row)=>{
    historyFollowVisible.value = true
    await GetHistoryFollowList()
}
const CloseHistoryFollowDialog = ()=>{
    historyFollowVisible.value = false
}
// 历史跟进记录 列表信息
const historyFollowRecord = ref([])
// 分页参数
const historyCurrentPage = ref(1)
const historyPageSize = ref(20)
const historyTotalNum = ref(0)

const historySearchParams = ref({
    product:'all',
    followStatus:'all',
    personnel:'all',
})

// 历史跟进记录 分页参数变更
const HandleHistoryPageChange = async (params)=>{
    const {type,val} = params
    if(type == 'currentPage'){
        historyCurrentPage.value = val
    }else if(type == 'pageSize'){
        historyPageSize.value = val
    }
    await GetHistoryFollowList()
}

// 历史跟进记录 筛选条件变更
const HandleSearchHistoryFollow = async (params,key)=>{
    historySearchParams.value = {
        ...historySearchParams.value,
        ...params
    }
    await GetHistoryFollowList()
}

// 获取历史跟进列表
const GetHistoryFollowList = async ()=>{
    let prams = {
        customerId: route.query.id,
        productId: historySearchParams.value.product == 'all' ? '' : historySearchParams.value.product,
        followId: historySearchParams.value.followStatus == 'all' ? '' : historySearchParams.value.followStatus,
        userId: historySearchParams.value.personnel == 'all' ? '' : historySearchParams.value.personnel,
        pageNum: historyCurrentPage.value,
        pageSize: historyPageSize.value
    }
    let res = await getHistoryFollowListApi(prams)
    if(res.code == 200){
        const {dataPageList, selectData} = res.data

        const {productData, memberData, followData} = selectData || {}

        historyFollowRecord.value = dataPageList.records?.map(item=>{
            let middleDesc = [
                `跟进人：${item.claimUserName}`,
                `联系人：${item.customerPersonName}`,
                `职务：${item.positionName}`
            ]
            if(item.orderType === 0) {
                middleDesc.push(`预约时间：${item.orderDatetime}`)
            }else if(item.orderType === 1){
                middleDesc.push(`待办时间：${item.orderDatetime}`)
            }
            return {
                headerTitleList:[item.claimDatetime,item.productName],
                headerTags:[item.followName],
                taskType:[0,1].includes(item.orderType) ? (item.orderType == 0 ? '预约' : '待办') : '',
                middleDesc,
                bottomDesc:`跟进内容：${item.followContent}`,
                ...item,
            }
        })
        historyTotalNum.value = dataPageList.total

        const followDataOption = followData?.map(item=>{
            return{
                label:item.name,
                value:item.id,
            }
        })
        const productDataOption = productData?.map(item=>{
            return{
                label:item.name,
                value:item.id,
            }
        })
        const memberDataOption = memberData?.map(item=>{
            return{
                label:item.username,
                value:item.id,
            }
        })
        historyFollowSearchList.value = historyFollowSearchList.value.map(item=>{
            if(item.key == 'product'){
                item.options = [
                    { label: '全部', value: 'all' },
                    ...productDataOption
                ]
            }else if(item.key == 'personnel'){
                item.options = [
                    { label: '全部', value: 'all' },
                    ...memberDataOption
                ]
            }else if(item.key == 'followStatus'){
                item.options = [
                    { label: '全部', value: 'all' },
                    ...followDataOption
                ]
            }
            item.defaultValue = historySearchParams.value[item.key]
            return item
        }) 
    }
}


watch(()=>props.followReloadFlag,async (newVal)=>{
    await GetOverviewDetail()
})
onMounted( async ()=>{
    await GetOverviewDetail()
})
</script>

<style lang="scss" scoped>
.message_overview {
    overflow: auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #fff;
    font-size: 14px;
    color: #333;

    > * {
        height: 100%;
        overflow: auto;
    }

    // 左侧栏样式
    .left_panel {
        width: 200px; // 稍微加宽以容纳内容
        display: flex;
        flex-direction: column;
        gap: 16px;

        .product_summary {
            padding:12px;
            background: #F8FAFE;
            border-radius: 10px;
            border: 1px solid #EBEEF5;
            color: #333333;

            .summary_title {
                font-weight: 600;
                font-size: 16px;
                margin-bottom: 12px;
                line-height: 22px;
            }

            .summary_tags {
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap:16px;
                font-size: 14px;
                line-height: 20px;
            }
        }

        .product_list {
            display: flex;
            flex-direction: column;
            gap: 16px;

            overflow: auto;
            padding:12px;
            background: #F8FAFE;
            border-radius: 10px;
            border: 1px solid #EBEEF5;

            .list_item {
                display: flex;
                flex-direction: column;
                gap:4px;
                .item_title {
                    line-height: 20px;
                    font-weight: 600;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 4px;
                }

                .item_info {
                    line-height: 17px;
                    font-weight: 400;
                    font-size: 12px;
                    color: #666666;
                }
            }
        }
    }

    // 中间栏样式
    .center_panel {
        flex: 1;
        display: flex;
        flex-direction: column;

        .page_content{
            flex: 1 1;
            overflow: auto;
            padding-bottom: 10px;
            display: flex;
            flex-direction: column;

            .no_data_bg{
                flex: 1 1;
                background-position: 50% 20px;
                background-size: 200px auto;
                min-height: 150px;
                span{
                    margin-top: 120px;
                }
            }
        }
        :deep(.follow_card){
            .table_row_option{
                display: none;
            }
            .audit_card{
                   &:hover{
                    border:solid #2E64FA 1px;
                    background-color: rgba(46, 100, 250,0.04);
                    .table_row_option{
                        display: flex;
                    }
                }
            }
        }
     
    }

    // 右侧栏样式
    .right_panel {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;

        .pending_appointments {
            flex:1 1;
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            color: #333333;

            .panel_header {
                font-size: 16px;
                line-height: 22px;
                font-weight: 600;
            }
            .task_list{
                flex:1 1;
                display: flex;
                flex-direction: column;
                gap: 16px;
                overflow: auto;

                .todo_card {
                    display: flex;
                    flex-direction: column;
                    gap:8px;

                    border-radius: 8px;
                    border: 1px solid #EBEEF5;
                    padding: 12px;

                    .card_top {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap:8px;
                        font-weight: 600;
                        line-height: 20px;
                        .title{
                            flex: 1; 
                        }
                        .table_row_option {
                            display: none;
                            width: auto;
                            flex-shrink: 0 !important;
                            font-weight: 400;
                        }
                    }

                    .card_tags {
                        display: flex;
                        gap:10px;
                        font-size: 12px;
                        line-height: 17px;

                        >span{
                            border-radius:4px;
                            padding:4px 8px;
                        }

                        .task_type{
                            color:white;
                            background: #2E64FA;
                        }
                        .follow_status{
                            background: rgba(46,100,250,0.1);
                            color:#2E64FA;
                        }
                    }

                    .card_info{
                        display: flex;
                        align-items: center;
                        gap:11px;
                        font-size: 12px;
                        line-height: 17px;
                    }
                    .card_content{
                        font-size: 12px;
                        color: #999999;
                        line-height: 17px;
                    }

                    
                    &:hover{
                        border:solid #2E64FA 1px;
                        .card_top{
                            .table_row_option {
                                display: flex;
                            }
                        }
                    }

                }
                
                .no_data{
                    overflow: hidden;
                    .no_data_bg{
                        background-size: 200px auto;
                        background-position: 50% 10px;
                        span{
                            margin-top: 110px;
                        }
                    }
                }
            }
        }

        .history_statistics{
            padding:16px 14px 12px 16px;
            background: #F8FAFE;
            border-radius: 10px;
            border: 1px solid #EBEEF5;
        
            .stat_header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                line-height: 22px;
                font-weight: 600;
                font-size: 16px;
                margin-bottom: 10px;
                .button_border{
                    background-color: #f8fafe;
                }
            }

            .stat_numbers{
                display: flex;
                gap:10px;
                align-items: center;

                .num_item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #666666;

                    .num{
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 24px;
                    }
                    .label{
                        font-size: 14px;
                        line-height: 20px;
                    }
                }

                .vertical_solid{
                    width: 1px;
                    height: 32px;
                    background-color: #EBEEF5;
                }
            }
        }
    }
}

</style>