<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <date-range-picker v-model="query.baseCreateTime" class="date-item" />
        <el-select
          v-model="query.read"
          clearable
          size="small"
          placeholder="处理状态"
          class="filter-item"
          style="width: 150px"
          @change="crud.toQuery"
        >
          <el-option label="已读" value="1" />
          <el-option label="未读" value="0" />
        </el-select>
        <!-- <el-select
          v-model="query.type"
          clearable
          size="small"
          placeholder="报警分类"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option label="人员" value="1" />
          <el-option label="周界" value="2" />
          <el-option label="火灾" value="3" />
          <el-option label="泄漏" value="4" />
        </el-select> -->
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <el-button
          slot="left"
          class="filter-item"
          type="success"
          icon="el-icon-chat-dot-square"
          size="mini"
          :loading="viewLoading"
          @click="setReadAll"
        >
          全部已读
        </el-button>
      </crudOperation>
    </div>

    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
        v-for="item in messageTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <span v-if="item.prop == 'read'">
            {{ scope.row.read === 1 ? '已读' : '未读' }}
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'message:edit', 'message:del'])"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="btn-box" style="display:flex">
            <el-button
              v-if="scope.row.read != 1"
              slot="left"
              class="filter-item"
              type="success"
              icon="el-icon-chat-dot-square"
              size="mini"
              :loading="viewLoading"
              @click="setRead(scope.row)"
            >
            </el-button>
            <!-- <el-button
              slot="left"
              class="filter-item"
              type="primary"
              icon="el-icon-view"
              size="mini"
              :loading="viewLoading"
              @click="handleView(scope.row)"
            >
            </el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <msg-detail :dialogConfig="dialogConfig" />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import { setRead, setReadAll } from '@/api/system/message'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
import { messageTableOptions } from '../tableConfig'
import MsgDetail from './msgDetail.vue'
import Dayjs from 'dayjs'
export default {
  name: 'message',
  directives: { permission },
  mixins: [presenter(), header(), crud()],
  components: { ...crudComps, DateRangePicker, MsgDetail },
  cruds() {
    return CRUD({
      title: '系统消息',
      url: 'message/getList',
      listOrder: [],
      optShow: { reset: true },
      query: {
        baseCreateTime: [
          Dayjs(new Date())
            .subtract(1, 'w')
            .format('YYYY-MM-DD HH:mm:ss'),
          Dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
        ],
        read: ''
      }
    })
  },
  data() {
    return {
      messageTableOptions,
      permission: {
        add: ['admin', 'message:add'],
        edit: ['admin', 'message:edit'],
        del: ['admin', 'message:del']
      },
      rules: {
        positionName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        positionSort: [{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }]
      },
      viewLoading: false,
      dataVersion: '',
      dialogConfig: {
        show: false,
        msgData: {}
      }
    }
  },
  mounted() {
    const { num } = this.$route.query
    if (num > 0) {
      this.query.read = '0'
    } else {
      this.query.read = ''
    }
    this.$nextTick(() => {
      this.crud.toQuery()
    })
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {},
    setReadAll() {
      try {
        this.$confirm('是否全部已读？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await setReadAll({ id: "0" })
            this.crud.toQuery()
          })
          .catch(() => {})
      } catch (err) {
        console.log(err)
      }
    },
    handleView(row) {
      this.dialogConfig = {
        show: true,
        msgData: row
      }
    },
    setRead(row) {
      try {
        this.$confirm('是否将消息设为已读？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await setRead({ id: row.id })
            this.crud.toQuery()
          })
          .catch(() => {})
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
.btn-box {
  display: flex;
  justify-content: space-around;
}
</style>
