<template>
  <div class="work-card">
    <div class="home">
      <img src="../../../assets/imgs/home_bg.png" class="home-bg" />
      <div class="logo-info">
        <img
          src="../../../assets/imgs/home_logo.png"
          style="width: 80px; margin-bottom: 16px"
        />
        <div class="txt">实施工作证</div>
        <img
          :src="data.photoPath"
          style="
            max-width: 220px;
            max-height: 140px;
            margin-top: 16px;
            margin-bottom: 16px;
          "
        />
        <div class="u-name">{{ data.name }}</div>
        <div class="u-info"> 认证编号：{{ data.code }} </div>
        <div class="u-info"> 手机号码：{{ data.mobileNumber }} </div>
      </div>
      <div class="experience">
        <div>项目经验：</div>
        <div v-for="item in projectExperience">{{ item }}</div>
      </div>
      <div class="background-box">
        <div
          class="background"
          v-for="item in domList"
          :style="[item]"
          :key="item"
          >{{ content }}
        </div>
      </div>
    </div>
    <div class="close" @click="emit('close')">&times;</div>
  </div>
</template>
<script name="WorkCard" setup>
import { ref, onMounted, computed } from 'vue';
import { getWorkCardInfo } from '@/api/sop';
const projectExperience = computed(() => {
  return data.value.projectExperience || [];
});
const emit = defineEmits(['close']);
const props = defineProps(['userId']);
const data = ref({
  name: '',
  code: '',
  mobileNumber: '',
  photoPath: '',
  photoPath: '',
  projectExperience: [],
});
const domList = ref([]);
const h = ref(window.innerHeight * 0.9);
const w = ref(window.innerHeight * 0.44);
const initWarter = () => {
  let screenWidth = w.value;
  let screenHeight = h.value;
  let gapX = 0,
    gapY = 0,
    width = 0,
    height = 40,
    color = '#fff',
    alpha = 0.4,
    fontSize = 16,
    angle = 20,
    zIndex = 999;

  let heightNum = Math.ceil(screenHeight / (gapY * 2 + height));
  let widthNum = Math.ceil(
    screenWidth / (gapX * 2 + (width || screenWidth / 2))
  );

  let num = heightNum * widthNum;

  for (let i = 0; i < num; i++) {
    let mask_div = {};
    mask_div.transform = 'rotate(-' + angle + 'deg)';
    mask_div.visibility = '';
    mask_div.overflow = 'hidden';
    mask_div.margin = `${gapY}px ${gapX}px`;
    mask_div.zIndex = zIndex;
    mask_div.pointerEvents = 'none';
    mask_div.opacity = alpha;
    mask_div.fontSize = `${fontSize}px`;
    mask_div.fontFamily = '微软雅黑';
    mask_div.color = color;
    mask_div.width = (width || screenWidth / 3) + 'px';
    mask_div.height = height + 'px';

    domList.value.push(mask_div);
  }
};
const getData = () => {
  getWorkCardInfo({ userId: props.userId }).then((res) => {
    data.value = res || {};
  });
};
onMounted(() => {
  initWarter();
  getData();
});
</script>
<style lang="less" scoped>
.work-card {
  position: fixed;
  z-index: 3333;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  .experience {
    font-size: 12px;
    padding: 8px 12px 0 12px;
    line-height: 18px;
    color: #262626;
  }
  .close {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    position: absolute;
    right: 30px;
    top: 20px;
    transition: all 0.3s;
    &:hover {
      background: rgba(0, 0, 0, 0.9);
    }
  }
  .home {
    height: 90vh;
    width: 44vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    .background-box {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: flex;
      flex-wrap: wrap;
      z-index: -1;
      .background {
        box-sizing: border-box;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        background-attachment: fixed;
        background-repeat: repeat;
        background-origin: content-box;
        background-position: center;
      }
    }
    .home-bg {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: -10;
    }
    .logo-info {
      text-align: center;
      padding-top: 30px;
      .u-name {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 3px;
        margin-bottom: 15px;
      }
      .u-info {
        font-size: 16px;
        color: #8c8c8c;
        line-height: 30px;
      }
      .txt {
        font-size: 20px;
        font-weight: bold;
        color: #262626;
      }
    }
  }
}
</style>
