<template>
  <PageCard>
    <template #toolbar-left>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索渠道用户ID / 渠道用户名 / 联系人姓名"
        clearable
        style="width: 320px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </template>

    <el-table :data="pagedIdentities" class="sino-table">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="channelType" label="渠道类型" width="110">
        <template #default="{ row }">
          {{ channelLabel(row.channelType) }}
        </template>
      </el-table-column>
      <el-table-column prop="channelUserId" label="渠道用户ID" show-overflow-tooltip />
      <el-table-column prop="channelUserName" label="渠道用户名" show-overflow-tooltip />
      <el-table-column prop="subjectName" label="所属主体" show-overflow-tooltip />
      <el-table-column prop="personName" label="关联联系人" show-overflow-tooltip />
      <el-table-column prop="personType" label="人员类型" width="110">
        <template #default="{ row }">
          {{ formatPersonType(row.personType) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <template #pagination>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="filteredIdentities.length"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        background
      />
    </template>
  </PageCard>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { listChannelIdentities } from '@/api/channel'
import PageCard from '@/components/PageCard.vue'

const identities = ref<any[]>([])
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

const filteredIdentities = computed(() => {
  const kw = searchKeyword.value.trim().toLowerCase()
  if (!kw) return identities.value
  return identities.value.filter((item) =>
    [item.channelUserId, item.channelUserName, item.personName].some((v) =>
      String(v || '').toLowerCase().includes(kw)
    )
  )
})

const pagedIdentities = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredIdentities.value.slice(start, start + pageSize.value)
})

watch([searchKeyword], () => {
  currentPage.value = 1
})

function channelLabel(type: string | undefined) {
  const map: Record<string, string> = {
    wecom: '企微',
    wechat_personal: '个微',
    dingtalk: '钉钉',
    feishu: '飞书',
    ivr: 'IVR',
  }
  return map[type || ''] || type || '-'
}

function formatPersonType(type: number | undefined) {
  if (type === 3) return '客户'
  if (type == null) return '-'
  return '内部'
}

async function loadIdentities() {
  try {
    const res: any = await listChannelIdentities({ keyword: searchKeyword.value.trim() })
    identities.value = res.data || []
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}

onMounted(loadIdentities)
</script>
