<template>
  <TableLayout
    :authorized="$hasPermissions([`system:notice:query`])"
    :fullscreen="fullscreen"
  >
    <!-- 搜索表单 -->
    <template #search-form>
      <SearchForm ref="searchForm" :model="searchForm">
        <el-form-item label="作用域" prop="scope">
          <DictSelect
            v-model="searchForm.scope"
            code="DATA_SCOPES"
            placeholder="请选择作用域"
            clearable
            @change="search"
          />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <DictSelect
            v-model="searchForm.type"
            code="SYSTEM_NOTICE_TYPES"
            placeholder="请选择类型"
            clearable
            @change="search"
          />
        </el-form-item>
        <template #buttons>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </template>
      </SearchForm>
    </template>
    <!-- 表格和分页 -->
    <template #table-wrap>
      <SearchTable
        v-loading="isWorking.search"
        :data="tableData.list"
        v-model:fullscreen="fullscreen"
        @selection-change="handleSelectionChange"
        @refresh="refresh"
      >
        <template
          v-if="$hasAnyPermissions([
            'system:notice:create',
            'system:notice:delete'
          ])"
          #toolbar
        >
          <el-button
            v-permissions="['system:notice:create']"
            type="primary"
            icon="Plus"
            @click="$refs.operaNoticeWindow.open('新建通知')"
          >新建</el-button>
          <el-button
            type="danger"
            v-permissions="['system:notice:delete']"
            icon="Delete"
            @click="deleteByIdInBatch"
          >删除</el-button>
        </template>
        <el-table-column type="selection" fixed="left" width="55"/>
        <el-table-column prop="title" label="标题" min-width="100px"/>
        <el-table-column prop="scope" label="作用域" min-width="100px">
          <template #default="{ row }">
            {{ $d(`DATA_SCOPES.${row.scope}`) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="100px">
          <template #default="{ row }">
            {{ $d(`SYSTEM_NOTICE_TYPES.${row.type}`) }}
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="生效时间" min-width="320px">
          <template #default="{ row }">
            {{ row.startTime }} - {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" min-width="200px">
          <template #default="{ row }">
            <PopoverCellValue :content="row.content"/>
          </template>
        </el-table-column>
        <el-table-column prop="disabled" label="状态" min-width="100px">
          <template #default="{ row }">
            <el-switch
              v-if="$hasPermissions(['system:notice:update'])"
              v-model="row.disabled"
              :active-value="false"
              :inactive-value="true"
              @change="switchDisabled(row)"
            />
            <template v-else>
              {{ $filters.disabledText(row.disabled) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="creatorRealName" label="创建人" min-width="100px"/>
        <el-table-column prop="createdAt" label="创建时间" min-width="185px"/>
        <el-table-column prop="updaterRealName" label="更新人" min-width="100px"/>
        <el-table-column prop="updatedAt" label="更新时间" min-width="185px"/>
        <template
          v-if="$hasAnyPermissions([
            'system:notice:update',
            'system:notice:delete'
          ])"
          #buttons="{ row }"
        >
          <el-button
            v-permissions="['system:notice:update']"
            type="primary"
            icon="EditPen"
            @click="$refs.operaNoticeWindow.open(`编辑${row.title}`, row)"
            link
          >编辑</el-button>
          <el-button
            v-permissions="['system:notice:delete']"
            type="danger"
            icon="Delete"
            @click="deleteById(row)"
            link
          >删除</el-button>
        </template>
      </SearchTable>
      <pagination
        :pagination="tableData.pagination"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </template>
    <!-- 新建编辑窗口 -->
    <OperaNoticeWindow
      ref="operaNoticeWindow"
      @success="refresh"
    />
  </TableLayout>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import OperaNoticeWindow from '@/components/system/notice/OperaNoticeWindow'
import { updateStatus } from '@/api/system/notice'

export default {
  extends: BaseTable,
  components: { OperaNoticeWindow },
  data () {
    return {
      // 搜索
      searchForm: {
        scope: '',
        type: ''
      }
    }
  },
  methods: {
    /**
     * 启用/禁用
     *
     * @param row 行对象
     */
    switchDisabled (row) {
      const newValue = row.disabled
      row.disabled = !row.disabled
      // 开启
      if (!newValue) {
        this.__updateNoticeStatus(row, newValue)
        return
      }
      // 禁用
      this.$dialog.disableConfirm(`确认禁用 ${row.title} 通知吗？`)
        .then(() => {
          this.__updateNoticeStatus(row, newValue)
        })
        .catch(() => {
        })
    },
    /**
     * 修改状态
     *
     * @param row 行对象
     * @param newValue 新值
     * @private
     */
    __updateNoticeStatus (row, newValue) {
      updateStatus({
        id: row.id,
        disabled: newValue
      })
        .then(() => {
          row.disabled = newValue
          this.$tip.apiSuccess('修改成功')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    }
  },
  async created () {
    this.config({
      module: '通知',
      api: await import('@/api/system/notice')
    })
    this.search()
  }
}
</script>
