import { ref } from "vue";
import dayjs from "dayjs";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

export function useColumns() {
  const columns = ref([
    // {
    //   type: "selection",
    //   width: 40,
    // align: "center",
    //   hide: ({ checkList }) => !checkList.includes("勾选列")
    // },
    // {
    //   label: "序号",
    //   type: "index",
    //   minWidth: 60,
    //   align: "left",
    //   hide: ({ checkList }) => !checkList.includes("序号列")
    // },
    {
      label: "名称",
      prop: "menu_name",
      minWidth: 200,
      align: "left",
      showOverflowTooltip: true
    },
    {
      label: "图标",
      prop: "menu_img",
      width: 80,
      showOverflowTooltip: true,
      cellRenderer: ({ row }) => <IconifyIconOnline icon={row.menu_img} />
    },
    {
      label: "path",
      prop: "menu_route",
      minWidth: 180,
      showOverflowTooltip: true,
      align: "left"
    },
    {
      label: "权重",
      prop: "weight",
      showOverflowTooltip: true,
      width: 60
    },
    {
      label: "类型",
      prop: "menu_type",
      minWidth: 80,
      showOverflowTooltip: true,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size="small"
          type={row.menu_type + "" === "1" ? "success" : "danger"}
          effect="plain"
        >
          {row.menu_type + "" === "1" ? "菜单" : "页面"}
        </el-tag>
      )
    },
    {
      label: "状态",
      prop: "status",
      minWidth: 80,
      showOverflowTooltip: true,
      cellRenderer: ({ row, props }) => (
        <el-tag
          size="small"
          type={row.status + "" === "1" ? "success" : "danger"}
          effect="plain"
        >
          {row.status + "" === "0" ? "禁用" : "启用"}
        </el-tag>
      )
    },
    {
      label: "页面路径",
      prop: "menu_url",
      minWidth: 180,
      showOverflowTooltip: true,
      align: "left"
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      showOverflowTooltip: true,
      slot: "operation"
    }
  ]);

  return {
    columns
  };
}
