<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.snname" clearable placeholder="请输入规则名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="formData.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"/>
  </ATablePage>
</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 ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'
import { descConfig } from '@/pages/sys/sn-config/sn-config-util.ts'

const snConfigFormIns = useTemplateRef<InstanceType<typeof SnConfigForm>>('snConfigForm')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

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

const tablePageProps = buildTablePageProps<SnConfigTypes.SearchSnConfigParam, SnConfigTypes.SnConfigDetail>({
  pageLayout: {
    enableHighForm: false,
  },
  searchForm: {
    paging(param) {
      return SnConfigApi.paging(param)
        .then((res) => {
          res.data.records = res.data.records.map((it) => ({
            key: it.id,
            ...it,
            configDesc: descConfig(it.config).join('\n'),
          }))
          return res
        })
    },
    simpleForm: {
      colCount: 2,
    },
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          snConfigFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          type: 'success',
          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
              })
          },
        },
      ],
    },
  },
})


</script>
