<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-position="right"
          label-width="90px"
          label-suffix=":"
        >
          <el-form-item label="信息标题">
            <el-input
              v-model="query.notice_title"
              clearable
              size="mini"
              placeholder="请输入标题"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <el-form-item label="信息类型">
            <el-select
              v-model="query.notice_type"
              clearable
              size="mini"
              placeholder="信息类型"
              class="filter-item"
              @change="hand"
            >
              <el-option
                v-for="item in dict.notice_type"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="读取状态">
            <el-select
              v-model="query.have_read"
              clearable
              size="mini"
              placeholder="读取状态"
              class="filter-item"
              @change="hand"
            >
              <el-option
                v-for="item in dict.have_read_type"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="处理情况">
            <el-select
              v-model="query.deal_status"
              clearable
              size="mini"
              placeholder="处理情况"
              class="filter-item"
              @change="hand"
            >
              <el-option
                v-for="item in dict.deal_status"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <rrOperation />
        </el-form>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <el-button
          slot="right"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-circle-check"
          :disabled="crud.selections.length === 0"
          @click="changeRead(crud.selections)"
        >
          批量已读
        </el-button>
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
          <el-form-item label="信息标题" prop="notice_title">
            <el-input v-model="form.notice_title" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="信息内容" prop="notice_content">
            <el-input v-model="form.notice_content" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="信息类型" prop="notice_type">
            <el-input v-model="form.notice_type" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="读取状态" prop="have_read">
            <el-input v-model="form.have_read" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="读取时间">
            <el-input v-model="form.read_time" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="处理状态" prop="deal_status">
            <el-input v-model="form.deal_status" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="创建时间" prop="create_time">
            <el-input v-model="form.create_time" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="mini" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="notice_title" label="信息标题" :min-width="flexWidth('notice_title',crud.data,'信息标题')" />
        <el-table-column prop="notice_content" label="信息内容" :min-width="flexWidth('notice_content',crud.data,'信息内容')" />
        <el-table-column prop="notice_type" label="信息类型" :min-width="flexWidth('notice_type',crud.data,'信息类型')">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.notice_type == 1" type="danger">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
            <el-tag v-else type="warning">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="have_read" label="读取状态" :min-width="flexWidth('have_read',crud.data,'读取状态')" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.have_read == 1" type="danger">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
            <el-tag v-else type="success">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="read_time" label="读取时间" :min-width="flexWidth('read_time',crud.data,'读取时间')" />
        <el-table-column prop="deal_status" label="处理状态" :min-width="flexWidth('deal_status',crud.data,'处理状态')" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.deal_status == 1" type="info">{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
            <el-tag v-else>{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
        <el-table-column v-permission="[]" label="操作" width="200px" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              slot="left"
              icon="el-icon-view"
              @click="show(scope.row)">
              查看
            </el-button>
            <el-button
              type="text"
              slot="left"
              icon="el-icon-help"
              @click="deal(scope.row)">
              处理
            </el-button>
            <udOperation
              :data="scope.row"
              :permission="permission"
              :is-visiable-edit="false"
              style="display: inline"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import crudNotice from './api/notice'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import { NOTICE_SHOW_MESSAGE, NOTICE_MESSAGE_UPDATE } from '@/views/system/notice/code/VueBaseCode'

const defaultForm = { notice_id: null, notice_title: null, notice_content: null, notice_type: null, have_read: null, read_time: null, deal_status: null, create_time: null }
export default {
  name: 'Notice',
  dicts: ['deal_status', 'have_read_type', 'notice_type'],
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '消息通知',
      url: 'api/notice',
      idField: 'notice_id',
      sort: 'notice_id,desc',
      crudMethod: { ...crudNotice },
      optShow: {
        add: false,
        edit: false,
        del: true,
        download: false,
        reset: true
      }
    })
  },
  data() {
    return {
      permission: {},
      rules: {
        notice_title: [
          { required: true, message: '信息标题不能为空', trigger: 'blur' }
        ],
        notice_content: [
          { required: true, message: '信息内容不能为空', trigger: 'blur' }
        ],
        notice_type: [
          { required: true, message: '信息类型不能为空', trigger: 'blur' }
        ],
        have_read: [
          { required: true, message: '读取状态不能为空', trigger: 'blur' }
        ],
        deal_status: [
          { required: true, message: '处理状态不能为空', trigger: 'blur' }
        ],
        create_time: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ]
      }}
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    show(record) {
      if (record.have_read == '1') {
        crudNotice.read(record.notice_id).then(() => {
          record.have_read = '2'
          this.$bus.emit(NOTICE_MESSAGE_UPDATE)
        })
      }
      this.$bus.emit(NOTICE_SHOW_MESSAGE, record)
      this.crud.toQuery()
    },
    hand(value) {
      this.crud.toQuery()
    },
    deal(row) {
      crudNotice.deal(row.notice_id).then(() => {
        row.have_read = '2'
        this.$bus.emit(NOTICE_MESSAGE_UPDATE)
      })
      this.crud.toQuery()
    },
    changeRead(data) {
      const param = {}
      param.data = data
      param.have_read = '2'
      crudNotice.changeRead(param).then(() => {
        this.$bus.emit(NOTICE_MESSAGE_UPDATE)
      })
      this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      this.crud.toQuery()
    }
  }
}
</script>

<style scoped>

</style>
