<template>
  <div class="right-list-toolbar">
    <div>
      <el-toolbar>
        <el-col :span="9">
            <el-checkbox v-model="autoReload" @change="autoChangeHandler">自动刷新</el-checkbox>
            <el-checkbox v-model="filterInvInfo" >过滤无效信息</el-checkbox>
            <el-checkbox v-model="filterKeyW" >过滤自动回复</el-checkbox>
        </el-col>
        <el-col :span="15" align="right" style="float: right;">
          <el-select class="search-bar-algin-toolbar auto-width" v-model="addTime" placeholder="时间" clearable>
            <el-option v-for="item in addTimeItem " :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input class="search-bar-algin-toolbar auto-width" v-model="nickName" @keyup.enter.native="searchReplyCon" placeholder="粉丝昵称/备注"></el-input>
          <el-input class="search-bar-algin-toolbar auto-width" v-model="messageKey" @keyup.enter.native="searchReplyCon" placeholder="消息关键字">
            <el-button slot="append" icon="search" title="搜索" @click="searchMessage"></el-button>
          </el-input>
        </el-col>
        </el-toolbar>

        <el-list-view
          :data-read-url="getData"
          ref="dataTable1"
          @selection-change="onSelectionChange"
          :page-size="10">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row>
                <el-col :span="4">
                  <img :src="row.headImgUrl" onerror="@static/assets/images/picture404-3.png" class="weibo_headImage">
                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col :span="12"><span>昵称: </span><em>{{row.nickName}}</em></el-col>
                    <el-col :span="12"><span>时间: </span><em>{{row.addTime | fixDateTime}}</em></el-col>
                  </el-row>
                  <el-row>内容:{{row.msgContent}}</el-row>
                  <el-row>
                    <el-col :span="12"><span>是否回复: </span><em>{{row.msgStatusName}}</em></el-col>
                    <el-col :span="12"><span>是否允许回复: </span><em>{{row.replyAllowedName}}</em></el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      addTime: '',
      addTimeItem: [{value: '1', label: '今天'}, {value: '2', label: '昨天'}, {value: '3', label: '前天'}], // 时间下拉框
      messageKey: '', // 消息关键字
      nickName: '', // 粉丝昵称/备注
      // 选择的行
      selectedRows: [],
      autoReload: true, // 自动刷新
      filterInvInfo: false, // 过滤无效信息
      filterKeyW: false// 过滤自动回复
    }
  },
  methods: {
    // 选中行
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    autoChangeHandler() {
      if (this.autoReload && this.$refs.dataTable1) {
        this.intervalId = setInterval(() => {
          this.$refs.dataTable1.getData()
        }, 10000)
      } else {
        if (this.intervalId) {
          clearInterval(this.intervalId)
        }
      }
    },

    searchMessage() {
      this.$refs.dataTable1.getData()
    },

    getData() {
      return [
        '/ui/wechat/message',
        {
          params: {
            addTime: this.addTime,
            messageKey: encodeURIComponent(this.messageKey),
            nickName: encodeURIComponent(this.nickName),
            filterInvInfo: this.filterInvInfo,
            filterKeyW: this.filterKeyW,
            weiXinID: this.$route.params.weiXinID
          }
        }
      ]
    }
  },
  created() {
    this.autoChangeHandler()
  }
}
</script>
<style scoped>
  .page {
    float: right;
  }

  .auto-width {
    width: auto;
  }
  .weibo_headImage {
    max-width:132px;
    max-width: 132px;
  }
</style>
