import { css, cx } from "@linaria/core";
import { IconMore } from "@queenjs/icons";
import { Image, View } from "@queenjs/ui";
import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
import { EyeOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { defineUI } from "queenjs";
import { any, bool } from "vue-types";
import { useAuth } from "@queenjs-modules/auth";

// const ShareBox = defineComponent({
//   props: {
//     id: string(),
//   },

//   setup(props) {
//     let shareLink = location.origin + "/share.html?id=" + props.id;
//     if (location.host == "www.infish.cn") {
//       shareLink =
//         location.origin + "/projects/queenshowv1/share.html?id=" + props.id;
//     }

//     const qrUrl = useQRCode(shareLink);
//     const { copy, copied } = useClipboard();

//     return () => (
//       <div class="p-20px bg-dark-500 text-center">
//         <img src={qrUrl.value} />
//         <div class="mb-20px"></div>
//         <Button onClick={() => copy(shareLink)} disabled={copied.value}>
//           {copied.value ? "已复制" : "复制链接"}
//         </Button>
//       </div>
//     );
//   },
// });

export default defineUI({
  props: {
    record: any(),
    isPc: bool().def(false),
  },
  emits: ["edit", "preview", "menu"],
  setup(props, { emit }) {
    const auth = useAuth();

    return () => {
      const { record, isPc } = props;

      //@ts-ignore
      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;

      return (
        <div class={cx(itemStyles, "relative")}>
          <View ratio={1} class="overflow-hidden relative">
            <Image
              class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
              src={record?.thumbnail}
            />
            {isSys && (
              <Tag
                color="#E88B00"
                // color="rgba(0, 0, 0, 0.4)"
                class="absolute top-0 left-0 z-1 !rounded-none"
              >
                {record.published ? "已发布" : "未发布"}
              </Tag>
            )}
            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <div
                class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
                onClick={() => emit("edit", props.record)}
              >
                编辑
              </div>

              {isPc ? (
                <div
                  class="text-white icon_action w-60px leading-60px ml-10px cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
                  onClick={() => emit("menu", "copyLink")}
                >
                  链接
                </div>
              ) : (
                <div
                  class="text-white icon_action w-60px leading-60px ml-10px cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
                  onClick={() => emit("menu", "share")}
                >
                  分享
                </div>
              )}
            </div>
          </View>
          <div class="item_footer rounded-b-4px flex items-center justify-between p-15px">
            <div class="flex-1 w-0">
              <div class="text-white text-bold truncate text-14px">
                {record.title}
              </div>
              <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                {dayjs(record.updateTime).format("YYYY.MM.DD")}
                {/* 发布 */}
                <Divider type="vertical"></Divider>
                {record.views || 0} <EyeOutlined class={"ml-6px"} />
              </div>
            </div>
            <Dropdown
              placement="bottom"
              overlay={
                <Menu class={cx("w-90px", menuStyles)}>
                  {/* <Menu.Item>复制</Menu.Item> */}
                  <Menu.Item
                    onClick={() => {
                      emit("menu", "send");
                    }}
                  >
                    发送到
                  </Menu.Item>
                  <Menu.Item>
                    <div onClick={() => emit("menu", "stat")}>统计分析</div>
                  </Menu.Item>
                  <Menu.Item>
                    <div onClick={() => emit("menu", "copy")}>复制作品</div>
                  </Menu.Item>
                  <Menu.Item>
                    <div onClick={() => emit("menu", "edit")}>编辑</div>
                  </Menu.Item>
                  {/* <Menu.Item>
                    <div onClick={() => emit("menu", "rename")}>重命名</div>
                  </Menu.Item> */}
                  <Menu.Item>
                    <div onClick={() => emit("menu", "delete")}>删除</div>
                  </Menu.Item>

                  {isSys && !record.published && (
                    <Menu.Item>
                      <div onClick={() => emit("menu", "publish")}>
                        发布平台
                      </div>
                    </Menu.Item>
                  )}

                  {isSys && record.published && (
                    <Menu.Item>
                      <div onClick={() => emit("menu", "unpublish")}>
                        取消平台发布
                      </div>
                    </Menu.Item>
                  )}

                  {/* {isSys && (
                    <Menu.Item>
                      <div onClick={() => emit("menu", "thumbnail")}>
                        替换封面
                      </div>
                    </Menu.Item>
                  )} */}
                </Menu>
              }
            >
              <IconMore class="ml-10px text-22px cursor-pointer" />
            </Dropdown>
          </div>
        </div>
      );
    };
  },
});

const itemStyles = css`
  /* 修复hover时，页面滚动条抖动的bug */
  > div {
    font-size: 0;
    > div * {
      font-size: 14px;
    }
  }
  .item_footer {
    background: #414141;
  }
  .icon_action {
    background-color: rgba(0, 0, 0, 0.8);
    &.orange {
      background-color: rgba(232, 139, 0, 0.8);
    }
  }
`;

const menuStyles = css`
  .ant-dropdown-menu-item,
  .ant-dropdown-menu-submenu-title {
    font-size: 12px;
  }
`;