<template>
  <div class="dange_box">
    <div class="yhqd_btn">
      <ul>
        <li v-for="(item, index) in list" :key="item" :class="colorinde == index ? 'colo' : ''"
          @click="changecolor(index)">{{ item.title }}({{ item.num }})</li>

      </ul>
    </div>
    <ul class="content">
      <li v-for="item in yhqdlist" :key="item">
        <div class="boder">
          <span v-if="item.type == '01'" class="btn_gre">已整改</span>
          <span v-else-if="item.type == '02'" class="btn_yel">待整改</span>
          <span v-else="item.type=='03'" class="btn_red">超期整改</span>

          <span class="yhwz_font weiz">隐患位置:</span>
          <p class="yhwz_font">{{ item.yhwz }}</p>
        </div>
        <!-- <div class="boder"></div> -->
        <div>
          <span style="color: #3D3D3D;">{{ item.content }}</span>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </li>

    </ul>
  </div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([
  { title: '全部', num: '30' },
  { title: '已整改', num: '8' },
  { title: '待整改', num: '8' },
  { title: '超期整改', num: '8' },
])
const colorinde = ref(0)
function changecolor(val) {
  colorinde.value = val
}
const yhqdlist = ref([
  { type: '01', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '02', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '03', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '01', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '01', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '02', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '03', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '02', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '01', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
  { type: '01', yhwz: '安全部门走廊卫生角安全箱卫生角安全箱', content: '隐患详情安全箱里设备已老旧请及时更新构成隐患请及时更新构成隐患' },
])
</script>
<style lang="scss" scoped>
.dange_box {
  width: 100%;
  height: 100%;

  .yhqd_btn {
    margin: 10px;

    ul {
      display: flex;
      justify-content: space-around;

      li {
        text-align: center;
        font-weight: 290;
        color: #191919;
        line-height: 12px;
        font-size: 9px;
        background: rgba(186, 186, 186, 0.2);
        border-radius: 4px 4px 4px 4px;
        cursor: pointer;
        // border-top: #1b6753;
        // background: linear-gradient(
        //   0deg,
        //   #1d4d40 0%,
        //   rgba(152, 219, 218, 0) 100%
        // );

        // border-top: 2px solid #b2d3ca;
        padding: 5px;
      }

      .colo {
        background: var(--el-color-primary);
        box-shadow: 0px 2px 10px 0px rgba(68, 214, 0, 0.1);
        border-radius: 2px 2px 2px 2px;
        color: #FFFFFF;
      }

      // li:hover {
      //   background: linear-gradient(0deg,
      //       #56c7a5 0%,
      //       rgba(86, 199, 165, 0) 100%);
      //   color: #ebfbff;
      // }
    }
  }

  .content {
    height: calc(100% - 42px);
    overflow: scroll;

    >li {
      margin: 8px;
      background: #FFFFFF;
      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
      padding: 2px;

      .btn_gre {
        background: var(--el-table-cell-bmx-backgroundcolor);
        border-radius: 2px 2px 2px 2px;
        font-weight: 400;
        color: var(--el-color-primary);
        line-height: 18px;
        font-size: 10px;

      }

      .yhwz_font {
        font-size: 10px;
        font-weight: 290;
        color: #3D3D3D;
        line-height: 13px;
      }

      .btn_red {
        background: #FFF4F6;
        border-radius: 2px 2px 2px 2px;
        font-weight: 400;
        color: #F4002C;
        line-height: 18px;
        font-size: 10px;

      }

      .btn_yel {
        background: #FFF6E8;
        border-radius: 2px 2px 2px 2px;
        font-weight: 400;
        color: #FE7F2E;
        line-height: 18px;
        font-size: 10px;

      }

      .weiz {
        margin-left: -2px;
        width: 50% !important;
      }

      >div:first-child {
        display: flex;
        margin: 5px;

        span {
          width: 35%;
        }
      }

      >div:last-child {
        padding: 5px;
        display: flex;

        span {
          width: 90%;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      >div {
        >span {
          height: 20px;
          line-height: 20px;
          font-size: 11px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #bdc2c5;
          margin-left: 5px;
          text-align: center;
        }

        p {
          margin-top: 0px;
          line-height: 20px;
          font-size: 11px;
          font-family: Microsoft YaHei;
          color: #bdc2c5;
          margin-left: 1px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .boder {
        border-bottom: 1px solid rgba(0, 117, 85, 0.2);
        // margin-left: 15px;
        // width: 90%;
        // height: 1px;
        // background: #7afcf8;
        // border: 1px solid #35a5d7;
        // opacity: 0.2;
        // padding: none !important;
      }
    }
  }
}

[data-v-e4bd101e]::-webkit-scrollbar-thumb {
  background-color: #1e3a26;
  border-radius: 50px;
}

[data-v-e4bd101e]::-webkit-scrollbar-track {
  background-color: #0e2007;
}

::v-deep .el-icon {
  margin-top: 2px;
  color: #BABABA;
  // background: #BABABA;
}

::-webkit-scrollbar-thumb {
  background-color: #1b6753;
  border-radius: 50px;
}
</style>
