<template>
  <view class="home-navbar-warp" :class="disabled ? 'nocolor' : 'color'">
    <view class="search">
      <u-input v-model="stationName" :disabled='disabled' :type="disabled? 'text' : 'select'" :select-open="selectStaion" input-align="center" @click="openSelectStation" class="input-box" color="#fff" />
    </view>

    <u-select v-model="selectStaion" mode="mutil-column-auto" :key="selectKey" :list="stationList" :value-name="'id'" :label-name="'name'" :child-name="'list'" @confirm="confirmStation" @cancel="cancelSelect" :mask-close-able="false" :default-value="StationShow" confirm-color="#009458"></u-select>
  </view>
</template>
<script>
export default {
  data () {
    return {
      stationName: '',
      selectStaion: false,
      StationShow: [],
      defaultArr: [],
	  selectKey:0
      // stationList: []
      // activeSelectLabel:'所有电站',
    }
  },
  computed: {
    stationList () {
      return this.vuex_provinceStation
    },
    currentStation () {
      return this.vuex_currentStation
    }
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    currentStation: {
      handler (val) {
        this.stationName = val.name
      },
      immediate: true,
      deep: true
    },
	stationList:{
		handler (val) {
			this.selectKey++
			// setTimeout(() =>{
				this.StationShow = [0,0,0]
			// },2000)
			// this.StationShow = this.vuex_StationShow
		},
		deep: true
	}
  },
  mounted () {
	  // this.StationShow = this.vuex_StationShow

  },
  created () {

  },
  methods: {
    openSelectStation () {
      if (!this.disabled) {
        this.$emit('openPop', true)
        this.selectStaion = true
      }

    },
    cancelSelect () {
      this.$emit('openPop', false)
      this.selectStaion = false
    },
    confirmStation (val) {
      val[2].name = val[2].label
      val[2].id = val[2].value
      this.stationName = val[2].label

      const cityIndex = this.stationList.findIndex((item) => {
        return item.name === val[0].label
      })


      const value = this.stationList.find((item) => {
        return item.name === val[0].label
      })

      const valIndex = value.list.findIndex((item) => {
        return item.name === val[1].label
      })

      const newValIndex = value.list[valIndex].list.findIndex((item) => {
        return +item.id === +val[2].value
      })
      this.StationShow = [cityIndex, valIndex, newValIndex]
      val[2].topologyType = value.list[valIndex].list[newValIndex].topologyType
      // val[2].StationShow = this.StationShow
      this.$u.vuex("vuex_currentStation", val[2])
	  this.$u.vuex("vuex_StationShow", this.StationShow)
	  this.$u.vuex("vuex_inverterFlag", value.list[valIndex].list[newValIndex].inverterFlag)
      this.$emit('openPop', false)
    }
  }

}
</script>
<style lang="scss" scoped>
.color {
  background-color: rgba(255, 255, 255, 0.7);
}
.nocolor {
  background-color: transparent;
}
.home-navbar-warp {
  display: flex;
  justify-content: left;
  border-radius: 8rpx;
  // background-color: rgba(255, 255, 255, 0.7);
  .search {
    width: 95%;
  }

  /deep/ .input-box {
    color: #fff !important;
    .uicon-arrow-down-fill {
      color: #fff !important;
    }
    .u-input__input {
      color: #fff !important;
    }
  }
}
</style>