<!--
 * @Author: sjl
 * @Date: 2023-04-24 09:29:05
 * @Descripttion: 
-->
<template>
  <div class="leafWrapper">
    <div class="leafTotal">
      <i>设备预警</i>
    </div>
    <div class="warnTotal">
      <p>预警总数: <b>620</b></p>
      <ul class="warnTotalUl">
        <li
          v-for="(item, index) in list"
          :key="item.id"
          :class="{ active: selected === index }"
          @click="handleChange(index)"
        >
          <span class="number">{{ randomNumber() }}</span>
          <i>警报级</i>
          <b>地灾点</b>
          <p>{{ randomNumber() }} <u>个</u></p>
        </li>
      </ul>
    </div>
    <div class="searchWrapper">
      <ul class="serchContent">
        <li v-for="item in items" :key="item.id" class="list-item">
          <div class="item-content">
            <div class="item-info">
              <span class="title">{{ item.title }}</span>
            </div>
            <div class="item-action">
              <div class="circle"></div>
              <span class="action-text">发布红色预警</span>
            </div>
          </div>
          <div class="item-time">
            <span class="time"> <b>时间:</b> {{ item.time }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import img from '../../assets/images/warnTotal.png';
  export default defineComponent({
    name: 'details',
    components: {},
    setup() {
      const list = [
        {
          id: 1,
          title: '43',
          img: img,
          level: '报警级',
        },
        {
          id: 2,
          title: '32',
          img: img,
          level: '报警级',
        },
        {
          id: 3,
          title: '234',
          img: img,
          level: '报警级',
        },
        {
          id: 4,
          title: '126',
          img: img,
          level: '报警级',
        },
      ];
      const items = [
        {
          id: 1,
          time: '2023-03-03 12:12:12',
          title: 'GNSS1号',
        },
        {
          id: 2,
          time: '2023-03-03 12:12:12',
          title: 'GNSS2号',
        },
        {
          id: 3,
          time: '2023-03-03 12:12:12',
          title: 'GNSS3号',
        },
        {
          id: 4,
          time: '2023-03-03 12:12:12',
          title: 'GNSS4号',
        },
        {
          id: 5,
          time: '2023-03-03 12:12:12',
          title: 'GNSS5号',
        },
      ];
      const focus = () => {
        console.log('focus');
      };
      const randomNumber = () => {
        return Math.floor(Math.random() * 100);
      };

      const selected = ref(1);
      const handleChange = (value) => {
        selected.value = value;
      };

      return {
        randomNumber,
        selected,
        value1: ref('lucy'),
        value2: ref(),
        list,
        items,
        focus,
        handleChange,
      };
    },
  });
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'AlimamaShuHeiTi';
    src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
  }
  @font-face {
    font-family: 'AgencyFB';
    src: url('../../assets/font/AgencyFB-Bold.ttf');
  }
  ul.warnTotalUl {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .warnTotalUl li {
    width: 90px;
    height: 200px;
    margin-right: 10px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
  }
  .warnTotalUl li.active {
    background: url('../../assets/images/zhyj-bg.png') no-repeat;
    background-size: 80px 187px;
  }
  .warnTotalUl span.number {
    font-family: 'AgencyFB';
    display: block;
    width: 100%;
    height: 94px;
    background: url('../../assets/images/yj-01.png') no-repeat;
    background-size: 65px 65px;
    background-position: center;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    line-height: 94px;
    color: white;
  }
  .warnTotalUl li:nth-child(2) span.number {
    background: url('../../assets/images/yj-02.png') no-repeat;
    background-size: 65px 65px;
    background-position: center;
  }
  .warnTotalUl li:nth-child(3) span.number {
    background: url('../../assets/images/yj-03.png') no-repeat;
    background-size: 65px 65px;
    background-position: center;
  }
  .warnTotalUl li:nth-child(4) span.number {
    background: url('../../assets/images/yj-04.png') no-repeat;
    background-size: 65px 65px;
    background-position: center;
  }
  .warnTotalUl i {
    display: block;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    color: white;
    margin-top: -10px;
  }
  .warnTotalUl b {
    display: block;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: white;
    margin-top: 20px;
  }
  .warnTotalUl p u {
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
  }
  .warnTotalUl p {
    display: block;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    color: white;
    transform: skew(1deg);
  }

  .my-select2 {
    margin: 20px 0;
    background: rgba(3, 49, 79, 0.4);
    border: #096589 solid 1px;
    width: 400px;
  }
  ::v-deep .my-select2 .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0px solid rgba(0, 0, 0, 0) !important;
  }
  .serchContent {
    color: #fff;
  }
  .serchContent .list-item {
    height: 84px;
    padding: 10px;
    align-items: center;
    margin-bottom: 6px;
    border-bottom: 1px solid #0e405a;
    padding-left: 73px;
    background: url('../../assets/images/yjyb-bc.png') no-repeat 0px center;
  }
  .serchContent .item-time {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .serchContent .time {
    font-size: 14px;
    color: #fff;
  }
  .serchContent .time b {
    font-weight: normal;
    color: #93d5f1;
  }
  .serchContent .item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 5px;
    padding: 0px 0px 15px 0px;
  }
  .serchContent .item-info {
    display: flex;
    align-items: center;
  }
  .serchContent .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    margin-right: 5px;
  }
  .serchContent .title {
    font-size: 16px;
    color: #fff;
  }
  .serchContent .item-action {
    display: flex;
    align-items: center;
  }
  .serchContent .action-text {
    font-size: 14px;
    color: #fff;
    margin-right: 10px;
  }
  .warnTotal p b {
    font-size: 24px;
    margin: 0px 20px;
    font-family: 'AgencyFB';
    font-style: italic;
  }
  .warnTotal > p {
    text-align: center;
    color: #fff;
    padding: 6px;
    width: 100%;
    font-style: italic;
    background: linear-gradient(
      to right,
      rgba(253, 143, 143, 0),
      rgba(253, 0, 0, 0.4),
      rgba(253, 143, 143, 0)
    );
  }
  .warnTotal {
    padding: 20px;
    height: 274px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    background: rgba(3, 49, 79, 0.4);
  }
  .searchWrapper {
    padding: 20px;
    height: calc(100vh - 500px);
    width: 100%;
    overflow: hidden;
    background: rgba(3, 49, 79, 0.4);
  }
  .leafWrapper {
    position: fixed;
    right: 20px;
    top: 90px;
    z-index: 3;
    width: 400px;
  }
  .leafWrapper {
    animation-name: move;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  @keyframes move {
    0% {
      right: -400px;
    }
    100% {
      right: 20px;
    }
  }
  .leafTotal {
    width: 400px;
    height: 47px;
    background: url('../../assets/images/jcsbtj.png') no-repeat;
    font-size: 19px;
    font-weight: bold;
    color: #fff;
    line-height: 38px;
    margin: 0px 0px 20px 0px;
  }
  .leafTotal i {
    margin-left: 32px;
    font-family: 'AlimamaShuHeiTi';
    margin-right: 98px;
    font-weight: bold;
    font-style: italic;
    margin-left: 32px;
    margin-right: 98px;
  }
  .leafTotal b {
    font-weight: normal;
    font-size: 15px;
    color: #a7e6fa;
  }
</style>
