<!-- 每日菜谱 -->
<template>
  <div>
    <TablePro
      ref="tableRef"
      :request-api="reqApi"
      :search-form-options="searchFormOptions"
      :columns="columns"
      :isPageTable="true"
    >
      <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: [
            {
              companyName: "南头央厨",
              deptName: "南头升辉小学",
              type: "午餐",
              createTime: "2025-04-30",
              endTime: "2025-05-18",
              id: "1917456673534976001",
              Monday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Tuesday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Wednesday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Thursday: "",
              Friday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Saturday: "",
              Sunday: "",
            },

            {
              companyName: "南头央厨",
              deptName: "南头升辉小学",
              type: "午餐",
              createTime: "2025-04-30",
              endTime: "2025-05-18",
              id: "1917456673534976001",
              Monday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Tuesday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Wednesday: "",
              Thursday: "",
              Friday:
                "紫苏洋葱炒鸡/冬瓜炒肉片/红腰豆焖鸭/酸甜锅包肉/肉沫粉丝蒸水蛋/例汤",
              Saturday: "",
              Sunday: "",
            },
          ],
          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: "companyName",
      title: "所属项目",
      width: 200,
      render: ({ companyName }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
            {companyName}
          </NPerformantEllipsis>
        );
      },
    },
    {
      key: "deptName",
      title: "所属客户",
    },
    {
      key: "type",
      title: "餐别",
      render: ({ type }) => {
        return <NTag type="success">{type}</NTag>;
      },
    },
    {
      key: "createTime",
      title: "开始日期",
    },
    {
      key: "endTime",
      title: "结束日期",
    },
    {
      key: "Monday",
      title: "星期一",
      width: 100,
      render: ({ Monday }) => {
        return (
          <div>
            {Monday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
    {
      key: "Tuesday",
      title: "星期二",
      width: 100,
      render: ({ Tuesday }) => {
        return (
          <div>
            {Tuesday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
    {
      key: "Wednesday",
      title: "星期三",
      width: 100,
      render: ({ Wednesday }) => {
        return (
          <div>
            {Wednesday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
    {
      key: "Thursday",
      title: "星期四",
      width: 100,
      render: ({ Thursday }) => {
        return (
          <div>
            {Thursday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
    {
      key: "Friday",
      title: "星期五",
      width: 100,
      render: ({ Friday }) => {
        return (
          <div>
            {Friday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
    {
      key: "Saturday",
      title: "星期六",
      width: 100,
      render: ({ Saturday }) => {
        return (
          <div>
            {Saturday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
    {
      key: "Sunday",
      title: "星期日",
      width: 100,
      render: ({ Sunday }) => {
        return (
          <div>
            {Sunday.split("/").map(
              (item: any, index: PropertyKey | undefined) => (
                <NPerformantEllipsis style={{ maxWidth: "100px" }}>
                  {item}
                </NPerformantEllipsis>
              )
            )}
          </div>
        );
      },
    },
  ]);
</script>
<style scoped lang="scss"></style>
