<script setup name="noticeManage">
import { reactive, ref, h, onMounted, getCurrentInstance } from 'vue'
import { getNoticeList, noticeEnabled, del, topped, detail } from '@/http/apis/systemManage/noticeManage.js'
import { useRoute } from 'vue-router'
import NoticeDialog from './noticeDialog.vue'

const route = useRoute(),
  { proxy } = getCurrentInstance(),
  searchForm = reactive({
    title: undefined,
    type: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '公告标题',
      key: 'title',
      prop: 'title'
    },
    {
      label: '公告类型',
      key: 'type',
      prop: 'type',
      width: '100',
      render: row => h('span', `${row.type === 1 ? '通知公告' : row.type === 2 ? '帮助文档' : '政策文件'}`)
    },
    {
      label: '是否置顶',
      key: 'topped',
      prop: 'topped',
      width: '80',
      render: row => h('span', `${row.topped ? '是' : '否'}`)
    },
    {
      label: '状态',
      key: 'enabled',
      prop: 'enabled',
      width: '80',
      render: row => [
        h('span', {
          class: [
            'dot mr-4',
            `${row.enabled ? 'bg-success' : 'bg-danger'}`
          ]
        }),
        h(
          'span',
          {
            class: `${row.enabled ? 'text-success' : 'text-danger'}`
          },
          row.enabled ? '启用' : '禁用'
        )
      ]
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '220',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await getNoticeList({
      ...pageParams,
      ...searchForm
    })
    total.value = res.data.total
    data.value = res.data.records
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.title = undefined
    searchForm.type = undefined
    getTableData({ pageNumber: 1, pageSize: 10 })
  },
  // 新增、编辑公告
  dialogData = reactive({
    visible: false,
    rowData: undefined
  }),
  editNotice = async data => {
    if (data && data.id) {
      const res = await detail(data.id)
      dialogData.rowData = res.data
    } else {
      dialogData.rowData = undefined
    }
    dialogData.visible = true
  },

  close = flag => {
    dialogData.visible = false
    if (flag) {
      getTableData()
    }
  },
  // 启用、禁用
  setEnabled = async (data) => {
    proxy.$messageBox
      .confirm(`是否${data.enabled ? '禁用' : '启用'}该公告?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await noticeEnabled({ id: data.id, status: !data.enabled })
        proxy.$message.success(`${data.enabled ? '禁用' : '启用'}成功！`)
        await getTableData()
      })
  },
  // 删除
  delData = (data) => {
    proxy.$messageBox
      .confirm('是否删除该公告?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await del({ id: data.id })
        proxy.$message.success('删除成功！')
        await getTableData()
      })
  },
  // 置顶
  setTopped = async (data) => {
    proxy.$messageBox
      .confirm('是否置顶该公告?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await topped({ id: data.id })
        proxy.$message.success(`置顶成功！`)
        await getTableData()
      })
  }
onMounted(() => {
  searchForm.type = route.query.type * 1 || undefined
  getTableData()
})
</script>

<template>
  <el-card
    shadow="never"
    class="search mb-16"
  >
    <el-form
      label-suffix=":"
      :model="searchForm"
      size="small"
    >
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="公告标题">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入"
              :maxlength="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公告类型">
            <el-select
              v-model="searchForm.type"
              class="m-2"
              placeholder="请选择"
            >
              <el-option label="通知公告" :value="1" />
              <el-option label="帮助文档" :value="2" />
              <el-option label="政策文件" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="btn">
            <el-button
              type="primary"
              size="small"
              @click="search"
            >查询</el-button>
            <el-button
              size="small"
              @click="reset"
            >重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card shadow="never">
    <template #header>
      公告列表
      <el-button
        class="float-right"
        type="primary"
        icon="Plus"
        size="small"
        @click="editNotice"
      >
        新增公告
      </el-button>
    </template>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #action="{ scope }">
        <a @click="editNotice(scope.row)">编辑</a>
        <a @click="setTopped(scope.row)">置顶</a>
        <a @click="setEnabled(scope.row)">{{ scope.row.enabled?'禁用':'启用' }}</a>
        <a @click="delData(scope.row)">删除</a>
      </template>
    </table-list>
  </el-card>
  <notice-dialog
    :visible="dialogData.visible"
    :data="dialogData.rowData"
    @close="close"
  />
</template>

