<template>
  <div class="border-container" :style="{width: `calc(100vw * ${width} / 1920)`, height: `calc(100vh * ${height} / 1080)`, marginBottom: `calc(100vh * ${mb} / 1080)`}">
    <div class="border-header">
      <span></span>
      <div class="border-header-title"><span></span>{{ title }}
        <el-select
          v-if="is_select"
          class="border-el-select"
          popper-class="border-el-select-popper"
          v-model="selectValue"
          size="small"
          placeholder=" "
          @change="handlerSelectChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="border-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 标题宽度
  width: {
    type: Number,
    default: 416
  },
  height: {
    type: Number,
    default: 500
  },
  title: {
    type: String,
    default: '机组生产监控'
  },
  mb: {
    type: Number,
    default: 0
  },
  is_select: {
    type: Boolean,
    default: false
  },
});
const emit = defineEmits();
const selectValue = ref(null)
const options = computed(() => {
  if (!props.is_select) return []
  const list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  const year = new Date().getFullYear()
  const month = new Date().getMonth() + 1
  list.splice((list.indexOf(month) + 1), (list.length - list.indexOf(month)))
  let data = []
  list.forEach(item => {
    if (item === 0) {
      data.push({label:'本年',value:0})
    } else {
      data.push({label: `${year}-${item}`,value: item})
    }
  })
  return data
})
const handlerSelectChange = (val) => {
  emit('change', val)
}
nextTick(() => {
  // 下拉框默认本年
  selectValue.value = options.value[0] && options.value[0].value
})
</script>

<style lang="scss" scoped>
.border-container{
  // overflow: hidden;
  z-index: 5;
  position: relative;
  .border-header{
    width: 100%;
    height: h(38);
    margin-bottom: h(4);
    display: flex;
    >span{
      display: block;
      width: w(4);
      height: 100%;
      margin-right: w(3);
      background: #008AFF;
    }
    .border-header-title{
      height: 100%;
      width: calc(100% - w(7));
      background: url('../../../assets/images/display-border-back.png');
      background-size: auto 100%;
      line-height: h(38);
      color: #fff;
      text-shadow: 2px 2px 8px rgba(0, 138, 255, 0.7);
      font-family: pmzd;
      font-size: w(18);
      font-weight: 400;
      >span{
        display: inline-block;
        width: 0;
        height: 0;
        border-left: w(6) solid #18FEFE;
        border-top: w(6) solid rgba(0,0,0,0);
        border-right: w(6) solid rgba(0,0,0,0);
        border-bottom: w(6) solid rgba(0,0,0,0);
        margin: 0 w(4) 0 w(10);
      }
    }
    .border-el-select{
      width: w(80);
      margin: calc((h(38) - 24px) / 2) w(10);
      float: right;
      :deep(.el-input__wrapper){
        background: rgba(1, 10, 18, 0.6);
        // border-color: rgba(0, 138, 255, 0.6);
        box-shadow: 0 0 0 1px rgba(0, 138, 255, 0.6);
        & .el-input__inner{
          color: #fff;
        }
        & .el-input__suffix-inner>:first-child{
          margin-left: 2px;
          color: #fff;
        }
      }
      :deep(.el-input.is-focus .el-input__wrapper){
        box-shadow: 0 0 0 1px rgba(0, 138, 255, 0.6);
        background: #008AFF;
      }
    }
  }
  .border-content{
    width: 100%;
    height: calc(100% - h(42));
    background: rgba(0, 138, 255, 0.06);
    backdrop-filter: blur(12px);
  }
}
</style>
<style lang="scss">
.border-el-select-popper{
  --el-bg-color-overlay: #022340;
  --el-border-color-light: rgba(0, 138, 255, 1);
  .el-scrollbar {
    --el-fill-color-light: #484d56;
  }
  .el-popper__arrow {
    display: none;
  }
  .el-select-dropdown__item.hover{
    --el-fill-color-light: rgba(0, 138, 255, 0.16);
  }
  .el-select-dropdown__item.selected {
    color: rgba(0, 138, 255, 1);
  }
  .el-select-dropdown__item {
    color: #fff;
  }
}
</style>