<template>
  <div>
    <footer id="footer" :class="`${isSma && 'isSma'}`">
      <div class="container flex">
        <!-- 描述  description -->
        <div class="footer-item footer-description">
          <div class="footer-logo">
            <div class="logo-bw"></div>
          </div>
          <div class="small-font description" v-html="footerText.content"></div>
        </div>

        <!-- Email -->
        <div class="footer-item enter-email">
          <div class="subscribe">
            Subscribe
          </div>
          <div class="email">
            <!-- email input -->
            <div class="email-border email-input" @click="eFocus">
              <input class="email-inp" type="email" name="email" ref="emailInput" v-model="emailVal">
              <div class="email-text" v-show="!isInput">Enter-email</div>
            </div>
            <div class="email-border submit" @click="enter">
              <div class="arrow-right" style="cursor:pointer;">
                <img src="/images/Footer/Enter.svg" alt="The image cannot be displayed properly">
              </div>
            </div>
          </div>
          <div class="social">
            <img style="cursor:pointer;" :src="item.image" v-for="(item, index) in shareList" @click="handleShare(item)" alt="The image cannot be displayed properly">
<!--            <img src="/images/Twitter.svg" alt="The image cannot be displayed properly">-->
<!--            <img src="/images/Linkedin.svg" alt="The image cannot be displayed properly">-->
          </div>
        </div>

        <LineComVue />
        <!-- 底部菜单 footer menus -->
        <div class="footer-item footer-menus">
<!--          <div class="small-font">Contact us</div>-->
<!--          <div class="small-font line">|</div>-->
          <div class="small-font skip-a">
            <span @click="onSkip('/about')">Team</span>
          </div>
          <div class="small-font line">|</div>
          <div class="small-font skip-a">
            <span @click="onSkip('http://jobs.foresightventures.com/')">Jobs</span>
          </div>
          <div class="small-font line">|</div>
<!--          <div class="small-font">
            <a target="_blank" href="https://www.zhipin.com/beijing/?sid=sem_pz_bdpc_dasou_title">Jobs</a>
          </div>
          <div class="small-font line">|</div>-->
          <div class="small-font skip-a">
            <span @click="onSkip('/terms')">Terms of Use</span>
          </div>
          <div class="small-font line">|</div>
          <div class="small-font skip-a">
            <span @click="onSkip('/privacy')">Privacy Policy</span>
          </div>
        </div>

        <!-- 备案号 Internet Content Provider -->
        <div class="footer-item footer-provider small-font">
          © 2000-{{ new Date().getFullYear() }}, Foresight Ventures Investments
        </div>
      </div>
    </footer>
  </div>
</template>
<script setup>
import LineComVue from './LineCom.vue';
import { useRouter } from 'vue-router'
import {onMounted, ref} from 'vue';
import {getAction, getConfigApi, getPageApi, subscribedApi} from "../api/manage.js";

const router = useRouter()

// email reg
const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

// isInput
let isInput = ref(false);

// input Object
let emailInput = ref(null);

// email value
let emailVal = ref('')

const footerText = ref({})

const eFocus = () => {
  isInput.value = true;
  emailInput.value.focus()
}

const eBlur = () => {
  isInput.value = false;
  emailVal.value = ''
}

const shareList = ref([])

const onSkip = (url) => {
  const reg = /^(http|https)/
  if (reg.test(url)) {
    window.open(url)
    return
  }
  router.push(url)
}

// 订阅
const enter = () => {
  if (emailVal.value) {
    if (emailReg.test(emailVal.value)) {
      console.log(emailVal.value)
      subscribedApi({email: emailVal.value}).then((res)=>{
        if (res.code === 1) {
          alert('subscribe success!');
        }
      })
    } else {
      alert('format error!')
      isInput.value = false;
    }
  } else {
    alert('value is null!')
  }
  isInput.value = false;
  emailVal.value = ''
}
const getData = ()=>{
  getPageApi({title:"Footer"}).then(res=>{
    footerText.value = res.data;
  })
  getAction({url: '/index/getShare', params: { type: 'pc' }}).then(res=>{
    shareList.value = res.data;
  })
}

const handleShare = (item)=> {
  window.open(item.link)
}
const isSma = ref(false)
onMounted(()=>{
  // 窗口大小改变时触发
  function changeSize() {
    const pageSize = window.innerWidth;
    if (pageSize >= 1440) {
      isSma.value = false;
    } else if (pageSize > 430 && pageSize < 1440) {
      isSma.value = false;
    } else if (pageSize <= 430) {
      isSma.value = true;
    }
  }
  changeSize()
  window.onresize = changeSize
  getData()
})

</script>
<style lang="scss" scoped>
#footer {
  width: 100%;
  background-color: #000000bf;
  padding: 40px 0;
  &.isSma {
    padding-bottom: 120px !important;
  }
  .flex {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

  }

  .footer-item {
    position: relative;
    width: 50%;
  }

  .footer-item:nth-of-type(even) {
    text-align: right;
  }

  .footer-description {
    .footer-logo {
      width: 136px;
      height: 16px;
      background: url('/images/Logo_mono_text.png') no-repeat center/100%;
    }

    .description {
      width: 200px;
    }
  }

  .enter-email {
    .subscribe {
      font-family: 'Libre Bodoni';
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 14px;
      color: rgba(255, 255, 255, 0.5);
    }

    .email {
      height: 40px;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;

      .email-input {
        position: relative;
        height: 14px;

        .email-inp {
          width: 100%;
          height: 100%;
          background-color: transparent;
          border: none;
          outline: none;
          font-size: 15Px;
          color: #fff;
        }

        .email-text {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Raleway';
          font-style: normal;
          font-weight: 400;
          font-size: 15Px;
          line-height: 12px;
          white-space: nowrap;
          color: rgba(255, 255, 255, 0.5)
        }
      }

      .submit {
        height: 14px;
      }

      .arrow-right {
        width: 24px;
        height: 12px;
        line-height: 12px;
        position: relative;

        img {
          position: absolute;
          left: 20%;
          top: 15%;
          width: 12px;
        }
      }

      .email-border {
        border: 1px solid rgba(255, 255, 255, 0.5);
      }
    }

    .social {
      margin-bottom: 34px;

      img {
        width: 16px;
        margin-left: 14px;
      }
    }
  }

  .footer-menus {
    display: flex;

    .small-font {
      a {
        color: #ffffff40 !important;
      }
    }

    .line {
      padding: 0 8px;
      color: #ffffff40;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {

      .line {
        padding: 0 5px !important;
      }

      .line:nth-child(3) {
        display: none !important;
      }
    }
  }

  .footer-provider {
    text-align: right;
  }

}

.small-font {
  margin-top: 20px;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 15Px;
  line-height: 12px;
  color: #ffffff40;
  * {
    font-size: 15Px;
  }
}
.skip-a {
  cursor: pointer;
}
</style>
