<template>
  <div class="ele-body">
    <a-card :bordered="false" :body-style="{ padding: '44px 16px' }">
      <div
        style="
          max-width: 500px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
        "
      >
        <div style="width: 100%">
          <a-input-search
            size="large"
            placeholder="请输入搜索关键词"
            @search="onSearch"
          />
          <!--          <div style="padding-top: 10px">-->
          <!--            <a type="link" class="a-link">应用组件</a>-->
          <!--            <a type="link" class="a-link">外部链接</a>-->
          <!--            <a type="link" class="a-link">前端框架</a>-->
          <!--          </div>-->
        </div>
        <a-button class="ele-btn-icon app-btn-search" @click="openEdit()">
          <template #icon>
            <plus-outlined />
          </template>
          <span>添加链接</span>
        </a-button>
      </div>
    </a-card>
    <a-row :gutter="16">
      <a-col
        v-for="(item, index) in list"
        :key="index"
        :lg="6"
        :md="8"
        :sm="12"
        :xs="24"
      >
        <a-badge-ribbon :text="item.category">
          <a-card :bordered="false" hoverable style="margin-top: 16px">
            <div class="ele-cell" style="margin-bottom: 16px">
              <a-avatar :src="item.linkIcon" :size="50" />
              <div class="ele-cell-content">
                <h4 class="link-name">{{ item.linkName }}</h4>
                <small class="ele-text-placeholder" v-if="item.type === '1'">
                  {{ item.linkUrl }}
                </small>
              </div>
            </div>
            <div class="ele-elip" style="margin-bottom: 6px">
              {{ item.comments }}
            </div>
            <div class="ele-elip ele-text-placeholder">{{
              item.createTime
            }}</div>
            <template #actions>
              <a-tooltip title="访问链接">
                <chrome-outlined @click="openUrl(item)" />
              </a-tooltip>
              <a-tooltip title="复制链接">
                <share-alt-outlined @click="copyUrl(item)" />
              </a-tooltip>
              <a-tooltip :title="item.linkDown">
                <download-outlined @click="downUrl(item)" />
              </a-tooltip>
              <a-tooltip title="编辑">
                <edit-outlined @click="openEdit(item)" />
              </a-tooltip>
            </template>
          </a-card>
        </a-badge-ribbon>
      </a-col>
    </a-row>
    <div class="ele-text-center" style="margin-top: 18px">
      <a-pagination
        :total="where.count"
        v-model:current="where.page"
        v-model:page-size="where.limit"
        @change="onChange"
      />
    </div>
    <div v-if="!list.length" style="margin-top: 46px">
      <a-empty />
    </div>
    <!-- 编辑弹窗 -->
    <link-edit v-model:visible="showEdit" :data="current" @done="onSearch" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { pageLink } from '@/api/apps/link';
  import type { Link, LinkParam } from '@/api/apps/link/model';
  import LinkEdit from './components/link-edit.vue';
  import { message } from 'ant-design-vue';
  import {
    ChromeOutlined,
    EyeOutlined,
    DownloadOutlined,
    EditOutlined,
    ShareAltOutlined,
    EllipsisOutlined
  } from '@ant-design/icons-vue';
  import useSearch from '@/utils/use-search';
  import router from '@/router';
  import { getDictionaryOptions } from '@/utils/common';

  // 当前编辑数据
  const current = ref<Link | null>(null);

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  const linkType = getDictionaryOptions('linkType');

  // 打开链接
  const openUrl = (item) => {
    if (item.type == '0') {
      return router.push(item.linkComponent);
    }
    return window.open(item.linkUrl);
  };

  // 下载文件
  const downUrl = (url) => {
    if (url.linkDown) {
      return window.open(url.linkDown);
    }
  };

  // 复制文本
  const copyUrl = (item) => {
    // 模拟 输入框
    const cInput = document.createElement('input');
    cInput.value = item.linkDown ? item.linkDown : item.linkUrl;
    document.body.appendChild(cInput);
    cInput.select(); // 选取文本框内容

    // 执行浏览器复制命令
    // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
    // Input要在正常的编辑状态下原生复制方法才会生效
    message.success('复制成功');
    document.execCommand('copy');

    // 复制成功后再将构造的标签 移除
    document.body.removeChild(cInput);
  };

  const list = ref<Link[]>([]);

  /* 打开编辑弹窗 */
  const openEdit = (row?: Link) => {
    current.value = row ?? null;
    showEdit.value = true;
  };

  // 表单数据
  const { where } = useSearch<LinkParam>({
    page: 1,
    limit: 36,
    count: 0,
    linkName: '',
    list: []
  });

  /* 搜索 */
  const onSearch = (linkName: string) => {
    // 重置当前页面
    if (linkName) {
      where.page = 1;
    }
    pageLink({ ...where, linkName }).then((data) => {
      where.count = data?.count;
      list.value = data.list;
    });
  };

  // 翻页
  const onChange = (e) => {
    where.page = e;
    onSearch();
  };

  onSearch();
</script>

<script lang="ts">
  export default {
    name: 'Links'
  };
</script>

<style lang="less">
  .app-btn-search {
    margin-left: 12px;
    height: 40px;
  }
  .link-name {
    line-height: 1;
  }
  .a-link {
    margin-right: 10px;
  }
</style>
