<template>
  <div id="lunbo">
    <el-row>
      <el-col :span="24" class="lunbo">
        <el-col :span="24" class="lunboTop">
          <span>合作单位</span>
        </el-col>
        <el-col :span="24" class="lunboInfo">
          <div class="box">
            <div class="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
              <el-col class="list" :span="24" v-for="(item, index) in lunboList" :key="index" @click.native="toOpen(item.url)">
                <el-image class="image" :src="item.pic"></el-image>
              </el-col>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'lunbo',
  props: {
    lunboList: null,
  },
  components: {},
  data: () => ({
    animate: false,
  }),
  created() {},
  computed: {},
  mounted() {
    this.timer1 = setInterval(this.scroll, 2000);
  },
  methods: {
    scroll() {
      let con1 = this.$refs.con1;
      con1.style.marginTop = '-105px';
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.lunboList.push(that.lunboList[0]);
        that.lunboList.shift();
        con1.style.marginTop = '0px';
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    mEnter() {
      clearInterval(this.timer1);
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 1000);
    },
    toOpen(url) {
      if (url === undefined) {
        this.$message('此信息无网址');
      } else {
        if (url.includes('http')) window.open(url);
        else window.open(`http://${url}`);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.lunboTop {
  height: 30px;
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px 0;
}
.lunboTop span {
  display: inline-block;
  height: 29px;
  line-height: 29px;
  border-bottom: 1px solid #850000;
  padding: 0 5px;
}
.lunboInfo {
  float: left;
  width: 100%;
  height: 310px;
  overflow: hidden;
}
.lunboInfo .list {
  float: left;
  width: 100%;
  height: 90px;
  margin: 0 0 15px 0;
}
.lunboInfo .list .image {
  float: left;
  width: 315px;
  height: 90px;
  border: 1px solid #ccc;
  margin: 0 15px;
}
.box {
  width: 100%;
  height: 310px;
  overflow: hidden;
}
.anim {
  transition: all 0.5s;
}
</style>
