<template>
  <div>
    <div v-show="productionEvents.triangleSwitch" class="bigTriangle">
      <div class="triangle"></div>
    </div>
    <div class="bigBox">
      <div class="boxTop" :style="{ background: `${parameters}` }">
        <span class="boxTopSpan" :style="{ color: `${titleHeader}` }">
          <svg-icon style="font-size:14px" :icon-class="productionEvents.icon || ''" class="sidebar-logo" />
          <span style="font-size:13px;font-weight: 500;">{{ productionEvents.title }}</span>
        </span>
      </div>
      <div class="boxBottom" v-show="switchArr">
        <div class="contentCharacters" v-for="item in productionEvents.contentArr">
          <span class="characters">
            <svg-icon style="font-size:12px;margin-right:4px;color: #7B828E" icon-class="greenCheck"
              class="sidebar-logo" />
            <span style="font-size:12px;color:#7B828E">{{ item }}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
const props = defineProps({
  productionEvents: {
    type: Object,
    default: "",
  },
});
watch(props.productionEvents, (newValue, oldValue) => {
  auxiliaryData();
});
//数组显隐
let switchArr = false
//标题颜色
let titleHeader = ''
//背景色颜色
let parameters = ''
const auxiliaryData = () => {
  if (props.productionEvents.stateParameters == 0) {
    titleHeader = '#7B828E'
    parameters = '#E0E5EC'
    switchArr = false
  } else if (props.productionEvents.stateParameters == 1) {
    titleHeader = '#FFFFFF'
    parameters = '#005AE0'
    switchArr = true
  } else if (props.productionEvents.stateParameters > 1) {
    titleHeader = '#FFFFFF'
    parameters = '#39BA15'
    switchArr = true
  }
}
auxiliaryData()
</script>
<style lang="scss" scoped>
.bigBox {
  width: 147px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  position: relative;

  .WarningFilled {
    position: absolute;
    right: -15px;
    top: -5px;
  }

  .boxTop {
    height: 36px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;

    .boxTopSpan {
      margin-left: 10px;

      .sidebar-logo {
        margin-right: 7px;
      }
    }
  }

  .boxBottom {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #F5F7F9;
    padding: 10px;

    .contentCharacters {
      height: 20px;
      line-height: 20px;
      margin-bottom: 3px;
      display: flex;
      justify-content: space-between;

      .characters {
        font-size: 12px;
        display: inline-block;
      }
    }
  }
}

.el-button.is-link {
  color: #FFFFFF;
}

.bigTriangle {
  height: 12px;
  width: 100%;
  display: flex;
  justify-content: center;

  .triangle {
    width: 0;
    height: 0;
    margin-top: -3px;
    border-top: 10px solid rgba(145, 184, 242, 1);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }
}
</style>