<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="searchHandler">
    <template #searchFormItem="{searchForm}">
      <ElFormItem label="规则名称">
        <ElInput v-model="searchForm.snname" clearable placeholder="请输入规则名称"/>
      </ElFormItem>
      <ElFormItem label="规则代码">
        <ElInput v-model="searchForm.sncode" clearable placeholder="请输入规则代码"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="规则名称" prop="snname" width="180"/>
      <ElTableColumn label="规则代码" prop="sncode" width="170"/>
      <ElTableColumn label="示例" prop="example" width="200"/>
      <ElTableColumn label="配置信息" prop="configDesc">
        <template #default="scope">
          <span v-if="Strings.isBlank(scope.row.configDesc)"/>
          <template v-else>
            <div v-for="(item,i) in  scope.row.configDesc.split('\n')" :key="scope.row.id+i">{{ item }}</div>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo" width="200"/>
    </template>
    <SnConfigForm ref="snConfigForm" @close="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import SnConfigApi from '@/pages/sys/sn-config/sn-config-api.ts'
import SnConfigForm from '@/pages/sys/sn-config/SnConfigForm.vue'
import Strings from '@/common/utils/strings.ts'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const snConfigFormIns = useTemplateRef<InstanceType<typeof SnConfigForm>>('snConfigForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')


function searchHandler(param: SnConfigTypes.SearchSnConfigParam) {
  return SnConfigApi.paging(param)
}

const actionColumn = reactive<ActionColumnType<SnConfigTypes.SnConfigDetail>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        snConfigFormIns.value?.open(row)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return SnConfigApi.del(row.id)
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      snConfigFormIns.value?.open()
    },
  },
]

function research() {
  formPageIns.value?.doSearch()
}


</script>
