<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
    <div class="min-h-screen-nav-height bg-gray-50">
        <div class="container mx-auto px-4 pt-4 pb-6 flex gap-6">
            <!-- 左侧信息区 -->
            <div class="w-[35%]">
                <el-tabs type="border-card" class="h-full" @tab-change="tabChange">
                    <!-- 客户档案 -->
                    <el-tab-pane>
                        <template #label>
                            <div class="flex items-center">
                                <el-icon class="mr-2">
                                    <UserFilled />
                                </el-icon>
                                客户档案
                            </div>
                        </template>
                        <div class="space-y-4">
                            <div class="bg-white rounded-lg p-4 shadow-sm">
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="text-lg font-medium">基本信息</h3>
                                    <el-button type="primary" text :icon="Edit" @click="isEditing = !isEditing">
                                        {{ isEditing ? '保存' : '编辑' }}
                                    </el-button>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="flex flex-col">
                                        <span class="text-gray-500 text-sm">客户姓名</span>
                                        <template v-if="!isEditing">
                                            <span class="font-medium">{{ profile.name }}</span>
                                        </template>
                                        <template v-else>
                                            <el-input v-model="profile.name" size="small" class="w-full" />
                                        </template>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-gray-500 text-sm">客户性别</span>
                                        <template v-if="!isEditing">
                                            <span class="text-yellow-600 font-medium">{{ profile.sex }}</span>
                                        </template>
                                        <template v-else>
                                            <el-select v-model="profile.sex" size="small" class="w-full">
                                                <el-option label="男" value="男" />
                                                <el-option label="女" value="女" />
                                                <el-option label="未知" value="未知" />
                                            </el-select>
                                        </template>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-gray-500 text-sm">创建时间</span>
                                        <span>{{ profile.registerDate }}</span>

                                        <!-- <template v-if="!isEditing">
                                            <span>{{ profile.registerDate }}</span>
                                        </template>
                                        <template v-else>
                                            <el-date-picker v-model="profile.registerDate" type="date" size="small"
                                                style="width: 100%" value-format="YYYY-MM-DD" />
                                        </template> -->
                                    </div>
                                    <!-- <div class="flex flex-col">
                                        <span class="text-gray-500 text-sm">最近联系</span>
                                        <template v-if="!isEditing">
                                            <span>{{ profile.lastContact }}</span>
                                        </template>
                                        <template v-else>
                                            <el-date-picker v-model="profile.lastContact" type="date" size="small"
                                                style="width: 100%" value-format="YYYY-MM-DD" />
                                        </template>
                                    </div> -->
                                </div>
                            </div>
                            <div class="bg-white rounded-lg p-4 shadow-sm">
                                <h3 class="text-lg font-medium mb-4">联系方式</h3>
                                <div class="space-y-3">
                                    <div class="flex items-center">
                                        <el-icon class="mr-2">
                                            <Phone />
                                        </el-icon>
                                        <span>{{ profile.phone }}</span>
                                        <!-- <template v-if="!isEditing">
                                            <span>{{ profile.phone }}</span>
                                        </template>
                                        <template v-else>
                                            <el-input v-model="profile.phone" size="small" class="w-full" />
                                        </template> -->
                                    </div>
                                    <!-- <div class="flex items-center">
                                        <el-icon class="mr-2">
                                            <Message />
                                        </el-icon>
                                        <template v-if="!isEditing">
                                            <span>{{ profile.email }}</span>
                                        </template>
                                        <template v-else>
                                            <el-input v-model="profile.email" size="small" class="w-full" />
                                        </template>
                                    </div> -->
                                    <div class="flex items-center">
                                        <el-icon class="mr-2">
                                            <Location />
                                        </el-icon>
                                        <template v-if="!isEditing">
                                            <span>{{ profile.address }}</span>
                                        </template>
                                        <template v-else>
                                            <el-input v-model="profile.address" size="small" class="w-full" />
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- 历史工单 -->
                    <el-tab-pane>
                        <template #label>
                            <div class="flex items-center">
                                <el-icon class="mr-2">
                                    <Document />
                                </el-icon>
                                历史工单
                            </div>
                        </template>
                        <div class="space-y-4">
                            <!-- <el-input v-model="workOrderSearchQuery" placeholder="搜索工单..." :prefix-icon="Search" /> -->
                            <div class="space-y-2 overflow-y-auto" style="height: 100%;" ref="workOrderContainer"
                                @scroll="handleScroll">
                                <div v-for="(item, index) in displayedActivities" :key="index"
                                    class="bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow mb-4 border border-gray-100">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium">{{ item.workordercatename ? item.workordercatename.substring(item.workordercatename.lastIndexOf('/') + 1) : '' }}</h4>
                                            <!-- <div class="flex items-center gap-2 mt-1">
                                                <el-tag size="small" type="info" class="!rounded-full">{{ item.workordercatename }}</el-tag>
                                            </div> -->
                                        </div>
                                        <span class="text-xs text-gray-500">{{ item.createtime }}</span>
                                    </div>
                                    <div class="text-sm text-gray-600 my-2 cursor-pointer" :class="{
                                        'line-clamp-2': !item.expanded || activeWorkOrder !== index
                                    }" @click="() => {
                                        activeWorkOrder = activeWorkOrder === index ? -1 : index;
                                        item.expanded = !item.expanded;
                                    }">{{ item.content }}</div>
                                    <template v-if="item.result">
                                        <div class="mt-2 border-t pt-2">
                                            <div class="flex items-center justify-between text-sm text-gray-600 mb-2">
                                                <div class="flex items-center">
                                                    <!-- <el-icon class="mr-1">
                                                        <Document />
                                                    </el-icon> -->
                                                    <span>办理结果</span>
                                                    <span class="text-gray-400 ml-2">{{ item.endtime ? `[${item.endtime}]` : '' }}</span>
                                                </div>
                                                <!-- <div class="text-gray-400">处理部门：{{ item.department || '客服部' }}</div> -->
                                            </div>
                                            <div class="flex">
                                                <div class="w-1 bg-gray-200 mr-2"></div>
                                                <div class="flex flex-col space-y-2">
                                                    <div class="text-sm text-gray-500 cursor-pointer" :class="{
                                                        'line-clamp-2': !item.expanded || activeWorkOrder !== index
                                                    }" @click="() => {
                                                        activeWorkOrder = activeWorkOrder === index ? -1 : index;
                                                        item.expanded = !item.expanded;
                                                    }">{{ item.result }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <!-- <div class="flex items-center mt-2">
                                        <el-tag :type="getTagType(item.type)" size="small">{{ getStatusText(item.type)
                                            }}</el-tag>
                                    </div> -->
                                </div>
                                <div v-if="loading" class="flex justify-center items-center py-4">
                                    <el-icon class="animate-spin mr-2">
                                        <Loading />
                                    </el-icon>
                                    加载中...
                                </div>
                                <div v-if="noMore" class="text-center text-gray-500 py-4">没有更多数据了</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- 知识库 -->
                    <el-tab-pane>
                        <template #label>
                            <div class="flex items-center">
                                <el-icon class="mr-2">
                                    <Search />
                                </el-icon>
                                知识库
                            </div>
                        </template>
                        <div class="space-y-4">
                            <knowledge-list :toExamine="2"></knowledge-list>
                            <!-- <el-input v-model="searchQuery" placeholder="搜索解决方案..." :prefix-icon="Search" />
                            <div class="space-y-2">
                                <div v-for="(item, index) in knowledgeBase" :key="index"
                                    class="bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                                    <h4 class="font-medium">{{ item.title }}</h4>
                                    <p class="text-sm text-gray-600 mt-1">{{ item.description }}</p>
                                </div>
                            </div> -->
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- 右侧工单区 -->
            <div class="w-[65%] space-y-6">
                <div class="bg-white rounded-lg p-6 shadow-sm">
                    <h2 class="text-xl font-medium mb-6">工单信息</h2>
                    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="客户姓名" required prop="name">
                                    <el-input v-model="form.name" placeholder="请输入客户姓名" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" required prop="phone">
                                    <el-input v-model="form.phone" placeholder="请输入联系电话" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="工单类型" required prop="type">
                            <el-cascader ref="typeCascaderRef" class="w-full" v-model="form.type" :props="{value: 'id',}"  placeholder="请选择工单类型" :options="ticketTypes" filterable clearable @change="handleTypeChange" />
                        </el-form-item>
                        <el-form-item v-if="form.typeCode === 'complain'" label="投诉部门" required prop="department">
                            <!-- <el-select v-model="form.department" placeholder="请选择投诉部门" class="w-full">
                                <el-option v-for="item in departments" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select> -->
                            <el-cascader ref="deptCascaderRef" class="w-full" v-model="form.department" :props="{checkStrictly: true}" placeholder="请选择投诉科室" :options="departments" filterable @change="deptChange"/>
                        </el-form-item>
                        <el-form-item label="问题描述" required prop="description">
                            <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请详细描述问题" />
                        </el-form-item>
                        <!-- <el-form-item label="优先级">
                            <el-radio-group v-model="form.priority">
                                <el-radio-button label="high">高</el-radio-button>
                                <el-radio-button label="medium">中</el-radio-button>
                                <el-radio-button label="low">低</el-radio-button>
                            </el-radio-group>
                        </el-form-item> -->
                        <el-form-item label="处理方式" required prop="handleMethod">
                            <el-select v-model="form.handleMethod" placeholder="请选择处理方式" class="w-full">
                                <el-option v-for="item in handleMethods" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="备注">
                            <el-input v-model="form.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" />
                        </el-form-item> -->
                        <!-- 悬浮提交按钮 -->
                        <div class="bottom-0 left-0 right-0 p-4 bg-white border-t flex justify-end">
                            <el-button type="primary" class="w-32 !rounded-button whitespace-nowrap" @click="submit">提交工单</el-button>
                        </div>
                    </el-form>

                </div>

            </div>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {
    UserFilled,
    Phone,
    Message,
    Location,
    Document,
    Search,
    Timer,
    Switch,
    Service,
    CircleClose,
    Operation,
    Close,
    VideoCamera,
    Microphone,
    Connection,
    List,
    Notebook,
    Edit
} from '@element-plus/icons-vue';
import { hidePhone } from '@/utils/tools';
import { ElMessage } from 'element-plus';
import useSelectStore from '@/store/commonSelect/common';
import { getPageListData, createPageData } from '@/api/main/system/system';
import { userDecryptToAsterisk } from '@/utils/aes';
import knowledgeList from "@/views/main/knowledgeBase/knowledgeList/cpns/konwlegelist/konwlegelist";

import { max } from 'lodash';
let { proxy } = getCurrentInstance()
const showCallPanel = ref(false);
const searchQuery = ref('');
console.log('proxy', proxy.$route);
const telNumber = ref(proxy.$route.query.phone || proxy.$route.query.callNumber || proxy.$route.params.callNumber);
proxy.$route.meta.title = telNumber.value || '来电弹屏';
const callid = ref(proxy.$route.query.callid || 0);
onMounted(() => {
    getUserInfo();
});
onUnmounted(() => {

});
const showDialpad = ref(false);

const showContacts = ref(false);

const handleRecords = () => {
    // 处理通话记录
};
const workOrderSearchQuery = ref('');
const activeWorkOrder = ref(-1);
const currentPage = ref(1);
const pageSize = ref(5);
const displayedActivities = ref<any[]>([]);
const loading = ref(false);
const noMore = ref(false);
const pageIndex = ref(1);
const workOrderContainer = ref<HTMLElement | null>(null);
const loadMoreData = async () => {
    if (loading.value || noMore.value) return;
    loading.value = true;
    await new Promise(resolve => setTimeout(resolve, 500)); // 模拟加载延迟
    // const startIndex = (pageIndex.value - 1) * pageSize.value;
    // const newItems = activities.value.slice(startIndex, startIndex + 5);
    const res = await getWorkOrders();
    if (res.length === 0) {
        noMore.value = true;
    } else {
        // displayedActivities.value.push(...newItems);
        pageIndex.value++;
    }
    loading.value = false;
};
const handleScroll = async (event: Event) => {
    const target = event.target as HTMLElement;
    const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
    if (scrollBottom < 50) {
        await loadMoreData();
    }
};
onMounted(() => {
    loadMoreData();
});
const activities = ref([
    // {
    //     title: '因工作压力产生焦虑情绪咨询',
    //     createtime: '2024-01-20 14:30',
    //     type: 'primary',
    //     status: 'processing',
    //     content: '我最近工作任务特别重，每天都要加班到很晚，感觉压力巨大，时常焦虑不安，晚上也睡不好觉。想咨询下如何缓解这种因工作压力带来的焦虑情绪，调整状态。',
    //     result: '心理咨询师与客户沟通后，提供了放松训练方法，如深呼吸练习、渐进性肌肉松弛等，并建议合理安排工作时间，制定工作计划表。客户反馈经过一周练习，焦虑情绪有所缓解，睡眠质量也有所提高。',
    //     handleTime: '2024-01-20 16:45',
    //     department: '产品部',
    //     expanded: false
    // },
    // {
    //     title: '咨询会员服务升级',
    //     createtime: '2024-01-15 10:20',
    //     type: 'success',
    //     status: 'completed',
    //     content: '客户咨询从普通会员升级到钻石会员的具体流程和相关权益。详细了解了会员特权，包括专属客服支持、优先处理工单、技术支持特别通道等服务内容。客户对升级后的权益表示满意，已完成会员升级。',
    //     result: '已成功为客户办理钻石会员升级，开通所有相关权益，客户表示满意。后续将持续跟进客户的服务体验。',
    //     handleTime: '2024-01-15 11:30',
    //     department: '客服部',
    //     expanded: false
    // },
    // {
    //     title: '处理账户异常问题',
    //     createtime: '2024-01-10 16:45',
    //     type: 'warning',
    //     status: 'pending',
    //     content: '客户反映账户登录异常，无法正常访问某些功能模块。经初步排查可能是账户权限设置问题，需要进一步核实具体原因。客户反映这个问题影响了日常工作，希望能尽快解决。',
    //     handleTime: '2024-01-10 17:15',
    //     department: '技术部',
    //     expanded: false
    // },
    // {
    //     title: '产品使用咨询',
    //     createtime: '2024-01-05 09:30',
    //     type: 'info',
    //     status: 'completed',
    //     content: '客户咨询产品B的高级功能使用方法，特别是关于自动化工作流程的配置问题。已详细讲解了功能的设置步骤和使用技巧，并提供了相关的操作文档。客户表示理解并成功完成了配置。',
    //     result: '已通过远程指导帮助客户完成自动化工作流程配置，并提供了详细的操作文档。客户已掌握使用方法并正常使用。',
    //     handleTime: '2024-01-05 10:45',
    //     department: '技术支持部',
    //     expanded: false
    // },
    // {
    //     title: '账户安全问题',
    //     createtime: '2024-01-01 16:20',
    //     type: 'danger',
    //     status: 'cancelled',
    //     content: '客户报告疑似账户被未授权访问，要求立即冻结账户并核查登录记录。经过安全团队排查，发现是客户自己在异地登录导致的误报。已建议客户开启双重认证以提高账户安全性。',
    //     result: '已完成账户安全核查，确认是误报。已协助客户开启双重认证，并提供了账户安全最佳实践指南。',
    //     expanded: false
    // }
]);
const getTagType = (type: string) => {
    const typeMap: { [key: string]: string } = {
        primary: '',
        success: 'success',
        warning: 'warning',
        info: 'info',
        danger: 'danger'
    };
    return typeMap[type] || '';
};
const getStatusText = (type: string) => {
    const statusMap: { [key: string]: string } = {
        primary: '处理中',
        success: '已完成',
        warning: '待处理',
        info: '已完成',
        danger: '已取消'
    };
    return statusMap[type] || '';
};
const knowledgeBase = [
    {
        title: '对于自闭症儿童，康复训练有哪些重要方法？',
        description: '应用行为分析疗法（ABA）是常用方法，通过对自闭症儿童行为进行分解、训练和强化，提高其社交、语言、自理等能力。结构化教学法（TEACCH）则根据儿童特点，将学习环境结构化，如划分不同功能区域，让儿童在有序环境中学习。此外，社交故事疗法通过编写故事帮助儿童理解社交情境和规则；感觉统合训练可改善儿童感觉处理能力，提升其动作协调性和注意力。'
    },
    {
        title: '心理咨询师会泄露我的隐私吗？',
        description: '保密是心理咨询师的基本职业道德准则。在一般情况下，心理咨询师会严格保护来访者的隐私，不会向任何第三方透露咨询内容。但在特殊情况下，如来访者有伤害自己或他人的风险等，咨询师可能会突破保密原则，通知相关人员以确保安全。'
    },
    {
        title: '心理压力大时，有哪些简单的自我调节方法？',
        description: '可以进行深呼吸练习，找一个安静舒适的地方坐下或躺下，慢慢地吸气，让空气充满腹部，然后再缓缓地呼气，重复几次。也可以进行适度的运动，如散步、跑步、瑜伽等，运动能够促进身体分泌内啡肽，帮助缓解压力。此外，听音乐、冥想、写日记等方式也有助于放松身心。'
    },
    {
        title: '抑郁症的主要症状有哪些？',
        description: '抑郁症并非简单的情绪低落，核心症状包含心境低落、兴趣和愉快感丧失、精力不济或疲劳感。伴随症状有睡眠障碍（如失眠、早醒）、食欲改变（减退或增加）、自我评价降低、自责自罪、思维迟缓、注意力不集中，严重时甚至出现自杀观念和行为。'
    },
    {
        title: '如何早期识别精神分裂症？',
        description: '早期可能出现个性改变，原本开朗的人变得孤僻、沉默寡言，对人冷淡；注意力难以集中，学习或工作效率下降；出现一些古怪的想法和行为，如无端猜疑他人、自言自语、行为举止怪异；睡眠质量变差，易惊醒或多梦。部分患者还会出现感知觉异常，如听到不存在的声音。'
    },
    {
        title: '强迫症有哪些常见表现形式？',
        description: '主要有强迫观念和强迫行为。强迫观念如反复怀疑门窗是否关好、是否碰到脏东西会得病；脑海中不断涌现无意义的数字、词句等。强迫行为表现为反复洗手、检查物品、计数、整理物品，要求物品摆放整齐有序等。患者明知这些观念和行为不合理，却难以控制，为此感到痛苦。'
    },
    
];
const isEditing = ref(false);
const profile = ref({
    name: '-',
    sex: '-',
    registerDate: '',
    // lastContact: '',
    phone: '',
    tel: '',
    // email: 'zhaomq@example.com',
    address: ''
});
const formRef: any = ref(null);
const form = ref({
    name: '',
    phone: '',
    type: '',
    typeCode: '',
    description: '',
    // priority: 'medium',
    handleMethod: '1',
    // remarks: '',
    department: '',
});
const rules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择工单类型', trigger: 'change' }
    ],
    description: [
        { required: true, message: '请输入问题描述', trigger: 'blur' },
        { min: 5, max: 100, message: '问题描述5-100个字符', trigger: 'blur' },
    ],
    handleMethod: [
        { required: true, message: '请选择处理方式', trigger: 'change' }
    ],
};

const ticketTypes = useSelectStore().dictOrderTypeList;
const departments = useSelectStore().deptListData;
const handleMethods = [
    { label: '立即完结', value: '1' },
    { label: '待交办', value: '0' },
    // { label: '转专员处理', value: 'transfer' },
    // { label: '现场支持', value: 'onsite' }
];

const getUserInfo = async () => {
    if (!telNumber.value) {
        return;
    }

    profile.value.phone = telNumber.value;
    form.value.phone = telNumber.value;

    const userResult = await getPageListData('/patient/patient', { phoneNumber: telNumber.value });
    console.log(userResult);
    if (userResult?.data?.length) {
        const userInfo = userResult.data[0];
        profile.value = {
            name: userInfo.name,
            registerDate: userInfo.createTime,
            phone: userDecryptToAsterisk(userInfo.phoneNumber),
            address: userInfo.address,
            sex: userInfo.sex === 1 ? '男' : userInfo.sex == 0 ? '女' : '-',
            tel: userDecryptToAsterisk(userInfo.tel),
        };

        form.value.name = userInfo.name;
    }
}

const typeCascaderRef: any = ref(null);

const handleTypeChange = (value) => {
    if (typeCascaderRef.value) {
        const selectNode = typeCascaderRef.value.getCheckedNodes();
        form.value.typeCode = selectNode[selectNode.length - 1].data.code;
    }
}

// 投诉部门切换
const deptCascaderRef: any = ref(null);
const deptChange = (value) => {
    // if (deptCascaderRef.value) {
    //     const selectNode = deptCascaderRef.value.getCheckedNodes()[0];
    //     form.value.department = selectNode.data.label;
    // }
}

const resetForm = () => {
    form.value = {
        name: '',
        phone: '',
        type: '',
        typeCode: '',
        description: '',
        handleMethod: '1',
        department: '',
    };
    formRef.value.resetFields();
}

const submit = async () => {
    // 验证表单必填项
    formRef.value.validate(async (valid) => {
        if (valid) {
            const params: any = {
                caller: form.value.name,
                callnum: form.value.phone,
                content: form.value.description,
                customerno: form.value.phone,
                firsttype: 1000,
                isend: +form.value.handleMethod,
                workordercate: form.value.type[form.value.type.length - 1],
            };
            if (callid.value) params.callId = callid.value;
            // 提交表单
            createPageData('/order/workorder', params).then((data) => {
                console.log(data, 'submit');
                if (data.state === 'success') {
                    ElMessage.success('提交成功');
                    resetForm()
                } else {
                    ElMessage.error(data.message || '提交失败');
                }
                
            })
            
        } else {
            ElMessage.error('请填写完整信息');
        }
        
    });
}

const getWorkOrders = async () => {
    if (!telNumber.value) return;
    const params: any = {
        listType: 0,
        callnum: telNumber.value,
        pageSize: pageSize.value,
        pageNum: pageIndex.value,
    }
    const result = await getPageListData('/order/workorder', params);
    console.log(result, 'getWorkOrders');
    if (result.state === 'success') {
        displayedActivities.value = displayedActivities.value.concat(result.data)
        console.log(displayedActivities.value, 'activities');
        return result.data;
    }
    return [];
}

const tabChange = (name) => {
    console.log(name, 'tabChange');
    if (name === '1') {
        if (activities.value.length === 0) getWorkOrders();
    }

}

</script>
<style scoped>
* {
    transition: height 0.3s ease-out;
}

.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.slide-enter-active,
.slide-leave-active,
.container {
    transition: all 0.3s ease-out;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateX(-20px);
    opacity: 0;
}

:deep(.el-avatar) {
    background-color: #f0f2f5;
}

:deep(.el-input__wrapper) {
    /* box-shadow: none !important;
    border: none !important; */
}

:deep(.el-button.is-circle) {
    width: 3rem;
    height: 3rem;
}

.el-tabs {
    height: calc(100vh - 5rem);
    transition: height 0.3s ease-out;
}

.el-timeline {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

:deep(.el-tabs__content) {
    height: calc(100% - 40px);
    overflow-y: auto;
    transition: height 0.3s ease-out;
}

:deep(.el-form-item__label) {
    font-weight: 500;
}

:deep(.el-button.is-circle) {
    width: 2.5rem;
    height: 2.5rem;
}

:deep(.el-icon) {
    font-size: 1.25rem;
}
</style>