<template>
  <dialog-model  id="greenWaveDialog" @close="actionFinished" :width="1200" :height="750" :title="waveTitle">
    <div
        class="full-w-h dialog-greenwave"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0, 0.4)"
        v-loading="loading"
    >
      <div class="area-detail">
        <div class="area-left">
          <div>
            <span>子区状态：</span
            ><span>{{ statusObj[contentData.status] }}</span>
          </div>
          <div>
            <span>非协调相位二次排队：</span
            ><span>{{ contentData.uncoordinatePhaseQueue }}m</span>
          </div>
          <div>
            <span>协调不停车通过率：</span
            ><span>{{ contentData.noparkPassRate }}%</span>
          </div>
          <div>
            <span>干线行程时间：</span><span>{{ contentData.trvalTime }}s</span>
          </div>
        </div>
        <div class="area-right">
          <span>优化策略：</span>
          <el-select
              v-model="contentData.strategySelected"
              placeholder="请选择优化策略"
              @change="strategyChange"
          >
            <el-option
                v-for="item in contentData.strategyList"
                :key="item"
                :label="item"
                :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <template v-if="refresh">
        <crossDistance
            class="cross-distance"
            :contentData="contentData"
        ></crossDistance>
        <greenWaveDetail :contentData="contentData"></greenWaveDetail>
      </template>
      <crossKipData :greenwaveId="greenId"></crossKipData>
    </div>
  </dialog-model>
</template>

<script>
import {
  currentGreenwaveDetail,
  saveGreenwaveStrategy,
} from "@/common/api/signalOp.js";
import DialogModel from "@/components/Standard/dialog-model.vue";

export default {
  name: 'greenWave',
  data() {
    return {
      loading: true,
      statusObj: {
        "1": "畅通",
        "2": "缓行",
        "3": "拥堵",
        "4": "严重拥堵",
        "5": "未知",
      },
      refresh: false,
      contentData: {strategySelected: "", strategyList: []},
      radio: 1,
      obj: {
        state: "畅通",
        queue: "50",
        race: "67",
        time: 118,
      },
    };
  },
  props: {
    greenId:{
      type: Number,
      default:()=>{
        return 1
      }
    },
    propsData: {
      type: Object,
      default: () => {
        return {
          id: 1
        }
      }
    },
    dialogId:{
      type: String,
    },
    waveTitle:{
      type: String
    }
  },
  components: {
    DialogModel,
    greenWaveDetail: (resolve) => require(["./greenWaveDetail.vue"], resolve),
    crossDistance: (resolve) => require(["./crossDistance.vue"], resolve),
    crossKipData: (resolve) => require(["./crossKipData.vue"], resolve),
  },
  computed: {
    greenwaveId() {
      return this.propsData.id;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    actionFinished(){
      this.$emit("actionFinished", this.dialogId);
    },
    strategyChange() {
      saveGreenwaveStrategy({
        greenwaveId: this.greenId,
        strategyNames: [this.contentData.strategySelected],
      }).then((res) => {
        if (res && res.data) {
        }
      });
    },
    getData() {
      this.loading = true;
      currentGreenwaveDetail({greenwaveId: this.greenId}).then((res) => {
        this.loading = false;
        console.log('greenDetail...',res)
        if (res && res.data) {
          this.contentData = res.data.content;
          this.contentData.areaDetailFlag = true;
          this.refresh = true
          // console.log(this.contentData);
        }
      })
    },
  },
};
</script>

<style lang="less">
// 150 + 65 + 225
.dialog-greenwave{
  font-size: 12px;
}
.area-detail {
  display: flex;
  padding-left: 20px;
  height: 65px;
  .el-input__inner{
    background-color: #1e3b67;
    border: none;
    color: #c1c6ce;
  }
  .area-left {
    display: flex;
    flex-wrap: wrap;
    width: 66.6%;
    //border-right: 1px solid #e6e6e6;

    div {
      //margin-bottom: 20px;
      width: 50%;
      padding: 5px 50px 5px 30px;
      display: flex;
      justify-content: center;
      align-items: center;

    }

    label {
      color: #c1c6ce;
    }
  }

  .area-right {
    display: flex;
    align-items: center;
    padding-left: 30px;
    // padding: 20px 0 0 70px;
    width: 33.3%;

    p {
      margin-right: 20px;
    }

    .el-select {
      /deep/ .el-input__inner {
        height: 40px;
      }

      /deep/ .el-select__caret {
        line-height: 40px;
      }
    }
  }
}

.cross-distance {
  padding: 10px 0;
  height: 120px;
}
</style>
