<template>
  <!-- colto-section -->
  <footer class="footer" @click="toggleMenu($event,2)">
    <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.foot_logo"
                alt="logo"
                style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;"
              />
            </div>
            <div style="color: #000;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">
			  <img :src="langer" style="border-radius: 20px;width:24px;height:24px;" />
			  {{ nativeLang }}
		  </button>
		  
         <div class="lang_menu" id="lang_menu" :class="showMenu?'show':'hide'">
            <div class="item" v-for="(item, index) in langList" :key="index" @click.prevent="chooseNative(item.value)">
				<div class="flag-img"><img :src="item.url" mode=""/></div>
				<div class="txt">{{ item.label }}</div>
			</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: #000;">{{ $t("common.service") }}</p>
			  <p class="foot_p" v-for="(items,index) in service" :key="index">
			  	  <span class="serviceText" @click="Jump(items.url)">{{items.label}}</span>
			  </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> -->
			  <!-- <p class="foot_p" >
			  	  <span class="serviceText" @click="Jump(service[3].url)">{{service[3].label}}</span>
			  </p> -->
			  <!-- <p class="foot_p" >
			  	  <span class="serviceText" @click="Jump(service[4].url)">{{service[4].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: #000;">{{ $t("common.college") }}</p>
			  <p class="foot_p" v-for="(item,index) in college" :key="index">
			  	<span class="serviceText" @click="Jump(item.url)">{{item.label}}</span>
			  </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: #000">{{ $t("common.contactUs") }}</p>
            <p class="foot_p" style="font-size: 14px;color: #5B5B5B;">{{ $t("common.email") }}:</p>
            <p class="foot_p" style="font-size: 14px;color: #5B5B5B;">{{ 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.hh44",{name:"Iwebpal"}) }}</div>
		<router-link class="jump_btn" to="/sign-up" v-if="!isLogin">{{ $t("homeNewText.hh48") }}</router-link>
        <router-link class="jump_btn" to="/exchange" v-else>{{ $t("homeNewText.hh45") }}</router-link>
        <img src="@/assets/img/home/iweb.png" alt="" style="width: 120px;height: 120px;background-color: #ccc;">
        <div style="font-size: 16px; color: #9C9C9C;margin-top: 12px;text-align: center;">{{ $t("homeNewText.hh46",{name:"Iwebpal"}) }}</div>
      </div>
    </div>
  </footer>
</template>
<script>
import College from "@/api/college";
import ContactUs from "@/api/contactUs";
import { mapState } from "vuex";
export default {
  data() {
    return {
      service: [],
      college: [],
      email: "",
      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/flag/en.jpg"),
		},
		{
		    value: "kor",
		    label: "한국어",
		    url: require("../assets/img/flag/kor.jpg"),
		},
		{
		    value: 'de',
		    label: 'Deutsch',
		    url: require("../assets/img/flag/de.jpg"),
		},
		{
		    value: 'fra',
		    label: 'Français',
		    url: require("../assets/img/flag/fra.jpg"),
		},
		{
		    value: 'spa',
		    label: 'Español',
		    url: require("../assets/img/flag/spa.jpg"),
		},
		{
		    value: 'it',
		    label: 'Italiano',
		    url: require("../assets/img/flag/it.jpg"),
		},
		// {
		//     value: 'ukr',
		//     label: 'УкраїнськаName'
		// },
		// {
		//     value: 'swe',
		//     label: 'Svenska'
		// },
		// {
		//     value: 'fin',
		//     label: 'Suomi'
		// },
		{
		    value: "jp",
		    label: "日本語",
		    url: require("../assets/img/flag/jp.jpg"),
		},
		// {
		//     value: 'pl',
		//     label: 'Polski'
		// },
		{
		    value: 'pt',
		    label: 'Português',
		    url: require("../assets/img/flag/pt.jpg"),
		},
		{
		    value: 'tr',
		    label: 'Turkey',
		    url: require("../assets/img/flag/tr.jpg"),
		},
		{
		    value: "tw", // zh-TW
		    label: "繁体中文",
		    url: require("../assets/img/flag/tw.jpg")
		}
      ],
      showMenu: false,
	  langer: ''
    };
  },
  computed: {
	isLogin() {
		return Boolean(localStorage.token);
	},
    ...mapState({
      appConfig: "appConfig",
    }),
    // 当前语言
    nativeLang() {
        let UALang;
        // 检测中文简体和翻译
        // if (navigator.language.startsWith("zh")) {
        //     UALang = _.trimStart(navigator.language, "zh-").toLowerCase();
        // } else {
            UALang = "en"; // 其余英文
        // }
    
        let lang = localStorage.lang || UALang;
        this.langer = require("../assets/img/flag/" + 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) => {
			// console.log(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) => {});
    },
  },
  created() {
    this.getCollegeLinks();
    this.getServiceLink();
    // console.log(this.service);
    this.getEmial();
  },
};
</script>
<style scoped lang="scss">
.footer {
  background-color: #fff;
  border-top: none;
  color: #000;
  
  .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 #808080;
        font-size: 16px;
        margin: 37px 0px 0px;
        position: relative;

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

          // &::before{
          //   content: '';
          //   position: absolute;
          //   width: 24px;
          //   height: 24px;
          //   background-image: url("../assets/img/home/global.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 #808080;
            border-right: 1px solid transparent;
            border-bottom: 1px solid #808080;
            transform: rotate(-45deg);
            right: 30px;
            top: 18px;
          }
        }
        .lang_menu{
          position: absolute;
          width: 182px;
          height: 220px;
          background-color: #fff;
		  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.13);
          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: 15px;
            cursor: pointer;
            // text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 70px;
			
			.flag-img{
				width: 26px;
				height: 26px;
				border-radius: 50%;
			}
          }
          .item:hover{
            background-color: #f8f9fa;
          }
          
          &.show{
            display: block;
          }
          &.hide{
            display: none;
          }
        }
      }
      .footer-upper-section-list {
		  margin-top: 100px;
        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: #fff;
      background-color: #000;
      border-radius: 50px;
      font-size: 20px;
      padding: 0px 20px;
      box-sizing: border-box;
      margin: 46px 0px 42px;
    }
  }

}

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

.foot_p {
  color: #000;
  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%;
    }
  }
}
.flag-img{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 8px;
    margin-left: 6px;
    img{
      height: 100%;
    }
  }
  
  @media (max-width:1200px){
  	.content{
  		width: 100% !important;
  		padding: 0px 50px;
  	}
  }
  
  @media (max-width:835px){
  	.footer .footer-upper-section{
  		width: 100%;
  	}
  	
  	.footer .footer-right{
  		display: none;
  	}
  }
</style>