<template>
  <n-data-table
    ref="tableRef"
    :bordered="false"
    :max-height="700"
    striped
    :columns="columns"
    :data="data"
    :pagination="pagination"
  ></n-data-table>
</template>

<script>
import { reactive, toRefs, onMounted, h } from "vue";
import { NButton, NTag, NSpace } from "naive-ui";
import { useRouter } from "vue-router";
import { getServerManagerList } from "@/services";

export default {
  name: "serverManager",
  setup() {
    const router = useRouter();
    const state = reactive({
      columns: [
        {
          title: "ID/名称",
          key: "serverName",
          align: "center",
          width: "130",
          render(row) {
            return h(
              NSpace,
              { vertical: true, onClick: () => handleClick("details", row) },
              h(
                NButton,
                {
                  text: true,
                  size: "small",
                  type: "info",
                },
                {
                  default: row.serverName,
                }
              ),
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                  },
                },
                {
                  default: row.intranet,
                }
              )
            );
          },
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: "100",
        },
        {
          title: "实例类型",
          key: "type",
          align: "center",
        },
        {
          title: "实例配置 ",
          key: "roleName",
          align: "center",
          render(row) {
            return h(
              NSpace,
              { vertical: true, onClick: () => handleClick("jump", row) },
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                  },
                },
                {
                  default: `${row.cpu} ${row.ram}  ${row.bandwidth}`,
                }
              ),
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                  },
                },
                {
                  default: `系统盘：${row.disk}`,
                }
              )
            );
          },
        },
        {
          title: "主IPv4地址 ",
          key: "extranet",
          align: "center",
          render(row) {
            return h(
              NSpace,
              { vertical: true, onClick: () => handleClick("jump", row) },
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                  },
                },
                {
                  default: `${row.extranet}(内)`,
                }
              ),
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                  },
                },
                {
                  default: `${row.intranet}（公)`,
                }
              )
            );
          },
        },
        {
          title: "实例时间 ",
          key: "roleName",
          align: "center",
          render(row) {
            return h(
              NSpace,
              { vertical: true },
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                    height: "20px",
                  },
                },
                {
                  default: `包年包月`,
                }
              ),
              h(
                NTag,
                {
                  bordered: false,
                  color: {
                    color: "transparent",
                    height: "20px",
                  },
                },
                {
                  default: `${row.expiration}到期`,
                }
              )
            );
          },
        },
        {
          title: "所属项目 ",
          key: "project",
          align: "center",
          width: "300",
        },
        {
          title: "操作 ",
          key: "actions",
          width: "200",
          align: "center",
          render(row) {
            const btn = state.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "details",
          default: "查看详情",
        },
      ],
    });
    // 分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    //获取表格数据
    const getTableData = async () => {
      let res = await getServerManagerList();
      if (res.code === 200) {
        state.data = res.data;
      }
    };
    //按钮点击事件
    const handleClick = (type, row) => {
      switch (type) {
        case "details":
          router.push({
            path: "/details",
            query: {
              id: row.id,
              ip: row.extranet,
            },
          });
          break;
      }
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      pagination: paginationReactive,
      getTableData,
    };
  },
};
</script>

<style>
</style>