import {
  DeleteOutlined,
  FormOutlined,
  PlusSquareOutlined,
} from "@ant-design/icons-vue";
import { css } from "@linaria/core";
import { Button, Tree } from "ant-design-vue";
import { defineComponent } from "vue";
import { any } from "vue-types";

export default defineComponent({
  props: {
    data: any(),
  },
  emits: ["add", "update", "delete"],
  setup(props, { emit }) {
    const formatTreeData = (data: any, key = 0) => {
      const res: any[] = [];
      data?.map((item: any, index: number) => {
        res[index] = {};
        res[index].key = item.id;
        res[index].title = (
          <div class={"tree_item"} key={index}>
            <div class="item_txt">
              <span class="item_tit">{item.name || "undefined"}</span>
            </div>
            <div class="item_btn">
              {key != 2 && (
                <Button
                  class="tree_btn"
                  title="添加子菜单"
                  icon={<PlusSquareOutlined />}
                  onClick={(e) => {
                    e.stopPropagation();
                    emit("add", item._id, key);
                  }}
                ></Button>
              )}

              <Button
                class="tree_btn"
                title="编辑"
                icon={<FormOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  emit("update", item, key);
                }}
              ></Button>
              {/* <Button
                class="tree_btn"
                title="删除"
                icon={<DeleteOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  emit("delete", item);
                }}
              ></Button> */}
            </div>
          </div>
        );
        let arr: any[] = [];
        if (Array.isArray(item.children) && item.children.length > 0) {
          arr = formatTreeData(item.children, key + 1);
          res[index].children = arr;
        }
      });
      return res;
    };

    return () => (
      <Tree.DirectoryTree
        class={`${TreeRoot} whitespace-nowrap`}
        treeData={formatTreeData(props.data)}
        showIcon={false}
        blockNode={true}
      ></Tree.DirectoryTree>
    );
  },
});
const TreeRoot = css`
  .ant-tree-switcher {
    line-height: 32px;
  }
  .ant-tree-node-selected {
    .tree_item {
      .item_btn {
        .tree_btn {
          color: #fff;
          &:hover {
            color: #fff;
          }
        }
      }
    }
  }
  .tree_item {
    display: flex;
    align-items: center;
    .item_txt {
      flex: 0;
      display: flex;
      align-items: center;
      .item_tit {
        height: 32px;
        font-size: 14px;
        line-height: 32px;
      }
    }
    &:hover {
      .item_btn {
        display: block;
      }
    }
    .item_btn {
      flex: 1;
      display: none;
      margin-left: 20px;
      .tree_btn {
        margin: 0 6px;
        min-width: auto;
        border: none;
        background-color: transparent;
        box-shadow: none;
      }
    }
  }
`;
