<template>
  <div class="layout-padding">
    <div class="!overflow-auto px-1">
      <Lcard style="height: calc(100vh - 96px); margin-bottom: 0px;">
        <div class="flex justify-between items-center">
          <Title left-line title="事件管理">
          </Title>
          <div>
            <el-button @click="() => showBatchImportModal = true" icon="Download">批量导入事件</el-button>
            <el-button @click="() => showAddEventModal = true" icon="Plus" type="primary">添加事件</el-button>
          </div>
        </div>
        <div style="margin: 20px 60px;">
          <el-radio-group v-model="eventTypeRadio">
            <el-radio-button label="1">计算中事件</el-radio-button>
            <el-radio-button label="2">暂停计算事件</el-radio-button>
            <el-radio-button label="3">未注册事件</el-radio-button>
          </el-radio-group>
          <div class="line" style="margin: 0 0 20px 0;"></div>
          <div class="flex search-box" style="margin-bottom: 20px;">
            <el-input placeholder="请输入事件名/事件标识符" style="width: 230px;"></el-input>
            <el-select placeholder="选择平台" v-model="selectLineChannel" clearable style="width: 140px;">
              <el-option label="Android" value="1"></el-option>
              <el-option label="IOS" value="2"></el-option>
              <el-option label="IPad" value="3"></el-option>
              <el-option label="Harmony" value="4"></el-option>
            </el-select>
            <el-select placeholder="近三十天事件上报数" v-model="selectLineChannel" clearable style="width: 140px;">
              <el-option label="有数据" value="1"></el-option>
              <el-option label="无数据" value="2"></el-option>
            </el-select>
            <el-select placeholder="选择应用" v-model="selectLineChannel" clearable style="width: 140px;">
              <el-option label="教育行业Demo" value="1"></el-option>
              <el-option label="游戏行业Demo" value="2"></el-option>
              <el-option label="通用行业Demo" value="3"></el-option>
            </el-select>
            <el-select placeholder="操作人" v-model="selectLineChannel" clearable style="width: 140px;">
              <el-option label="nina" value="1"></el-option>
              <el-option label="luoyu" value="2"></el-option>
              <el-option label="jcq" value="3"></el-option>
              <el-option label="lwh" value="4"></el-option>
            </el-select>
          </div>
          <el-table :height="500" :data="pagedTableRows" border>
            <el-table-column prop="eventName" label="事件名" min-width="100" />
            <el-table-column prop="eventIdentifier" label="事件标识符" min-width="140" />
            <el-table-column label="计算状态" min-width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="近30天事件上报数" min-width="100" align="center">
              <template #default="scope">
                <span v-if="scope.row.reportCount > 0">{{ scope.row.reportCount.toLocaleString() }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column label="上报平台" min-width="100">
              <template #default="scope">
                {{ getPlatformText(scope.row.platforms) }}
              </template>
            </el-table-column>
            <el-table-column label="应用" min-width="100">
              <template #default="scope">
                {{ getAppText(scope.row.apps) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="200" fixed="right">
              <template #default="scope">
                <el-button @click="eventEdit(scope.row)" type="primary" link>编辑</el-button>
                <el-button type="primary" link>详情</el-button>
                <el-button v-if="scope.row.status === '计算中'" type="primary" link>暂停</el-button>
                <el-button v-else-if="scope.row.status === '暂停计算'" type="primary" link>启用</el-button>
                <el-button v-else type="primary" link>注册</el-button>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end mt-3">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
              layout="total, prev, pager, next, sizes" :total="tableRows.length" :page-sizes="[5, 10, 20]" />
          </div>
        </div>
      </Lcard>
      <!-- 添加批量导入弹窗 -->
      <BatchImportModal v-model="showBatchImportModal" @import="handleBatchImport" />
      <!-- 添加事件弹窗 -->
      <AddEventModal v-model="showAddEventModal" @add="handleAddEvent" />
    </div>
  </div>
</template>

<script lang="ts" name="countMainTrend" setup>
// import { ref, onMounted, watch, computed, defineAsyncComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import * as echarts from 'echarts';
// 引入组件
const Lcard = defineAsyncComponent(() => import('/@/components/LYcom/Lcard/index.vue'));
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
const { t } = useI18n();
const eventTypeRadio = ref('1')

onMounted(() => {
  setTimeout(() => {
  }, 500);
});

const emit = defineEmits(['update:eventId'])

// 编辑事件
const eventEdit = (data: any) => {
  console.log(data);
  emit('update:eventId', data.id)
}

// 导入批量导入弹窗组件
const BatchImportModal = defineAsyncComponent(() => import('./BatchImportModal.vue'))

// 控制批量导入弹窗显示
const showBatchImportModal = ref(false)

// 处理批量导入
const handleBatchImport = (data: any) => {
  console.log('批量导入数据:', data)
  // 这里可以实现实际的导入逻辑
  // 例如发送请求到后端处理Excel文件
}

// 导入添加事件弹窗组件
const AddEventModal = defineAsyncComponent(() => import('./AddEventModal.vue'))

// 控制添加事件弹窗显示
const showAddEventModal = ref(false)

// 处理添加事件
const handleAddEvent = (data: any) => {
  console.log('添加事件数据:', data)
  // 这里可以实现实际的添加事件逻辑
  // 例如发送请求到后端创建新事件
}

const searchData = reactive({
  eventType: '1',
  channel: '',
  eventName: '',
  eventHas: '',
  appId: '',
  evnetUser: '',
})

// 表格相关数据
interface EventTableRow {
  id: string;
  eventName: string;
  eventIdentifier: string;
  status: string;
  reportCount: number;
  platforms: string[];
  apps: string[];
  operator: string;
}

// 表格相关（静态数据）
const currentPage = ref(1);
const pageSize = ref(10);

const tableRows = ref<EventTableRow[]>([
  {
    id: '1',
    eventName: '用户注册',
    eventIdentifier: 'user_register',
    status: '计算中',
    reportCount: 12560,
    platforms: ['Android', 'IOS'],
    apps: ['教育行业Demo'],
    operator: 'nina'
  },
  {
    id: '2',
    eventName: '用户登录',
    eventIdentifier: 'user_login',
    status: '计算中',
    reportCount: 45210,
    platforms: ['Android', 'IOS', 'Harmony'],
    apps: ['教育行业Demo', '游戏行业Demo'],
    operator: 'luoyu'
  },
  {
    id: '3',
    eventName: '商品浏览',
    eventIdentifier: 'product_view',
    status: '暂停计算',
    reportCount: 0,
    platforms: ['Android'],
    apps: ['游戏行业Demo'],
    operator: 'jcq'
  },
  {
    id: '4',
    eventName: '加入购物车',
    eventIdentifier: 'add_to_cart',
    status: '计算中',
    reportCount: 8650,
    platforms: ['Android', 'IOS'],
    apps: ['游戏行业Demo'],
    operator: 'lwh'
  },
  {
    id: '5',
    eventName: '完成支付',
    eventIdentifier: 'payment_complete',
    status: '计算中',
    reportCount: 3240,
    platforms: ['Android', 'IOS', 'Harmony'],
    apps: ['教育行业Demo', '通用行业Demo'],
    operator: 'nina'
  },
  {
    id: '6',
    eventName: '分享应用',
    eventIdentifier: 'share_app',
    status: '未注册',
    reportCount: 0,
    platforms: [],
    apps: [],
    operator: 'luoyu'
  },
  {
    id: '7',
    eventName: '查看个人资料',
    eventIdentifier: 'view_profile',
    status: '计算中',
    reportCount: 15680,
    platforms: ['Android', 'IOS'],
    apps: ['教育行业Demo', '游戏行业Demo', '通用行业Demo'],
    operator: 'jcq'
  },
  {
    id: '8',
    eventName: '搜索功能',
    eventIdentifier: 'search_function',
    status: '暂停计算',
    reportCount: 0,
    platforms: ['IOS'],
    apps: ['教育行业Demo'],
    operator: 'lwh'
  },
  {
    id: '9',
    eventName: '视频播放',
    eventIdentifier: 'video_play',
    status: '计算中',
    reportCount: 27890,
    platforms: ['Android', 'IOS'],
    apps: ['教育行业Demo'],
    operator: 'nina'
  },
  {
    id: '10',
    eventName: '收藏商品',
    eventIdentifier: 'favorite_product',
    status: '计算中',
    reportCount: 5620,
    platforms: ['Android', 'IOS', 'Harmony'],
    apps: ['游戏行业Demo', '通用行业Demo'],
    operator: 'luoyu'
  },
  {
    id: '11',
    eventName: '评论功能',
    eventIdentifier: 'comment_function',
    status: '未注册',
    reportCount: 0,
    platforms: [],
    apps: [],
    operator: 'jcq'
  },
  {
    id: '12',
    eventName: '消息推送点击',
    eventIdentifier: 'push_notification_click',
    status: '计算中',
    reportCount: 9850,
    platforms: ['Android', 'IOS'],
    apps: ['教育行业Demo', '游戏行业Demo'],
    operator: 'lwh'
  },
  {
    id: '13',
    eventName: '页面停留',
    eventIdentifier: 'page_stay',
    status: '计算中',
    reportCount: 31560,
    platforms: ['Android', 'Harmony'],
    apps: ['通用行业Demo'],
    operator: 'nina'
  },
  {
    id: '14',
    eventName: '应用启动',
    eventIdentifier: 'app_launch',
    status: '暂停计算',
    reportCount: 0,
    platforms: ['Android'],
    apps: ['教育行业Demo'],
    operator: 'luoyu'
  },
  {
    id: '15',
    eventName: '退出应用',
    eventIdentifier: 'app_exit',
    status: '未注册',
    reportCount: 0,
    platforms: [],
    apps: [],
    operator: 'jcq'
  }
]);

const pagedTableRows = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return tableRows.value.slice(startIndex, startIndex + pageSize.value);
});

// 获取平台显示文本
const getPlatformText = (platforms: string[]) => {
  if (platforms.length === 0) return '-';
  if (platforms.length > 2) return `${platforms[0]}等${platforms.length}个`;
  return platforms.join('、');
};

// 获取应用显示文本
const getAppText = (apps: string[]) => {
  if (apps.length === 0) return '-';
  if (apps.length > 2) return `${apps[0]}等${apps.length}个`;
  return apps.join('、');
};

// 状态标签样式
const getStatusType = (status: string) => {
  switch (status) {
    case '计算中':
      return 'success';
    case '暂停计算':
      return 'warning';
    case '未注册':
      return 'info';
    default:
      return 'info';
  }
};
</script>
<style lang="scss" scoped>
.search-box>div {
  margin-right: 20px;
}

.msg {
  height: 30px;
  background-color: #f4f5fa;
  line-height: 30px;
  font-size: 12px;
}

.link {
  color: #167af0;
  cursor: pointer;
}

.box1 {
  display: flex;
  margin-top: 30px;

  .card-box1,
  .card-box2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
  }

  .card-box1 {
    .info-card {
      width: 48%;
    }
  }

  .card-box2 {
    .info-card {
      width: 33%;
    }
  }
}

.line {
  margin: 60px -30px 30px;
  height: 1px;
  background-color: #E6E6E6;
}
</style>