<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.state" :style="{ color: stateColor[item.state] }">
              <span class="state-dot" :style="{ backgroundColor: stateColor[item.state] }"></span>{{ item.value }}</span
            >
            <span v-else-if="item.secret">{{ secret(item.value) }}</span>
            <span v-else-if="item.idCard">{{ idCardShow ? item.value : idcard(item.value) }}</span>
            <span v-else-if="item.callback" @click.stop="item.callback && item.callback()" class="can_click_text">{{
              item.value
            }}</span>
            <span v-else>{{ item.value }}</span>
          </span>
          <a class="copy-btn" @click="copyText(item.value, $event)" v-if="item.copy"> 复制 </a>
          <bg-icon
            v-if="item.copy_icon"
            @click="copyIcon(item.value)"
            class="copy-btn"
            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
            icon="#bg-ic-copy"></bg-icon>
          <bg-icon
            v-if="item.idCard"
            @click="idCardShow = !idCardShow"
            class="copy-btn"
            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
            :icon="idCardShow ? '#bg-ic-eye-close' : '#bg-ic-eye'"></bg-icon>
          <bg-icon
            class="copy-btn"
            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
            icon="#bg-ic-download"
            v-if="item.download"
            @click="download(item.url)"></bg-icon>
          <bg-icon
            class="copy-btn"
            style="font-size: 14px; color: #a9b1c7; cursor: pointer"
            :icon="show ? '#bg-ic-eye-close' : '#bg-ic-eye'"
            v-if="item.password"
            @click="changeView(item)"></bg-icon>
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import Clipboard from "clipboard";
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  col: {
    type: Number,
    default: 2,
  },
});
const state = reactive({
  show: false,
  idCardShow: false,
  stateColor: {
    success: "#48ad97",
    danger: "#d75138",
    default: "#787878",
  },
});

const clipboardSuccess = () => {
  ElMessage({
    type: "success",
    message: "复制成功",
    duration: 1500,
  });
};

const clipboardError = () => {
  ElMessage({
    type: "warning",
    message: "浏览器不支持自动复制",
  });
};

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 copyIcon = (data) => {
  navigator.clipboard.writeText(data).then(
    ElMessage.success("复制成功"),
    function () {},
    function () {}
  );
};

const download = (url) => {
  const a = document.createElement("a"); // 创建a标签
  a.setAttribute("download", ""); // download属性
  a.setAttribute("href", url); // href链接
  a.click(); // 自执行点击事件
};
const changeView = (item) => {
  if (!state.show) {
    item.value = item.realValue;
  } else {
    item.value = "***************";
  }
  state.show = !state.show;
};

const secret = (value) => {
  const len = value.length;
  const str1 = value.substring(0, 3);
  const str2 = value.substring(value.length - 6, value.length);
  const passwordStr = value
    .substring(3, value.length - 6)
    .split("")
    .map((item) => "*")
    .join("");
  return str1 + passwordStr + str2;
};
const idcard = (value) => {
  const len = value.length;
  const str1 = value.substring(0, 3);
  const str2 = value.substring(value.length - 4, value.length);
  const passwordStr = value
    .substring(3, value.length - 4)
    .split("")
    .map((item) => "*")
    .join("");
  return str1 + passwordStr + str2;
};
const { show, idCardShow, stateColor } = toRefs(state);
</script>
