<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
    <div class="main">
        <div class="min-h-screen-nav-height flex justify-center bg-gray-50">
            <div class="container mx-auto px-4 py-6 flex gap-6">
                <!-- 左侧信息区 -->
                <div class="w-[35%]">
                    <el-tabs type="border-card" class="h-full">
                        <!-- 客户档案 -->
                        <el-tab-pane :tab-position="'left'">
                            <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">
                                    <h3 class="text-lg font-medium mb-4">基本信息</h3>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">客户姓名</span>
                                            <span class="font-medium">赵梦琪</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">客户等级</span>
                                            <span class="text-yellow-600 font-medium">钻石会员</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">注册时间</span>
                                            <span>2023-06-15</span>
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-gray-500 text-sm">最近联系</span>
                                            <span>2024-01-20</span>
                                        </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>138 **** 5678</span>
                                        </div>
                                        <div class="flex items-center">
                                            <el-icon class="mr-2">
                                                <Message />
                                            </el-icon>
                                            <span>zhaomq@example.com</span>
                                        </div>
                                        <div class="flex items-center">
                                            <el-icon class="mr-2">
                                                <Location />
                                            </el-icon>
                                            <span>浙江省杭州市西湖区</span>
                                        </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>
                            <el-timeline>
                                <el-timeline-item v-for="(activity, index) in activities" :key="index"
                                    :type="activity.type" :color="activity.color" :timestamp="activity.timestamp">
                                    {{ activity.content }}
                                </el-timeline-item>
                            </el-timeline>
                        </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">
                                <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" label-width="100px">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="客户姓名" required>
                                        <el-input v-model="form.name" placeholder="请输入客户姓名" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系电话" required>
                                        <el-input v-model="form.phone" placeholder="请输入联系电话" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="工单类型" required>
                                <el-select v-model="form.type" placeholder="请选择工单类型" class="w-full">
                                    <el-option v-for="item in ticketTypes" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="问题描述" required>
                                <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="处理方式">
                                <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>
                        </el-form>
                    </div>
                </div>
            </div>

            <!-- 底部话务操作区 -->
            <div class="fixed bottom-0 w-5/6 bg-white shadow-lg transition-all duration-300"
                :class="{ 'h-20': !isExpanded, 'h-40': isExpanded }" @click="isExpanded = !isExpanded">
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between h-20">
                        <div class="flex items-center space-x-6">
                            <div class="flex items-center">
                                <el-icon class="text-blue-500 mr-2">
                                    <Phone :color="'#409EFF'"/>
                                </el-icon>
                                <span class="font-medium">138 **** 5678</span>
                            </div>
                            <div class="flex items-center">
                                <el-icon class="text-green-500 mr-2">
                                    <Timer :color="'#67C23A'"/>
                                </el-icon>
                                <span>通话时长: {{ callDuration }}</span>
                            </div>
                            <div class="flex items-center">
                                <el-icon class="text-gray-500 mr-2">
                                    <Location/>
                                </el-icon>
                                <span>浙江省杭州市</span>
                            </div>
                        </div>
                        <el-button type="primary" size="small" @click="isExpanded = !isExpanded"
                            :icon="isExpanded ? ArrowDown : ArrowUp" circle />
                    </div>
                    <div v-show="isExpanded" class="flex items-center justify-center space-x-6 h-20">
                        <el-button type="success" circle class="!rounded-button" @click.stop="handleCall">
                            <el-icon>
                                <Phone />
                            </el-icon>
                        </el-button>
                        <el-button type="warning" circle class="!rounded-button" @click.stop="handleTransfer">
                            <el-icon>
                                <Switch />
                            </el-icon>
                        </el-button>
                        <el-button type="info" circle class="!rounded-button" @click.stop="handleConference">
                            <el-icon>
                                <Service />
                            </el-icon>
                        </el-button>
                        <el-button type="danger" circle class="!rounded-button" @click.stop="handleHangup">
                            <el-icon>
                                <CircleClose />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import {
    UserFilled,
    Phone,
    Message,
    Location,
    Document,
    Search,
    Timer,
    ArrowDown,
    ArrowUp,
    Switch,
    Service,
    CircleClose
} from '@element-plus/icons-vue';

const isExpanded = ref(true);
const searchQuery = ref('');
const callDuration = ref('00:03:45');

const activities = [
    {
        content: '反馈产品功能建议',
        timestamp: '2024-01-20 14:30',
        type: 'primary',
        color: '#409EFF'
    },
    {
        content: '咨询会员服务升级',
        timestamp: '2024-01-15 10:20',
        type: 'success',
        color: '#67C23A'
    },
    {
        content: '处理账户异常问题',
        timestamp: '2024-01-10 16:45',
        type: 'warning',
        color: '#E6A23C'
    }
];

const knowledgeBase = [
    {
        title: '会员服务升级指南',
        description: '详细介绍会员等级权益与升级流程'
    },
    {
        title: '常见账户问题解决方案',
        description: '账户登录、安全设置等问题的处理方法'
    },
    {
        title: '产品使用技巧汇总',
        description: '核心功能使用说明与进阶技巧'
    }
];

const form = ref({
    name: '赵梦琪',
    phone: '13812345678',
    type: '',
    description: '',
    priority: 'medium',
    handleMethod: '',
    remarks: ''
});

const ticketTypes = [
    { label: '产品咨询', value: 'product' },
    { label: '技术支持', value: 'technical' },
    { label: '账户问题', value: 'account' },
    { label: '建议反馈', value: 'feedback' }
];

const handleMethods = [
    { label: '远程协助', value: 'remote' },
    { label: '电话指导', value: 'phone' },
    { label: '转专员处理', value: 'transfer' },
    { label: '现场支持', value: 'onsite' }
];

const handleCall = () => {
    // 处理拨打电话
};

const handleTransfer = () => {
    // 处理转接
};

const handleConference = () => {
    // 处理会议
};

const handleHangup = () => {
    // 处理挂断
};

onMounted(() => {
  setTimeout(() => {
    isExpanded.value = false;
  }, 2000);
});
</script>

<style scoped>
.el-tabs {
    height: calc(100vh - 3rem);
}

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

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

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

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

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