<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div class="screen-container">
      <div class="top clearfix">
        <div class="title fl">条件筛选</div>
      </div>
      <el-form ref="screenForm" :model="screenForm" label-width="50px" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="标志" prop="readFlag">
              <el-select v-model="screenForm.readFlag" placeholder="全部标志" size="small">
                <el-option label="全部" value=""></el-option>
                <el-option label="未读" value="false"></el-option>
                <el-option label="已读" value="true"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="18" class="tr">
            <el-form-item label="">
              <el-button size="small" @click="resetScreenForm">清空</el-button>
              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button size="small" @click="changeReadFlag('ALL')">全部标为已读</el-button>
          <el-button size="small" @click="changeReadFlag('SEL')">标为已读消息</el-button>
        </div>
      </div>

      <div class="table">
        <el-table ref="noticeTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
          <el-table-column align="center" type="selection" width="40" :selectable="checkSelRow"></el-table-column>
          <el-table-column align="center" label="消息编号" prop="noticeId" min-width="180"></el-table-column>
          <el-table-column align="center" label="订单编号" prop="objId" min-width="180"></el-table-column>
          <el-table-column align="center" label="标题" prop="title" min-width="80"></el-table-column>
          <el-table-column align="center" label="消息类型" prop="type">
            <template slot-scope="scope">
              {{ scope.row.type | NOTICE_CURRENT_TYPE_FILTER }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="消息内容" prop="content" min-width="200"></el-table-column>
          <el-table-column align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <el-tag :type="scope.row.readFlag ? 'success' : 'danger'">{{ scope.row.readFlag ? '已读' : '未读'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime" min-width="160"></el-table-column>
          <el-table-column align="center" label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.type === 1" @click="goOrderDetail(scope.row)">查看记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNoticeList, changeAllReadFlag, changeReadFlag } from "@/api/notice";

export default {
  name: "index",
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        readFlag: '' //
      },
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0 // 列表总数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let params = {
        readFlag: this.screenForm.readFlag,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }

      getNoticeList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },
    // 检查行能否选中
    checkSelRow(row) {
      return !row.readFlag
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },
    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    changeReadFlag(type) {
      if (type === 'ALL') {
        changeAllReadFlag().then(() => {
          this.getList()
          this.$successMsg('全部标为已读成功')
        })
      } else {
        if (this.$refs['noticeTable'].selection.length > 0) {
          let noticeIds = []
          this.$refs['noticeTable'].selection.forEach(row => {
            noticeIds.push(row.noticeId)
          })
          changeReadFlag(noticeIds).then(() => {
            this.getList()
            this.$successMsg('标为已读成功')
          })
        } else {
          this.$errorMsg("请先选择消息！")
        }
      }
    },
    goOrderDetail(row) {
      let noticeIds = []
      noticeIds.push(row.noticeId)
      changeReadFlag(noticeIds)
      let {href} = this.$router.resolve({path: `/order/detail?orderId=${row.objId}`});
      window.open(href, '_blank');
      // this.$router.push({
      //   path: '/order/detail',
      //   query: {
      //     orderId: row.objId,
      //     type: 'notice'
      //   }
      // })
    }
  }
}
</script>

<style scoped>

</style>
