<template>
  <div class="largeScreen">
    <el-dialog
      class="largeScreen__dialog"
      v-model="visible"
      :width="width"
      :show-close="false"
      append-to-body
      @opened="openedHandle"
      @close="closeHandle"
    >
      <div class="largeScreen__dialog-content" :style="{ '--height--' : height }">
        <div class="header">
          <div class="header-title">
            <!-- <el-icon size="16"><CopyDocument /></el-icon> -->
            <span>{{ title }}</span>
          </div>
          <div class="header-close" @click="closeHandle">
            <el-icon size="24"><Close /></el-icon>
          </div>
        </div>
        <!-- v-if="contentShow"  -->
        <div class="container">
          <slot />
        </div>
      </div>
      <template #footer>
        <div></div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, computed, getCurrentInstance} from "vue";
import { fitChartSize, fitChartSizeVh } from "@/utils/styleUtils";
import styleUtil from "@/utils/styleUtils";
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String || Number,
    default: styleUtil.px2vw(900),
  },
  height: {
    type: String || Number,
    default: styleUtil.px2vh(700),
  },
  title: {
    required: true,
    type: String,
    default: "",
  },
});
const contentShow = ref(false);
const visible = computed(() => props.open);

function openedHandle() {
  contentShow.value = true;
}

// 添加emit事件
const emit = defineEmits(["update:open"]);

// 确定
const closeHandle = () => {
  contentShow.value = false;
  emit("update:open", false);
};

defineExpose({
  contentShow,
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
</style>
<style lang="scss">
@use "@/assets/styles/computed.scss" as calculate;
// 大屏样式
$shadow-color: #127BDC;
$dialog__title-color: #00f4f5;
$dp-primary-color: #11396A;
$text__color: #F4F4F4;
$pager__bg-color: linear-gradient(rgba(0, 240, 255, 0.1), rgba(13, 172, 255, 0.1));
$pager__bg-color-isActive: #127BDC;
$header__height: calculate.vh(40px);
$clip__size: calculate.px2font(15px);
.largeScreen {
  // 大屏弹框
  &__dialog {
    background-color: $dp-primary-color;
    // padding: calculate.vh(20px) calculate.vh(30px);
    padding: calculate.vh(15px);
    border-radius: calculate.px2font(0px);
    border: calculate.px2font(1px) solid rgba(14, 255, 255, 0.6);
    box-shadow: 0px 0px calculate.px2font(100px) 0 #4790f4;
    // box-shadow: inset 0 0 calculate.px2font(20px) $shadow-color; /* 向内阴影，颜色为深红色 */
    max-height: fit-content;
    clip-path: polygon($clip__size 0, calc(100% - $clip__size) 0, 100% $clip__size, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 $clip__size);
    &::before,&::after {
      content: "";
      bottom: 0;
      position: absolute;
      z-index: 1;
      width: calculate.px2font(25px);
      height: calculate.px2font(25px);
      border-color: #84E0FF;
      border-style: solid;
    }
    &::before {
      left: 0;
      border-width: 0 0 calculate.px2font(3px) calculate.px2font(3px);
    }
    &::after {
      right: 0;
      border-width: 0 calculate.px2font(3px) calculate.px2font(3px) 0;
    }

    .el-dialog__header,.el-dialog__footer {
      display: none;
    }
    .show-close {
      display: none;
    }
    &-content {
      width: 100%;
      // height: var(--height--);
      .header {
        position: relative;
        // border-bottom: calculate.px2font(2px) solid #072a52;
        margin-bottom: calculate.px2font(15px);
        &-title {
          height: $header__height;
          color: $dialog__title-color;
          font-size: calculate.px2font(16px);
          display: flex;
          align-items: center;
          gap: calculate.px2font(10px);

          .el-icon {
            font-size: calculate.px2font(20px) !important;
            line-height: 1.5;
          }
        }
        &-close {
          position: absolute;
          top: calculate.vh(10px);
          right: 0;
          z-index: 9;
          border-radius: 50%;
          // padding: calculate.vh(3px) calculate.vw(5px);
          // background-color: #0c3573;
          border: calculate.px2font(1px) solid #D8D8D8;
          color: #FFF;
          width: calculate.vh(30px);
          height: calculate.vh(30px);
          display: grid;
          place-items: center;
          cursor: pointer;
          
          .el-icon {
            font-size: calculate.px2font(16px) !important;
            font-weight: bold;
            line-height: 1;
          }
        }
      }
      .container {
        height: calc(#{var(--height--)} - calculate.vh(60px));
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 0;
        }
        .tableWrap {
          height: 100%;
        }
      }
      
    }
    .el-dialog__body {
      padding: 0;
      overflow-y: visible;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
    .el-scrollbar__bar {
      border-radius: calculate.px2font(9999px);
      height: calculate.vh(10px);
    }

    .el-card {
      .el-card__body {
        --el-font-size-base: #{calculate.px2font(14px)};
        padding: calculate.vh(14px) calculate.vw(20px) calculate.vh(20px) calculate.vw(20px)  !important;
        
        h4,p {
          margin: calculate.vh(14px) 0;
          font-size: calculate.px2font(16px);
        }
      }
    }

    .el-timeline {
      .el-timeline-item {
        .el-timeline-item__node--normal {
          --el-timeline-node-size-normal: #{calculate.px2font(12px)};
        }
        .el-timeline-item__tail {
          left: calculate.px2font(4px);
          border-left-width: calculate.px2font(2px);
        }
      }
    }
  }
  .el-table {
    --el-table-header-bg-color: #1A87D2;
    --el-table-bg-color: #005E99;
    --el-table-border-color: transparent;
    --el-table-border: 0px solid #043576;
    --el-table-text-color: #FFF;
    // --el-table-header-text-color: #98C8FF;
    --el-table-tr-bg-color: #325b81;
    --el-table-row-hover-bg-color: #0dacff4d;

    $tableBg: #005E99;

    height: calc(100% - calculate.vh(70px)) !important;
    font-size: calculate.px2font(14px);

    border-radius: 0;

    .el-table__inner-wrapper {
      height: 100% !important;
      background: $tableBg !important;
    }
    .el-table__header-wrapper th, 
    .el-table__fixed-header-wrapper th {
      font-size: calculate.px2font(16px) !important;
      height: calculate.vh(30px) !important;
      padding: calculate.vh(10px) calculate.vh(12px);
      // background-color: var(--el-table-header-bg-color) !important;
      background-color: transparent !important;
      color: var(--el-table-header-text-color);
    }
    thead {
      tr {
        background: linear-gradient(to bottom, #56CCF2, #2F80ED);
        pointer-events: none;
      }
    }
    .cell{
      padding: 0 calculate.vw(10px);
      line-height: calculate.vh(23px);
    }
    .el-table__cell{
      padding: calculate.vh(15px) 0;
    }
    .el-table__empty-block {
      height: 100%;
    }
    tr {
      background-color: $tableBg;
      &:hover {
        background-color: $tableBg;
      }
    }
    tr:nth-child(2n) {
      background-color: #3C93D2;
      &:hover {
        background-color: #3C93D2;
      }
    }
  }
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin: calculate.vh(20px) 0 0 0;
    .el-pagination {
      $buttonWH: calculate.vh(40px);
      --el-pagination-font-size: #{calculate.px2font(14px)};
      --el-pagination-button-width: #{$buttonWH};
      --el-pagination-button-height: #{$buttonWH};
      --el-pagination-border-radius: #{calculate.px2font(3px)};
      --el-input-border-radius: #{calculate.px2font(5px)};
      --el-input-inner-height: calc(#{calculate.vh(32px)} - #{calculate.vh(2px)});
      --el-pagination-item-gap: #{calculate.px2font(12px)};
      
      margin-right: calculate.vw(10px);

      button {
        // border-radius: var(--el-pagination-border-radius) !important;
        padding: 0 calculate.vh(4px);
        .el-icon {
          font-size: calculate.px2font(18px);
        }
      }
      &.is-background .el-pager li.is-active {
        border-radius: var(--el-pagination-border-radius);
      }
      &.is-background {
        .btn-next, .btn-prev, .el-pager li {
          margin: 0 calculate.vw(4px);
        }
      }
      &__jump {
        .el-pagination__editor.el-input {
          width: calculate.vw(56px);
        }
        .el-input__wrapper {
          padding: calculate.vh(1px) calculate.vh(11px);
          box-shadow: 0 0 0 calculate.px2font(1px) var(--el-input-border-color,var(--el-border-color)) inset;
          border-radius: var(--el-pagination-border-radius);
          .el-input__inner {
            height: calculate.vh(35px);
            font-size: calculate.px2font(14px);
            border-radius: var(--el-pagination-border-radius);
          }
        }
      }
      .el-select {
        width: calculate.vw(128px);
        .el-select__wrapper {
          min-height: calculate.vh(40px);
          line-height: calculate.vh(24px);
          font-size: calculate.px2font(14px);
          padding: calculate.vh(4px) calculate.vh(12px);
          border-radius: calculate.px2font(4px);
        }
        .el-select__suffix {
          .el-icon {
            width: calculate.vw(20px);
            height: calculate.vh(20px);
            line-height: calculate.vh(20px);
            font-size: calculate.px2font(14px);
          }
        }
      }
        
    }
  } 
  &__select, &__pagination {
    // 下拉气泡三角颜色
    &[data-popper-placement^=bottom] .el-popper__arrow::before {
      background: #254277;
      border: calculate.px2font(1px) solid #254277;
    }
   
    .el-select__wrapper {
      background-color: $dp-primary-color; // 外层下拉框背景
      box-shadow: 0 0 0 calculate.px2font(1px) #254277 inset;
      
      &:hover{ 
        box-shadow: 0 0 0 calculate.px2font(1px) $shadow-color inset;
      }
    }
    .el-select__placeholder {
      color: $text__color;
      &.is-transparent {
        // color: rgb(244, 244, 244, .5);
      }
    }

    &.is-light {
      border-color: #00a2ff;
      background-color: rgba(0, 120, 233, 0.63) ; // 外层下拉框背景
    }

    .el-select-dropdown {
      &__wrap {
        border: none;
        // background-color: $dp-primary-color; // 下拉框背景色
        background-color: linear-gradient(0deg, #00B4FF 0%, rgba(0,234,255,0.13) 71%, rgba(1,12,16,0) 100%);
      }
      &__item {
        color: #409eff;
        &:hover,&.selcted,&.is-hovering {
          background-color: rgba(0,234,255,0.13);
          color: $text__color;
          font-weight: 700;
          
        }
      }
    }
  }
  &__pagination {
    .el-input__wrapper {
      background-color: $dp-primary-color;
      .el-input__inner {
        color: $text__color;
      }
    }
    .el-pagination.is-background .btn-next, 
    .el-pagination.is-background .btn-prev, 
    .el-pagination.is-background .el-pager li {
      background: $pager__bg-color;
    }
    .el-pagination.is-background .btn-next.is-active, 
    .el-pagination.is-background .btn-prev.is-active, 
    .el-pagination.is-background .el-pager li.is-active {
      background-color: $pager__bg-color-isActive;
    }
    .btn-prev, .btn-next, .el-pager li {
      color: #FFF;
    }
    .el-pagination {
      &__total,&__jump {
        color: $text__color;
      }
    }
  }
  &__map-select {
    // 下拉气泡三角颜色
    &[data-popper-placement^=bottom] .el-popper__arrow::before {
      background: #00B4FF;
    }
   
    .el-select__wrapper {
      background: linear-gradient(0deg, rgba(0,234,255,0.13) 0%, rgba(1,12,16,0) 100%);
      box-shadow: none;
      border-radius: 0;
      &:hover{ 
        box-shadow: none;
      }
    }
    .el-select__suffix {
      .el-select__caret {
        color: #FFF;
      }
    }
    .el-select__placeholder {
      color: #fff;
      font-weight: bold;
      &.is-transparent {
        // color: rgb(244, 244, 244, .5);
        color: #fff;
      }
    }

    &.is-light {
      border-color: #00a2ff;
      background-color: rgba(0, 120, 233, 0.63) ; // 外层下拉框背景
    }

    .el-select-dropdown {
      &__wrap {
        border: none;
        background-color: #024489; // 下拉框背景色
      }
      &__item {
        color: #409eff;
        &:hover,&.selcted,&.is-hovering {
          background-color: #0257A9;
          color: $text__color;
          font-weight: 700;
        }
      }
    }

    .el-cascader-menu {
      color: #409eff;
    }
    .el-cascader-node:not(.is-disabled):focus, 
    .el-cascader-node:not(.is-disabled):hover {
      background-color: rgba(0,234,255,0.13);
      color: #FFF;
      font-weight: 700;
    }
  }
  // 级联
  &__map-cascader {
    background-color: #024489 !important;
    .el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
      background-color: #0257a9;
      color: #FFF;
    }
  }
  &__dropdown {
    &.is-light {
      border-color: #00a2ff;
      background-color: rgba(0, 120, 233, 0.63) ; // 外层下拉框背景
    }
    .el-dropdown-menu {
      background-color: #024489;
      &__item {
        color: #409eff;
      }
    }
    .el-dropdown-menu__item:not(.is-disabled):focus, 
    .el-dropdown-menu__item:not(.is-disabled):hover {
      background-color: rgba(0,234,255,0.13);
      color: #FFF;
      font-weight: 700;
    }
    .el-popper.is-light .el-popper__arrow:before {
      background-color: transparent;
    }
  }
  .el-form {
    &-item__label {
      color: #FFF;
    }
    .el-input {
      &__wrapper {
        background-color: $dp-primary-color;
        // box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
        input {
          color: #FFF;
        }
      }
      &-group__append, &-group__prepend {
        background-color: #409EFF;
        color: #fff;
      }
    }
  }
  
  &__descriptions{
    font-size: calculate.px2font(16px);
    color: #FFF;
    .el-descriptions__header {
      margin-bottom: calculate.vh(15px);
    }
    .el-descriptions__body {
      background-color: #325b81;
      .el-descriptions__table.is-bordered .el-descriptions__cell {
        padding: calculate.vh(12px) calculate.vw(15px);
        line-height: calculate.vh(25px);
      }
      .el-descriptions__content.el-descriptions__cell.is-bordered-content {
        font-size: inherit;
        color: inherit;
        background-color: #195590;
      }
      .el-descriptions__label.el-descriptions__cell.is-bordered-label {
        width: calculate.vw(150px);
        font-size: inherit;
        background-color: #155ea2;
        color: #98C8FF;
      }
    }
  }
}
.w100 {
  width: 100% !important;
}

</style>