<template>
  <el-container>
    <el-main>
      <el-row :gutter="4">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
            <span>
              发送全体通知
            </span>
                <span>
               当前在线人数：{{ onlineCount }}
            </span>
              </div>
            </template>
            <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 style="margin-top: 12px">
              <el-button type="primary" icon="Upload" @click="beforeSend">发送消息</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              发送系统更新消息
            </template>
            <el-input type="textarea" :rows="3" v-model="systemUpdatesMessage"
                      placeholder="在此输入要发送的消息，如果不填写就是清空消息。"/>
            <div style="margin-top: 12px">
              <el-button type="primary" icon="Upload" @click="clickSendUpdateMessage">发送消息</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" style="margin-top: 10px">
          <el-card>
            <template #header>
              发送滚动通知
            </template>
            <el-input type="textarea" :rows="3" v-model="scrollingMessage"
                      placeholder="在此输入要发送的消息，如果不填写就是清空消息。"/>
            <div style="margin-top: 12px">
              <el-button type="primary" icon="Upload" @click="clickSendScrollingMessages">发送消息</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import {onMounted, ref, computed, reactive} from 'vue'
import {
  getOnlineCount,
  sendMessageToAll,
  sendScrollingMessages,
  sendSystemUpdatesMessage
} from '@/api/settings/send-notification'
import {ElMessage, ElMessageBox} from 'element-plus'
import store from '@/store'
import {getSystemAnnouncement} from "@/api/public-api";

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

const systemUpdatesMessage = ref('')
const clickSendUpdateMessage = () => {
  sendSystemUpdatesMessage(systemUpdatesMessage.value)
}

const scrollingMessage = ref('')
const clickSendScrollingMessages = () => {
  sendScrollingMessages(scrollingMessage.value)
}

onMounted(() => {
  getOnlineCount().then((res) => {
    onlineCount.value = res
  })
  getSystemAnnouncement().then((res) => {
    systemUpdatesMessage.value = res.systemUpdatesMessage
    scrollingMessage.value = res.scrollingMessages
  })
})

</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* 去掉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>
