<template>
  <div class="bg-info">
    <ul>
      <li
        v-for="(item, index) in data"
        :key="'li_' + index"
        :style="{
          width: item.full ? `100%` : `calc(100% / ${col})`,
        }">
        <span
          :style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%' }">
          {{ item.name }}
        </span>
        <span
          :style="{
            width: item.nameWidth
              ? `calc( 100% - ${item.nameWidth + 'px'})`
              : '50%',
          }">
          <span
            style="
              display: inline-block;
              width: 100%;
              white-space: normal;
              word-break: break-all;
            "
            :style="{
              width: item.copy
                ? 'calc(100% - 36px)'
                : item.download || item.password
                  ? 'calc(100% - 22px)'
                  : '100%',
              color: item.download ? '#3759be' : '#404a62',
            }">
            <span
              v-if="item.callback"
              class="can_click_text"
              style="text-decoration: underline"
              @click.stop="item.callback && item.callback()">{{ item.value }}</span>
            <span v-else>{{ item.value }}</span>
          </span>
          <a
            v-if="item.copy"
            class="copy-btn"
            @click="copyText(item.value, $event)">
            复制
          </a>
          <bg-icon
            v-if="item.download"
            class="copy-btn"
            :class="item.url.indexOf('/') == -1 ? 'copy-btn-dis' : ''"
            style="font-size: 14px; cursor: pointer"
            icon="#bg-ic-download"
            @click="download(item.url)" />
          <bg-icon
            v-if="item.password"
            class="copy-btn"
            style="font-size: 14px; cursor: pointer"
            :icon="show ? '#bg-ic-eye-close' : '#bg-ic-eye'"
            @click="changeView(item)" />
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import Clipboard from "clipboard";
import { ElMessage } from "element-plus";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  col: {
    type: Number,
    default: 2,
  },
});

const show = ref(false);

const clipboardSuccess = () => {
  ElMessage({
    type: "success",
    message: "复制成功",
    duration: 1500,
  });
};
const clipboardError = () => {
  ElMessage({
    message: "浏览器不支持自动复制",
    type: "warning",
  });
};
const copyText = (text, e) => {
  const clipboard = new Clipboard(e.target, {
    text: () => text,
  });

  clipboard.on("success", () => {
    clipboardSuccess();
    // 释放内存
    clipboard.destroy();
  });

  clipboard.on("error", () => {
    // 不支持复制
    clipboardError();
    // 释放内存
    clipboard.destroy();
  });

  // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
  clipboard.onClick(e);
};
const download = (url) => {
  if (url.indexOf("/") == -1) {
    return;
  }
  const a = document.createElement("a"); // 创建a标签
  a.setAttribute("download", ""); // download属性
  a.setAttribute("href", url); // href链接
  a.click(); // 自执行点击事件
};
const changeView = (item) => {
  if (!show.value) {
    item.value = item.realValue;
  } else {
    item.value = "***************";
  }
  show.value = !show.value;
};
</script>
