<template>
  <el-container class="page-container">
    <div class="page-container-left">
      <div v-for="(item, idx) in systems" :key="item.id">
        <div class="module_header">{{ item.systemName }}</div>
        <div class="module-content">
          <!-- 每个系统卡片 -->
          <el-card class="system-card" v-for="(card, index) in item.childes" :key="card.id"
            @click.native="systemUrlClick(card.systemUrl)" :style="{
        backgroundImage: `url(${resolveImage('1.png')})`

      }">
            <div class="system-card-content">
              <!-- <el-icon :size="24">{{ card.icon }}</el-icon> -->
              <div class="system-title">{{ card.systemName }}</div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!--  -->
    <div class="page-container-right">
      <!-- 欢迎信息 -->
      <div class="welcome-card">
        <img class="welcome-image" src="../assets/img/82.png" alt="welcome" />
        <div class="welcome-text">
          <h3>欢迎来到</h3>
          <h3>上海市疾病预防控制中心</h3>
          <el-button type="primary" round size="medium">登录</el-button>
        </div>
      </div>
      <!-- 公告栏 -->
      <div class="announcement">
        <div class="announcement-header">
          <div class="announcement-bg">
            公示公告 <img src="../assets/img/装饰.png" alt="" />
          </div>
          <el-button type="primary" round size="mini" @click="goNotice">进入公告</el-button>
        </div>
        <div class="announcement-list">
          <div v-for="(item) in announcements" :key="item.noticeId" class="announcement-item"
            :class="{ highlighted: item.show === true }">
            <div class="announcement-item-header" @click="announcementChange(item)">
              <el-tooltip class="item" effect="dark" :content="item.noticeTitle" placement="left-start">
                <div class="announcement-title" :class="{ highlighted: item.show === true }">
                  {{ item.noticeTitle }}
                </div>
              </el-tooltip>
              <div class="announcement-date">{{ item.updateTime }}</div>
            </div>
            <div class="announcement-qs" v-if="item.show">
              <div v-html="item.noticeContent"> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
// 公示公告
import { listNotice } from "@/api/system/notice";
import { getTabSystemOtherList } from "@/api/index.js";
export default {
  name: "Index",
  data () {
    return {
      systems: [],

      announcements: [],
    };
  },
  methods: {
    getList () {
      getTabSystemOtherList().then((res) => {
        if (+res.code === 200) {
          this.systems.forEach((item) => {
            item.childes.forEach((v) => {
              v.childes = require(v.childes);
            });
          });
          this.systems = res.rows;
        }
      });
    },
    announcementChange (item) {
      this.announcements.forEach((element) => {
        if (element.noticeId === item.noticeId) {
          element.show = !element.show;
        }
      });
    },
    resolveImage (path) {
      // return require('@/assets/img/1.png')
      return require(`@/assets/img/${path}`)

    },
    systemUrlClick (url) {
      console.log(url, 'url')

      window.open(url)
    },
    getListNotice () {
      listNotice({ noticeType: 2 }).then(response => {
        response.rows.forEach(item => {
          item.show = false

        })
        this.announcements = response.rows;
      });
    },
    goNotice () {
      this.$router.push('/system/notice')
    }
  },


  created () { },
  mounted () {
    this.getList();
    this.getListNotice();
  },
};
</script>

<style scoped lang="scss">
.page-container {
  height: calc(100vh - 94px);
  width: 100%;
  background: url(../assets/img/背景.jpg) no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  box-sizing: border-box;
}

.page-container-left {
  height: calc(100vh - 94px);
  width: 75%;
  padding: 20px 40px;
  overflow-y: auto;
  overflow-x: hidden;

  .module_header {
    //  max-width: 600px;
    padding: 8px 10px;
    background: url(../assets/img/标题bg.png) no-repeat;
    //  background-size: 100% 100% ;
    color: #fff;
    padding-top: 15px;
    margin-bottom: 20px;
  }

  .module-content {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    /* 上下间距设置为较小的值 */
    column-gap: 45px;
    /* 左右间距保持较大的值 */
    margin-bottom: 30px;

    .system-card {
      width: calc(33.333% - 30px);
      height: 130px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      // text-align: center;
      padding: 10px;
      background-size: 100% 100%;
    }

    .system-title {
      margin-left: 140px;
    }
  }
}

.page-container-right {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.welcome-card {
  height: 320px;
  flex: 1;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.welcome-image {
  width: 80%;
  height: 280px;
  // margin: 0 auto 10px;
}

.welcome-text h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.announcement {
  height: 460px;
  width: 100%;
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.announcement-header {
  font-size: 16px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .announcement-bg {
    font-weight: 700;
    color: #1a8ff9;

    img {
      margin-left: 5px;
    }
  }
}

.announcement-list {
  margin-top: 10px;
  padding-right: 20px;
  height: 380px;
  overflow-y: auto;
  // overflow: hidden;
}

.announcement-item {
  margin-bottom: 10px;
  padding: 10px;

  border-bottom: 1px dashed #f2f1f3;
  // margin-bottom: 10px;

  .announcement-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .announcement-qs {
    font-size: 12px;
    color: #a3acb3;
  }

  &.highlighted {
    background-color: rgba(#dbe7f5, 0.3);
    /* 淡蓝色背景 */
  }
}

.announcement-title {
  cursor: pointer;
  max-width: 160px;
  font-size: 14px;
  color: #828282;
  white-space: nowrap; // 防止文本换行
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 如果超出部分隐藏，则使用省略号显示

  &.highlighted {
    font-weight: 700;
    color: #3981db;
    /* 深蓝色标题 */
  }
}

.announcement-date {
  font-size: 12px;
  color: #888;
}
</style>
