<template>
  <el-container>
    <el-main>
      <div style="width: 300px; padding: 20px">
        <div style="font-size: 14px; font-weight: bold; padding: 8px 0"><i class="el-icon-user"></i>当前在线人数：{{ onlineCount }}</div>
        <div class="dj-center-box-content">
          <el-input type="textarea" :rows="3" v-model="param.message" placeholder="在此输入要发送的消息。"></el-input>
          <div style="height: 10px"></div>
          <el-input type="number" size="small" v-model="param.refreshDelay" style="width: 150px" placeholder="不刷新请勿填写"></el-input>&nbsp;秒后刷新全体连接
        </div>
        <div style="margin-top: 12px">
          <el-button type="primary" icon="el-icon-upload2" @click="beforeSend">发送消息</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, ref, computed, reactive } from 'vue'
import { getOnlineCount, sendMessageToAll } from '@/api/settings/send-notification'
import { ElMessage, ElMessageBox } from 'element-plus'
import store from '@/store'
export default {
  setup() {
    const isCollapse = computed(() => {
      return store.state.isCollapse
    })
    const left = computed(() => {
      return isCollapse.value ? '65px' : '220px'
    })
    const onlineCount = ref(10)
    const param = reactive({
      message: null,
      refreshDelay: null,
    })

    const beforeSend = () => {
      if (!param.message) {
        ElMessage({
          message: '消息体不能为空！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
      } else {
        ElMessageBox.confirm('确定要发送以下消息吗：' + param.message, '提示', {
          type: 'info',
          confirmButtonText: '发送',
          cancelButtonText: '取消',
        })
          .then(() => {
            sendMessageToAll(param).then(() => {
              ElMessage({
                message: '发送成功。',
                type: 'success',
                duration: 2500,
                showClose: true,
              })
            })
          })
          .catch(() => {})
      }
    }
    const dialogVisible = true
    onMounted(() => {
      getOnlineCount().then((res) => {
        onlineCount.value = res
      })
    })
    return {
      left,
      dialogVisible,
      onlineCount,
      param,
      beforeSend,
    }
  },
}
</script>

<style scoped>
/* 去掉input number的上下箭头 */
:deep(input::-webkit-outer-spin-button) {
  -webkit-appearance: none !important;
}
:deep(input::-webkit-inner-spin-button) {
  -webkit-appearance: none !important;
}
:deep(input[type='number']) {
  -moz-appearance: textfield !important;
}
</style>
