<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'

const CRUD: ICRUD = {
  create(data) {
    return new Promise(resolve => console.log(data))
  },
  update(data) {
    return new Promise(resolve => console.log(data))
  },
  getList() {
    return new Promise(resolve => {
      resolve({
        list: [
          {
            id: 1,
            name: '名称',
            content: '内容',
            type: '通告',
            attachment: '',
            status: '已读',
            publisher: '超管'
          },
          {
            id: 2,
            name: '名称',
            content: '内容',
            type: '通告',
            attachment: '',
            status: '已读',
            publisher: '超管'
          }
        ],
        total: 2
      })
    })
  },
  delete(data) {
    return new Promise(resolve => console.log(data))
  },
  deleteBatch(data) {
    return new Promise(resolve => console.log(data))
  }
}

const formConfig = reactive<BasicForm>({
  span: 12,
  formItems: [
    {
      label: '消息名称',
      value: '',
      name: 'name',
      type: 'input',
      search: true
    },
    {
      label: '消息内容',
      value: '',
      name: 'loginName',
      type: 'input'
    },
    {
      label: '消息类型',
      value: '',
      name: 'password',
      type: 'input',
      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    },
    {
      label: '启用',
      value: '1',
      name: 'loginFlag',
      type: 'switch',
      props: {
        'active-value': '1',
        'inactive-value': '0'
      }
    }
  ]
})

const handleCreate = () => {
  console.log('1')
}
const handleEdit = (row: any) => {
  console.log(row)
}
</script>

<template>
  <pro-table
    :crud="CRUD"
    :formConfig="formConfig"
    :toolbarConfig="{ custom: true }"
    @click-create="handleCreate"
    @click-edit="handleEdit"
  >
    <vxe-column field="name" title="消息名称"></vxe-column>
    <vxe-column field="content" title="消息内容"></vxe-column>
    <vxe-column field="type" title="消息类型"></vxe-column>
    <vxe-column field="attachment" title="附件"></vxe-column>
    <vxe-column field="status" title="查阅状态">
      <template #default="{ row }">
        <el-tag class="ml-2" type="success">{{ row.status }}</el-tag>
      </template>
    </vxe-column>
    <vxe-column field="publisher" title="发布者"></vxe-column>
  </pro-table>
</template>

<style lang="scss" scoped></style>
