<!-- 食安教育 -->
<template>
  <div>
    <n-card style="margin-bottom: 50px">
      <n-tabs
        type="line"
        animated
        default-value="食堂电子资料柜"
      >
        <n-tab-pane
          name="食品安全教育资料共享"
          tab="食品安全教育资料共享"
        >
          <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>
            </template>
          </TablePro>
        </n-tab-pane>
        <n-tab-pane
          name="食堂电子资料柜"
          tab="食堂电子资料柜"
        >
          <n-card>
            <n-tabs
              type="line"
              animated
              default-value="健康体检信息"
            >
              <!-- 基本信息 -->
              <!-- <n-tab-pane
                name="基本信息"
                tab="基本信息"
              >
                基本信息
              </n-tab-pane> -->
              <!-- 证件资料信息 -->
              <!-- <n-tab-pane
                name="证件资料信息"
                tab="证件资料信息"
              >
                证件资料信息
              </n-tab-pane> -->
              <!-- 工作人员信息 -->
              <!-- <n-tab-pane
                name="工作人员信息"
                tab="工作人员信息"
              >
                工作人员信息
              </n-tab-pane> -->
              <!-- 健康体检信息 -->
              <n-tab-pane
                name="健康体检信息"
                tab="健康体检信息"
              >
                <TablePro
                  :request-api="reqApi_8"
                  :columns="columns_8"
                  :isPageTable="true"
                  :single-line="false"
                >
                  <template #headerExtra>
                    <n-button
                      strong
                      secondary
                      type="primary"
                    >
                      添加
                    </n-button>
                  </template>
                </TablePro>
              </n-tab-pane>
              <!-- 管理制图信息 -->
              <!-- <n-tab-pane
                name="管理制图信息"
                tab="管理制图信息"
              >
                管理制图信息
              </n-tab-pane> -->
              <!-- 食谱信息 -->
              <!-- <n-tab-pane
                name="食谱信息"
                tab="食谱信息"
              >
                食谱信息
              </n-tab-pane> -->
              <!-- 采购供应链信息 -->
              <n-tab-pane
                name="采购供应链信息"
                tab="采购供应链信息"
              >
                <TablePro
                  :request-api="reqApi_9"
                  :columns="columns_9"
                  :isPageTable="true"
                  :single-line="false"
                >
                  <template #headerExtra>
                    <n-button
                      strong
                      secondary
                      type="primary"
                    >
                      添加
                    </n-button>
                  </template>
                </TablePro>
              </n-tab-pane>
              <!-- 台账信息 -->
              <n-tab-pane
                name="台账信息"
                tab="台账信息"
              >
                <TablePro
                  :request-api="reqApi_10"
                  :columns="columns_10"
                  :isPageTable="true"
                  :single-line="false"
                >
                  <template #headerExtra>
                    <n-button
                      strong
                      secondary
                      type="primary"
                    >
                      添加
                    </n-button>
                  </template>
                </TablePro>
              </n-tab-pane>
            </n-tabs>
          </n-card>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </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: [
            {
              fileName: "餐饮服务食品安全操作规范",
              sampleNumber: "LYG00008",
              name: "肉沫水蒸蛋",
              date: "2025-05-08",
              type: "午餐",
              remark: "餐饮服务食品安全操作规范GB-1976768965989",
              createTime: "2025-05-07",
              updateTime: "2025-05-07 13:20:42",
            },

            {
              fileName: "餐饮服务食品安全操作规范",
              sampleNumber: "LYG00008",
              name: "蒜条炒肉丝",
              date: "2025-05-08",
              type: "午餐",
              remark: "餐饮服务食品安全操作规范GB-1976768965989",
              createTime: "2025-05-07",
              updateTime: "2025-05-07 13:20:42",
            },
          ],
          size: "10",
          total: "12",
        },
        message: "操作成功！",
      });
    });
  };
  const reqApi_8: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: [
            {
              name: "张三",
              //   健康证状态
              HealthStatus: 1,
              bodyTemperature: 36.5,
              Status: "无不适",
              bodyResult: 1,
            },

            {
              name: "李四",
              HealthStatus: 1,
              bodyTemperature: 38.5,
              Status: "发烧",
              bodyResult: 0,
            },

            {
              name: "李四",
              HealthStatus: 0,
              bodyTemperature: 36.5,
              Status: "无不适",
              bodyResult: 1,
            },
          ],
          size: "10",
          total: "12",
        },
        message: "操作成功！",
      });
    });
  };
  const reqApi_9: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: [
            {
              conpanyName: "江南市场",
              conpanyCode: "12313123541361352",
              name: "张三",
              phoneNumber: "18570083522",
              BusinessLicense:
                "https://ts1.tc.mm.bing.net/th/id/R-C.ffa9f8644398f3765146771d141e86ec?rik=W3sS971aWggZnQ&riu=http%3a%2f%2fwww.hgcnc.net%2fimages%2fup_images%2fhgcnc_yyzz.jpg&ehk=x6cRs7jFVqOL8xC%2bwJjuLNv8Naqrbe2ypcfdFRd0pp4%3d&risl=&pid=ImgRaw&r=0",
            },

            {
              conpanyName: "xxx食品有限公司",
              conpanyCode: "12313123541361352",
              name: "李四",
              phoneNumber: "18570083522",
              BusinessLicense:
                "https://ts1.tc.mm.bing.net/th/id/R-C.ffa9f8644398f3765146771d141e86ec?rik=W3sS971aWggZnQ&riu=http%3a%2f%2fwww.hgcnc.net%2fimages%2fup_images%2fhgcnc_yyzz.jpg&ehk=x6cRs7jFVqOL8xC%2bwJjuLNv8Naqrbe2ypcfdFRd0pp4%3d&risl=&pid=ImgRaw&r=0",
            },
          ],
          size: "10",
          total: "12",
        },
        message: "操作成功！",
      });
    });
  };

  const reqApi_10: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: [
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470042822361090",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193553875.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193553875.png",
              placeId: "1912469809077993474",
              placeName: "仓库",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:36:05",
              warningTimeStr: "2025-04-16 19:36:05",
              warningType: 4,
              warningTypeName: "抽烟",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470190474444801",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193616657.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193616657.png",
              placeId: "1912469862391791617",
              placeName: "厨房",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:36:40",
              warningTimeStr: "2025-04-16 19:36:40",
              warningType: 1,
              warningTypeName: "未佩戴口罩",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470292547026945",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193647253.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193647253.png",
              placeId: "1912469862391791617",
              placeName: "厨房",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:37:04",
              warningTimeStr: "2025-04-16 19:37:04",
              warningType: 6,
              warningTypeName: "玩手机",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470387787087874",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193713094.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193647253.png",
              placeId: "1912469809077993474",
              placeName: "仓库",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:37:27",
              warningTimeStr: "2025-04-16 19:37:27",
              warningType: 6,
              warningTypeName: "玩手机",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470518141861890",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193740589.jpeg",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193740589.jpeg",
              placeId: "1912469862391791617",
              placeName: "厨房",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:37:58",
              warningTimeStr: "2025-04-16 19:37:58",
              warningType: 5,
              warningTypeName: "老鼠",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470632222736386",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193815619.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193740589.jpeg",
              placeId: "1912469809077993474",
              placeName: "仓库",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:38:25",
              warningTimeStr: "2025-04-16 19:38:25",
              warningType: 5,
              warningTypeName: "老鼠",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912470837542305793",
              imagePath: "\/img\/safe\/aiMonitor\/20250416193901486.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193901486.png",
              placeId: "1912469862391791617",
              placeName: "厨房",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:39:14",
              warningTimeStr: "2025-04-16 19:39:14",
              warningType: 2,
              warningTypeName: "未佩戴厨师帽",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912471152651976706",
              imagePath: "\/img\/safe\/aiMonitor\/20250416194019640.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193901486.png",
              placeId: "1912469862391791617",
              placeName: "厨房",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:40:29",
              warningTimeStr: "2025-04-16 19:40:29",
              warningType: 2,
              warningTypeName: "未佩戴厨师帽",
            },
            {
              dealTime: "",
              dealTimeStr: "",
              dealUser: "",
              dealUserName: "",
              deptId: "27",
              deptName: "\u6280\u672F\u90E8",
              id: "1912471244918276097",
              imagePath: "\/img\/safe\/aiMonitor\/20250416194036255.png",
              imagePathHttp:
                "https://file.wy2020.com/admin/weiyi/img/safe/aiMonitor/20250416193901486.png",
              placeId: "1912469862391791617",
              placeName: "厨房",
              status: 0,
              statusName: "\u672A\u5904\u7406",
              videoChannelId: "",
              videoChannelName: "该部门未配置摄像头",
              warningTime: "2025-04-16 19:40:51",
              warningTimeStr: "2025-04-16 19:40:51",
              warningType: 2,
              warningTypeName: "未佩戴厨师帽",
            },
          ],
          size: "10",
          total: "12",
        },
        message: "操作成功！",
      });
    });
  };

  type TableType = TableProProps<any, any>;
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    fileName: {
      type: "input",
      label: "资料名",
    },
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "fileName",
      title: "资料名",
      width: 200,
      render: ({ fileName }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "200px" }}>
            {fileName}
          </NPerformantEllipsis>
        );
      },
    },

    {
      key: "remark",
      title: "描述",
      width: 300,
      render: ({ remark }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "300px" }}>
            {remark}
          </NPerformantEllipsis>
        );
      },
    },

    {
      key: "",
      title: "操作",
      width: 200,
      render: (value) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type="success"
              onClick={() => {}}
            >
              查看
            </n-button>

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

  const columns_8 = ref<TableType["columns"]>([
    // HealthStatus
    // bodyTemperature
    // Status
    // bodyResult
    {
      key: "name",
      title: "检查人",
    },
    {
      key: "HealthStatus",
      title: "健康证状态",
      render({ HealthStatus }) {
        return (
          <NTag
            bordered={false}
            type={HealthStatus ? "success" : "error"}
          >
            {HealthStatus ? "正常" : "已过期"}
          </NTag>
        );
      },
    },

    {
      key: "Status",
      title: "健康状况",
    },
    {
      key: "bodyTemperature",
      title: "今日晨检体温",
      render({ bodyTemperature }) {
        return (
          <NTag
            bordered={false}
            type={bodyTemperature > 37 ? "error" : "success"}
          >
            {bodyTemperature}
          </NTag>
        );
      },
    },
    {
      key: "bodyResult",
      title: "晨检结果",
      render({ bodyResult }) {
        return (
          <NTag
            bordered={false}
            type={bodyResult ? "success" : "error"}
          >
            {bodyResult ? "合格" : "不合格"}
          </NTag>
        );
      },
    },

    {
      key: "",
      title: "操作",
      width: 200,
      render: (value) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type="success"
              onClick={() => {}}
            >
              详情
            </n-button>
            <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>
        );
      },
    },
  ]);

  const columns_9 = ref<TableType["columns"]>([
    {
      key: "conpanyName",
      title: "公司名称",
    },
    {
      key: "conpanyCode",
      title: "统一社会信用代码",
    },
    {
      key: "name",
      title: "负责人",
    },
    {
      key: "phoneNumber",
      title: "联系电话",
    },

    {
      key: "BusinessLicense",
      title: "营业执照",
      render({ BusinessLicense }) {
        return (
          <n-image
            object-fit="cover"
            style={{ borderRadius: "2px" }}
            height={36}
            width={36}
            src={BusinessLicense}
          />
        );
      },
    },

    {
      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>
        );
      },
    },
  ]);

  const columns_10 = ref<TableType["columns"]>([
    {
      key: "placeName",
      title: "区域",
    },
    {
      key: "videoChannelName",
      title: "摄像头名称",
    },
    {
      key: "warningTypeName",
      title: "异常事件类型",
    },
    {
      key: "warningTime",
      title: "预警事件",
    },

    {
      key: "imagePathHttp",
      title: "异常图片",
      render({ imagePathHttp }) {
        return (
          <n-image
            object-fit="cover"
            style={{ borderRadius: "2px" }}
            height={36}
            width={36}
            src={imagePathHttp}
          />
        );
      },
    },
    {
      key: "status",
      title: "状态",
      render({ status }) {
        return (
          <NTag
            bordered={false}
            type={!status ? "error" : "success"}
          >
            {!status ? "未处理" : "已处理"}
          </NTag>
        );
      },
    },
    {
      key: "dealTime",
      title: "处理时间",
    },
    {
      key: "dealUser",
      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>
