<template>
  <div class="layout-padding">
    <div class="!overflow-auto px-1">
      <Lcard style=" margin-bottom: 0px;">
        <div class="flex justify-start items-center">
          <el-icon @click="back" class="ml-1" style="cursor: pointer; color: #333333; margin-right: 10px">
            <ArrowLeftBold />
          </el-icon>
          <Title title="编辑事件详情">
          </Title>
        </div>
        <div style="margin: 20px 60px;">
          <!-- 添加事件详情展示区域 -->
          <div class="event-detail-card">
            <!-- <div class="event-detail-header">
              <h3>事件基本信息</h3>
            </div> -->
            <div class="event-detail-content">
              <div class="detail-row">
                <div class="detail-item">
                  <span class="detail-label">事件名称：</span>
                  <span class="detail-value">用户注册</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">事件标识符：</span>
                  <span class="detail-value">user_register</span>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-item">
                  <span class="detail-label">计算状态：</span>
                  <span class="detail-value">
                    <el-tag type="success">计算中</el-tag>
                  </span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">近三十天上报数：</span>
                  <span class="detail-value">12,560</span>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-item">
                  <span class="detail-label">上报平台：</span>
                  <span class="detail-value">Android、IOS</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">应用：</span>
                  <span class="detail-value">教育行业Demo</span>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-item">
                  <span class="detail-label">埋点触发时机：</span>
                  <span class="detail-value">用户完成注册流程时触发</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">操作人：</span>
                  <span class="detail-value">nina</span>
                </div>
              </div>
            </div>
          </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-group>
          <div class="line" style="margin: 0 0 20px 0;"></div>
          <div class="flex search-box" style="margin-bottom: 20px;">
            <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>
            <el-input placeholder="请输入事件名/事件标识符" style="width: 230px;"></el-input>
            <el-button @click="handleAddProperty" style="margin-left: auto;" type="primary">新增属性</el-button>
            <el-button>批量停止计算</el-button>
          </div>
          <el-table :height="700" :data="pagedTableRows" border>
            <el-table-column prop="propertyName" label="属性名称" min-width="120" />
            <el-table-column prop="propertyIdentifier" label="属性标识符" min-width="140" />
            <el-table-column label="属性类型" min-width="100">
              <template #default="scope">
                <el-tag :type="getPropertyType(scope.row.propertyType)">{{ getPropertyTypeName(scope.row.propertyType)
                }}</el-tag>
              </template>
            </el-table-column>
            <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 prop="remark" label="属性备注" min-width="120" show-overflow-tooltip />
            <el-table-column label="应用" min-width="120">
              <template #default="scope">
                {{ getAppText(scope.row.apps) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="160" fixed="right">
              <template #default="scope">
                <el-button @click="handleEditProperty(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 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>
      <EventPropEditModal v-model="showPropertyModal" :is-edit="isEditProperty" :data="currentPropertyData"
        @submit="handleSubmitProperty" />
    </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 EventPropEditModal = defineAsyncComponent(() => import('./EventPropEditModal.vue'))
const { t } = useI18n();
const eventTypeRadio = ref('1')

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

// 编辑属性相关
const showPropertyModal = ref(false)
const isEditProperty = ref(false)
const currentPropertyData = ref<any>(null)

// 在 script 部分添加
const handleAddProperty = () => {
  isEditProperty.value = false
  currentPropertyData.value = null
  showPropertyModal.value = true
}

const handleEditProperty = (data: any) => {
  isEditProperty.value = true
  currentPropertyData.value = data
  showPropertyModal.value = true
}

const handleSubmitProperty = (data: any) => {
  console.log('提交属性数据:', data)
  // 这里可以实现实际的新增或编辑逻辑
  // 例如发送请求到后端
}

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

const back = () => {
  emit('update:eventId', null)
}

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

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

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


// 修改表格数据结构
interface EventTableRow {
  id: string;
  propertyName: string; // 属性名称
  propertyIdentifier: string; // 属性标识符
  propertyType: string; // 属性类型
  status: string; // 计算状态
  remark: string; // 属性备注
  apps: string[]; // 应用
}

// 更新表格静态数据
const tableRows = ref<EventTableRow[]>([
  {
    id: '1',
    propertyName: '用户ID',
    propertyIdentifier: 'user_id',
    propertyType: 'string',
    status: '计算中',
    remark: '用户的唯一标识符',
    apps: ['教育行业Demo', '游戏行业Demo']
  },
  {
    id: '2',
    propertyName: '访问时长',
    propertyIdentifier: 'visit_duration',
    propertyType: 'number',
    status: '计算中',
    remark: '用户单次访问的时长',
    apps: ['教育行业Demo']
  },
  {
    id: '3',
    propertyName: '设备型号',
    propertyIdentifier: 'device_model',
    propertyType: 'string',
    status: '暂停计算',
    remark: '用户使用的设备型号',
    apps: ['游戏行业Demo', '通用行业Demo']
  },
  {
    id: '4',
    propertyName: '页面路径',
    propertyIdentifier: 'page_path',
    propertyType: 'string',
    status: '计算中',
    remark: '用户访问的页面路径',
    apps: ['教育行业Demo', '游戏行业Demo', '通用行业Demo']
  },
  {
    id: '5',
    propertyName: '点击次数',
    propertyIdentifier: 'click_count',
    propertyType: 'number',
    status: '计算中',
    remark: '页面元素被点击的次数',
    apps: ['游戏行业Demo']
  },
  {
    id: '6',
    propertyName: '会话ID',
    propertyIdentifier: 'session_id',
    propertyType: 'string',
    status: '未注册',
    remark: '用户会话的唯一标识',
    apps: ['通用行业Demo']
  },
  {
    id: '7',
    propertyName: '地理位置',
    propertyIdentifier: 'geo_location',
    propertyType: 'string',
    status: '计算中',
    remark: '用户的地理位置信息',
    apps: ['教育行业Demo']
  },
  {
    id: '8',
    propertyName: '购买金额',
    propertyIdentifier: 'purchase_amount',
    propertyType: 'number',
    status: '计算中',
    remark: '用户购买商品的金额',
    apps: ['游戏行业Demo', '通用行业Demo']
  },
  {
    id: '9',
    propertyName: '分享平台',
    propertyIdentifier: 'share_platform',
    propertyType: 'string',
    status: '暂停计算',
    remark: '用户分享到的平台',
    apps: ['教育行业Demo']
  },
  {
    id: '10',
    propertyName: '搜索关键词',
    propertyIdentifier: 'search_keyword',
    propertyType: 'string',
    status: '计算中',
    remark: '用户搜索时使用的关键词',
    apps: ['游戏行业Demo', '通用行业Demo']
  },
  {
    id: '11',
    propertyName: '错误代码',
    propertyIdentifier: 'error_code',
    propertyType: 'number',
    status: '未注册',
    remark: '系统错误代码',
    apps: ['通用行业Demo']
  },
  {
    id: '12',
    propertyName: '网络类型',
    propertyIdentifier: 'network_type',
    propertyType: 'string',
    status: '计算中',
    remark: '用户当前的网络连接类型',
    apps: ['教育行业Demo', '游戏行业Demo']
  },
  {
    id: '13',
    propertyName: '用户年龄',
    propertyIdentifier: 'user_age',
    propertyType: 'number',
    status: '计算中',
    remark: '用户的年龄信息',
    apps: ['教育行业Demo']
  },
  {
    id: '14',
    propertyName: '操作系统',
    propertyIdentifier: 'os_version',
    propertyType: 'string',
    status: '暂停计算',
    remark: '设备的操作系统版本',
    apps: ['游戏行业Demo', '通用行业Demo']
  },
  {
    id: '15',
    propertyName: '页面停留时间',
    propertyIdentifier: 'page_stay_time',
    propertyType: 'number',
    status: '计算中',
    remark: '用户在页面停留的时间',
    apps: ['教育行业Demo', '游戏行业Demo', '通用行业Demo']
  }
]);

// 获取属性类型标签样式
const getPropertyType = (type: string) => {
  switch (type) {
    case 'string':
      return 'primary';
    case 'number':
      return 'success';
    default:
      return 'info';
  }
};

// 获取属性类型名称
const getPropertyTypeName = (type: string) => {
  switch (type) {
    case 'string':
      return '字符串';
    case 'number':
      return '数值型';
    default:
      return type;
  }
};

// 获取应用显示文本（复用原来的方法）
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;
}

/* 添加事件详情样式 */
.event-detail-card {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 20px;

  .event-detail-header {
    padding: 12px 20px;
    border-bottom: 1px solid #e4e7ed;
    background-color: #f5f7fa;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .event-detail-content {
    padding: 20px;

    .detail-row {
      display: flex;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .detail-item {
      flex: 1;
      display: flex;

      .detail-label {
        width: 120px;
        font-size: 14px;
        color: #606266;
        text-align: right;
        margin-right: 12px;
        flex-shrink: 0;
      }

      .detail-value {
        flex: 1;
        font-size: 14px;
        color: #303133;

        :deep(.el-tag) {
          margin-right: 0;
        }
      }
    }
  }
}

/* 响应式处理 */
@media (max-width: 768px) {
  .event-detail-card {
    .event-detail-content {
      .detail-row {
        flex-direction: column;
        margin-bottom: 12px;
      }

      .detail-item {
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        .detail-label {
          width: auto;
          text-align: left;
          margin-right: 8px;
        }
      }
    }
  }
}

.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>