<template>
  <div
    v-on:click="onBannerClick()"
    v-bind:style="{
      cursor: 'pointer',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff067',
      height: isPCDevice ? 45 + 'px' : defaultSize * 6 + 'px',
      marginBottom: 20 + 'px',
    }"
  >
    <img
      src="https://nosearch.com/static/images/kakao_channel_icon.png"
      v-bind:style="{
        width: defaultSize * 2.4 + 'px',
        height: defaultSize * 2.53 + 'px',
      }"
    />
    <div
      v-bind:style="{
        marginLeft: 0.6 * defaultSize + 'px',
        fontSize: 1.2 * defaultSize + 'px',
        lineHeight: 1.77 * defaultSize + 'px',
      }"
    >
      <div>
        <strong>노써치 카톡 채널 추가</strong>하고
        <span v-if="isPCDevice === true"></span>
        <br v-if="isPCDevice === false" />

        <strong v-bind:style="{ textDecoration: 'underline' }"
          >전자제품 할인 행사</strong
        >
        가장 먼저 받아보세요!
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "kakaoBanner",
  delimiters: ["[[", "]]"],
  props: {},
  data() {
    return {
      defaultSize: 10,
    };
  },
  computed: {
    isPCDevice: () => {
      return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
        ? false
        : true;
    },
  },
  methods: {
    onBannerClick: () => {
      window.open("https://pf.kakao.com/_iFGTT/friend?a=11st.co.kr", "_blank");
      if (window.mixpanel) {
        window.mixpanel.track("카카오톡_채널_추가_클릭", { type: "banner" });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
