<template>
      <div class="new-active">
        <p class="info">最新动态BBS</p>
        <!-- <div v-if="list.length==0">
           <Spin fix>
                <Icon type="ios-loading" size=40 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
            </Spin>
        </div> -->
        <ul>
          <li v-for="(item,index) in list" :key="index" :data-id="item.id" :class="{colorA:index==0&&item.flag==1}">
            <div class="my-left">
              <span class="my-index">{{index+1}}.</span>
              <div class="my-marquee">
                <sgy-marquee ref="sgy-marquee" :hover="true">({{item.type=='1'?"工单":"报警"}}){{item.info}}</sgy-marquee>
              </div>
            </div>
            <div class="my-button">
              <span>{{item.createTime}}</span>
              <button class="cancel" v-if="item.flag==1" @click="cancelTop(item)">取消置顶</button>
              <button v-else @click="doTop(item, index)">置顶</button>
            </div>
          </li>
        </ul>   
      </div>
</template>

<script>
import axios from "axios";
import sgyMarquee from './SgyMarquee.vue'
export default {
  components: {sgyMarquee},

  mixins: [],

  props: {
    
  },

  data() {
    return {
      list: [
       
      ],
     
    };
  },

  computed: {
   
  },

  mounted() {
    this.init()
  },

  methods: {
    init() {
      //最新动态BBS
      axios.get(`/equipment/info-mng-backend/bbs/getAll?projectId=${this.$store.state.projectId}`).then(res => {
        this.list = res.data.data;
      });
    }, 
    //置顶数据
    doTop(item, index) {
      let data = {
        id: item.id,
        type:item.type,
        info:item.info,
        createTime:item.createTime
      }
      axios.post(`/equipment/info-mng-backend/bbs/stick?projectId=${this.$store.state.projectId}`, data).then(res => {
        if (res.data.result == 'success') {
           this.moveToTop(item,index);
        }
      })
    },
    //取消置顶
    cancelTop(item){
      //调接口，告诉后台取消置顶
      let data = {
        id: item.id,
        type:item.type,
        info:item.info,
        createTime:item.createTime
      }
      axios.post(`/equipment/info-mng-backend/bbs/unstick?projectId=${this.$store.state.projectId}`, data).then(res => {
        if (res.data.result == 'success') {
            this.list[0].flag=0;
           
        }
      })

    },
    //置顶效果
    moveToTop(item, index) {
      let el = document.querySelector(`li[data-id="${item.id}"]`)
      let arr = []
      for(let i of this.list) {
        if (i.id === item.id) {
          i.flag = 1
          arr.unshift(i)
        } else {
          i.flag = 0
          arr.push(i)
        }
        this.list = arr
        
      }
     this.$refs['sgy-marquee'].forEach(i => {
       i.init()
     })
    }
  }
};
</script>

<style scoped lang="less" >
.new-active {
  width:68%;
  border: 1px solid #ebecf0;
  background: #fff;
  min-width: 700px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.05);
  border-radius: 3px;
  .info {
    line-height: 50px;
    background: #f7f9fc;
    border: 0 solid #f2f2f2;
    padding-left: 20px;
    font-weight: bolder;
    font-size: 18px;
    color: #3b4254;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  ul {
    height: 257px;
    overflow: auto;
    margin: 0 20px;
    li {
      padding: 10px;
      border: 0 solid #f2f2f2;
      color: #62697b;
      display: flex;
      justify-content: space-between;
      .my-left{
        display: flex;
        .my-index {
          display: inline-block;
          padding-right: 5px;
          width: 28px;
      }
      .my-marquee{
        width:360px;
        display:inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      }
      .my-button {
       float: right;
       padding-right: 20px;
        button {
          width: 80px;
          padding: 5px 0;
          background: #4a9ef9;
          border: 0 solid #4a9ef9;
          border-radius: 1px;
          margin-left: 100px;
          color: #fff;
          cursor: pointer;
        }
        .cancel {
          color: #4a9ef9;
          background: #fff;
          border: 1px solid #4a9ef9;
        }
      }
    }
    .colorA{
        color:#4a9ef9;
      }
  }
}
</style>
<style lang="less">
  .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

