<!-- 食品留样 -->
<template>
  <div>
    <TablePro
      ref="tableRef"
      :request-api="reqApi"
      :search-form-options="searchFormOptions"
      :columns="columns"
      :isPageTable="true"
      :single-line="false"
    >
      <template #headerExtra>
        <n-button
          strong
          secondary
          type="primary"
        >
          添加
        </n-button>
        <!-- <n-button style="margin-left: 10px">清空</n-button>
        <n-button style="margin-left: 10px">打印</n-button> -->
      </template>
    </TablePro>
  </div>
</template>
<script setup lang="tsx">
  import {
    TablePro,
    type TableProProps,
    FormPro,
    type FormItemOptions,
    type TableProInst,
    Icon,
  } from "@/components";
  import { NPerformantEllipsis, NPopconfirm, NTag } from "naive-ui";
  const tableRef = useTemplateRef<TableProInst>("tableRef");
  const reqApi: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: [
            {
              sampleNumber: "LYG00008",
              name: "肉沫水蒸蛋",
              date: "2025-05-08",
              type: "午餐",
              remark: "午餐食品留样",
              createTime: "2025-05-07",
              updateTime: "2025-05-07 13:20:42",
            },

            {
              sampleNumber: "LYG00008",
              name: "蒜条炒肉丝",
              date: "2025-05-08",
              type: "午餐",
              remark: "午餐食品留样",
              createTime: "2025-05-07",
              updateTime: "2025-05-07 13:20:42",
            },
          ],
          size: "10",
          total: "12",
        },
        message: "操作成功！",
      });
    });
  };
  type TableType = TableProProps<any, any>;
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    name: {
      type: "input",
      label: "商品名称",
    },
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "sampleNumber",
      title: "留样柜",
    },
    {
      key: "name",
      title: "菜名",
      width: 200,
      render: ({ name }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
            {name}
          </NPerformantEllipsis>
        );
      },
    },
    {
      key: "date",
      title: "日期",
    },
    {
      key: "type",
      title: "餐别",
      render: ({ type }) => {
        return <NTag type="success">{type}</NTag>;
      },
    },
    {
      key: "remark",
      title: "描述",
      width: 200,
      render: ({ remark }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
            {remark}
          </NPerformantEllipsis>
        );
      },
    },
    {
      key: "createTime",
      title: "创建时间",
    },
    {
      key: "updateTime",
      title: "更新时间",
    },
    {
      key: "",
      title: "操作",
      width: 200,
      render: (value) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type="warning"
              onClick={() => {}}
            >
              修改
            </n-button>

            <NPopconfirm
              onPositiveClick={async () => {}}
              onNegativeClick={() => {}}
              showIcon={false}
            >
              {{
                trigger: () => (
                  <n-button
                    strong
                    secondary
                    style={{ marginLeft: "10px" }}
                    type="error"
                  >
                    删除
                  </n-button>
                ),
                default: () => "确认要除么？",
              }}
            </NPopconfirm>
          </div>
        );
      },
    },
  ]);
</script>
<style scoped lang="scss"></style>
