<!-- 硬件数据 -->
<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"
          @click="addRole"
        >
          新增角色
        </n-button>
      </template>
    </TablePro>
  </div>
</template>
<script setup lang="tsx">
  import {
    TablePro,
    type TableProProps,
    FormPro,
    type FormItemOptions,
    type TableProInst,
    Icon
  } from "@/components";
  import { type FormInst, NPerformantEllipsis, NPopconfirm, NTag, useModal } from "naive-ui";

  const tableRef = useTemplateRef<TableProInst>("tableRef");
  import datalistRole, { type roleSaveOrUpdate } from "./index.ts";
  import { reactive, ref } from "vue";

  const modal = useModal();

  const form = ref<FormInst | null>(null);
  const reqApi: TableType["requestApi"] = (params) => {
    return new Promise((resolve) => {
      resolve({
        code: 200,
        data: {
          current: "1",
          // @ts-ignore
          pages: "2",
          records: datalistRole,
          size: "10",
          total: "12"
        },
        message: "操作成功！"
      });
    });
  };
  type TableType = TableProProps<any, any>;
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    name: {
      type: "input",
      label: "角色名"
    },
    founder: {
      type: "input",
      label: "创建人"
    },
    remarks: {
      type: "input",
      label: "备注"
    },
    status: {
      type: "select",
      label: "状态",
      options: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "启用",
          label: "启用"
        },
        {
          value: "禁用",
          label: "禁用"
        }
      ]
    }
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "name",
      title: "角色名称"
    }, {
      key: "remarks",
      title: "备注"
    },
    {
      key: "founder",
      title: "创建人"
    },
    {
      key: "status",
      title: "状态",
      render: (value: any) => {
        return (
          <n-tag type={value.status === "启用" ? "success" : "error"}>
            {value.status}
          </n-tag>
        );
      }
    },
    {
      key: "updateTime",
      title: "创建时间"
    },
    {
      key: "",
      title: "操作",
      width: 200,
      render: (value) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type="warning"
              onClick={() => {
                title.value = "编辑角色";
                userValue.value.name = value.name;
                userValue.value.status = value.status;
                userValue.value.remarks = value.remarks;
                modalRef.value = modal.create({
                  title: title.value,
                  preset: "card",
                  style: {
                    width: "600px"
                  },
                  content: () => (
                    <>
                      <FormPro labelWidth="100" ref={form} v-model:value={userValue.value}
                               form-item-options={formOptionsUser}></FormPro>
                    </>
                  ),
                  footer: () => (
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "flex-end"
                      }}
                    >
                      <n-button
                        loading={loading.value}
                        style={{ marginRight: "10px" }}
                        type="primary"
                        onClick={() => {
                          addUserOrUpdate();
                        }}
                      >
                        确认
                      </n-button>
                      <n-button
                        onClick={() => {
                          modalRef.value.destroy();
                          resetModelValue();
                        }}
                      >
                        取消
                      </n-button>
                    </div>
                  ),
                  onAfterLeave: () => {
                    resetModelValue();
                  }
                });
              }}
            >
              修改
            </n-button>

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

            <n-button type="success"  style={{ marginLeft: "10px" }}>菜单授权</n-button>
          </div>
        );
      }
    }
  ]);
  const formOptionsUser = reactive<FormItemOptions<roleSaveOrUpdate>>({
    name: {
      type: "input",
      label: "名字",
      required: true
    },
    status: {
      type: "radioGroup",
      label: "状态",
      options: [
        {
          value: "启用",
          label: "启用"
        },
        {
          value: "禁用",
          label: "禁用"
        }
      ]
    },
    remarks: {
      type: "input",
      label: "备注"
    }
  });

  const userRoleValue: roleSaveOrUpdate = {
    // snowFlakeId: "",
    name: "",
    status: "",
    remarks: "",
    founder: "",
    updateTime: ""
  };

  const userValue = ref<roleSaveOrUpdate>({
    ...userRoleValue
  });

  const resetModelValue = () => {
    userValue.value = { ...userRoleValue };
    title.value = '新增角色'
  };

  const addUserOrUpdate = () => {
    form.value?.validate().then(() => {
      // loading.value = true

    });
  };
  const loading = ref<boolean>(false);
  const modalRef = ref();
  const title = ref("新增角色");
  const addRole = () => {
    modalRef.value = modal.create({
      title: title.value,
      preset: "card",
      style: {
        width: "600px"
      },
      content: () => (
        <>
          <FormPro labelWidth="100" ref={form} v-model:value={userValue.value}
                   form-item-options={formOptionsUser}></FormPro>
        </>
      ),
      footer: () => (
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end"
          }}
        >
          <n-button
            loading={loading.value}
            style={{ marginRight: "10px" }}
            type="primary"
            onClick={() => {
              addUserOrUpdate();
            }}
          >
            确认
          </n-button>
          <n-button
            onClick={() => {
              modalRef.value.destroy();
              resetModelValue();
            }}
          >
            取消
          </n-button>
        </div>
      ),
      onAfterLeave: () => {
        resetModelValue();
      }
    });
  };
</script>
<style scoped lang="scss"></style>
