<!--  -->
<template>
  <div class="layout" id="layout" ref="layout">
    <div class="review_video" v-if="whichVideo">
      <div class="review_video_con" :class="{'m-review_video_con':isMobile}">
        <video style="width:100%" @click.stop :src="whichVideo" controls autoplay loop>
          <source type="video/mp4">
          <source type="video/ogg">您的浏览器不支持视频！
        </video>
        <div class="close">
          <img @click.stop="whichVideo = null" :src="`${$cdn}/images/close.png`">
        </div>
      </div>
    </div>

    <section>
      <template v-if="isMobile">
        <div class="m-home">
          <img :src="`https://4dscene.4dage.com/cgaii/images/index/cgaii_index.jpg`" alt>
        </div>
      </template>
      <template v-else>
        <video :src="`${$cdn}/media/CGAII_WEB.mp4`" id="video_main" width="100%" muted autoplay loop>
          <source type="video/mp4">
          <source type="video/ogg">
          您的浏览器不支持视频！
        </video>
      </template>
    </section>

    <section class="home-1" :class="{'m-home1':isMobile}" id="yjly">
      <ctitle :title="'研究领域'"/>
      <section class="h1" id="h1">
        <template v-if="isMobile">
          <mDescribe class="m-describe" :title="ct1.title" :sub="ct1.content"/>
          <div class="mh1-img">
            <img :src="`${$cdn}/images/research-img.png`" alt>
          </div>
        </template>
        <template v-else>
          <describe
            class="article"
            :showAni="!showH1"
            :isLeft="true"
            :title="ct1.title"
            :sub="ct1.content"
          />
          <div class="h1-img">
            <img :class="{fadeIn:showH1}" :src="`${$cdn}/images/research-img.png`">
          </div>
        </template>
      </section>
      <section class="h2" :class="{'m-h2':isMobile}" id="h2">
        <template v-if="isMobile">
          <div class="normal m-normal">
            <mDescribe class="m-describe" :title="ct2.title" :sub="ct2.content"/>
            <div class="mh2-img">
              <img :src="`${$cdn}/images/renwu_new.png`">
              <img :src="`${$cdn}/images/faguang_new.png`">
            </div>
          </div>
        </template>
        <template v-else>
          <describe
              class="article"
              :showAni="!showH2"
              :isLeft="false"
              :title="ct2.title"
              :sub="ct2.content"
            />
          <div class="fix-normal">
            <div class="normal">
            <div class="h2-img">
              <img
                class="normal-img"
                :class="{vision:showH2}"
                :src="`${$cdn}/images/renwu_new.png`"
              >
              <img
                class="skew-img"
                :class="{'vision-delay':showH2}"
                :src="`${$cdn}/images/faguang_new.png`"
              >
            </div>
          </div>
          </div>
        </template>
      </section>
      <section class="h3" :class="{'m-h3':isMobile}" id="h3">
        <template v-if="isMobile">
          <mDescribe class="m-describe" :title="ct3.title" :sub="ct3.content"/>
          <div class="mh3-img">
            <img :src="`${$cdn}/images/mechanical_new.png`" alt>
          </div>
        </template>
        <template v-else>
          <describe
            class="article"
            :showAni="!showH3"
            :isLeft="true"
            :title="ct3.title"
            :sub="ct3.content"
          />
          <div class="h3-img">
            <img :src="`${$cdn}/images/mechanical_new.png`">
          </div>
        </template>
      </section>
      <section class="h4" :class="{'m-h4':isMobile}" id="h4">
        <template v-if="isMobile">
          <div class="normal m-normal">
            <mDescribe class="m-describe" :title="ct4.title" :sub="ct4.content"/>
            <div class="mh4-img">
              <img :src="require('@/assets/images/rbv.jpg')">
              <img :src="require('@/assets/images/rblight.png')">
            </div>
          </div>
        </template>
        <template v-else>
          <describe
            class="article"
            :showAni="!showH4"
            :isLeft="false"
            :title="ct4.title"
            :sub="ct4.content"
          />
          <div class="fix-normal">
            <div class="normal">
              <div class="h4-img">
                <img
                  class="normal-img"
                  :class="{vision:showH4}"
                  :src="require('@/assets/images/rbv.jpg')"
                >
                <img
                  class="skew-img"
                  :class="{'vision-delay':showH4}"
                  :src="require('@/assets/images/rblight.png')"
                >
              </div>
            </div>
          </div>
        </template>
      </section>
    </section>

    <section class="home-2" id="hzhb" :class="{'m-home2':isMobile}">
      <ctitle :title="'合作伙伴'"/>
      <section class="h2-l" :class="{'mh2-l':isMobile}">
        <template v-if="isMobile">
          <mImgTitle
            id="h5"
            :url="ctx5.link"
            :content="ctx5.content"
            :img="`${$cdn}/images/icon/DFKI.jpg`"
          />
          <div class="h2-l-con">
            <div class="c2-t1_bar">
              <img :src="require('@/assets/images/robotbg.jpg')">
            </div>
            <img :src="`${$cdn}/images/robot.png`">
            <span>(Photo @DFKI)</span>
          </div>
        </template>
        <template v-else>
          <imgTitle
            class="h2-img"
            id="h5"
            :content="ctx5.content"
            :img="`${$cdn}/images/icon/DFKI.jpg`"
            :url="ctx5.link"
          />
          <div class="h2-l-con">
            <div class="c2-t1_bar">
              <img :class="{robotClip:showH5}" :src="require('@/assets/images/robotbg.jpg')" alt>
            </div>
            <img :src="`${$cdn}/images/robot.png`" alt>
            <span>(Photo @DFKI)</span>
          </div>
        </template>
      </section>
      <section class="h2-r" :class="{'h6-top':isMobile}" id="h6">
        <template v-if="isMobile">
          <mImgTitle
            :url="ctx6.link"
            :content="ctx6.content"
            :img="`${$cdn}/images/icon/FourDLOGO.png`"
          />
          <div class="h2-r-con" >
            <div class="h2-r-con-txt">
              <img
                class="mymove"
                @click="goPath(ctx7.link)"
                :src="require('@/assets/images/logo-05.svg')"
                alt
              >
              <p v-for="(item,i) in ctx7.content" :key="i">{{item.mDetail}}</p>
            </div>
            <div class="c2-t2_bar">
              <img :src="require('@/assets/images/FDKKbg.jpg')" alt>
            </div>
            <img :src="`${$cdn}/images/4DKK.png`" id="sdkk" alt>
          </div>
        </template>
        <template v-else>
          <imgTitle
            class="h2-img"
            :content="ctx6.content"
            :url="ctx6.link"
            :img="`${$cdn}/images/icon/FourDLOGO.png`"
          />
          <div class="h2-r-con" id="sdkk">
            <imgTitle
              class="h2-img"
              :content="ctx7.content"
              :url="ctx7.link"
              :img="require('@/assets/images/logo-05.svg')"
            />
            <div class="c2-t2_bar">
              <img :class="{'robotClip-r':showH6}" :src="require('@/assets/images/FDKKbg.jpg')" alt>
            </div>
            <img :src="`${$cdn}/images/4DKK.png`" alt>
          </div>
        </template>
      </section>
      <section class="h2-l no-background" :class="{'mh2-l':isMobile}" id="h7">
        <template v-if="isMobile">
          <mImgTitle
            id="graphicsmedia"
            :url="ctx8.link"
            :content="ctx8.content"
            :img="`${$cdn}/images/icon/graphicsmedia.jpg`"
          />
          <div class="h2-l-con">
            <div class="c2-t1_bar fix-t1_bar">
              <img :src="require('@/assets/images/WHOLESHOW.jpg')">
            </div>
            <mExpert class="m-expert" :experts="experts"/>
          </div>
        </template>
        <template v-else>
          <imgTitle
            class="h2-img"
            :content="ctx8.content"
            :url="ctx8.link"
            :img="`${$cdn}/images/icon/graphicsmedia.jpg`"
            id="graphicsmedia"
          />
          <div class="h2-l-con">
            <div class="c2-t1_bar" style="margin-top:13vw">
              <img :class="{robotClip:showH7}" :src="require('@/assets/images/WHOLESHOW.jpg')" alt>
            </div>
            <div class="expert">
              <div class="expert-title">{{experts.title}}</div>
              <ul>
                <li v-for="(item, i) in experts.expert" :key="i">
                  <img :src="item.img">
                  <div class="expert_sub">
                    <div>{{item.name}}</div>
                    <p v-for="(sub,idx) in item.detail" :key="idx">{{sub}}</p>
                  </div>
                </li>
              </ul>
              <p class="chuchu">(Photo @graphicsmedia.net)</p>
            </div>
          </div>
        </template>
      </section>
    </section>

    <section class="home-3" :class="{'m-home3':isMobile}" id="zddh">
      <ctitle :title="'中德人工智能大会'"/>
      <template v-if="isMobile">
        <mConvention id="wjhg" @openVideo="item=>{whichVideo = item}" :content="meeting.c1"/>
        <mConvention @openVideo="item=>{whichVideo = item}" :content="meeting.c2"/>
        <mConvention @openVideo="item=>{whichVideo = item}" :content="meeting.c3"/>
      </template>
      <template v-else>
        <convention
          @openVideo="item=>{whichVideo = item}"
          id="wjhg"
          class="h3-top"
          :content="meeting.c1"
        />
        <convention @openVideo="item=>{whichVideo = item}" :content="meeting.c2"/>
        <convention @openVideo="item=>{whichVideo = item}" :content="meeting.c3"/>
      </template>
    </section>

    <div class="divide-line" v-if="isMobile">
      <img :src="require('@/assets/images/img_ele_transition@2x.png')">
    </div>

    <section class="home-4">
      <ctitle :title="'消息资讯'"/>
      <template v-if="isMobile">
        <div class="mh4">
          <img :src="message.topLeft">
          <div class="mh4-title">{{message.bottomLeft.title}}</div>
          <div class="mh4-detail">{{message.bottomLeft.detail}}</div>
          <img :src="message.bottomRigth">
          <div class="mh4-title">{{message.topRight.title}}</div>
          <div class="mh4-detail">{{message.topRight.detail}}</div>
          <div class="btn">
            <span @click="$router.push({path:'/message'})">更多资讯</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="h4-con">
          <div class="h4-top">
            <img :src="message.topLeft">
            <div class="h4-topTxt">
              <img :src="require('@/assets/images/yinhao.png')">
              <div class="h4-detail">{{message.topRight.detail}}</div>
              <div class="h4-title">{{message.topRight.title}}</div>
            </div>
          </div>
          <div class="h4-bottom">
            <div class="h4-bottomTxt">
              <img :src="require('@/assets/images/yinhao.png')">
              <div class="h4-detail">{{message.bottomLeft.detail}}</div>
              <div class="h4-title">{{message.bottomLeft.title}}</div>
            </div>
            <img :src="message.bottomRigth">
          </div>
          <div class="btn">
            <span @click="$router.push({path:'/message'})">更多资讯</span>
          </div>
        </div>
      </template>
    </section>

    <div class="divide-line" v-if="isMobile">
      <img :src="require('@/assets/images/img_ele_transition@2x.png')">
    </div>

    <section class="home-5" :class="{'m-home5':isMobile}">
      <ctitle class="h5-title" :title="'关于我们'"/>
      <template v-if="isMobile">
        <mAbout :join="join" id="gywm"/>
      </template>
      <template v-else>
        <div class="h5-con" id="gywm">
          <img :src="join.background">
          <div class="h5-txt">
            <div class="h5-txt-title">{{join.title}}</div>
            <div class="h5-txt-detail">
              <p v-for="(item,i) in join.detail" :key="i">{{item}}</p>
            </div>
          </div>
          <div class="btn">
            <span @click="$router.push({path:'/join-us'})">加入我们</span>
          </div>
        </div>
        <swiper/>
      </template>
    </section>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import ctitle from '@/components/ctitle'
import describe from '@/components/describe'
import imgTitle from '@/components/imgTitle'
import convention from '@/components/convention'
import swiper from '@/components/swiper'
import cn from '@/util/text/cn.js'
import browser from '@/util/browser.js'
import mDescribe from '@/components/m-describe'
import mImgTitle from '@/components/m-imgTitle'
import mExpert from '@/components/m-expert'
import mConvention from '@/components/m-convention'
import mAbout from '@/components/m-about'

let fixTop = 180
let {
  c1_t1: ct1,
  c1_t2: ct2,
  c1_t3: ct3,
  c1_t4: ct4,
  c2_t1: ctx5,
  c2_t2: ctx6,
  c2_t3: ctx7,
  c2_t4: ctx8,
  experts,
  meeting,
  message,
  join
} = cn
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    ctitle,
    convention,
    mImgTitle,
    describe,
    imgTitle,
    mDescribe,
    mConvention,
    swiper,
    mExpert,
    mAbout
  },
  data () {
    // 这里存放数据
    return {
      ct1,
      ct2,
      ct3,
      ct4,
      ctx5,
      ctx6,
      ctx7,
      ctx8,
      experts,
      convention,
      meeting,
      message,
      join,
      pageOffset: 0,
      showH1: false,
      showH2: false,
      showH3: false,
      showH4: false,
      showH5: false,
      showH6: false,
      showH7: false,
      whichVideo: null,
      isMobile: browser.mobile
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    pageOffset: function (newVal) {
      console.log(this.showH1)
    }
  },
  // 方法集合
  methods: {
    _closeVideo () {
      this.isOpenVideo = false
    },
    goPath (url) {
      window.open(url)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    document.addEventListener('WeixinJSBridgeReady', function () {
      document.getElementById('video_main').play()
      // document.getElementById('video').play();
    }, false)
    var top = 0
    var top2 = 0
    var top3 = 0
    var top4 = 0
    var top5 = 0
    var top6 = 0
    var top7 = 0

    let h1 = document.getElementById('h1')
    let h2 = document.getElementById('h2')
    let h3 = document.getElementById('h3')
    let h4 = document.getElementById('h4')

    let h5 = document.getElementById('h5')
    let h6 = document.getElementById('h6')
    let h7 = document.getElementById('h7')

    // let h3 = document.getElementById('h1')
    // let h4 = document.getElementById('h1')

    !this.isMobile &&
      window.addEventListener('scroll', () => {
        top = h1.offsetTop - fixTop * 2
        top2 = h2.offsetTop - fixTop * 4
        top3 = h3.offsetTop - fixTop
        top4 = h4.offsetTop - fixTop * 4

        top5 = h5.offsetTop
        top6 = h6.offsetTop
        top7 = h7.offsetTop - fixTop

        if (top || top2 || top3 || top4 || top5 || top6 || top7) {
          var scrollTop =
            document.documentElement.scrollTop ||
            window.pageYOffset ||
            document.body.scrollTop
          if (top >= scrollTop) {
            this.showH1 = false
          } else {
            this.showH1 = true
          }

          if (top2 >= scrollTop) {
            this.showH2 = false
          } else {
            this.showH2 = true
          }

          if (top3 >= scrollTop) {
            this.showH3 = false
          } else {
            this.showH3 = true
          }

          if (top4 >= scrollTop) {
            this.showH4 = false
          } else {
            this.showH4 = true
          }

          if (top5 >= scrollTop) {
            this.showH5 = false
          } else {
            this.showH5 = true
          }

          if (top6 >= scrollTop) {
            this.showH6 = false
          } else {
            this.showH6 = true
          }

          if (top7 >= scrollTop) {
            this.showH7 = false
          } else {
            this.showH7 = true
          }
        }
      })
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
@import "./style.css";
@import "./m-home.css";
</style>
