<template>
  <div class="sms-template">
    <el-card class="!border-none mb-4" shadow="never" v-if="showSearch">
      <el-form class="mb-[-16px]" ref="queryFormRef" :model="queryParams" inline>
        <el-form-item class="w-[260px]" label="模板名称" prop="template_name">
          <el-input
            v-model="queryParams.template_name"
            placeholder="请输入模板名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item class="w-[260px]" label="模板键名" prop="template_key">
          <el-input
            v-model="queryParams.template_key"
            placeholder="请输入模板键名"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" shadow="never" v-loading="isLoading">
      <div class="wd-card-header">
        <el-button v-perms="['message.smsTemplate/create']" type="primary" icon="Plus" @click="handleAdd">
          新增模板
        </el-button>
        <el-button
          v-perms="['message.smsTemplate/update']"
          type="warning"
          icon="Edit"
          :disabled="multipleSelection.length != 1"
          @click="handleEdit()"
        >
          修改
        </el-button>
        <el-button
          v-perms="['message.smsTemplate/delete']"
          type="danger"
          icon="Delete"
          :disabled="multipleSelection.length == 0"
          @click="handleDelete()"
        >
          删除
        </el-button>
        <right-toolbar v-model:showSearch="showSearch" v-model:columns="columns" @refresh="getLists" />
      </div>
      <el-table size="large" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="ID" width="80" align="center" v-if="columns.id.visible" />
        <el-table-column
          prop="template_name"
          label="模板名称"
          min-width="160"
          align="center"
          v-if="columns.template_name.visible"
        />
        <el-table-column
          prop="template_key"
          label="模板键名"
          min-width="200"
          align="center"
          v-if="columns.template_key.visible"
        />
        <el-table-column
          prop="template_value"
          label="模板值"
          min-width="200"
          align="center"
          v-if="columns.template_value.visible"
        />
        <el-table-column
          prop="create_time"
          label="创建时间"
          min-width="160"
          align="center"
          v-if="columns.create_time.visible"
        />
        <el-table-column label="操作" width="120" align="center" fixed="right" v-if="columns.operation.visible">
          <template #default="{ row }">
            <el-button type="primary" link v-perms="['message.smsTemplate/update']" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" link v-perms="['message.smsTemplate/delete']" @click="handleDelete(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex mt-4 justify-end">
        <Pagination v-model="queryParams" :total="total" @change="getLists" />
      </div>
    </el-card>
    <edit-template ref="editRef" @success="getLists" />
  </div>
</template>

<script setup lang="ts" name="MessageTemplate">
import type { FormInstance } from 'element-plus'
import { templateList, templateDelete } from '@/api/message/template'
import EditTemplate from './edit.vue'

// 组件参数
const queryFormRef = shallowRef<FormInstance>()
const editRef = shallowRef<InstanceType<typeof EditTemplate>>()
const queryParams = reactive({
  page: 1,
  limit: 10,
  template_name: '',
  template_key: ''
})
const total = ref(0)
const multipleSelection = ref<any[]>([])
const isLoading = ref(false)
const tableData = ref<any[]>([])
const showSearch = ref(true)
const columns = ref({
  id: { label: 'ID', visible: true },
  template_name: { label: '模板名称', visible: true },
  template_key: { label: '模板键名', visible: true },
  template_value: { label: '模板值', visible: true },
  create_time: { label: '创建时间', visible: true },
  operation: { label: '操作', visible: true }
})

// 获取列表
const getLists = async () => {
  isLoading.value = true
  templateList(queryParams)
    .then((res) => {
      tableData.value = res.data || []
      total.value = res.total || 0
      isLoading.value = false
    })
    .catch(() => {
      isLoading.value = false
    })
}
// 搜索
const handleQuery = () => {
  queryParams.page = 1
  getLists()
}
// 重置
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}
// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = selection
}
// 新增
const handleAdd = () => {
  editRef.value?.open('add')
  editRef.value?.setFormData()
}
// 修改
const handleEdit = (row?: any) => {
  editRef.value?.open('edit')
  editRef.value?.setFormData(row ? row : multipleSelection.value[0])
}
// 删除
const handleDelete = (id?: number) => {
  const ids = id || multipleSelection.value.map((item) => item.id)
  ElMessageBox.confirm(`是否确认删除模板ID为 ${ids} 的数据项吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await templateDelete({ id: ids })
      ElMessage.success('删除成功')
      getLists()
    })
    .catch(() => {})
}

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