<template>
    <PagingTable url="/rcs-number" :where="where" ref="table">
        <template #filter>
            <ElButton :icon="Search" @click="table.refresh()"></ElButton>
            <ElSelect v-model="channel" placeholder="渠道" clearable value-key="id">
                <ElOption v-for="channel in channels" :key="channel.id" :label="channel.country" :value="channel" />
            </ElSelect>
            <ElButton :icon="Plus" @click="getNumber()">取号</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="mcc" label="MCC" />
        <ElTableColumn prop="mnc" label="MNC" />
        <ElTableColumn prop="country" label="国家" />
        <ElTableColumn prop="number" label="号码" />
        <ElTableColumn prop="message" label="消息" show-overflow-tooltip />
        <ElTableColumn prop="deviceId" label="设备Id" align="center" />
        <ElTableColumn prop="deviceName" label="设备编号" align="center" width="120" />
        <ElTableColumn prop="taskId" label="任务Id" align="center" width="80"/>
        <ElTableColumn label="状态" align="center" width="80">
            <template #default="{ row }">
                <ElTag v-if="row.status === 'pending'" type="info">等待</ElTag>
                <ElTag v-else-if="row.status === 'success'" type="success">成功</ElTag>
                <ElTag v-else-if="row.status === 'expired'" type="danger">过期</ElTag>
                <ElTag v-else-if="row.status === 'error'" type="danger">错误</ElTag>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn label="操作" align="center" width="120">
            <template #default="{}"></template>
        </ElTableColumn>
    </PagingTable>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus, Search } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import EnumSelect from '@/components/EnumSelect.vue'
import { UserRole } from '@/enums'
import { http } from '@/plugins/http'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useClipboard } from '@vueuse/core'

const where = computed(() => ({ country: channel.value?.country }))
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    roles: [{ required: true, message: '请选择角色', trigger: 'blur' }]
}
const channels = ref([])
const channel = ref(null)

async function getNumber() {
    await ElMessageBox.confirm('确定取号吗？')
    try {
        await http.put('/rcs-number', {
            channelId: channel.value?.id
        })
        ElMessage.success('取号成功')
        table.value.refresh()
    } catch (error) {
        console.error(error)
        ElMessage.error(error.message || '取号失败')
    }
}

onMounted(() => {
    http.post('/channel').then((res) => {
        channels.value = res.items
    })
})
</script>
