<template>
  <div class="app-container">
    <el-row class="m-t-0">
      <el-col :span="24">
        <el-container>
          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
            <div class="l">
              <i class="iconfont el-icon-link f-s-20"></i>
              <font class="m-l-10 f-s-18 fb">发布公告</font>
            </div>
          </el-header>
          <el-main class="border p-20">
            <el-form label-width="120px">
              <el-form-item label="公告标题">
                <el-input v-model="form.tit" placeholder="请输入公告标题" maxlength="50" show-word-limit />
              </el-form-item>
              <el-form-item label="公告信息">
                <el-input v-model="form.message" type="textarea" placeholder="请输入公告内容" :rows="5" maxlength="80"
                  show-word-limit />
              </el-form-item>
              <el-form-item label="显示截止日期">
                <el-date-picker v-model="form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-edit" :loading="loading" @click="pubMessage()">
                  发布公告
                </el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { pubMessage } from '@/utils/api/table'

export default {
  name: 'message',
  data () {
    return {
      form: {
        date: '',
        message: '',
        tit: ''
      },
      loading: false
    }
  },
  computed: {
    // 从 Vuex 中获取用户 ID 列表
    idArr () {
      return this.$store.state.app.toMessageIdArr
    }
  },
  created () {
  },
  methods: {
    async pubMessage () {
      // 判断 idArr 是否为空
      if (!this.idArr || this.idArr.length === 0) {
        this.$message.warning('接收用户为空，请重新操作')
        this.$router.push('/admin/index')
        return
      }
      if (!this.form.tit) {
        this.$message.error('请输入公告标题')
        return
      }
      if (!this.form.message) {
        this.$message.error('请输入公告内容')
        return
      }
      if (!this.form.date) {
        this.$message.error('请选择截止日期')
        return
      }

      const endTime = Math.floor(new Date(this.form.date).setHours(23, 59, 59, 999) / 1000)// 取日历选择的 当天最后一秒

      const res = await pubMessage(this.form.tit, this.form.message, this.idArr, endTime)

      if (res.data.status === 1) {
        this.$message.success(res.data.msg)
        this.form.message = ''
        this.form.date = ''
        this.form.tit = ''
        // 跳转到首页
        this.$router.push('/admin/index')
      } else {
        this.$message.error(res.data.msg || '公告发布失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rspan {
  float: right;
  color: #8492a6;
  font-size: 13px;
}
</style>
