<template>
  <div style="width: 100%; height: 100%">
    <div class="commontitle">
      <div class="left">
        <span>今日预警信息</span>
        <img src="/static/screen/img/titleIcon.png" alt="" />
      </div>
      <div class="right">
        <el-select
          style="width: 160px"
          class="header-select nobg"
          v-model="place1"
          :teleported="false"
          @change="placeChange"
          placeholder="场景选择"
          clearable
        >
          <el-option v-for="item in placeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="todayBoticeTotal myborder1">
      <div
        style="
          position: relative;
          bottom: 3px;
          width: 40px;
          height: 40px;
          margin-right: 14px;
          text-align: center;
          border: 1px solid #ab2626;
          border-radius: 50%;
        "
      >
        <img src="/static/screen/img/redLight.png" alt="" style="width: 22px; margin-top: 5px" />
      </div>
      <div>
        今日<span>7</span>个场景预警总计：<span class="total">{{ count }}</span> 起
      </div>
    </div>
    <div style="width: 100%; height: calc(100% - 136px); margin-top: 29px; overflow: auto">
      <ul>
        <template v-for="item in warnList" :key="item.id">
          <li>
            <div class="left">
              <el-image :src="item.snapshotUrl" fit="cover" :preview-src-list="[item.snapshotUrl]"></el-image>
              <!-- <img :src="item.snapshotUrl" alt="" /> -->
            </div>
            <div class="right">
              <div class="time">{{ item.tick }}</div>
              <div v-if="item.warnHand == 0" class="status" style="background-color: #9a112c">
                <div class="circle"></div>
                <div>未处理</div>
              </div>
              <div class="title">{{ item.alarmTypeDesc }}</div>
              <div class="des">
                <div>所属位置：{{ item.cameraName }}</div>
                <div>所属场景：{{ item.cameraGroup }}</div>
              </div>
            </div>
          </li>
        </template>
        <template v-if="!warnList.length">
          <div style="margin-top: 18px; font-size: 14px; color: #10cefe; text-align: center">暂无数据</div>
        </template>
      </ul>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  screenData: {}
});
// 场景选择
const placeOptions = ref([]);
placeOptions.value = props.screenData.camera.map(e => {
  return {
    value: e.id,
    label: e.name
  };
});
const place1 = ref("");
const count = ref(0);
// 列表
const warnList = ref([]);
const warnList_copy = ref([]);
const getwarnList = () => {
  warnList.value = props.screenData.alarmStatisti.warnList;
  warnList_copy.value = JSON.parse(JSON.stringify(warnList.value));
  count.value = warnList.value.length;
};
const placeChange = () => {
  let obj = placeOptions.value.find(e => e.value == place1.value);
  if (obj) {
    warnList.value = warnList_copy.value.filter(e => e.cameraGroup == obj.label);
  } else {
    warnList.value = warnList_copy.value;
  }
};
onMounted(() => {
  init();
});
const init = () => {
  getwarnList();
};
defineExpose({
  init
});
</script>

<style scoped lang="scss">
.todayBoticeTotal {
  box-sizing: border-box;
  display: flex;
  align-content: center;
  width: 588px;
  height: 59px;
  padding-top: 13px;
  padding-left: 25px;
  margin-top: 22px;
  font-family: "Microsoft YaHei UI";
  font-size: 16px;
  color: #78dfff;
  background: #0f1e5e;
  span.total {
    position: relative;
    top: 3px;
    font-family: "Microsoft YaHei UI";
    font-size: 22px;
    color: #ff483a;
  }
}
ul:not(.el-scrollbar__view) {
  li:first-child {
    margin-top: 0;
  }
  li {
    box-sizing: border-box;
    display: flex;
    padding-right: 20px;
    margin-top: 18px;
    background: #182665;
    .left {
      width: 195px;
      height: 114px;
      object-fit: cover;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      position: relative;
      flex: 1;
      padding-left: 20px;
      .status {
        position: absolute;
        top: 16px;
        right: 0;
        box-sizing: border-box;
        display: flex;
        place-content: center space-between;
        width: 82px;
        height: 22px;
        padding-right: 16px;
        padding-left: 9px;
        font-size: 12px;
        line-height: 20px;
        color: #ffffff;
      }
      .time {
        margin-top: 13px;
        font-size: 14px;
        color: #78dfff;
      }
      .title {
        margin-top: 13px;
        font-size: 16px;
        color: #ffffff;
      }
      .des {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        font-size: 12px;
        color: #78dfff;
      }
    }
  }
}
.header-select {
  :deep(.el-select__wrapper) {
    width: 100%;
    height: 40px;
    background: unset;
    border: 1px solid #35c9f0;
    outline: none;
  }

  // :deep(.el-popper) {
  //   position: absolute !important;
  //   top: 58px !important;
  //   left: 0px !important;
  // }
  :deep(.el-select-dropdown__item) {
    height: 55px;
    font-size: 20px;
    line-height: 55px;
    color: #0c4dcf;
  }
  :deep(.el-select__placeholder) {
    font-size: 16px;
    background: linear-gradient(9deg, #10cefe 7.44%, #ffffff 79.62%);
    background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

// .header-select.nobg {
//   :deep(.el-select__wrapper) {
//     background-color: unset;
//     font-size: 16px;
//     width: 100%;
//     height: 40px;
//   }
//   :deep(.el-select-dropdown__item) {
//     color: #0c4dcf;
//     max-width: 220px;
//     font-size: 16px;
//     line-height: 40px;
//   }
//   :deep(.el-select__placeholder) {
//     background: linear-gradient(9deg, #10cefe 7.44%, #fff 79.62%);
//     background-clip: text;
//     -webkit-background-clip: text;
//     -webkit-text-fill-color: transparent;
//     font-size: 16px;
//   }
// }
</style>
