<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="所属商铺">
                <SelectionShopId v-model="form.shop_id" :allSel="true" />
              </el-form-item>

              <el-form-item label="公告接收者">
                <el-checkbox v-model="allSelected" @change="handleCheckAll" style="margin-bottom: 10px;">
                  全选
                </el-checkbox>
                <el-checkbox-group v-model="form.idArr" @change="updateAllSelected">
                  <el-checkbox
                    v-for="admin in filteredAdminList"
                    :key="admin.id"
                    :label="admin.id">
                    {{ admin.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <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="submitMessage">
                  发布公告
                </el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

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

export default {
  name: 'message',
  data () {
    return {
      form: {
        shop_id: '',
        date: '',
        message: '',
        tit: '',
        idArr: []
      },
      loading: false,
      allSelected: false
    }
  },
  components: {
    SelectionShopId
  },
  computed: {
    adminList () {
      return this.$store.state.adminList || []
    },
    filteredAdminList () {
      if (!this.form.shop_id) return this.adminList
      return this.adminList.filter(admin => admin.shop_id === this.form.shop_id)
    }
  },
  watch: {
    'form.shop_id' () {
      this.form.idArr = []
      this.allSelected = false
    }
  },
  methods: {
    handleCheckAll (checked) {
      this.form.idArr = checked ? this.filteredAdminList.map(admin => admin.id) : []
    },
    updateAllSelected () {
      const filteredIds = this.filteredAdminList.map(admin => admin.id)
      this.allSelected = this.form.idArr.length === filteredIds.length && filteredIds.length > 0
    },
    async submitMessage () {
      if (!this.form.shop_id) {
        this.$message.warning('请选择所属商铺')
        return
      }
      if (!this.form.idArr || this.form.idArr.length === 0) {
        this.$message.warning('接收用户为空，请重新操作')
        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)

      this.loading = true
      try {
        const res = await pubMessage(
          this.form.shop_id,
          this.form.tit,
          this.form.message,
          this.form.idArr,
          endTime
        )

        if (res?.data?.status === 1) {
          this.$message.success(res.data.msg)
          this.form = {
            shop_id: '',
            date: '',
            message: '',
            tit: '',
            idArr: []
          }
          this.allSelected = false
          this.$router.push('/message/index')
        } else {
          this.$message.error(res?.data?.msg || '公告发布失败')
        }
      } catch (err) {
        console.error('发布公告失败：', err)
        this.$message.error('网络错误')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

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