<template>
  <div class="home" >
    <div style="width: 72%">
      <div class="homeItem">
        <blockquote  class="homeItemIndex">
          系统公告
          <span class="homeSpan">2024-11-25</span>
        </blockquote>
        <span>【系统菜单调整通知】</span>
        <span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
      </div>
      <div class="home2Item">
        <blockquote class="homeItem2Index">
          <div class="header-wrapper">
            <span>供应商</span>
            <div class="fold-button" @click="toggleFold">
              <span>{{ isFold ? '展开' : '收起' }}</span>
              <Icon name="LineMdPerson" :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }"></Icon>
            </div>
          </div>
        </blockquote>
        <!-- 折叠内容区域 -->
        <div :style="{height:isFold?'420px':'600px'}">
          <div class="fold-content">
            <!-- 这里放具体内容 -->
            <div class="fold-content_item">
              <div class="fold-content_item_index" v-for="(item,index) in foldContentItemIndex" :key="index">
                <div class="fold-content_item_index_top">
                  <div class="content">{{item.titleName}}</div>
                  <span>{{item.video}}</span>
                </div>
                <div class="intermediate" v-for="items in item.intermediate" :key="items.key">
                  <span style="width: 50px">{{items.name}}</span>
                  <span style="width: 50px">{{items.digital}}</span>
                  <span style="width: 50px">{{items.mechanism}}</span>
                  <span style="width: 50px">{{items.digitalKey}}</span>
                </div>
                <hr/>
                <div style="display: flex;align-items: center;justify-content: space-between">
                  <div style="display: flex;">
                    <div class="risk">{{item.risk}}</div>
                    <div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">{{item.score}}分</div>
                  </div>
                  <div style="display: flex">
                    <div>{{item.ranking}}</div>
                    <div style="margin-left: 10px">{{item.num}}</div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 25%">
       <div class="home3Item">1231321</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import {ref} from "vue";
  const isFold  = ref(true)
  const toggleFold = ()=>{
    isFold.value = !isFold.value
  }
  const foldContentItemIndex = ref([
    {
      titleName:'某某小学',
      video:'屏幕',
      intermediate:[
        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
      ],
      risk:'低风险',
      score:'100',
      ranking:'排名',
      num:1
    },
    {
      titleName:'某某小学',
      video:'屏幕',
      intermediate:[
        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
      ],
      risk:'低风险',
      score:'95',
      ranking:'排名',
      num:2
    },
    {
      titleName:'某某小学',
      video:'屏幕',
      intermediate:[
        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
      ],
      risk:'低风险',
      score:'80',
      ranking:'排名',
      num:3
    },
    {
      titleName:'某某小学',
      video:'屏幕',
      intermediate:[
        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
      ],
      risk:'低风险',
      score:'90',
      ranking:'排名',
      num:4
    },{
      titleName:'某某小学',
      video:'屏幕',
      intermediate:[
        {key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
        {key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
        {key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
      ],
      risk:'低风险',
      score:'100',
      ranking:'排名',
      num:1
    }
  ])
</script>
<style scoped lang="scss">
  .home{
    display: flex;
    justify-content: space-between;
    //align-items: center;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    .homeItem {
      width: 100%;
      background: var(--bg-color);
      margin-bottom: 10px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
      padding: 10px 15px;
      color:var(--text-color);
      .homeItemIndex{
        margin-bottom: 10px;
        line-height: 1.6;
        border-left: 5px solid #5FB878;
        border-radius: 0 2px 2px 0;
        padding-left: 10px;
        .homeSpan{
          display: inline-block;
          padding: 0 6px;
          font-size: 12px;
          text-align: center;
          background-color: #FF5722;
          color: #fff;
          border-radius: 2px
        }
      }
    }
    .home2Item{
      width: 100%;
      background: var(--bg-color);
      margin-bottom: 10px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
      padding: 10px 15px;
      color:var(--text-color);

      .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
      .fold-button {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #1890ff;
        transition: all 0.3s;
      }

      .fold-button:hover {
        opacity: 0.8;
      }

      .fold-button i {
        transition: transform 0.3s;
      }

      .fold-content {
        border-top: var(--border-top);
        .fold-content_item{
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .fold-content_item_index{
            padding: 10px;
            min-height: 90px;
            border-radius: 5px;
            border-color: var(--border-color);
            border-width: 1px;
            border-style: solid;
            background: var(--bg-color);
            color:var(--text-color);
            box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
            width: 22%;
            margin-right: 5px;
            margin-bottom: 15px;
            .fold-content_item_index_top{
              display: flex;
              justify-content: space-between;
              align-items: center;
              color:var(--color);
              .content{
                font-weight: bold;
                font-size: 16px !important;
              }
            }
            .intermediate{
              padding: 5px 7px;
              margin-top: 5px;
              font-size: 12px;
              display: flex;
              justify-content: space-between;
            }
            hr{
              line-height: 0;
              margin: 10px 0;
              padding: 0;
              border: none !important;
              border-bottom: 1px solid var(--border-bottom) !important;
              clear: both;
              background: 0 0
            }
            .risk{
              height: 18px;
              line-height: 18px;
              display: inline-block;
              padding: 0 6px;
              font-size: 12px;
              text-align: center;
              background-color: #FF5722;
              color: #fff;
              border-radius: 2px;
            }
          }
        }
      }
      .homeItem2Index{
        margin-bottom: 10px;
        border-left: 5px solid #5FB878;
        border-radius: 0 2px 2px 0;
        padding-left: 10px;
        height: 18px;
        line-height: 18px
      }
    }
    .home3Item{
      margin-bottom: 15px;
      border-radius: 2px;
      background: var(--bg-color);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
      padding: 10px 15px;
      color:var(--text-color);
    }
  }

</style>
