<template>
  <div class="app-container">
    <el-row :gutter="20">
      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
        <!--设备档案-->
        <pane size="84">
          <el-col>
            <el-table v-loading="loading" :data="dataList">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column
                label="序号"
                width="60"
                type="index"
              ></el-table-column>              
              <el-table-column label="消息ID" align="center" key="id" prop="id" width="80" />
              <el-table-column label="用户ID" align="center" key="userId" prop="userId" width="80" />
              <el-table-column label="消息内容" align="left" key="content" prop="content" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ scope.row.content || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="消息状态" align="center" key="status" prop="status" width="100">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status === 'unread' ? 'primary' : 'success'">
                    {{ scope.row.status === 'unread' ? '未读' : '已读' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="标题" align="left" key="title" prop="title" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ scope.row.title || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
          </el-col>
        </pane>
      </splitpanes>
    </el-row>
  </div>
</template>

<script>
import { messageList } from "@/api/message/index"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"

export default {
  name: "Message",
  components: { Splitpanes, Pane },
  data() {
    return {
      // 遮罩层
      loading: true,


      // 总条数
      total: 0,
      // 消息数据列表
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined
      },

    }
  },

  created() {
    this.getList()
  },
  methods: {
    /** 查询设备列表 */
    getList() {
      this.loading = true
      messageList(this.queryParams).then(response => {
          this.dataList = response.rows || []
          this.total = response.data?.length || 0
          this.loading = false
        }
      )
    },


  }
}
</script>
