<template>
  <el-dialog
    width="85%"
    @opened="opened()"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <!-- <div style="margin-top:-10px;color: #FFFFFF;">{{stationName}}</div> -->
      <div class="titleList">
        <div v-for="(item, index) in stationList" :key="index">
          <div
            v-if="item?.id !== currentStation"
            :class="
              index === 0
                ? 'controlTypesLeft'
                : index === stationList.length - 1
                ? 'controlTypesRight'
                : 'controlTypes'
            "
            @click="handleTypeChange(item)"
          >
            {{ item.name }}
          </div>
          <div
            v-else
            :class="
              index === 0
                ? 'onControlTypesLeft'
                : index === stationList.length - 1
                ? 'onControlTypesRight'
                : 'onControlTypes'
            "
            @click="handleTypeChange(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </template>
    <div>
      <nss ref="svgRef" v-if="currentStation=='NSS_FDC'||currentStation=='NSS_SYZ'" />
			<mhs ref="svgRef" v-if="currentStation=='MHS_FDC'||currentStation=='MHS_SYZ'" />
			<qs ref="svgRef" v-if="currentStation=='QS_FDC'||currentStation=='QS_SYZ'" />
			<sbq ref="svgRef" v-if="currentStation=='SBQ_FDC'||currentStation=='SBQ_SYZ'" />
			<xs ref="svgRef" v-if="currentStation=='XS_FDC'||currentStation=='XS_SYZ'" />
			<pl1 ref="svgRef" v-if="currentStation=='PL1_GDC'||currentStation=='PL_SYZ'" />
			<pl2 ref="svgRef" v-if="currentStation=='PL2_GDC'||currentStation=='PL2_SYZ'" />
			<dwk ref="svgRef" v-if="currentStation=='DWK_GDC'||currentStation=='DWK_SYZ'" />
			<mch ref="svgRef" v-if="currentStation=='MCH_GDC'||currentStation=='MCH_SYZ'" />
			<xh ref="svgRef" v-if="currentStation=='XH_GDC'||currentStation=='XH_SYZ'" />
			<sbdl ref="svgRef" v-if="currentStation=='QS3_FDC'||currentStation=='QS3_SYZ'" />
    </div>
  </el-dialog>
</template>

<script>
	import Dwk from "./BoosterStation/dwk.vue";
	import Sbdl from "./BoosterStation/sbdl.vue";
	import Nss from "./BoosterStation/nss.vue";
	import Mhs from "./BoosterStation/mhs.vue";
	import Qs from "./BoosterStation/qs.vue";
	import Pl1 from "./BoosterStation/pl1.vue";
	import Pl2 from "./BoosterStation/pl2.vue";
	import Mch from "./BoosterStation/mch.vue";
	import Xs from "./BoosterStation/xs.vue";
	import Xh from "./BoosterStation/xh.vue";
	import Sbq from "./BoosterStation/sbq.vue";
export default {
  components: {
    Dwk,
			Sbdl,
			Nss,
			Mhs,
			Qs,
			Pl1,
			Pl2,
			Mch,
			Xs,
			Xh,
			Sbq
  },
  props: {
    currentStation: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      BasicInfo: {},
      line: "",
      // currentStation: "",
      alarmTime: "",
      alarmContent: "",
      alarms: [],
      count: false,
      stationList: [],
      types: null,
    };
  },
  created() {},

  methods: {
    closed() {
      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
      this.$refs.svgRef.closed();
      // this.$refs.BasicInfo.end();
      // this.$refs.BasicInfo.labelChange();
      this.$emit("close");
      //clearInterval(this.refreshTimer);
    },
    opened() {
      // this.currentStation = this.currentStation?this.currentStation:this.$store.state.stationList[0].id;
      this.stationList = this.$store.state.stationList;
	  this.$nextTick(() => {
          //  this.$refs.svgRef.opened();
        });
    },
    dbClicks(value) {
      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
    },
    handleTypeChange(val) {
      this.currentStation = val.id;
	  this.$nextTick(() => {
           this.$refs.svgRef.opened();
        });
    },
  },
};
</script>
<style scoped>
.my-info-dialog {
  box-shadow: 0px 0px 10px #05bb4c;
}

.body {
  background-color: black;
  margin-top: -30px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -30px;
  border-bottom: 20px solid rgb(36, 36, 36);
}

.chunkdiv {
  display: flex;
  /* justify-content: center; */
  background-color: #363636;
  margin: 1px;
  padding: 4px 2px;
  font-size: 12px;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 32px;
}

.title {
  font-size: 12px;
  color: #b3b3b3;
}

.titleList {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: -10px;
  color: #ffffff;
}

table {
  margin-left: 2px;
  margin-right: 2px;
}

td {
  width: 20%;
}

el-tabs {
  background-color: black;
}

.svg {
  height: 67vh;
}

.controlTypes {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
}
.controlTypesLeft {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.controlTypesRight {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.onControlTypes {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  background-color: rgba(37, 116, 219, 1);
}
.onControlTypesLeft {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(37, 116, 219, 1); */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
.onControlTypesRight {
  width: 110px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(37, 116, 219, 1); */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
</style>