<template>
    <PagingTable url="/channel" :where="where" ref="table">
        <template #filter>
            <ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="mcc" label="MCC" />
        <ElTableColumn prop="mnc" label="MNC" />
        <ElTableColumn prop="country" label="国家" />
        <ElTableColumn prop="operator" label="运营商" />
        <ElTableColumn prop="scope" label="IMSI范围" />
        <ElTableColumn prop="platform" label="平台" />
        <ElTableColumn prop="remark" label="备注" />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn label="开关" align="center" width="100">
            <template #default="{ row }">
                <ElSwitch v-model="row.switch" @change="updateSwitch(row)" />
            </template>
        </ElTableColumn>
        <ElTableColumn label="操作" align="center" width="200">
            <template #default="{ row }">
                <ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>
    <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
        <ElFormItem prop="mcc" label="MCC">
            <ElInput v-model="model.mcc" placeholder="请输入MCC" />
        </ElFormItem>
        <ElFormItem prop="mnc" label="MNC">
            <ElInput v-model="model.mnc" placeholder="请输入MNC" />
        </ElFormItem>
        <ElFormItem prop="country" label="国家">
            <ElInput v-model="model.country" placeholder="请输入国家" />
        </ElFormItem>
        <ElFormItem prop="operator" label="运营商">
            <ElInput v-model="model.operator" placeholder="请输入运营商" />
        </ElFormItem>
        <ElFormItem prop="scope" label="IMSI范围">
            <ElInput v-model="model.scope" placeholder="IMSI范围" type="textarea" />
        </ElFormItem>
        <ElFormItem prop="platform" label="平台">
            <ElSelect v-model="model.platform" placeholder="请选择平台">
                <ElOption v-for="item in platformList" :key="item.value" :label="item.value" :value="item.value" />
            </ElSelect>
        </ElFormItem>
        <ElFormItem prop="remark" label="备注">
            <ElInput v-model="model.remark" placeholder="请输入备注" />
        </ElFormItem>
    </EditDialog>
</template>
<script setup>
import { ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus, Refresh } 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 = ref({})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const rules = {
    mcc: [{ required: true, message: '请输入MCC', trigger: 'blur' }],
    mnc: [{ required: true, message: '请输入MNC', trigger: 'blur' }],
    country: [{ required: true, message: '请输入国家码', trigger: 'blur' }],
    platform: [{ required: true, message: '请输入平台名称', trigger: 'blur' }]
}
const platformList = [
    {
        value: 'mwze167',
    },
    {
        value: 'durian',
    },
]

const { showEditDialog, onEdit } = setupEditDialog(model)

async function submit() {
    if (model.value.scope) {
        model.value.scope = model.value.scope.split('\n').map(Number)
    } else {
        model.value.scope = []
    }
    await http.put('/channel', model.value)
    ElMessage.success('保存成功')
}

function del(row) {
    ElMessageBox.confirm('确定删除吗？', '提示', {
        type: 'warning'
    }).then(() => {
        http.delete(`/channel/${row.id}`).then(() => {
            ElMessage.success('删除成功')
            table.value.refresh()
        })
    })
}

function updateSwitch(row) {
    http.get(`/channel/updateSwitch/${row.id}`).then(() => {
        table.value.refresh()
    })
}

const selectedRow = ref(null)
const showDetailDialog = ref(false)
const phoneTable = ref(null)

const phoneModel = ref({})
const phoneRules = {
    number: [{ required: true, message: '请输入号码', trigger: 'blur' }]
}
const { showEditDialog: showPhoneEditDialog, onEdit: onPhoneEdit } = setupEditDialog(phoneModel)

async function submitPhone() {
    phoneModel.value.listId = selectedRow.value.id
    await http.put('/phone-list/phone', phoneModel.value)
    ElMessage.success('保存成功')
}

function delPhone(row) {
    ElMessageBox.confirm('确定删除吗？', '提示', {
        type: 'warning'
    }).then(() => {
        http.delete(`/phone-list/phone/${row.id}`).then(() => {
            ElMessage.success('删除成功')
            phoneTable.value.refresh()
        })
    })
}

function importList() {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = '.txt'
    input.onchange = async () => {
        const file = input.files[0]
        const formData = new FormData()
        formData.append('file', file)
        await http.post(`/phone-list/${selectedRow.value.id}/import`, formData)
        ElMessage.success('导入成功')
        phoneTable.value.refresh()
    }
    input.click()
}
</script>
