<!-- 采购计划 -->
<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>
      </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: [
            {
              brand: "",
              id: "1834044644795646208",
              max: 99.0,
              name: "金煌芒果",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644799840512",
              max: 99.0,
              name: "大红薯",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644795646464",
              max: 99.0,
              name: "200g中益健康魔芋丝",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644795645953",
              max: 99.0,
              name: "blt北美洲车厘子500g/盒",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644795646209",
              max: 99.0,
              name: "紫叶生菜",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644799840513",
              max: 99.0,
              name: "香干",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644795646465",
              max: 99.0,
              name: "江西甜柑",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
            {
              brand: "",
              id: "1834044644795645954",
              max: 99.0,
              name: "糯玉米（精）",
              purTypeStr: "蔬菜豆制品",
              remain: 99.0,
              remainPct: 100.0,
              requirement: false,
              ruleValue: 10.0,
              trigger: false,
              unit: "斤",
            },
          ],
          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: "name",
      title: "商品名称",
      width: 70,
      render: ({ name }) => {
        return (
          <NPerformantEllipsis style={{ maxWidth: "70px" }}>
            {name}
          </NPerformantEllipsis>
        );
      },
    },
    {
      key: "unit",
      title: "单位",
      width: 50,
    },
    {
      key: "brand",
      title: "品牌",
      width: 70,
      render: ({ brand }) => {
        return <div>{brand ? brand : "无"}</div>;
      },
    },
    {
      key: "purTypeStr",
      title: "商品类型",
      width: 70,
    },
    {
      key: "remain",
      title: "库存",
      width: 70,
    },
    {
      key: "max",
      title: "最大数量",
      width: 100,
    },
    {
      key: "ruleValue",
      title: "警戒值",
      width: 100,
    },
    {
      key: "requirement",
      title: "急需补货",
      width: 100,
      render: ({ requirement }) => {
        return (
          <NTag
            bordered={false}
            type={!requirement ? "success" : "error"}
          >
            {requirement ? "是" : "否"}
          </NTag>
        );
      },
    },
    {
      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>
