<template>
  <div>
    <svg-icon :icon-class="'email'" @click="click"/>
<!--    <i class="el-icon-s-comment" @click="click"></i>-->
    <el-drawer
      title="消息通知"
      :visible.sync="drawer">
      <el-row style="margin: 10px">
        <el-col>
          <el-radio-group v-model="radio1">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="通知"></el-radio-button>
            <el-radio-button label="公告"></el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col>

          <el-radio-group v-model="radio2">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="已读"></el-radio-button>
            <el-radio-button label="未读"></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>消息名称消息名称消息名称消息名称</span>
          <el-button style="float: right;">阅读消息</el-button>
        </div>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              消息发布时间
            </template>
            2024-4-13 09:30:57
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              消息发布人
            </template>
            张三（研发部/部门经理）
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-place"></i>
              消息类型
            </template>
            <el-tag size="small">通知</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              当期状态
            </template>
            <el-tag size="small">未读</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>消息名称消息名称消息名称消息名称</span>
          <el-button style="float: right;">阅读消息</el-button>
        </div>
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              消息发布时间
            </template>
            2024-4-13 09:30:57
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              消息发布人
            </template>
            张三（研发部/部门经理）
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-place"></i>
              消息类型
            </template>
            <el-tag size="small">通知</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              当期状态
            </template>
            <el-tag size="small" type="success">已读</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

    </el-drawer>
  </div>
</template>

<script>

export default {
  name: 'MessageNotify',
  data() {
    return {
      drawer: false,
      radio1: "全部",
      radio2: "全部",
    }
  },
  methods: {
    click() {
      this.drawer = true;
    },
  }
}
</script>

<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card{
  margin: 10px;
}
</style>
