<template>
  <!-- colto-section -->
  <footer class="footer" @click="toggleMenu($event,2)">
	<div class="cszone">
		<a href="javascript:void(0);" @click="scbox()"><img src="../assets/img/home/kefu.png"></a>
	</div>
	
    <div class="content">
      <div class="footer-upper-section">
        <!-- logo -->
        <div class="footer-upper-section-top">
          <div class="footer-logo">
            <div style="width: 89px; height: 44px">
              <img
                :src="appConfig.head_logo"
                alt="logo"
                style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;"
              />
            </div>
            <div style="color: #5B5B5B;font-size: 16px;margin-top: 10px;">{{ appConfig.copyright }}</div>
          </div>
        </div>
        
        <div class="footer-upper-section-lang">
          <!-- <button class="navbar-toggler lang_now" type="button"
           data-toggle="collapse" data-target="#lang_menu"
                    aria-controls="lang_menu" aria-expanded="false" aria-label="Toggle navigation">{{ nativeLang }}
            </button> -->
          <button class="lang_now" @click="toggleMenu">{{ nativeLang }}</button>
         <div class="lang_menu" id="lang_menu" :class="showMenu?'show':'hide'">
            <div class="item" v-for="(item1, index1) in langList" :key="index1" @click.prevent="chooseNative(item1.value)">
            {{ item1.label }}
          </div>
          </div>
        </div>
        <div class="footer-upper-section-list">
          <!-- service -->
          <div class="service" v-if="service.length>0">
            <div class="item" style="width: 100%;text-align: left">
              <p
                class="item_p"
                style="
                  
                  font-size: 20px;
                  color: #fff;
                "
              >
                {{ $t("common.service") }}
              </p>
              <p class="foot_p" >
				 <span class="serviceText" @click="Jump(service[0].url)">{{service[0].label}}</span>
			  </p>
			  <p class="foot_p" >
				  <span class="serviceText" @click="Jump(service[1].url)">{{service[1].label}}</span>
			  </p>
			  <p class="foot_p" >
				  <span class="serviceText" @click="Jump(service[2].url)">{{service[2].label}}</span>
			  </p>
                <!-- <router-link :to="service[0].url">{{
                  service[0].label
                }}</router-link>
              </p>
              <p class="foot_p" >
                <router-link :to="service[1].url">{{
                  service[1].label
                }}</router-link>
              </p>
              <p class="foot_p" >
                <router-link :to="service[2].url">{{
                  service[2].label
                }}</router-link> -->
                <!-- <router-link :to="service[3].url">{{ service[3].label }}</router-link> -->
              </p>
              <!-- <p class="foot_p" >
                <router-link :to="service[3].url">{{
                  service[3].label
                }}</router-link>
              </p> -->
            </div>
          </div>
          <!-- college -->
          <div class="college" style="margin:0 119px;" v-if="college.length>0">
            <div class="item item1" style="width: 100%;text-align: left">
              <p
                class="item_p"
                style="
                  
                  font-size: 20px;
                  color: #fff;
                "
              >
                {{ $t("common.college") }}
              </p>
			  <p class="foot_p">
			  	<span class="serviceText" @click="Jump(college[0].url)">{{college[0].label}}</span>
			  </p>
			  <p class="foot_p">
			  	<span class="serviceText" @click="Jump(college[1].url)">{{college[1].label}}</span>
			  </p>
			  <p class="foot_p">
			  	<span class="serviceText" @click="Jump(college[2].url)">{{college[2].label}}</span>
			  </p>
			  <p class="foot_p">
			  	<span class="serviceText" @click="Jump(college[3].url)">{{college[3].label}}</span>
			  </p>
              <!-- <p class="foot_p" >
                <router-link :to="college[0].url">{{
                  college[0].label
                }}</router-link>
              </p>
              <p class="foot_p" >
                <router-link :to="college[1].url">{{
                  college[1].label
                }}</router-link>
              </p>
              <p class="foot_p" >
                <router-link :to="college[2].url">{{
                  college[2].label
                }}</router-link>
              </p>
              <p class="foot_p" >
                <router-link :to="college[3].url">{{
                  college[3].label
                }}</router-link>
              </p> -->
            </div>
          </div>
          <!-- email -->
          <div class="item">
            <p
              class="item_p"
              style="text-align: left; font-size: 20px; color: #fff"
            >
              {{ $t("common.contactUs") }}
            </p>
            <p class="foot_p" style="font-size: 14px;color:#797979;">
              {{ $t("common.email") }}:
            </p>
            <p class="foot_p" style="font-size: 14px;color:#797979;">
              {{ email }}
            </p>
          </div>
          
          <!-- <div class="logo"> -->
          <!-- <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" /> -->
          <!-- <div style="width: 90px; height: 91px">
              <img
                :src="appConfig.head_logo"
                alt="logo"
                style="width: 100%; height: 100%; object-fit: contain"
              />
            </div> -->
          <!-- <span>{{$t('common.footerTips1')}}</span> -->
          <!-- </div> -->
          <!-- <span>{{ $t('common.footerTips1') }}</span> -->
          <!-- <p class="foot_p">{{ $t('common.footerTips2', {name: appConfig.name}) }}</p> -->
          <!-- <p class="foot_p">{{$t('appConfig.name')}}</p> -->
          <!-- <p class="foot_p">{{ $t('common.footerTips3') }}</p> -->
        </div>
        
        <!-- email -->
        <!-- <div class="item" style="width:30%;margin-top: 74px;">
                  <p class="item_p" style="text-align: start; font-size:16px;">{{ $t("common.contactUs") }}</p>
                  <p class="foot_p" style="text-align: start; font-size:16px;">
                      {{ $t("common.email") }}:{{ email }}
                  </p>
                  <div class="icon_foot">
                      <img src="../assets/img/chat.png">
                      <div class="icon_img" v-for="(item,index) in list" :key="item">
                        <img :src="item.src"/>
                      </div>
                  </div>
                  <p class="foot_p" style="width:100%">
                    {{email}}
                  </p>
              </div> -->
        <!-- <div class="container">
                <div class="row"> -->
        <!-- <div class="col-lg-2 col-md-3 mb-4">
                <div class="footer-logo">
                  <a href="#">
                    <img :src="logo.imgurl" alt="img" class="img-responsive" />
                    <img :src="appConfig.foot_logo" alt="logo" />
                  </a>
                </div>
              </div> -->
        <!-- 服务列表 -->
        <!-- <div class="col-lg-1 col-md-3 mb-4">
                <div class="footer-info-list">
                  <h4>{{ $t("common.service") }}</h4>
                  <ul>
                    <li v-for="(item, index) in service" :key="index">
                      <router-link :to="item.url">{{ item.label }}</router-link>
                    </li>
                  </ul>
                </div>
              </div> -->
        <!-- 学院列表 -->
        <!-- <div class="col-lg-1 col-md-3 mb-4">
                <div class="footer-info-list">
                  <h4>{{ $t("common.college") }}</h4>
                  <ul>
                    <li v-for="item in college" :key="item.id">
                      <router-link :to="item.url">{{ item.label}}</router-link>
                    </li>
                  </ul>
                </div>
              </div> -->
        <!-- 联系我们 -->
        <!-- <div class="col-lg-2 col-md-6">
                <div class="footer-info-list">
                  <h4>{{$t('common.contactUs')}}</h4>
                  <ul class="contact-info">
                    <li>
                      {{ $t("common.email") }}:
                      <span>{{email}}</span>
                    </li>
                    <li>
                      Phone: <span>{{contactinfo.mobile}}</span>
                    </li>
                  </ul>
                  <ul class="social-style-two">
                    <li>
                      <a href="#">
                        <i class="fab fa-facebook-f"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="fab fa-twitter"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="fab fa-google-plus-g"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="fab fa-github"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i class="fab fa-linkedin-in"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div> -->
        <!-- <div class="col-lg-4 col-md-6 border-left">
                <div class="pl-2 ">
                  <div class="mb-2">
                    {{$t('common.footerTips1')}}
                  </div>
                  <div class="mb-2"> {{$t('common.footerTips2',{name:appConfig.name})}}</div>
                  <div class="mb-2">{{$t('common.footerTips3')}}</div>
                </div>
              </div> -->
        <!-- </div> -->
        <!-- </div> -->
      </div>
      <div class="footer-right">
        <div style="font-size: 20px;">{{ $t("homeNewText.bb39",{name:'Mrbcoin'}) }}</div>
		<router-link class="jump_btn" to="/sign-up" v-if="!isLogin">{{ $t("homeNewText.bb43") }}</router-link>
        <router-link class="jump_btn" to="/exchange" v-else>{{ $t("homeNewText.bb42") }}</router-link>
        <img src="@/assets/img/home/mrb.png" alt="" style="width: 120px;height: 120px;">
        <div style="font-size: 16px; color: #9c9c9c;margin-top: 12px;">{{ $t("homeNewText.bb40",{name:'Mrbcoin'}) }}</div>
      </div>
	  
	  <div class="cspopup" :class='{"hidden":ispopup?"":"none"}'>
	  		<a href="javascript:void(0);" class="close_btn" @click="closebox();">x</a>
	  		<iframe width="100%" height="100%" class="my-modal-body" :src="ifurl" frameborder="0" style="border-radius: 10px;background-color: #fff;"></iframe>
	  </div>
    </div>
  </footer>
</template>
<script>
import College from "@/api/college";
import ContactUs from "@/api/contactUs";
import Member from "@/api/member";
import { mapState } from "vuex";
export default {
  data() {
    return {
      service: [],
      college: [],
      email: "",
	  ispopup:false,
	  ifurl:"",
      list: [
        { src: "https://www.rsncoin.com/static/flag/discord.png" },
        { src: "https://www.rsncoin.com/static/flag/telegram.png" },
        { src: "https://www.rsncoin.com/static/flag/tiktok.png" },
        { src: "https://www.rsncoin.com/static/flag/twitter.png" },
        { src: "https://www.rsncoin.com/static/flag/reddit.png" },
        { src: "https://www.rsncoin.com/static/flag/ins.png" },
        { src: "https://www.rsncoin.com/static/flag/cap.jpg" },
        { src: "https://www.rsncoin.com/static/flag/vk.png" },
        { src: "https://www.rsncoin.com/static/flag/youtube.jpg" },
      ],
      langList: [
        // {
        //     value: "cn", // zh-CN
        //     label: "简体中文"
        // },
        {
          value: "en",
          label: "English",
          url: require("../assets/img/en.jpg"),
        },
        {
          value: "kor",
          label: "한국어",
          url: require("../assets/img/kor.jpg"),
        },
        {
          value: "de",
          label: "Deutsch",
          url: require("../assets/img/de.jpg"),
        },
        {
          value: "fra",
          label: "Français",
          url: require("../assets/img/fra.jpg"),
        },
        {
          value: "spa",
          label: "Español",
          url: require("../assets/img/spa.jpg"),
        },
        {
          value: "it",
          label: "Italiano",
          url: require("../assets/img/it.jpg"),
        },
        {
          value: "jp",
          label: "日本語",
          url: require("../assets/img/jp.jpg"),
        },
        {
          value: "pt",
          label: "Português",
          url: require("../assets/img/pt.jpg"),
        },
        {
          value: "tr",
          label: "Turkey",
          url: require("../assets/img/tr.jpg"),
        },
        {
          value: "tw", // zh-TW
          label: "繁体中文",
          url: require("../assets/img/tw.jpg"),
        },
      ],
      showMenu: false
    };
  },
  computed: {
    ...mapState({
      appConfig: "appConfig",
    }),
	isLogin() {
	  return Boolean(localStorage.token);
	},
    // 当前语言
    nativeLang() {
      let UALang;
      // 检测中文简体和翻译
      // if (navigator.language.startsWith("zh")) {
      //     UALang = _.trimStart(navigator.language, "zh-").toLowerCase();
      // } else {
      UALang = "en"; // 其余英文
      // }
      let lang = localStorage.lang || UALang;
      if (localStorage.getItem("lang") == null) {
        // let localStorage.getItem("lang") = 'en';
      }
      this.langer = require("../assets/img/" + lang + ".jpg");
      return this.langList.find((item) => item.value == lang).label;
    },
  },
  methods: {
	Jump(vle){
		this.$router.push(vle);
	},
    toggleMenu(e, type){
      e.stopPropagation();
      if(type===2){
        this.showMenu = false;
      }else{
        this.showMenu = !this.showMenu;
      }
    },
    chooseNative(native) {
      // 设置语言
      localStorage.setItem("lang", native);
      // 刷新页面
      this.$router.go(0);
    },
    getCollegeLinks() {
      College.getCategoryList()
        .then((list) => {
          list.forEach((item) => {
            this.college.push({
              url: `/college/list/${item.id}`,
              label: item.name,
            });
          });
        })
        .catch((err) => {});
    },
    getServiceLink() {
      College.getServiceList()
        .then((list) => {
          list.forEach((item) => {
            this.service.push({
              url: `/service/${item.id}`,
              label: item.name,
            });
          });
        })
        .catch((err) => {});
    },
    getEmial() {
      ContactUs.contact()
        .then((data) => {
          this.email = data.contact;
        })
        .catch((err) => {});
    },
	scbox(e){
		// under login 
		if (this.isLogin) {
		// get user infomation
		let user_str = localStorage.getItem("auth");
			if(user_str!=""){
				let user = JSON.parse(user_str);
				// 查询对应的推荐人帐号
				Member.getUnameByUid({user_id:user.referrer}).then(rfres=>{
					// query referr uname
					this.ifurl ="https://sc.mrbcoin.com/chat/?toid="+rfres.username+"&room_id="+user.account+"&usid="+user.user_id;
					// show popup
					this.ispopup = ! this.ispopup
				})
			}
		}else{
			console.log("login fisrt!!")
			this.$router.push({ path: '/sign-in' });
		}
	},
	closebox(){
		if(this.ispopup){
			this.ispopup = false
		}
		this.ispopup =false
	}
  },
  created() {
    this.getCollegeLinks();
    this.getServiceLink();
    // console.log(this.service);
    this.getEmial();
  },
};
</script>
<style scoped lang="scss">
.footer {
  background-color: #121212;
  border-top: none;
  
	.cszone{
  		width:48px;
  		position:fixed;
  		bottom:10%;
  		right:26px;
  		z-index:999;
  		background-color: #fff;
  		border-radius: 10px;
    }
    
    .cszone img{
        text-align:center;
        width:48px;
        height:48px;
    }
  
  .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    height: 560px;
    margin: 0px auto;
  }
  .footer-upper-section {
      padding: 0px;

      .footer-upper-section-lang{
        width: 182px;height: 49px;
        border-radius: 11px;
        border: 1px solid #fff;
        font-size: 16px;
        margin: 37px 0px 31px;
        position: relative;

        .lang_now{
          display: block;
          text-align: center;
          width: 100%;
          line-height: 45px;
          color: #fff;
          background-color: transparent;
          outline: none;
          border: none;
          position: relative;

          &::before{
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            background-image: url("../assets/img/home/global_grey.png");
            background-size: 100%;
            left: 24px;
            top: 12px;
          }

          &::after{
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-top: 1px solid transparent;
            border-left: 1px solid #999;
            border-right: 1px solid transparent;
            border-bottom: 1px solid #999;
            transform: rotate(-45deg);
            right: 30px;
            top: 18px;
          }
        }
        .lang_menu{
          position: absolute;
          width: 182px;
          height: 220px;
          background-color: #fff;
          border-radius: 10px;
          overflow: scroll;
          color: #101010;

          &::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;}
          &::-webkit-scrollbar-track { background-color: transparent;}
          &::-webkit-scrollbar-thumb { background-color: transparent;}

          .item{
            padding: 10px;
            cursor: pointer;
            text-align: center;
          }
          .item:hover{
            background-color: #f8f9fa;
          }
          
          &.show{
            display: block;
          }
          &.hide{
            display: none;
          }
        }
      }
      .footer-upper-section-list {
        display: flex;
        justify-content: space-between;
      }
      .footer-upper-section-top {
        .footer-logo {
          
        }
      }

      .item_left {
        width: 454px;
        //   margin-right: 300px;
        .logo {
          display: flex;
          align-items: center;
          color: #172636;
          justify-content: space-between;
          width: 100%;
          font-size: 16px;
        }
      }

  }

  .footer-right{
    display: flex;
    flex-direction: column;
    align-items: center;

    .jump_btn{
      display: inline-block;
      min-width: 200px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      color: #101010;
      background-color: #fff;
      border-radius: 50px;
      font-size: 20px;
      padding: 0px 20px;
      box-sizing: border-box;
      margin: 46px 0px 42px;
    }
  }

}

.cspopup{
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:560px;
	height:560px;
	z-index:999;
		
	.close_btn{
		width:35px;
		height:35px;
		font-size:20px;
		font-weight:500;
		line-height:30px;
		text-align:center;
		display:block;
		color:#fff;
		background:#553646;
		border-radius:50%;
		position:absolute;
		right:-10px;
		top:-10px;
		z-index:1000;
	}
}
.hidden{
  display:none;
}

.serviceText{
	color: #797979;
	text-decoration: none;
	display: inline-block;
	-webkit-transition: .4s ease-in;
	transition: .4s ease-in;
}
.serviceText:hover{
	color: #b5b5b5;
	cursor: pointer;
}

.foot_p {
  color: #b5b5b5;
  font-size: 16px;
  margin: 0;
  
	
  // a:hover {
  //   color: #b5b5b5;
  // }

  // a:visited {
  //   color: #b5b5b5;
  // }
}

.icon_foot {
  margin-top: 5px;
  height: 130px;
  width: 180px;
  display: flex;
  flex-wrap: wrap;

  .icon_img {
    height: 30px;
    width: 30px;
    margin: 0px 5px;

    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }
}
</style>