<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-12-02 15:16:35
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2025-01-20 18:30:17
 * @FilePath: src/views/IndexPage/noticeAnnouncement.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="container">
    <div class="header">
      <el-form :model="form" ref="queryForm" inline size="small">
        <el-form-item label="关键字" prop="noticeTitle">
          <el-input v-model="form.noticeTitle" placeholder="请输入关键字" clearable v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="timeRange">
          <el-date-picker
            v-model="form.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="li_content">
      <el-table :data="announcementList" fit highlight-current-row style="width: 100%">
        <el-table-column
          type="index"
          width="85"
          label="序号"
          align="center"
          :index="indexContinuous(form.pageNum, form.pageSize)"
        />
        <el-table-column
          v-for="(column, index) in tableColumns"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
          <!-- 插槽 -->
          <template v-slot="scope" v-if="column.prop == 'noticeType' || column.prop == 'isRead'">
            <span v-if="column.prop == 'noticeType'">
              <el-tag :type="setTagType(scope.row)"
              >{{ scope.row.noticeType == '1' ? '通知' : scope.row.noticeType == '2' ? '公告' : '消息' }}</el-tag>
            </span>
            <span v-if="column.prop == 'isRead'">
              <el-tag :type="setTagRead(scope.row)"
              >{{ scope.row.isRead == '0' ? '否' : '是' }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleView(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="form.pageNum"
        :limit.sync="form.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog :title="row.noticeTitle" :visible.sync="dialogVisible" width="50%" style="height: 75vh;overflow: hidden" center>
      <div v-html="row.noticeContent" style="overflow: auto;height: 72vh">
        {{ row.noticeContent }}
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { indexContinuous, parseTime } from '@/utils/bonus'
import { getNoticeList, getNoticeNum, updateNoticeStatus } from '@/api/system/notice'

export default {
  name: 'noticeAnnouncement',
  data() {
    return {
      currentPage: 1,
      pageSize: 8,
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: '',
        timeRange: []
      },
      announcementList: [],
      tableColumns: [
        { label: '公告标题', prop: 'noticeTitle' },
        { label: '公告类型', prop: 'noticeType' },
        { label: '创建者', prop: 'createBy' },
        { label: '创建时间', prop: 'createTime' },
        { label: '是否已读', prop: 'isRead' }
      ],
      dialogVisible: false,
      row: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    indexContinuous,
    setTagType(item) {
      if (item.noticeType === '1') {
        return 'primary'
      } else if (item.noticeType === '2') {
        return 'success'
      } else if (item.noticeType === '3') {
        return 'info'
      }
    },
    setTagRead(item) {
      if (item.isRead == '0') {
        return 'danger'
      } else{
        return 'success'
      }
    },
    getList() {
      const param = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        ...this.form,
        startTime: parseTime(this.form.timeRange[0], '{y}-{m}-{d}'),
        endTime: parseTime(this.form.timeRange[1], '{y}-{m}-{d}')
      }
      getNoticeList(param).then(res => {
        console.log(res)
        this.announcementList = res.rows
        this.total = res.total
      })
    },
    handleView(item) {
      this.row = item
      updateNoticeStatus({ noticeId: item.noticeId,userId:this.$store.state.user.userId }).then(res => {
        this.getList()
        getNoticeNum().then(response => {
          console.log(response)
          this.$store.commit('SET_NOTICE_NUM', response.msg);
        })
      })
      this.dialogVisible = true
    },
    handleSearch() {
      this.getList()
    },
    handleReset() {
      this.$refs.queryForm.resetFields()
     this.getList()
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  padding: 20px;
}

.li_content {
  padding: 20px;
}

.li_item {
  height: 5vh;
}

.li_item_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
}
</style>
