<template>
    <div class="socket-adjust office-card">
        <!-- 插座的基本信息 -->
        <div class="socket-pic">
            <image
                :src="[socketSw ?  (h5StaticPath+'socket_open.png') : (h5StaticPath+'socket_close.png')]"
                alt=""
            />
        </div>
        <div class="socket-basic">
            <span class="socket-basic-name">智能插座</span>
            <div class="socket-status socket-status-padding">{{socketSw? '插座已开启':'插座已关闭'}}</div>
            <div
                class="socket-basic-text"
                :class="{'justOne': !socketLength}"
            >
                <div v-if="socketLength">
                    <SwitchLR @commponent-SwitchLR-change="changeSwitchLR"></SwitchLR> 
                </div>
              
                <div v-if="!showsockets">
                    <switch
                        class="socket-switch"
                        :checked="socketSw"
                        eqTitle="所有插座"
                        @component-switch-change="eqChange($event,'allsocket')"
                    ></switch>
                </div>
            </div>
        </div>
        <!-- 插座列表 -->
        <div
            class="socket-list"
            v-if="showsockets"
        >
            <div
                class="socket-item"
                v-for="(item,index) in socketList"
                :data-index="item.id"
                :key="index"
            >
                <div class="socket-basic-name">
                    <span>{{item.localName}}</span>
                </div>

                <switch
                    class="socket-switch"
                    :checked="item.runStatus"
                    :eqTitle="item.localName"
                    :showWorkTime="showWorkTime"
                    @component-switch-change="eqChange($event,item.id,item)"
                ></switch>
            </div>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'
import { setSocketHttp, getSocketHttp } from '@/packagesEnv/api/officehome.js'
import { isWithinLocation } from '@/service/location'
import config from '@/config'
import store from '@/store'
import { mapState, mapActions } from '@wepy/x'
let timer = null
wepy.component({
  props: {
    roomHasScene: String,
    roomType: String,
    controlMode: Number,
    openEquipList: Array,
    spaceId: String, // 空间id
    projectId: String
  },
  store,
  data: {
    onlyOne: true,
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    socketSw: null, // 总开关
    showsockets: false,
    allowSvg: 'down_Arrow.svg',
    socketList: [
      {
        localName: '饮水机插座'
      },
      {
        localName: '加湿器插座'
      },
      {
        localName: '微波炉插座'
      }
    ]
  },
  computed: {
    ...mapState({ isNowTime: state => state.officehome.isNowTime }),
    socketLength() {
            // 灯的个数 大于 1 为true，
      let length = false
      if (this.socketList.length > 1) {
        length = true
      } else {
        length = false
      }
      return length
    }
  },
  watch: {
    spaceId(val) {
      if (val) {
        this.showsockets = false // 恢复初始化值
        this.allowSvg = 'down_Arrow.svg'
        this.onlyOne = true // 切换空间重新触发
        this.handlerTimer()
      }
    },
    openEquipList(newVal) {
      if (newVal.length) {
        let arr = []
        newVal.map(item => {
          if (item.type === 'CFIDSC') {
            item.switch = true
            item.id = item.objectId
            item.switchCode = 'EquipSwitchSet'
            item.value = 1
            arr.push(item)
          }
        })
        if (arr.length) {
          setSocketHttp(arr).then(res => {
            this.handlerTimer()
          })
        }
      }
    }
  },
  detached() {
    clearInterval(timer)
    timer = null
  },
  methods: {
     // 判断窗帘是否能开启
    checkSocketCanOpen(value, id) {
      if (value) {
        if (this.roomHasScene && !this.isNowTime) { // 有场景无时间 得预约
          this.controlMode && this.$emit('component-EquipType-workTimePop', id)
          this.$emit('component-open-workTimePop', true)

          return false
        }
      }
      return true
    },
        // 开关所有灯
    allsocket() {
      this.socketSw = !this.socketSw
      this.socketList.forEach(item => {
        item.value = this.socketSw ? 1 : 0
      })
      return this.socketList
    },

        // 控制插座
    eqChange(value, id, item) {
      isWithinLocation().then(() => {
      /* 插座功能暂时没有加班功能  if (this.roomType === '开放') {
          this.showWorkTime = this.checkSocketCanOpen(value, id);
          if (!this.showWorkTime) return;
        } */
        let paramsArr = []
        if (id === 'allsocket') {
          paramsArr = this.allsocket()
        } else {
          item.value = value ? 1 : 0
          paramsArr.push(item)
        }
        setSocketHttp(paramsArr).then(() => {
          this.handlerTimer()
        })
        this.vibrateShort()
      })
    },
    // 定时调
    handlerTimer() {
      this.getsocketList()
      clearInterval(timer)
      timer = null
      timer = setInterval(() => {
        this.getsocketList()
      }, 1000 * 8)
    },
    getsocketList() {
      getSocketHttp({ spaceId: this.spaceId }).then(res => {
        this.socketSw = res.data.runStatus
        this.socketList = res.data.equipList || []
        this.onlyOne && this.$emit('component-showSocket', this.socketList.length)
        this.onlyOne = false
        for (let index = 0; index < this.socketList.length; index++) {
          const element = this.socketList[index]
          element.runStatus = !!element.runStatus
          element.code = element.switchCode
        }
      })
    },
    vibrateShort() {
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort()
      } else {
        wx.vibrateLong()
      }
    },

        // 灯列表
    changeSwitchLR(val) {
      if (!this.socketLength) return
      this.showsockets = !val
    }
  }
})
</script>

<style lang="less" scoped>
.office-card {
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
        0px 4px 10px rgba(156, 125, 125, 0.05);
    border-radius: 50rpx;
    background: #ffffff;
    margin-bottom: 30rpx;
}
.socket-basic-name {
    font-weight: 600;
    font-size: 32rpx;
    line-height: 44rpx;
    color: rgba(77, 82, 98, 1);
}
.socket-status {
    font-size: 14px;
    font-weight: 400;
    line-height: 40rpx;
    color: rgba(196, 196, 196, 1);
    &.socket-status-padding {
        padding-top: 20rpx;
    }
}
.socket-basic {
    padding: 48rpx 30rpx 0px 60rpx;
}
.socket-adjust {
    box-sizing: border-box;
    position: relative;
    .socket-pic {
        height: 100px;
        width: 165px;
        position: absolute;
        top: 0px;
        right: 0px;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .socket-basic {
        font-family: PingFang SC;
        padding-bottom: 32rpx;
        .socket-basic-num {
            font-family: Montserrat;
            font-size: 64rpx;
            line-height: 78rpx;
            color: #1b144e;
            label {
                font-weight: 800;
                font-size: 24rpx;
                margin-left: 8rpx;
                line-height: 54rpx;
                vertical-align: top;
                color: #c4c4c4;
            }
        }
        .socket-basic-text {
            margin-top: 50rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &.justOne {
                justify-content: flex-end;
            }
            .socket-spread {
                display: flex;
                align-items: center;
            }
            .socket-basic-allow {
                width: 50rpx;
                height: 36rpx;
            }
        }
    }
}
.socket-list {
    .socket-item {
        height: 108rpx;
        display: flex;
        justify-content: space-between;
        padding-left: 60rpx;
        padding-right: 30rpx;
        align-items: center;
        border-top: 1px solid rgba(196, 196, 196, 0.4);
        box-sizing: border-box;
    }
}
</style>

<config>
{
    usingComponents: {
        "switch": "./switch",
        "van-popup": "module:@vant/weapp/dist/popup",
        "SwitchLR":"../comComponents/SwitchLR.wpy"
    }
}
</config>
