<template>
  <div class="app-container">
    <el-table border :data="channels" v-loading="loading">
      <el-table-column prop="channelType" label="渠道编码" width="140"/>
      <el-table-column prop="displayName" label="渠道名称"/>
      <el-table-column prop="available" label="可用" width="80">
        <template slot-scope="s"><el-tag :type="s.row.available?'success':'info'" size="small">{{ s.row.available?'可用':'不可用' }}</el-tag></template>
      </el-table-column>
      <el-table-column prop="enabled" label="启用" width="80">
        <template slot-scope="s"><el-tag :type="s.row.enabled?'success':'danger'" size="small">{{ s.row.enabled?'已启用':'已禁用' }}</el-tag></template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getAvailableChannels } from '@/api/workflow/lobster'
const DISPLAY_NAMES = {
  WX: '微信客服', QW: '企微助手', IM: 'APP内IM', SMS: '短信', EMAIL: '邮件',
  TMALL: '天猫', JD: '京东', DOUYIN_DM: '抖音私信', DOUYIN_EC: '抖音电商',
  KUAISHOU_DM: '快手私信', XIAOHONGSHU_DM: '小红书', LINE: 'Line',
  TELEGRAM: 'Telegram', APP_IM: 'APP私信', WHATSAPP: 'WhatsApp'
}
export default {
  data() { return { channels: [], loading: false } },
  created() { this.load() },
  methods: {
    async load() {
      this.loading = true
      try {
        const res = await getAvailableChannels()
        const data = res.data || {}
        this.channels = Object.keys(data).map(k => ({
          channelType: k,
          displayName: DISPLAY_NAMES[k] || k,
          available: data[k].available,
          enabled: data[k].available
        }))
      } catch (e) { /* ignore */ }
      this.loading = false
    }
  }
}
</script>
