<template>
  <div class="signalOpGreenDetail">
    <div class="area-detail">
      <div class="area-left">
        <p>
          <label>绿波名称：</label><span>{{ propsData.schemeName }}</span>
        </p>
        <p>
          <label>时段：</label><span>{{ propsData.timeSection }}</span>
        </p>
      </div>
    </div>
    <template v-if="refresh">
      <crossDistance
        class="cross-distance"
        :contentData="contentData"
      ></crossDistance>
      <greenWave :contentData="contentData"></greenWave>
      <!-- <crossKipData :greenwaveId="greenwaveId"></crossKipData> -->
    </template>
  </div>
</template>

<script>
import {
  greenwaveDetail,
  saveGreenwaveStrategy,
} from "@/common/api/signalOp.js";
export default {
  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: {
    greenWave: (resolve) => require(["./greenWave.vue"], resolve),
    crossDistance: (resolve) => require(["./crossDistance.vue"], resolve),
  },
  mounted() {
    console.log(this.propsData);
    this.greenwaveName = this.propsData.name;
    this.getData();
  },
  methods: {
    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 {
    width: 100%;
    height: 100%;
    color: #383838;
    // 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%;
        p {
          margin-bottom: 20px;
          width: 50%;
        }
        label {
          color: #666;
        }
      }
    }

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