<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="goSearch">搜索</el-button></div>
      </el-col>
    </el-row>
    <div style="margin-top: 50px;height:600px;overflow: auto;">
      <img v-for="item in pics.result" width="95px" @click="seadPic(item)" :src="item.imageUrlValue.split('?')[0]" alt=""/>
    </div>
		<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="20"
      layout="total,prev, pager, next"
      :total="total">
    </el-pagination>
  </div>  
   
</template>

<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
export default{
    data(){
      return {
        activeName:'second',
        speechContext:"",
        currentPage:100,
        total:10,
        page:1,
        pics :[]
      }    
    },
    components: {
    },
    computed: {
        ...mapState([
            'user',
        ]),
    },
    mounted() {
        this.goSearch()
    },
    methods: {
       ...mapActions('baozheng',[
        'searchBiaoqingbao',
      ]),
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.diomng()
        console.log(`当前页: ${val}`);
      },
      goSearch(){
        this.page = 1
        this.diomng()
      },
      diomng(){
        let parm = {}
        parm.imageKey= this.speechContext
        parm.company = 20
        parm.page = this.page
        parm.rows = 21
        this.searchBiaoqingbao(parm).then((data)=>{
          this.pics = data
          this.total = data.total
        })
      },
      handleClick(){
      },
      seadPic(val){
        this.$alert(`
            <img src="${val.imageUrlValue.split('?')[0]}" style="widht:300px;height:300px;" alt="" />`, '确认发送！', {
          dangerouslyUseHTMLString: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          
        }).then(() => {
           var msg = {
                id:this.user.selectId,
                type:3,
                content:'',
                imageUrl:val.imageUrlValue.split('?')[0]
            }
            this.$store.dispatch('user/sendMessage', msg)
        });
      }
    },
   
}
</script>

<style lang="stylus" scoped>
.tabs-body
  height:800px;
  width:100%;
  .tool-body
    width:100%;
    height:729px;
</style>