<template>
  <msg-card style="position: relative" long :title="cross.crossName">
    <div class="option"><label class="custom-form-label">当前时段：</label>
      <el-date-picker class="form3" :clearable="false"
                      v-model="currentTimes" @change="currentChange"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange">
      </el-date-picker>
    </div>
    <top-indexes v-if="currentTimes[0]" :currentTimes="currentTimes" :cross="cross" class="full-w topIndex"/>
    <div class="full-w bottomTab">
      <div class="tabTitle">
        <div :class="{'active':activeTab==='1'}" @click="activeTab='1'">评价指标</div>
        <div :class="{'active':activeTab==='2'}" @click="activeTab='2'">场景评价</div>
      </div>
      <div class="tabContent">
        <evaluation-indicators :key="refreshComp" :currentTimes="currentTimes" :cross="cross" v-if="activeTab==='1' && currentTimes[0]"/>
        <scenario-evaluation :cross="cross" v-else/>
      </div>
    </div>
  </msg-card>
</template>

<script>
import MsgCard from "@/components/Standard/msg-card.vue";
import TopIndexes from "@/views/signalEvaluation/rightIndex/crossComponents/topIndexes.vue";
import EvaluationIndicators from "@/views/signalEvaluation/rightIndex/crossComponents/evaluationIndicators.vue";
import ScenarioEvaluation from "@/views/signalEvaluation/rightIndex/crossComponents/scenarioEvaluation.vue";

export default {
  name: 'crossIndexes',
  components: {ScenarioEvaluation, EvaluationIndicators, TopIndexes, MsgCard},
  props: ['cross'],
  computed:{
    refreshComp(){
      return `${this.currentTimes[0]}-${this.currentTimes[1]}`
    }
  },
  data(){
    return{
      activeTab: '1',
      currentTimes: ['', ''],//当前时段
    }
  },
  mounted() {
    let cur1 = new Date().toLocaleString().replaceAll('/', '-')
    let cur0 = new Date(new Date(cur1).getTime() - 1000 * 60 * 60).toLocaleString().replaceAll('/', '-')
    this.$set(this, 'currentTimes', [cur0, cur1])
  },
  methods:{
    // 当前时间变化
    currentChange(e) {
      let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth() + 1}${new Date(this.currentTimes[0]).getDate()}`
      let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth() + 1}${new Date(this.currentTimes[1]).getDate()}`
      if (start !== end) {
        this.$message.warning('不允许跨天查询，请重新选择时间！')
      } else {
        // this.getLines()
        // this.getOverflowEmpty()
      }
    },
  }

}
</script>

<style lang="less" scoped>
.option{
  padding-left: 10px;
  height: 30px;
}
::v-deep .el-radio__inner {
  background-color: rgba(255, 255, 255, 0.8);
}

::v-deep .el-radio__label {
  color: rgba(255, 255, 255, 0.8);
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #04376a;
  color: rgba(255, 255, 255, 0.8);
}

::v-deep .el-range-input {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}
.topIndex{
  height: 130px;
  margin-bottom: 10px;
}
.bottomTab{
  height: calc(100% - 140px - 30px);
  .tabTitle{
    display: flex;
    height: 30px;
    align-items: center;
    background-image: linear-gradient(to right, #0c2d51, transparent);
    div{
      background-color: #114d89;
      cursor: pointer;
      color: white;
      width: 120px;
      height: 100%;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div:first-child{
      margin-right: 8px;
    }
    .active{
      background-color: #1f93ff;
    }
  }
  .tabContent{
    height: calc(100% - 30px);
  }
}
</style>