<template>
  <div class="fixed bottom-6 right-6 z-50">
    <!-- 悬浮通话状态卡片 -->
    <div class="bg-white rounded-lg shadow-lg p-3 flex items-center cursor-pointer hover:shadow-xl transition-shadow"
        @click="toggleCallPanel" v-if="!showCallPanel">
        <span class="text-green-500 font-medium mr-3 ml-3">通话中</span>
        <div class="w-px h-5 bg-gray-300 mx-3"></div>
        <div class="flex-1">
            <h4 class="font-medium text-sm">{{ currentCall.name }}</h4>
            <div class="flex items-center text-xs text-gray-500 space-x-2">
                <span class="flex items-center">
                    <el-icon class="mr-1">
                        <Timer />
                    </el-icon>
                    {{ callDuration }}
                </span>
            </div>
        </div>
    </div>
    <!-- 通话面板 -->
    <div v-if="showCallPanel" class="bg-white rounded-lg shadow-2xl w-[320px]">
        <!-- 通话信息头部 -->
        <div class="p-6 bg-gradient-to-r from-blue-500 to-blue-600 rounded-t-lg text-white">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center space-x-2">
                    <el-avatar :size="48" :src="currentCall.avatar" />
                    <div>
                        <h3 class="font-semibold text-lg">{{ currentCall.name }}</h3>
                        <p class="text-sm opacity-90">{{ currentCall.phone }}</p>
                    </div>
                </div>
                <el-button type="danger" circle class="!rounded-button" @click="toggleCallPanel">
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button>
            </div>
            <div class="flex items-center justify-center space-x-4 text-sm">
                <span class="flex items-center">
                    <el-icon class="mr-1">
                        <Timer />
                    </el-icon>
                    {{ callDuration }}
                </span>
                <span class="flex items-center">
                    <el-icon class="mr-1">
                        <Location />
                    </el-icon>
                    {{ currentCall.location }}
                </span>
            </div>
        </div>
        <!-- 功能区 -->
        <div class="p-4 border-b">
            <div class="grid grid-cols-4 gap-4">
                <button v-for="action in callActions" :key="action.name"
                    class="flex flex-col items-center justify-center p-2 rounded-lg hover:bg-gray-50"
                    @click="action.handler">
                    <el-icon class="text-xl mb-1" :class="action.iconColor">
                        <component :is="action.icon" />
                    </el-icon>
                    <span class="text-xs">{{ action.name }}</span>
                </button>
            </div>
        </div>
        <!-- 拨号键盘 -->
        <div v-show="showDialpad" class="p-4 border-b h-[300px]">
            <div class="mb-4">
                <el-input v-model="dialNumber" placeholder="输入电话号码" clearable
                    style="text-align: center; font-size: 1.25rem;" />
            </div>
            <div class="grid grid-cols-3 gap-4">
                <button v-for="key in dialKeys" :key="key"
                    class="h-10 rounded-full bg-gray-50 hover:bg-gray-100 flex items-center justify-center text-base font-medium"
                    @click="appendDialNumber(key)">
                    {{ key }}
                </button>
            </div>
        </div>
        <!-- 通讯录 -->
        <div v-if="showContacts" class="h-[300px] p-4" v-show="contentVisible">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-medium">通讯录</h3>
                <el-input v-model="searchContactQuery" placeholder="输入姓名、电话或部门" :prefix-icon="Search"
                    class="w-40" style="width: 200px;" size="small" />
            </div>
            <div class="space-y-3 overflow-y-auto scrollbar-hide pr-2 h-[200px]">
                <div v-for="(contact, index) in filteredContacts" :key="index"
                    class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
                    <div class="flex items-center">
                        <el-avatar :size="32" :src="contact.avatar" class="mr-3" />
                        <div>
                            <p class="font-medium">{{ contact.name }}</p>
                            <p class="text-xs text-gray-500">{{ contact.phone }}</p>
                        </div>
                    </div>
                    <el-button type="primary" circle class="!rounded-button" @click="handleCall(contact)">
                        <el-icon>
                            <Phone />
                        </el-icon>
                    </el-button>
                </div>
            </div>
        </div>
        <!-- 通话记录 -->
        <div v-else class="h-[300px] p-4" v-show="contentVisible">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-medium">最近通话</h3>
                <!-- <el-button text>查看全部</el-button> -->
            </div>
            <div class="space-y-3 overflow-y-auto scrollbar-hide pr-2 h-[200px]">
                <div v-for="(record, index) in callHistory" :key="index"
                    class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
                    <div class="flex items-center">
                        <el-avatar :size="32" :src="record.avatar" class="mr-3" />
                        <div>
                            <p class="font-medium">{{ record.name }}</p>
                            <div class="flex items-center space-x-2">
                                <p class="text-xs text-gray-500">{{ record.time }}</p>
                                <p class="text-xs text-gray-500">{{ record.phone }}</p>
                            </div>
                        </div>
                    </div>
                    <el-icon :class="record.type === 'incoming' ? 'text-green-500' : 'text-blue-500'">
                        <Phone />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
    <div class="audioEle" style="display: none;">   
        <audio ref="audioElement" controls="controls" autoplay="autoplay"></audio>
    </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
  } from '@element-plus/icons-vue';
  const showCallPanel = ref(true);
  const searchQuery = ref('');
  const searchContactQuery = ref('');
  const filteredContacts = computed(() => {
      if (!searchContactQuery.value) return contacts.value;
      const query = searchContactQuery.value.toLowerCase();
      return contacts.value.filter(contact =>
          contact.name.toLowerCase().includes(query) ||
          contact.phone.includes(query) ||
          contact.department.toLowerCase().includes(query)
      );
  });
  const callDuration = ref('00:00:00');
  let timer: number;
  const startTime = ref(Date.now());
  const updateCallDuration = () => {
      const diff = Math.floor((Date.now() - startTime.value) / 1000);
      const hours = Math.floor(diff / 3600).toString().padStart(2, '0');
      const minutes = Math.floor((diff % 3600) / 60).toString().padStart(2, '0');
      const seconds = Math.floor(diff % 60).toString().padStart(2, '0');
      callDuration.value = `${hours}:${minutes}:${seconds}`;
  };
  onMounted(() => {
      timer = window.setInterval(updateCallDuration, 1000);
  });
  onUnmounted(() => {
      if (timer) {
          clearInterval(timer);
      }
  });
  const showDialpad = ref(false);
  const dialpadMode = ref<'dial' | 'transfer' | 'conference'>('dial');
  const dialNumber = ref('');
  const contentVisible = ref(true);
  const currentCall = ref({
      name: '赵梦琪',
      phone: '138 **** 5678',
      turePhone: '13812345678',
      avatar: 'https://ai-public.mastergo.com/ai/img_res/912893976024911f35afb12190e1c1f7.jpg',
      location: '浙江省杭州市'
  });
  const showContacts = ref(false);
  const contacts = ref([
      {
          name: '李晓华',
          phone: '13812345678',
          avatar: 'https://mastergo.com/ai/api/search-image?query=professional asian businessman portrait with confident expression in modern office setting clean simple background&width=100&height=100&orientation=squarish',
          department: '销售部'
      },
      {
          name: '王建国',
          phone: '13987654321',
          avatar: 'https://mastergo.com/ai/api/search-image?query=mature asian business man portrait with warm smile in corporate environment clean simple background&width=100&height=100&orientation=squarish',
          department: '技术部'
      },
      {
          name: '张美玲',
          phone: '13567891234',
          avatar: 'https://mastergo.com/ai/api/search-image?query=elegant asian businesswoman portrait with gentle smile in professional setting clean simple background&width=100&height=100&orientation=squarish',
          department: '客服部'
      }
  ]);
  const callActions = [
      { name: '拨号', icon: 'Operation', iconColor: 'text-blue-500', handler: () => toggleDialpad('dial') },
      { name: '通讯录', icon: 'Notebook', iconColor: 'text-orange-500', handler: () => toggleContacts() },
      { name: '视频', icon: 'VideoCamera', iconColor: 'text-green-500', handler: () => handleVideo() },
      { name: '静音', icon: 'Microphone', iconColor: 'text-yellow-500', handler: () => handleMute() },
      { name: '转接', icon: 'Switch', iconColor: 'text-purple-500', handler: () => toggleDialpad('transfer') },
      { name: '会议', icon: 'Connection', iconColor: 'text-indigo-500', handler: () => toggleDialpad('conference') },
      { name: '记录', icon: 'List', iconColor: 'text-gray-500', handler: () => handleRecords() },
      { name: '挂断', icon: 'CircleClose', iconColor: 'text-red-500', handler: () => handleHangup() },
  ];
  const dialKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
  const callHistory = [
      {
          name: '李晓华',
          time: '今天 14:30',
          type: 'incoming',
          phone: '13812345678',
          avatar: 'https://mastergo.com/ai/api/search-image?query=professional asian businessman portrait with confident expression in modern office setting clean simple background&width=100&height=100&orientation=squarish'
      },
      {
          name: '王建国',
          time: '今天 11:20',
          type: 'outgoing',
          phone: '13987654321',
          avatar: 'https://mastergo.com/ai/api/search-image?query=mature asian business man portrait with warm smile in corporate environment clean simple background&width=100&height=100&orientation=squarish'
      },
      {
          name: '张美玲',
          time: '昨天 16:45',
          type: 'incoming',
          phone: '13567891234',
          avatar: 'https://mastergo.com/ai/api/search-image?query=elegant asian businesswoman portrait with gentle smile in professional setting clean simple background&width=100&height=100&orientation=squarish'
      },
      {
          name: '陈思远',
          time: '昨天 15:20',
          type: 'outgoing',
          phone: '13678901234',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/b55785acbeae7d23ebeea7d11d71d557.jpg'
      },
      {
          name: '林雨晴',
          time: '昨天 14:15',
          type: 'incoming',
          phone: '13789012345',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/58445f31f3738c813c246f6076b418fe.jpg'
      },
      {
          name: '黄志强',
          time: '昨天 11:30',
          type: 'outgoing',
          phone: '13890123456',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/1a6d379e7317ff1057531b668a5e3502.jpg'
      },
      {
          name: '钱思琪',
          time: '前天 16:40',
          type: 'incoming',
          phone: '13901234567',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/9cc15f39e69ab8ede7f73cfe128151fe.jpg'
      },
      {
          name: '孙宇轩',
          time: '前天 14:25',
          type: 'outgoing',
          phone: '13612345678',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/cedf6b32f49f5c3e2ddb3e8f49beeda6.jpg'
      },
      {
          name: '周雅婷',
          time: '前天 10:15',
          type: 'incoming',
          phone: '13723456789',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/2c54a0f4b25c5a25176c8be9b8042fab.jpg'
      },
      {
          name: '刘子涵',
          time: '前天 09:30',
          type: 'outgoing',
          phone: '13834567890',
          avatar: 'https://ai-public.mastergo.com/ai/img_res/c08b03fbb5546e2dead70a5d0fa362c2.jpg'
      }
  ];
  const toggleCallPanel = () => {
      showCallPanel.value = !showCallPanel.value;
  };
  const toggleDialpad = (mode: 'dial' | 'transfer' | 'conference') => {
      if (dialpadMode.value === mode && showDialpad.value) {
          showDialpad.value = false;
          contentVisible.value = true;
      } else {
          dialpadMode.value = mode;
          showDialpad.value = true;
          contentVisible.value = false;
      }
  };
  const toggleContacts = () => {
      if (showContacts.value && contentVisible.value) {
          showContacts.value = false;
      } else {
          showContacts.value = true;
          showDialpad.value = false;
          contentVisible.value = true;
      }
  };
  const appendDialNumber = (key: string) => {
      dialNumber.value += key;
  };
  const handleVideo = () => {
      // 处理视频通话
  };
  const handleMute = () => {
      // 处理静音
  };
  const handleRecords = () => {
      // 处理通话记录
  };
  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 = (contact: any) => {
      showContacts.value = false;
      showCallPanel.value = true;
      currentCall.value = {
          name: contact.name,
          phone: contact.phone,
          avatar: contact.avatar,
          location: '浙江省杭州市'
      };
  };
  const handleTransfer = () => {
      // 处理转接
  };
  const handleConference = () => {
      // 处理会议
  };
  const handleHangup = () => {
      // 处理挂断
  };
  </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>