<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        搜索
      </el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        @click="sendMessage">
        发送消息
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="green"
        @click="broadcastMessage">
        广播消息
      </el-button>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      @selection-change="selectionChange"
      default-expand-all>
      <el-table-column
        type="selection"
        width="55"></el-table-column>
      <el-table-column
        prop="loginName"
        label="登录名称">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="loginIpAddr"
        label="IP地址">
      </el-table-column>
      <el-table-column
        prop="deptName"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="手机">
      </el-table-column>
    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getList" />
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-dialog :close-on-click-modal="false" title="发送消息" :visible.sync="sendMassageVisible" width="500px">
      <el-form label-width="100px" label-position="right">
        <el-form-item label="消息内容" prop="dictLabel">
          <el-input v-model="messageForm.messageContent" type="textarea" placeholder="请输入消息内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="testMassageVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus=='1'?sendMessageSure():broadcastMessageSure()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryOnlineUserList, sendMessageToUsers, broadcastMessageApi } from '@/api/system/onlineUser'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import Pagination from '@/components/Pagination'
import User from '@/views/system/user/user'

const form = {
  messageCode: undefined,
  messageName: undefined,
  messageKind: undefined,
}

export default {
  components: {
    User,
    Cancledialog, Pagination
  },
  data() {
    return {
      tempRoute: {},
      sendMassageVisible: false,
      dialogStatus: 1, // 1发送消息，2 广播
      dialogTitle: '',
      dialogVisible: false,

      innerVisible: false,

      search: {
        keyWord: ''
      },
      form: Object.assign({}, form),

      confirmdialog: false,
      listLoading: false,
      tableData: [],

      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      chooseList: [],
      messageForm: {
        userIds: '',
        messageContent: ''
      }

    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      const _that = this
      _that.listLoading = true
      const params = _that.search
      const data = {
        'params': JSON.stringify(params)
      }
      // console.log(data);
      queryOnlineUserList(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },

    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getList()
    },
    selectionChange(val) {
      console.log(val);
      this.chooseList = val
    },
    sendMessage() {
      var _that = this
      _that.dialogStatus = 1
      if (this.chooseList.length == 0) {
        _that.$message.warning('未选择用户')
        return
      }
      _that.sendMassageVisible = true
      _that.messageForm = {
        userIds: '',
        messageContent: ''
      }
    },
    sendMessageSure() {
      const _that = this
      var ids = []
      _that.chooseList.forEach(item => {
        ids.push(item.id)
      })
      _that.messageForm.userIds = ids.join(',')
      const data = _that.messageForm
      // console.log(data);
      // return

      sendMessageToUsers(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.sendMassageVisible = false
          _that.$message({
            message: '发送成功',
            type: 'success'
          })
          // _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.sendMassageVisible = true
      })
    },
    // 广播消息
    broadcastMessage() {
      var _that = this
      _that.dialogStatus = 2
      _that.sendMassageVisible = true
      _that.messageForm = {
        userIds: '',
        messageContent: ''
      }
    },
    broadcastMessageSure() {
      const _that = this
      const data = {
        'messageContent': _that.messageForm.messageContent
      }
      // console.log(data);
      // return

      broadcastMessageApi(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.sendMassageVisible = false
          _that.$message({
            message: '发送成功',
            type: 'success'
          })
          // _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.sendMassageVisible = true
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
  .tableItemInput{
    width: 30%;
  }
</style>
