<template>
  <ele-pro-table
    ref="table"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    tool-class="ele-toolbar-actions"
  >
    <template v-slot:toolbar>
      <el-button size="small" type="primary" @click="read(1)">
        标记已读
      </el-button>
      <el-button size="small" type="primary" @click="read(0)">
        标记未读
      </el-button>
      <!--
      <el-button size="small" type="danger" @click="removeBatch">
        删除通知
      </el-button>
      -->
    </template>
    <template v-slot:readCn="{ row }">
      <span :class="['ele-text-danger', 'ele-text-info'][row.read]">
        {{ row.readCn }}
      </span>
    </template>
    <template v-slot:action="{ row }">
      <el-link
        v-if="row.url"
        type="primary"
        :underline="false"
        icon="el-icon-view"
        @click="view(row)"
      >
        查看
      </el-link>
      <!--
      <el-popconfirm
        class="ele-action"
        title="确定要删除此通知吗?"
        @confirm="remove(row)"
      >
        <template v-slot:reference>
          <el-link type="danger" :underline="false" icon="el-icon-delete">
            删除
          </el-link>
        </template>
      </el-popconfirm>
      -->
    </template>
  </ele-pro-table>
</template>

<script>
// import { pageNotices } from '@/api/user/message';
import { pageNotice, setRead } from '@/api/user/notice'

export default {
  data() {
    return {
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },
        {
          prop: 'content',
          label: '通知内容',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'c_time',
          label: '通知时间',
          align: 'center',
          showOverflowTooltip: true,
          width: 150
        },
        {
          prop: 'readCn',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          width: 80,
          slot: 'readCn'
        },
        {
          columnKey: 'action',
          label: '操作',
          align: 'center',
          showOverflowTooltip: true,
          width: 140,
          resizable: false,
          slot: 'action'
        }
      ],
      // 列表选中数据
      selection: []
    }
  },
  methods: {
    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return pageNotice({ ...where, ...order, page, limit })
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where: where })
    },
    /* 查看 */
    view(row) {
      let path = row.url
      if (path) {
        this.$router.push({ path })
      } else {
        this.$message.info(row.content)
      }
      // setRead({ ids: [row.id], isRead: 1 })
      //   .then(() => {
      //     if (path) {
      //       this.$router.push({ path })
      //     } else {
      //       this.$message.info(row.content)
      //     }
      //   })
      //   .catch((e) => {
      //     this.$message.error(e.message)
      //   })
    },
    /* 删除单个 */
    remove(row) {
      console.log(row)
      this.$message.info('点击了删除')
      this.updateUnReadNum()
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据')
        return
      }
      this.$message.info('点击了删除')
      this.updateUnReadNum()
    },
    /* 标记已读 */
    read(isRead) {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据')
        return
      }
      let ids = []
      this.selection.forEach((d) => {
        ids.push(d.id)
      })
      setRead({ ids: ids, isRead: isRead })
        .then((result) => {
          console.log(result)
          if (isRead) {
            this.selection.forEach((d) => {
              d.read = 1
              d.readCn = '已读'
            })
          } else {
            this.selection.forEach((d) => {
              d.read = 0
              d.readCn = '未读'
            })
          }

          this.updateUnReadNum()
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    /* 触发更新未读数量事件 */
    updateUnReadNum() {
      this.$emit('update-data')
    }
  }
}
</script>
