<!--
 * @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 in list" :key="item.id" class="item">
          <p>{{ item.title }}</p>
          <img :src="item.img" alt="" />
          <div class="text">{{ item.level }}</div>
        </li>
      </ul>
    </div>
    <div class="searchWrapper">
      <div class="my-select2">
        <a-select
          ref="select"
          v-model:value="value1"
          style="width: 80px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="all">全部</a-select-option>
          <a-select-option value="lucy">类型1</a-select-option>
          <a-select-option value="Yiminghe">类型2</a-select-option>
        </a-select>
        <a-space direction="vertical" :size="12" style="width: 277px">
          <a-range-picker v-model:value="value2" show-time style="width: 277px" />
        </a-space>
      </div>
      <ul class="serchContent">
        <li v-for="item in items" :key="item.id" class="list-item">
          <div class="item-time">
            <img src="../../assets/images/time.png" alt="time-icon" class="time-icon" />
            <span class="time">{{ item.time }}</span>
          </div>
          <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 class="item-action">
              <span class="action-text">详情</span>
              <img src="../../assets/images/qxt.png" alt="action-icon" class="action-icon" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import img1 from '../../assets/images/warnTotal1.png';
  import img2 from '../../assets/images/warnTotal2.png';
  import img3 from '../../assets/images/warnTotal3.png';
  import img4 from '../../assets/images/warnTotal4.png';
  export default defineComponent({
    name: 'details',
    components: {},
    setup() {
      const list = [
        {
          id: 1,
          title: '43',
          img: img1,
          level: '警报级',
        },
        {
          id: 2,
          title: '32',
          img: img2,
          level: '警戒级',
        },
        {
          id: 3,
          title: '234',
          img: img3,
          level: '警示级',
        },
        {
          id: 4,
          title: '126',
          img: img4,
          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 handleChange = (value) => {
        console.log(`selected ${value}`);
      };
      return {
        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');
  }
  ::v-deep .ant-input {
    border: 0px solid #303030 !important;
  }
  ::v-deep .anticon-swap-right,
  ::v-deep .ant-picker-suffix {
    color: #fff;
  }
  ::v-deep .ant-picker {
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid rgba(0, 0, 0, 0);
  }
  ::v-deep .ant-select-single.ant-select-show-arrow .ant-select-selection-item {
    color: #fff;
  }
  .my-select2 {
    color: #fff;
    margin: 20px 0;
    background: rgba(3, 49, 79, 0.4);
    border: #096589 solid 1px;
    width: 360px;
  }
  ::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;
    background: rgba(12, 85, 122, 0.4);
    margin-bottom: 6px;
  }
  .serchContent .item-time {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .serchContent .time-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  .serchContent .time {
    font-size: 14px;
    color: #fff;
  }
  .serchContent .item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    padding-left: 3px;
  }
  .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;
  }
  .serchContent .action-icon {
    width: 20px;
    height: 20px;
  }
  .warnTotalUl li p {
    font-size: 22px;
    font-weight: bold;
    font-family: 'AgencyFB';
  }
  .warnTotalUl li:first-child p {
    background: linear-gradient(to bottom, #fff, #f8a5a1, #bb0606);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 3px 7px #f8a5a1;
  }
  .warnTotalUl li:nth-child(2) p {
    background: linear-gradient(to bottom, #fff, #fae5ba, #debf71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 3px 7px #debf71;
  }
  .warnTotalUl li:nth-child(3) p {
    background: linear-gradient(to bottom, #fff, #71f0f3, #02b3b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 3px 7px #02b3b7;
  }
  .warnTotalUl li:nth-child(4) p {
    background: linear-gradient(to bottom, #fff, #73b6fb, #045ab2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 3px 7px #045ab2;
  }
  .warnTotalUl img {
    width: 76px;
    height: 76px;
  }
  ul.warnTotalUl {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    color: #fff;
  }
  .warnTotalUl .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }
  .warnTotalUl img {
    margin-top: 5px;
    margin-bottom: 15px;
  }
  .warnTotalUl .text {
    font-size: 14px;
  }
  .warnTotal p b {
    font-family: 'AgencyFB';
    font-size: 24px;
    margin: 0px 20px;
    font-weight: bold;
    font-style: italic;
  }
  .warnTotal > p {
    text-align: center;
    color: #fff;
    padding: 6px;
    width: 100%;
    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;
    left: 20px;
    top: 90px;
    z-index: 3;
    width: 400px;
  }
  .leafWrapper {
    animation-name: move;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  @keyframes move {
    0% {
      left: -400px;
    }
    100% {
      left: 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;
  }
  @media screen and (min-width: 2160px) {
    li.box {
      margin: 25px 20px 28px 0px;
    }
  }
</style>
