<template>
  <div class="full-w-h container">
    <div class="full-w-h content">
      <div class="full-h child">
        <div class="indexTitle">服务水平</div>
        <div class="indexVal">
          {{ serviceLevelVal }}
        </div>
      </div>
      <div class="full-h child">
        <div class="indexTitle" style="background-color: #49141f">溢出</div>
        <div class="indexContent" style="background-color: #21182b">
          <div class="sideIndex">
            <div>次数</div>
            <div>{{ spilloverTimesVal }}</div>
          </div>
          <div class="sideIndex">
            <div>总时长</div>
            <div>{{ spilloverSumVal }}min</div>
          </div>
        </div>
      </div>
      <div class="full-h child">
        <div class="indexTitle" style="background-color: #69431d">拥堵</div>
        <div class="indexContent" style="background-color: #2e2b2a">
          <div class="sideIndex">
            <div>次数</div>
            <div>{{ congestionTimesVal }}</div>
          </div>
          <div class="sideIndex">
            <div>总时长</div>
            <div>{{ congestionSumVal }}min</div>
          </div>
        </div>
      </div>
      <div class="full-h child">
        <div class="indexTitle" style="background-color: #695f1e">失衡</div>
        <div class="indexContent" style="background-color: #2e362a">
          <div class="sideIndex">
            <div>次数</div>
            <div>{{ unbalanceTimesVal }}</div>
          </div>
          <div class="sideIndex">
            <div>总时长</div>
            <div>{{ unbalanceSumVal }}min</div>
          </div>
        </div>
      </div>

      <div class="full-h child">
        <div class="indexTitle" style="background-color: #495563">空放</div>
        <div class="indexContent" style="background-color: #213246">
          <div class="sideIndex">
            <div>次数</div>
            <div>{{ emptyPhaseTimesVal }}</div>
          </div>
          <div class="sideIndex">
            <div>总时长</div>
            <div>{{ emptyPhaseSumVal }}min</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { crossEvaluate } from "@/common/api/signalEvaluation";

export default {
  name: 'topIndexes',
  props: ['cross', 'currentTimes'],
  computed: {
    serviceLevelVal() {
      return this.indexes.serviceLevel || '-'
    },
    spilloverTimesVal() {
      return this.indexes.spilloverTimes || 0
    },
    spilloverSumVal() {

      return this.indexes.spilloverSum || 0
    },
    congestionTimesVal() {
      return this.indexes.congestionTimes || 0
    },
    congestionSumVal() {
      return this.indexes.congestionSum || 0
    },
    unbalanceTimesVal() {
      return this.indexes.unbalanceTimes || 0
    },
    unbalanceSumVal() {
      return this.indexes.unbalanceSum || 0
    },
    emptyPhaseTimesVal() {
      return this.indexes.emptyPhaseTimes || 0
    },
    emptyPhaseSumVal() {
      return this.indexes.emptyPhaseSum || 0
    }
  },
  data() {
    return {
      indexes: {}
    }
  },
  watch: {
    cross: {
      handler(newVal) {
        this.getData()
      },
      deep: true
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let date = new Date().toLocaleDateString().replaceAll('/', '-')
      crossEvaluate({
        crossId: this.cross.crossId,
        startDate: this.currentTimes[0],
        endDate: this.currentTimes[1]


  //       "startDate": "2024-7-14 00:00:00",
  // "endDate": "2024-7-14 23:00:15",
  // "crossId": "13NF80B5QN0"
      }).then(res => {
        this.indexes = res.data.content
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.content {
  border-radius: 6px;
  display: flex;
  justify-content: space-between;

  .child {
    flex-grow: 1;
    /* 边框渐变 */
    //border-right-width: 4px;
    //border-right-style: solid;
    //border-image-source: linear-gradient(180deg, transparent, transparent,#093b4c, #5b848f,#093b4c,transparent,transparent);
    //border-image-slice: 1; /* 填充整个边框宽度 */
    //border-image-repeat: stretch; /* 根据需要选择 repeat、stretch 或 round 等重复方式 */
    border-right: 8px solid transparent;
    ///* 背景色渐变 */
    //background-image: linear-gradient(to right, #0d80d7, #04477b);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .indexTitle {
      width: 40px;
      height: 100%;
      font-size: 16px;
      display: flex;
      word-wrap: break-word;
      /*英文的时候需要加上这句，自动换行*/
      writing-mode: tb-rl;
      /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
      text-align: center;
      flex-direction: column;
      letter-spacing: 8px;
      justify-content: center;
    }

    .indexContent {
      flex: 1;
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;

      .sideIndex {
        width: 50%;
        text-align: center;

        div:last-child {
          font-size: 18px;
          font-family: YouSheBiaoTiHei, serif;
        }
      }

      .sideIndex:first-child {
        border-right-width: 4px;
        border-right-style: solid;
        border-image-source: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3), transparent);
        border-image-slice: 1;
        /* 填充整个边框宽度 */
        border-image-repeat: stretch;
        /* 根据需要选择 repeat、stretch 或 round 等重复方式 */
      }
    }

    .indexVal {
      height: 60%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      font-family: YouSheBiaoTiHei, serif;
    }
  }

  .child:first-child {
    width: 15%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 0;

    .indexTitle {
      width: 40px;
      height: 100%;
      background-color: #035a84;
      display: flex;
      font-size: 16px;
      word-wrap: break-word;
      /*英文的时候需要加上这句，自动换行*/
      writing-mode: tb-rl;
      /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
      text-align: end;
      flex-direction: column;
      letter-spacing: 8px;
      justify-content: center;
    }

    .indexVal {
      height: 100%;
      font-size: 46px;
      background-color: #053453;
      flex: 1;
      display: flex;
      color: white;
      align-items: center;
      justify-content: center;
    }
  }

  .child:last-child {
    border-right: none;
  }
}
</style>