<style lang="less" scoped>
.title {
    padding-top: 40rpx;
    font-family: PingFang SC;
    font-size: 44rpx;
    font-weight: 500;
    line-height: 62rpx;
    color: #000000;
}
.text {
    font-family: PingFang SC;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 44rpx;
    color: #1b2129;
}
.dir {
    border-right: 1px solid #e1e5eb;
    height: 30rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
}
.set-value {
    display: flex;
    align-items: center;
    padding-top: 96rpx;
    padding-bottom: 34rpx;
}
.value {
    font-family: Montserrat;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 38rpx;
    color: #1B2129;
}
.silder-box {
    margin-bottom: 140rpx;
}
.mr40 {
    margin-right: 24rpx;
}
.line-center {
    text-align: center;
    color: #000;
    height: 40rpx;
    line-height: 40rpx;
}
.switch {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 112rpx;
    width: 112rpx;
    background: #c4c4c433;
    border-radius: 50%;
    &.yell {
        background: rgba(61, 203, 204, 0.3);
    }
}
.arrow-size {
    height: 48rpx;
    width: 48rpx;
}
image {
    width: 100%;
    height: 100%;
}
.show_text {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #8b949e;
    padding-bottom: 60rpx;
}
</style>

<template>
    <div>
        <div class="title">{{curtainName}}</div>
        <div class="set-value">
            <div class="text">设定开度</div>
            <div class="dir"></div>
            <div class="value">{{percent}}%</div>
        </div>
        <div class="silder-box">
            <curtainSlider
                :typeValue="percent"
                @silder-mouseEnd="changeSwitch($event)"
            ></curtainSlider>
        </div>
        <div style="display: flex;justify-content: space-around;">
            <div
                v-for="(item,idx) in btnList"
                :key="item.id"
            >
                <div
                    class="mr40 switch"
                    :class="{'yell': item.timeCount!= 0}"
                    hover-class="style-hover"
                    hover-style-time="300"
                    @click="handleChild(item.setType,item.id,idx,item.value)"
                >
                    <div class="arrow-size">
                        <div
                            class="line-center"
                            v-if="item.timeCount != 0 && item.setType != 'EquipStop'"
                        >{{item.timeCount }}</div>
                        <image
                            v-else
                            src="{{h5StaticPath}}{{item.icon}}"
                        />
                    </div>

                </div>
                <div
                    class="show_text"
                    style="color: #626C78;margin-right:24rpx;padding-top: 20rpx;"
                >{{item.text}}</div>
            </div>

        </div>

    </div>

</template>
<script>
import wepy from '@wepy/core'
import config from '@/config'
import { changeManualTempHttp } from '@/packagesEnv/api/officehome.js'
let timerThree = null
wepy.component({
  props: {
    typeobj: Object,
    curtainVisible: Boolean
  },
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
    percent: 0,
    changeWatchVal: true,
    btnList: [],
    timer: null,
    curtainName: '窗帘'

  },
  computed: {

  },
  watch: {
    curtainVisible: {
      handler(val) {
                // 进入弹窗 设定值默认为0
        if (!val) {
          this.percent = 0
        }
      },
      immediate: true
    },
    typeobj: {
      handler(val) {
        if (val.btnArr.length) {
          this.curtainName = val.curtainName
          const arr = JSON.parse(JSON.stringify(val.btnArr))
          val.btnArr.map((item, idx) => {
            item.timeCount = 0
            if (item.setType === 'openPop') {
              arr.splice(idx, 1)
            }
          })
          this.btnList = [...arr]
        }
      },
      deep: true
    }
  },
  methods: {
    handleChild(setType, id, idx, value) {
            // 清掉其他正在倒计时的
      this.btnList.map(item => {
        if (item.timeCount !== 0 && item.id !== id) {
          item.timeCount = 0
        }
      })
      //  暂停按钮 点击显示一下下
      if (setType === 'EquipStop') {
        this.btnList[idx].timeCount = 1
        clearInterval(timerThree)
        timerThree = null
        timerThree = setTimeout(() => {
          this.btnArr[idx].timeCount = 0
          clearInterval(timerThree)
          timerThree = null
        }, 300)
      } else {
        this.btnList[idx].timeCount = 3
        clearInterval(this.timer)
        this.timer = null
        this.timer = setInterval(() => {
          this.btnList[idx].timeCount--
          if (this.btnList[idx].timeCount === 0) {
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }

      this.sendData(value, 'EquipSwitchSet')
    },
    sendData(value, sendType) {
      const propData = this.typeobj.data
      let paramsArr = []
      if (Array.isArray(propData)) {
        propData.map(item => {
          const obj = {
            id: item.equipId,
            code: sendType,
            value: value
          }
          paramsArr.push(obj)
        })
      } else {
        const obj = {
          id: propData.equipId,
          code: sendType,
          value: value
        }
        paramsArr.push(obj)
      }
      changeManualTempHttp(paramsArr).then()
    },
    changeSwitch(val) {
      this.percent = val.value
      this.sendData(this.percent, 'EquipOpeningSet')
    }
  }
})
</script>
<config>
    {
        usingComponents: {
            "curtainSlider": "./curtainSlider"    
        }
    
    }
</config>
