<template>
  <dialog-model id="greenWaveDialog" @close="closeDialog" :title="propsData.schemeName" :width="1200" :height="600" >
    <div class="signalOpGreenDetail" element-loading-text="数据加载中..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0,0,0, 0.4)"
         v-loading="!refresh">
      <div class="area-detail">
        <div class="area-left">
          <p>
            <span>绿波名称：</span><span>{{ propsData.schemeName }}</span>
          </p>
          <p>
            <span>时段：</span><span>{{ propsData.timeSection }}</span>
          </p>
        </div>
      </div>
      <template style="flex: 1" v-if="refresh" >
        <crossDistance
            class="cross-distance"
            :contentData="contentData"
        ></crossDistance>
        <greenWave :contentData="contentData"></greenWave>
        <!-- <crossKipData :greenwaveId="greenwaveId"></crossKipData> -->
      </template>
    </div>
  </dialog-model>

</template>

<script>
import {
  greenwaveDetail,
  saveGreenwaveStrategy,
} from "@/common/api/signalOp.js";
import DialogModel from "@/components/Standard/dialog-model.vue";
export default {
  name: 'signalOpGreenDetail',
  data() {
    return {
      statusObj: {
        "1": "畅通",
        "2": "缓行",
        "3": "拥堵",
        "4": "严重拥堵",
        "5": "未知",
      },
      refresh: false,
      contentData: { strategySelected: "", strategyList: [] },
      radio: 1,
      obj: {
        state: "畅通",
        queue: "50",
        race: "67",
        time: 118,
      },
      greenwaveName: null,
    };
  },
  props: ["propsData"],
  components: {
    DialogModel,
    greenWave: (resolve) => require(["../../../signal/dialogs/greenWave/greenWaveDetail.vue"], resolve),
    crossDistance: (resolve) => require(["../../../signal/dialogs/greenWave/crossDistance.vue"], resolve),
  },
  mounted() {
    console.log(this.propsData);
    this.greenwaveName = this.propsData.name;
    this.getData();
  },
  methods: {
    closeDialog(){
      this.$emit('close')
    },
    getData() {
      greenwaveDetail({
        greenwaveName: this.greenwaveName,
        startDate: this.propsData.startTime,
        endDate: this.propsData.endTime,
      }).then((res) => {
        if (res && res.data) {
          this.contentData = res.data.content;
          this.refresh = true;
          // console.log(this.contentData);
        }
      });
    },
  },
};
</script>

<style lang="less">
.area-img-dialog-signal-op {
  .el-dialog {
    width: 1120px;
    height: 600px;
    background: #fff;
  }

}
.signalOpGreenDetail {
  color: rgba(255,255,255,0.8);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  // background: url("../../assets/images/dialogImg/areaDialog.png") no-repeat;
  // background-size: 1015Px 734Px;
  .area-detail {
    display: flex;
    padding-left: 20px;
    .area-left {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      font-size: 16px;
      p {
        margin-bottom: 20px;
        width: 50%;
      }
      label {
        color: #666;
      }
    }
  }

  .cross-distance {
    margin: 10px 0;
  }
}
.green-wave{
  flex: 1;
}
</style>
