<template>
  <div class="tabs-body">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-input v-model="speechContext" placeholder="请输入内容">
          </el-input>
        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content bg-purple"><el-button type="primary" @click="search">搜索</el-button></div>
      </el-col>
    </el-row>
    <div class="panelk">
        <h1 >推送服务号</h1>
        <el-button type="success" @click="sendCode">推送服务号二维码</el-button>
    </div>
    <div class="panelk">
        <h1 >分类</h1>
        <div>
          <div>
            <el-tag type="info" v-for="item in catigary" >
              <span v-if="item.speechSortId==tempCatygary" @click="chioseTag(item)" style="cursor: pointer;color:#67c23a">{{item.speechSortName}}</span>
              <span v-if="item.speechSortId!=tempCatygary" @click="chioseTag(item)" style="cursor: pointer;">{{item.speechSortName}}</span>
            </el-tag>
          </div>
        </div>
    </div>
    <div class="panelk">
        <h1 >标签</h1>
        <div>
          <div>
            <el-tag type="success" v-for="item in tags" ><span @click="searchCotent(item)" style="cursor: pointer;">{{item.speechLabelName}}</span></el-tag>
          </div>
          
        </div>
    </div>
    <div class="panelk  cvds" ref="list"> 
      <h1>内容</h1>
        <el-card class="box-card" v-for="item in contents.result">
          <span @click="sead(item)">{{item.speechContext}}</span>
        </el-card>
        <!-- <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
          </div>
          <div>
            央视网消息：眼下，东北正在大面积地春播。记者从农业农村部了解到，今年我国东北四省区及黄淮海地区，大豆种植面积大幅增加。
          </div>
        </el-card> -->
    </div>
  </div>  
</template>

<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
export default{
    data(){
      return {
        activeName:'second',
        input:'gregreg',
        tempCatygary:'',
        speechLabelId:"",
        speechContext:'',
        contents:{
          result:[]
        },
        page:1,
        rows:5,
        tags:[],
        catigary:[],
        buttons:[
          '全部',
          '回访调查'
        ]
      }    
    },
    components: {
    },
    computed: {
        ...mapState([   
            'selectId',
            'user'
        ]),
        ...mapGetters([
            'selectedChat',
            'witchPanel'
        ])
    },
    mounted() {
        let temp = this
        console.log(this.$refs)
        this.$refs.list.onscroll = function () {
          console.log(this.scrollHeight)
            if(this.scrollTop ==(this.scrollHeight-400)){
               temp.page++
               temp.queryContent()
            }
        }
    },
    watch:{
      witchPanel(val){
        if('script'==val){
          this.getScriptCatgary({company:20}).then((data)=>{
            this.catigary = data
          })
        }
      }
    },
    methods: {
      ...mapActions('baozheng',[
        'speechSort',
        'getScriptCatgary',
        'changeContent',
        'getScriptTags',
      ]),
      chioseTag(val){
        console.log(43434)
        this.tempCatygary = val.speechSortId
        let parm = {
          speechSortId:val.speechSortId,
          company:20
        }
        this.getScriptTags(parm).then((data)=>{
          this.tags = data
        })
      },
      searchCotent(val){
        val&&(this.speechLabelId = val.speechLabelId)
        val&&(this.contents.result = [])
        val&&(this.page = 1)
        let parm = {
          company:20
        }
        parm.speechContext = this.speechContext
        parm.speechLabelId = this.speechLabelId
        parm.speechSortId = this.tempCatygary
        parm.page = this.page
        parm.rows = this.rows
        this.speechSort(parm).then((data)=>{
          if(this.contents.result.length !=0){
            this.contents.result = [...data.result,...this.contents.result]
          }else{
            this.contents = data
          }
        })
      },
      search(){
        this.contents.result = []
        this.page =1
        this.searchCotent()
      },
      queryContent(){
         this.searchCotent()
      },
      sendCode(){
        var msg = {
            id:this.user.selectId,
            type:3,
            content: '',
            imageUrl:'http://chat-x.oss-cn-beijing.aliyuncs.com/73218520-8690-11e9-848f-edf4a3ff5396.jpeg'
        }
        this.$store.dispatch('user/sendMessage', msg)
      },
      sead(item){
        console.log('66666666666666')
        this.$store.dispatch('baozheng/changeContent', item.speechContext)
      },
      handleClick(){
        console.log(43434)
      }
    }
}
</script>

<style lang="stylus" scoped>
.clearfix{
  span{
    font-weight: 800;
  }
}
.box-card{
  margin-top:20px;
}
.cvds{
  height:400px;
  overflow: auto;
}
.panelk{
  margin:20px;
  h1{
    text-align:center;
    margin:20px;
  }
  .el-button{
    width:100%;
  }
  .el-tag{
    margin:2px;
  }
}
.tabs-body
  height:800px;
  width:100%;
  .tool-body
    width:100%;
    height:729px;
</style>