<template>
  <div class="message-config">
    <el-card class="!border-none" shadow="never" v-loading="isLoading">
      <div class="wd-card-header">
        <el-button v-perms="['message.smsConfig/save']" type="primary" icon="Plus" @click="handleAdd">
          新增配置
        </el-button>
        <right-toolbar :search="false" v-model:columns="columns" @refresh="getLists" />
      </div>
      <el-table size="large" :data="tableData">
        <el-table-column
          prop="gateway"
          label="网关标识"
          min-width="120"
          align="center"
          v-if="columns.gateway.visible"
        />
        <el-table-column
          prop="gateway_name"
          label="网关名称"
          min-width="150"
          align="center"
          v-if="columns.gateway_name.visible"
        />
        <el-table-column prop="status" label="状态" min-width="90" align="center" v-if="columns.status.visible">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'info'">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center" fixed="right" v-if="columns.operation.visible">
          <template #default="{ row }">
            <el-button type="primary" link v-perms="['message.smsConfig/save']" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="warning" link v-perms="['message.smsConfig/switch']" @click="handleSwitch(row)">
              启用
            </el-button>
            <el-button type="success" link v-perms="['message.smsConfig/test']" @click="handleTest(row)">
              测试
            </el-button>
            <el-button type="danger" link v-perms="['message.smsConfig/delete']" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <edit-config ref="editRef" @success="getLists" />
  </div>
</template>

<script setup lang="ts" name="MessageConfig">
import { configList, configSwitch, configTest, configDelete } from '@/api/message/config'
import EditConfig from './edit.vue'

// 组件参数
const editRef = shallowRef<InstanceType<typeof EditConfig>>()
const isLoading = ref(false)
const tableData = ref<any[]>([])
const columns = ref({
  gateway: { label: '网关标识', visible: true },
  gateway_name: { label: '网关名称', visible: true },
  status: { label: '状态', visible: true },
  operation: { label: '操作', visible: true }
})

// 获取列表
const getLists = async () => {
  isLoading.value = true
  configList()
    .then((res) => {
      tableData.value = res || []
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 新增
const handleAdd = async () => {
  editRef.value?.open('add')
  editRef.value?.setFormData()
}
// 编辑
const handleEdit = async (row: any) => {
  editRef.value?.open('edit')
  editRef.value?.setFormData(row.gateway)
}
// 切换状态
const handleSwitch = (row: any) => {
  if (row.status === 1) {
    ElMessage.info('当前网关已启用')
    return
  }
  ElMessageBox.confirm(`确认启用网关 ${row.gateway_name} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      configSwitch({ gateway: row.gateway }).then(() => {
        ElMessage.success('切换成功')
        getLists()
      })
    })
    .catch(() => {})
}
// 测试发送
const handleTest = (row: any) => {
  ElMessageBox.prompt('请输入测试手机号', '测试发送', {
    confirmButtonText: '发送',
    cancelButtonText: '取消',
    inputPattern: /^1[3-9]\d{9}$/,
    inputErrorMessage: '手机号格式不正确'
  })
    .then(async ({ value }) => {
      configTest({ gateway: row.gateway, test_mobile: value }).then(() => {
        ElMessage.success('发送成功')
      })
    })
    .catch(() => {})
}
// 删除网关
const handleDelete = (row: any) => {
  ElMessageBox.confirm(`确认删除网关 ${row.gateway_name} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      configDelete({ gateway: row.gateway }).then(() => {
        ElMessage.success('删除成功')
        getLists()
      })
    })
    .catch(() => {})
}

onMounted(() => {
  getLists()
})
</script>
