<!--
    filename: CompanyInfo.vue
    author: liubin
    date: 2024-04-08 15:27:04
    description:
-->

<template>
  <div class="company-info" @click="handleChangeRoute()" :style="styles">
    <div class="corner bl"></div>
    <div class="corner br"></div>
    <h2>{{ info.companyName }}</h2>
    <ul>
      <li v-for="item in info.items" :key="item.label">
        {{ item.label }} {{ item.value | numberFilter }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CompanyInfo",
  components: {},
  props: {
    info: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    position: {
      type: Object,
      required: true,
      default: () => ({ tx: 0, ty: 0 }),
    },
  },
  filters: {
    numberFilter(value) {
      if (value != null && !isNaN(parseInt(value))) {
        return parseInt(value).toLocaleString();
      } else {
        return '-';
      }
    },
  },
  data() {
    return {};
  },
  computed: {
    styles() {
      return {
        left: `${this.position.tx}%`,
        top: `${this.position.ty}%`,
      };
    },
  },
  methods: {
    handleChangeRoute() {
      this.$router.push({
        path: this.position.path
      })
    }
  },
};
</script>

<style scoped lang="scss">

@font-face {
  font-family: 优设标题黑;
  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
}

.company-info {
  color: #fff;
  background: #4443;
  position: absolute;
  z-index: 9999;
  // padding: 14px;
  padding: 0.745vw;
  // padding: 0 vw;
  cursor: pointer;
  // backdrop-filter: blur(2px);
  // border-radius: 4px;
  transform: translate(-50%, -100%);
  // box-shadow: inset 0 0 12px 2px #fff3;
  background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%;
    // background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7)  10%, #021842 30%);
  // 在这里设置一个总的字体大小 不失为一个好的选择
  font-size: 1vw;
  // filter: blur(13);
}

h2 {
  padding: 0 1vw;
  margin: 6px 0;
  font-family: 优设标题黑;
  color: #fff;
  letter-spacing:5px;
  // font-size: 24px;
  font-size: 1.276em;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

li {
  font-size: 0.851em;
}

.corner {
  position: absolute;
  bottom: 0;
  // width: 12px;
  // height: 12px;
  width: 0.639vw;
  height: 0.639vw;
  border-style: solid;
  border-color: transparent;
}

.bl {
  left: 0;
  border-left: 0.1596vw solid #ffa600;
  border-bottom: 0.1596vw solid #ffa600;
  // border-left: 3px solid #ffa600;
  // border-bottom: 3px solid #ffa600;
}

.br {
  right: 0;
  // border-right: 3px solid #ffa600;
  // border-bottom: 3px solid #ffa600;
  border-right: 0.1596vw solid #ffa600;
  border-bottom: 0.1596vw solid #ffa600;
}
</style>
