<template>
  <div>
    <el-dialog
      title="消息公告"
      :visible.sync="dialogNoticeVisible"
      width="800px"
      append-to-body
      class="notice"
    >
      <el-tabs
        v-model="activeReadName"
        @tab-click="handleReadClick"
        class="top-tab"
      >
        <el-tab-pane name="unread" label="未读"> </el-tab-pane>
        <el-tab-pane name="read" label="已读"> </el-tab-pane>
      </el-tabs>
      <div class="box">
        <div class="left-box">
          <el-tabs
            tab-position="left"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane name="first">
              <span slot="label">
                <i class="el-icon-s-comment icon"> </i> 消息
              </span>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label">
                <i class="el-icon-message-solid icon"> </i> 公告
              </span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-box">
          <ul>
            <li v-for="item in 15" :key="item" @click="openDetail">
              <p>
                医用棉签库存达到下限医用棉签库存达到下限医用棉签库存达到下限医用棉签库存达到下限
              </p>
              <span>2023-06-19</span>
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="detail"
      title="详情"
      :visible.sync="dialogDetailVisible"
      width="800"
      append-to-body
    >
      <div>医用棉签库存达到下限</div>
    </el-dialog>
  </div>
</template>

<script>
import bus from "@/views/bus";
export default {
  data() {
    return {
      activeReadName: "unread",
      activeName: "first",
      dialogNoticeVisible: false,
      dialogDetailVisible: false
    };
  },
  mounted() {
    bus.$on("dialogNoticeVisible", (val) => {
      this.dialogNoticeVisible = val;
    });
    bus.$on("dialogDetailVisible", (val) => {
      this.dialogDetailVisible = val;
    });
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },

    handleReadClick(tab, event) {
      // console.log(tab, event);
    },

    // 打开详情
    openDetail() {
      this.dialogDetailVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.top-tab {
  ::v-deep .el-tabs__nav {
    margin-left: 320px;
  }
  ::v-deep .el-tabs__header {
    background: #e1e8fe;
  }
  ::v-deep .el-tabs__item {
    padding: 0 20px !important;
  }
}
.box {
  height: 600px;
  .left-box {
    float: left;
    width: 18%;
    margin-right: 20px;
    border-radius: 6px;
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    .icon {
      margin-right: 10px;
    }
    ::v-deep .el-tabs--left .el-tabs__header.is-left {
      width: 100%;
    }
    ::v-deep .el-tabs--left .el-tabs__item.is-left {
      text-align: left;
    }
    .el-tabs--left,
    .el-tabs--right {
      height: 100%;
    }
    ::v-deep .el-tabs__item.is-active {
      background: #ecf5ff;
    }
    ::v-deep .el-tabs__item:hover {
      background: #ecf5ff;
    }
  }
  .right-box {
    float: left;
    width: 76%;
    height: 100%;
    overflow-y: auto;
    ul {
      li {
        cursor: pointer;
        font-size: 14px;
        height: 40px;
        padding: 10px;
        &:hover {
          //   background: #ecf5ff;
          color: #3c64dc;
        }

        p {
          float: left;
          width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          float: right;
          width: 80px;
        }
      }
    }
  }
}
.notice {
  ::v-deep .el-dialog__body {
    padding: 10px 0;
  }
}
</style>