<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput
          v-model="formData.tplName"
          placeholder="模板名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElSelect
          v-model="formData.lang"
          placeholder="前端/后端"
        >
          <ElOption
            label="前端"
            value="ts"/>
          <ElOption
            label="后端"
            value="java"/>
        </ElSelect>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="模板名称" prop="tplName"/>

      <ElTableColumn label="前端/后端" prop="lang">
        <template #default="scope">
          <span>{{ scope.row.lang === 'java' ? '后端' : '前端' }}</span>
        </template>
      </ElTableColumn>

      <ElTableColumn label="模板内容" prop="tpl">
        <template #default="{row}:{row:TplTypes.SearchTplResult}">
          <span>{{ (row.tpl != null && (row.tpl?.content?.length ?? 0) > 20) ? row.tpl!.content!.substring(0, 19) + '...' : row.tpl?.content }}</span>
        </template>
      </ElTableColumn>
    </template>
    <TplForm ref="tplForm" :research="research"/>
  </ATablePage>
</template>
<script lang="ts" setup>
import TplApi from '@/pages/sys/gen/tpl/tpl-api.ts'
import TplForm from '@/pages/sys/gen/tpl/TplForm.vue'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const tplFormIns = useTemplateRef<InstanceType<typeof TplForm>>('tplForm')
const tablePageProps = buildTablePageProps<TplTypes.SearchTplParam, TplTypes.SearchTplResult>({
  pageLayout: {
    enableHighForm: false,
  },
  searchForm: {
    defaultData: {
      orders: 'lang,tpl_name',
      tpl: {},
    },
    highForm: {
      contentWidth: 320,
    },
    simpleForm: {
      colCount: 2,
    },
    paging: TplApi.paging,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          tplFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          type: 'success',
          action({row}) {
            tplFormIns.value?.open(row)
          },
        },
        {
          icon: 'Delete',
          loading: false,
          type: 'danger',
          tooltip: '删除',
          confirm: {
            title: '是否删除当前数据',
          },
          action({row}) {
            return TplApi.del([ row.id! ])
              .then(() => {
                ElMessage.success('删除成功')
                return true
              })
          },
        },
      ],
    },
  },
})

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

</script>
