<template>
  <div>
    <!-- banner -->
    <!-- <div class="banner" id="banner" > -->
      <!-- <a v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex" href="javascript:void(0);" class="d1" :style="`background:url(${$tImg(lbt,'cover')}) center no-repeat;`"></a> -->
      <!-- <a href="" class="d1" style="background:url(img/banner1.png) center no-repeat;"></a> -->
      <!-- <a href="" class="d1" style="background:url(img/banner.png) center no-repeat;"></a> -->
      <!-- <div class="d2" id="banner_id"> -->
        <!-- <ul> -->
          <!-- <li v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex"></li> -->
        <!-- </ul> -->
      <!-- </div> -->
    <!-- </div> -->


    <el-carousel :height="carouselHeight" @change="changeCarouselHeight">
      <el-carousel-item v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex">
        <div class="banner" @click="$to('detailedPage',{id:lbt.id})">
          <img class="d1" style="width: 100%;height:100%;" :src="$tImg(lbt,'cover')"/>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- banner -->
    <div class="contant">
      <div class="PageOne">
        <div class="OneUp clearfloat">
          <div class="OneUpL left">
            <!-- <span class="OneImg"><img src="img/gzdt_tu1.png" ></span> -->
            <!-- <span class="OneTxt">WORK DYNAMICS</span> -->
            <span class="OneTxt2" style="font-size:2rem;">
              <div class="OneTxt2_txt">{{$t('common.workDynamics')}}</div>
              <div class="OneTxt2_back"/>
            </span>
          </div>
          <a href="javascript:void(0):" class="OneUpR right" @click="$to('listPage',{pid:'1',id:'2'})">{{$t('common.more')}}></a>
        </div>
        <div class="OneDown">
          <ul class="clearfloat">
            <li v-for="(gzdt,gzdtIndex) in gzdtList" :key="gzdtIndex">
              <a href="javascript:void(0);" @click="$to('detailedPage',{id:gzdt.id})">
                <span class="OneDownImg"><img :src="$tImg(gzdt,'cover')" ></span>
                <div class="OneDownbox clearfloat">
                  <div class="OneDate left">
                    <span class="span1">{{getDay(gzdt.updateTime || gzdt.createTime)}}</span>
                    <span class="span2">{{getYearAndMonth(gzdt.updateTime || gzdt.createTime)}}</span>
                  </div>
                  <div class="OneCont right">
                    <h3 class="elli">{{$tf(gzdt,'title')}}</h3>
                    <div class="heng"></div>
                    <p>{{$tfnm(gzdt,'content',55)}}</p>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="PageTwo">
        <div class="PageTwoBox clearfloat">
          <div class="TwoL left">
            <div class="OneUp clearfloat">
              <div class="OneUpL left">
                <!-- <span class="OneImg"><img src="img/tzgg_2.png" ></span> -->
                <!-- <span class="OneTxt">NOTICE</span> -->
                <span class="OneTxt2" style="font-size:2rem;">
                  <div class="OneTxt2_txt">{{$t('common.notice')}}</div>
                  <div class="OneTxt2_back"/>
                </span>
              </div>
              <a href="javascript:void(0);" class="OneUpR right" @click="$to('listPage',{pid:'1',id:'3'})">{{$t('common.more')}}></a>
            </div>
            <div class="TwoLDown">
              <ul>
                <li v-for="(tzgg,tzggIndex) in tzggList" :key="tzggIndex">
                  <a href="javascript:void(0);" class="TwoLDownbox clearfloat" @click="$to('detailedPage',{id:tzgg.id})">
                    <div class="TwoLDate left">
                      <span class="Date1">{{getDay(tzgg.updateTime || tzgg.createTime)}}</span>
                      <span class="Date2">{{getYearAndMonth(tzgg.updateTime || tzgg.createTime)}}</span>
                    </div>
                    <div class="TwoLCont right">
                      <h3 class="elli">{{$tf(tzgg,'title')}}</h3>
                      <p>{{$tfnm(tzgg,'content',84)}}</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="TwoR right">
            <div class="OneUp clearfloat">
              <div class="OneUpL">
                <!-- <span class="OneImg"><img src="img/tzgg_3.png" ></span> -->
                <!-- <span class="OneTxt">FAST GUID</span> -->
                <span class="OneTxt2" style="font-size:2rem;">
                  <div class="OneTxt2_txt">{{$t('common.fastGuid')}}</div>
                  <div class="OneTxt2_back"/>
                </span>
              </div>
            </div>
            <div class="TwoRDown">
              <a v-for="(linksKsdh,linksKsdhIndex) in linksKsdhList" :key="linksKsdhIndex" href="javascript:void(0);" @click="window.open($tf(linksKsdh,'url'))" :style="linksKsdhIndex==0?'display: block;margin-bottom: 22px;':''"><img :src="$tImg(linksKsdh,'logo')"></a>
              <!-- <a href="" class=""><img src="img/tzgg_5.png" ></a> -->
            </div>
          </div>
        </div>
      </div>
      <div class="PageThree">
        <div class="OneUp clearfloat">
          <div class="OneUpL">
            <!-- <span class="OneImg"><img src="img/tzgg_4.png" ></span> -->
            <!-- <span class="OneTxt">LINK</span> -->
            <span class="OneTxt2" style="font-size:2rem;">
              <div class="OneTxt2_txt">{{$t('common.link')}}</div>
              <div class="OneTxt2_back"/>
            </span>
          </div>
        </div>
        <div class="ThreeDown">
          <div id="marquee1" class="marqueeleft">
            <div style="width: 1264px;">
              <!-- <vue-seamless-scroll class="seamless-warp" :direction="2">
                <ul id="marquee1_1">
                  <li v-for="(linksYqlj,linksYqljIndex) in linksYqljList" :key="linksYqljIndex">
                    <span class="pic" href="javascript:void(0);" @click="window.open($tf(linksYqlj,'url'))"><img width="120" height="120" :src="$tImg(linksYqlj,'logo')"></span>
                  </li>
                </ul>
              </vue-seamless-scroll> -->
                <vue-seamless-scroll
                  :data="linksYqljList"
                  :class-option="classOption"
                  class="warp"
                  ref="wss"
                  :maxWidth="1264"
                >
                  <ul id="marquee1_1">
                    <li v-for="(linksYqlj,linksYqljIndex) in linksYqljList" :key="linksYqljIndex" :title="$tf(linksYqlj,'title')">
                      <span class="pic" href="javascript:void(0);" @click="window.open($tf(linksYqlj,'url'))">
                        <img width="120" height="120" :src="$tImg(linksYqlj,'logo')">
                      </span>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
import vueSeamlessScroll from './vue-seamless-scroll'

export default {
  mixins:[getwayMixin],
  components:{ vueSeamlessScroll },
  props:{
  },
  data(){
    return {
      window,
      lbtList:[],
      gzdtList:[],
      tzggList:[],
      linksKsdhList:[],
      linksYqljList:[],
      classOption: {
        limitMoveNum: 2,
        direction: 2,
      },
      carouselHeight: ''
    }
  },
  computed:{
  },
  mounted(){
    this.loadData();
    const that = this
    let load = () => {
      return (() => {
        let image = document.querySelector('.el-carousel__item.is-active.is-animating img')
        that.refreshImageHeight(image);
      })()
    };
    //当页面大小变动时，更新高度
    window.onresize = load;
    // window.onload = load;
  },
  updated(){
    // this.$nextTick(() => {
    //   let image = document.querySelector('.el-carousel__item.is-active.is-animating img')
    //   this.refreshImageHeight(image);
    // })
  },
  methods:{
    loadData(){
      console.log('main.vue.this =>',this);
      //轮播图
      getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',type:'首页轮播'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.lbtList = list;
          if(list && list.length){
            // console.log(list,list[0],this.$tImg(list[0],'cover'),this);
            //用第一张图刷新高度
            this.refreshImageHeightByUrl(this.$tImg(list[0],'cover'));
          }
        }
      });
      //工作动态
      getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',columnId:'2'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.gzdtList = list;
        }
      });
      //通知公告
      getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'3'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.tzggList = list;
        }
      });
      //快速导航
      getAction('/gateway/gatewayLinks/list',{pageSize:-1,isEnable:'Y',type:'快速导航'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.linksKsdhList = list;
        }
      });
      //友情链接
      getAction('/gateway/gatewayLinks/list',{pageSize:-1,isEnable:'Y',type:'友情链接'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.linksYqljList = list;
        }
      });
    },
    getDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getDate()
    },
    getYearAndMonth(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getFullYear() + '-' + (d.getMonth()+1)
    },
    //根据image对象刷新高度
    refreshImageHeight(image){
      const that = this
      if(!image){
        that.carouselHeight = '';
        return;
      }
      let url = image.src;
      this.refreshImageHeightByUrl(url);
    },
    //刷新轮播图高度
    refreshImageHeightByUrl(url){
      const that = this
      let nImg = new Image();
      nImg.src = url;
      if(!nImg.height){
        that.carouselHeight = '';
        return;
      }
      let width = nImg.width;
      let height = nImg.height;

      let maxWidth = document.body.offsetWidth;
      // let maxHeight = document.body.offsetHeight;

      let widthProportion = maxWidth/width;
      that.carouselHeight = (height*widthProportion) + 'px';
    },
    //由轮播图变换触发的
    changeCarouselHeight(index){
      let image = document.querySelectorAll('.d1')[index];
      this.refreshImageHeight(image);
    },

  }
}
</script>

<style lang="less" scoped>

  .warp {
    width: 1264px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      &.ul-item {
        display: flex;
        .li-item {
          width: 120px;
          height: 120px;
          margin-right: 10px;
          line-height: 120px;
          background-color: #999;
          color: #fff;
          text-align: center;
          font-size: 30px;
        }
      }
    }
  }
  .OneTxt2{
    font-size:2rem;
    .OneTxt2_txt{
      position: relative;
      z-index: 2;
      color:#006876;
    }
    .OneTxt2_back{
      width: 8rem;
      height: 1rem;
      border-radius: 1%;
      background-color: #fdf9d9;
      position: relative;
      z-index: 1;
      top: -1rem;
    }
  }
</style>