<template>
  <div class="app-container"><!--从这一层开始嵌入页面-->

    <el-card>
      <el-form label-width="50px">
        <div class="search">
          <el-form-item label="关键字">
            <el-input placeholder="请输入关键字"></el-input>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button icon="el-icon-refresh-left">重置</el-button>
        </div><!--search 搜索-->
      </el-form><!--el-form-->
    </el-card><!--el-card-->

    <el-card>
      <div class="operate">
        <el-button type="primary" icon="el-icon-check">全部标记已读</el-button>
      </div><!--operate 操作按钮-->
      <el-table :data="tableData" style="width: 100%" height="529">
        <el-table-column prop="prop0" label="消息标题">
          <template slot-scope="scope">
            <el-link type="primary" @click="drawer1 = true">{{ scope.row.prop0 }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="prop2" label="接收时间"></el-table-column>
        <el-table-column prop="prop3" label="消息状态">
          <template slot-scope="scope">
            <span :class="getClassName(scope.row.prop3)">{{ scope.row.prop3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" >
          <el-button type="text" icon="el-icon-check">标记已读</el-button>
        </el-table-column>
      </el-table><!--el-table-->
      <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
    </el-card><!--el-card-->

    <el-dialog :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
      <template #title>
        <span>消息内容</span>
      </template>
      <div class="lctitle">消息标题：网络资源信息名称1 已过期</div><!--lctitle-->
      <div>
      </div>
    </el-dialog><!--el-drawer 流程监控-抽屉-->

  </div><!--app-container-->
</template>

<script>
  export default {
    name: 'message',
    data() {
      return {
        drawer1: false,
        tableData: [
          {
            prop0: '网络资源信息名称1 已过期',
            prop1: '网络资源信息名称1 已过期',
            prop2: '2024/02/09 12:00',
            prop3: '未读',
          },
          {
            prop0: '网络资源信息名称2 已过期',
            prop1: '网络资源信息名称1 已过期',
            prop2: '2024/02/09 12:00',
            prop3: '已读',
          },
          {
            prop0: '网络资源信息名称3 已过期',
            prop1: '网络资源信息名称1 已过期',
            prop2: '2024/02/09 12:00',
            prop3: '未读',
          },
          {
            prop0: '网络资源信息名称4 已过期',
            prop1: '网络资源信息名称1 已过期',
            prop2: '2024/02/09 12:00',
            prop3: '已读',
          },
          {
            prop0: '网络资源信息名称5 已过期',
            prop1: '网络资源信息名称1 已过期',
            prop2: '2024/02/09 12:00',
            prop3: '未读',
          }
        ],
      }
    },
    methods: {
      getClassName(prop3) {
        // 根据不同的文本内容返回不同的类名
        if (prop3 === '已读') {
          return 'green';
        } else if (prop3 === '未读') {
          return 'red';
        }
      },
    }
  }
</script>

<style scoped>

</style>
