<!--
 * @Author: 半生瓜 1515706227@qq.com
 * @Date: 2024-04-21 17:20:21
 * @LastEditors: 半生瓜 1515706227@qq.com
 * @LastEditTime: 2024-05-07 10:37:03
 * @FilePath: \vue-element-plus-admin-mini\src\views\Level\Menu2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { ElInput } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import { reactive } from 'vue'

const { t } = useI18n()

const columns = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index'
  },
  {
    field: 'mubannane',
    label: '模板名称'
  },
  {
    field: 'fabutime',
    label: '发布时间'
  },
  {
    field: 'action',
    label: t('tableDemo.action'),
    slots: {
      default: (data) => {
        return (
          <>
            <ElButton type="primary" onClick={() => actionFn(data)}>
              {t('tableDemo.action')}
            </ElButton>
            <ElButton type="primary" onClick={() => actionFn(data)}>
              {t('tableDemo.action')}
            </ElButton>
          </>
        )
      }
    }
  }
])

const data = reactive([
  {
    title: 'mubannane',
    author: '111'
  },
  {
    title: 'fabutime',
    author: '1111'
  }
])

const actionFn = (data: TableSlotDefault) => {
  console.log(data)
}

defineOptions({
  name: 'Menu2'
})

const text = ref('')
</script>

<template>
  <div>
    {{ t('levelDemo.menu') }}：
    <el-input
      v-model="text"
      style="width: 200px; height: 43px; margin: 7px"
      placeholder="请输入模板名称"
    />
    <ElButton type="primary" size="large" :icon="Search">搜索</ElButton>
    <ElButton type="success" size="large" :icon="Edit">添加</ElButton>
    <ElButton type="danger" size="large" :icon="Delete">删除</ElButton>
  </div>

  <Table :columns="columns" align="center" headerAlign="center" :data="data" />
</template>
