<template>
  <div class="board-menu irs-news">
        <div class="text-box">
          <!--<h6 style="margin-bottom: 10px;">IRS返回消息</h6>-->
            <ul>
                <!--<draggable class="list-group"
               element="div"
               v-model="irsBack"
               :options="dragOptions1"
               :move="onMove"
               @start=" isDragging == true"
               @end="stickupend">-->
                <li v-for="(item,index) in irsBack" class="messagebox" ref="imageTofile">
                    <div class="messagentname">{{item.studentName}}:</div>
                    <div class="messagentvalue">{{item.textContent}}</div>
                </li>
                <!--</draggable>-->
                <!--<q-dialog v-model="alert" transition-show="rotate" transition-hide="rotate">
                    <q-card>
                        <q-card-section class="q-pt-none">
                            {{detailContent}}
                            <div class="detailbox">
                                <div class="fr"><span>来自于：{{deatilName}}</span></div>-->
                                <!--<div class="fr"><span>时间111：</span></div>-->
                            <!--</div>
                        </q-card-section>
                    </q-card>
                </q-dialog>-->
            </ul>
        </div>
  </div>
</template>

<script>
  import draggable from "vuedraggable";
  export default {
    components:{
      draggable
     },
    data() {
        return {
        htmlUrl: '',
        isDragging:false,
        file: null,
        loadingStatus: false,
        userInfo:JSON.parse(localStorage.getItem('userInfo')),
        userName:'',
        headImg:'',
        classNum:localStorage.getItem('classNum'),
        irsBack: this.$store.state.stickyNoteDatas,
        alert: false,
        fixed: false,
        detailtext: '',
        detailname: '',
        detailtime: '',
        pagenum: '',
            //便利贴查看详情
            deatilName: '',
            detailContent: '',

      }
    },
    methods: {
        userInfoSet() {
            this.irsBack = this.$store.state.stickyNoteDatas
            console.log(this.irsBack)
        //if(this.userInfo){
        //  this.userName=this.userInfo.fullName;
        //  this.headImg=this.userInfo.headImgUrl;
        //    }
        //    this.pagenum = this.$store.state.carouselSlide
        //    console.log(this.pagenum,'当前页数')
        },
    /*现实当前点击的内容*/
        //detailbtn(e) {
        //    this.alert = true;
        //    var texttatal = e.target.innerText
        //    console.log(texttatal)
        //    var name = texttatal.substr(texttatal.indexOf('--') + 2)
        //    var content = texttatal.substr(0, texttatal.indexOf('--') - 1)
        //    this.deatilName = name
        //    this.detailContent = content
        //    console.log(name, content, '内容')
        //    //let num = e;
        //    //let textdata = this.$store.state.irsBack
        //    //this.detailtext=textdata[num].value
        //    //this.detailname = textdata[num].studentName
        //    //this.detailtime=textdata[num].sendTime

        //},
        onMove() {
            console.log('1111')
        },
        stickupend(val) {
            console.log(val, 'X值')
            console.log(val.srcElement.innerText,'文本内容')
            let positionw =val.originalEvent.x
            let positionh=val.originalEvent.y
            this.$store.state.position.status = '1'
            this.$store.state.position.x = positionw
            this.$store.state.position.y = positionh
            let starme = val.item.innerText.split('\n')
            console.log(starme,'分割的数组')
            this.$store.state.position.name = starme[0]
            this.$store.state.position.value = starme[1]
            console.log(this.$store.state.position.name)
            console.log(this.$store.state.position.value)
            console.log(this.$store.state.position, 3333)
            console.log(this.$store.state.position.name, '名字')
            console.log(this.$store.state.position.value, '发言')
        },
    },
    mounted() {

    },
    created(){
      this.userInfoSet();
    },

    computed:{
      //watchUrl(){
      //      return this.$store.state.stickyNoteDatas;
      //  },
        dragOptions1() {
            return {
                animation: 0,
                handleChange: '',
                inputChanged: '',
                activeNames: '',
                group: {
                    name: "description",
                    pull: 'clone',
                    put: false
                },
                ghostClass: "ghost",
            };
        },
    },
    watch:{
      //watchUrl(e){
      //  console.log(e,'便利贴发生变化')
      //  if(e){
      //    this.irsBack=e
      //  }
      //}
    }
  }
</script>

<style scoped>
  .board-menu.irs-news .text-box li>span{font-size: 12px;margin-top:5px;}
    .ivu-tabs-bar {
        height:auto !important;
    }
    .irs-news {
    width:100%;
    padding:0% 3%;
    margin:0 auto;
    }
    .ivu-tabs {
        width:100%;
        margin:0 auto;
    }
    .messagebox {
        background:url(../../assets/img/blt.png)no-repeat;
        background-size:cover;
        width:150px;
        height:170px;
        float:left;
        margin-left:40px;
        position:relative;
        -webkit-line-clamp: 6;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
       -moz-box-shadow: 0px 20px 20px -20px #888888; 
       -webkit-box-shadow: 0px 20px 20px -20px #888888; 
       box-shadow: 0px 20px 20px -20px #888888;
       background-color:rgb(237,237,237);
    }
    .textvalue {
        width: 100%;
        height: 80px;
        background-color: #2DCC70;
        padding: 8px;
        font-size: 16px;
        line-height: 16px;
        border-bottom: 1px dashed #ddd;
        border-radius: 15px 15px 0px 0px;
        color: #fff;
    }
        .textvalue span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        }
    .messagent {
        width:100%;
        height:25px;
        padding:3px 10px;
        background-color:#AFDAFA;
        border-radius:0px 0px 15px 15px;
    }
    .messagentname {
        position:absolute;
        top:2px;
        left:2px;
        font-size:16px;
        color:#4A4D54;
        font-weight:bold;
    }
    .messagenttime {
        font-size:12px;
        color:#4A4D54;
    }
     .fr {
        margin-left:15px;
    }
    .detailbox {
        width: 100%;
        height: 30px;
        padding: 5px 30px;
        margin-top: 10%;
    }

    .detailbox span {
        font-size: 14px;
        }
    /*.messagebox div {
        text-decoration: none;
        background:url(../../assets/img/blt.png) no-repeat !important;
        background-size:cover;
        width: 150px;
        height: 150px;
        list-style: none;
        float: left;
        margin: 26px 22px 18px 22px;
        display: block;
        background: white;
        box-shadow: 8px 8px 8px 7px rgba(0,0,0,0.5);
        overflow: hidden; 
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }*/
    .messagentvalue {
        position:absolute;
        top:35px;
        left:6px;
        overflow: hidden; 
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        font-size:18px;
    }
    ul{
            min-height:240px;
        }
    .q-pt-none {
        padding: 46px !important;
        font-size: 22px;
    }
    .detailbox .fr span {
        font-size: 16px
    }
</style>
