<template>
  <div class="mark-box" v-if="mark.isEnable">
    <img
      class="img"
      v-if="mark.src"
      :style="mark.position"
      :src="require(`./img/${mark.src}.png`)"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'mark-box',
  data() {
    return {
      drawInfo: {},
      voteInfo: {},
      toggle: true
    };
  },
  computed: {
    ...mapGetters({
      channelConfig: 'channelConfig'
    }),
    mark() {
      const info = this.channelConfig.mark || {};
      const position = info.position || { top: '10px', left: '10px' };
      const positionNew = {};
      for (const key in position) {
        if (key) {
          positionNew[key] = `${position[key].replace('px', '') / 100}rem`;
        }
      }
      return {
        isEnable: info.isEnable === 1,
        type: info.type || 'icon',
        src: info.src || 'icon-4k',
        position: positionNew
      };
    }
  }
};
</script>

<style lang="less" scoped>
.mark-box {
  img {
    position: absolute;
    z-index: 100;
    height: 0.2rem;
  }
}
</style>
