<style lang="less" scoped>
.curtain-card {
    color: #c4c4c4;
    margin-bottom: 30rpx;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px #0000000d, 0px 0px 2px 0px #00000012;
    .curtain-card-box {
        // height: 140px;
        margin-bottom: 28rpx;
        position: relative;
    }
    .curtain-content {
        display: flex;
        justify-content: space-between;
        .curtain-cart-img {
            height: 200rpx;
            width: 330rpx;
        }
        .imgSt {
            border-radius: 25px;
        }
    }
    .curtain-title {
        font-size: 32rpx;
        font-weight: 600;
        padding-top: 48rpx;
        margin-left: 40rpx;
        line-height: 44rpx;
        color: rgba(77, 82, 98, 1);
        font-family: PingFang SC;
    }

    .cutain-switch {
        display: flex;
        justify-content: flex-end;
        margin-right: 40rpx;
    }
    .total-sw{
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #E8ECF0;
        padding-top: 32rpx;
        padding-right: 40rpx;
        padding-bottom: 32rpx;
    }
    .mr40 {
        margin-right: 24rpx;
    }
    .mr40:last-child {
        margin-right: 0rpx;
    }
    .line-center {
        text-align: center;
        color: #000;
        height: 40rpx;
        line-height: 40rpx;
    }
    .switch {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80rpx;
        width: 80rpx;
        background: #F1F4F6;
        border-radius: 50%;
        &.yell {
            background:  rgba(61, 203, 204, 0.3);
;
;
        }
    }
    .style-hover{
        background: rgba(61, 203, 204, 0.3);
    }
    .arrow-size {
        height: 32rpx;
        width: 32rpx;
    }
    image {
        width: 100%;
        height: 100%;
    }
    .curtain-child {
        .curtain-child-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 40rpx;
            padding-bottom: 32rpx;
            padding-top: 32rpx;
            height: 144rpx;
            border-top: 1px solid #e8ecf0;
            box-sizing: border-box;
            .curtain-child-item-text {
                  
            }
  
            .curtain-child-item-status {
                font-family: PingFang SC;
                font-size: 13px;
                font-weight: 400;
                line-height: 18px;
            }
        }
    }
}
</style>
<template>
    <div class="curtain-card">
        <!-- 单个设备 -->
        <div
            class="curtain-card-box"
            v-if="curtainData.length == 1"
        >
            <div class="curtain-content">
                <div class="curtain-title">
                    <div>窗帘</div>
                </div>
                <div class="curtain-cart-img">
                    <image
                        class="imgSt"
                        src="{{h5StaticPath}}curtain_vertical_3.svg"
                    />
                </div>
            </div>

            <div class="cutain-switch">
                <div
                    v-for="(btnItem,bi) in btnArr"
                    :key="bi"
                    class="mr40 switch"
                    hover-class="style-hover"
                    hover-style-time="300"
                    :class="{'yell': btnItem.timeCount!=0} "
                    @click="handleTotal(btnItem.setType,btnItem.type,bi,btnArr,curtainData,btnItem.value)"
                >
                    <div class="arrow-size">
                        <div
                            class="line-center"
                            v-if="btnItem.timeCount!=0 && btnItem.setType!='EquipStop'"
                        >{{btnItem.timeCount }}</div>
                        <image
                            v-else
                            src="{{h5StaticPath}}{{btnItem.icon}}"
                        />
                    </div>
                </div>
            </div>

        </div>
        <!-- 多设备 -->
        <div
            class="curtain-card-box"
            v-if="curtainData.length > 1"
        >
            <div class="curtain-content">
                <div class="curtain-title">
                    <div>窗帘</div>
                </div>
                <div class="curtain-cart-img">
                    <image
                        class="imgSt"
                        src="{{h5StaticPath}}curtain_vertical_3.svg"
                    />
                </div>
            </div>
            <!--  展示按钮     -->
            <div style="padding-bottom: 42rpx; margin-left: 40rpx;">
                <SwitchLR @commponent-SwitchLR-change="handleSpread"></SwitchLR>
                <span v-show="onlyOne">{{""}}</span>
            </div>
            <!-- 总控 -->
            <div
                class="total-sw"
                v-if="showTotal"
            >
                <div
                    v-for="(btnItem,bi) in btnArr"
                    :key="bi"
                    class="mr40 switch"
                    hover-class="style-hover"
                    hover-style-time="300"
                    :class="{'yell': btnItem.timeCount!=0 } "
                    @click="handleTotal(btnItem.setType,btnItem.type,bi,btnArr,curtainData,btnItem.value)"
                >
                    <div class="arrow-size">
                        <div
                            class="line-center"
                            v-if="btnItem.timeCount!=0 && btnItem.setType!='EquipStop'"
                        >{{btnItem.timeCount }}</div>
                        <image
                            v-else
                            src="{{h5StaticPath}}{{btnItem.icon}}"
                        />
                    </div>
                </div>
            </div>
             <!-- 展开 子设备 -->
            <div
                v-if="!showTotal"
                class="curtain-child"
                v-for="(item,idx) in curtainData"
                :key="item.id"
            >
                <div class="curtain-child-item">
                    <div class="curtain-child-item-text">
                        <div class="curtain-title" style="padding-top: 0rpx; margin-left:0rpx;">{{item.name}}</div>
                        <div class="curtain-child-item-status" v-if="item.isOpenSet">开度{{item.openValue}}%</div>
                    </div>
                    <div class="cutain-switch">
                        <div
                            v-for="(btnItem,bi) in item.btnArr"
                            :key="bi"
                            class="mr40 switch"
                            hover-class="style-hover"
                            hover-style-time="300"
                            :class="{'yell': btnItem.timeCount!=0}"
                            @click="handleChild(btnItem.setType,item.equipId,idx,bi,item.btnArr,item)"
                        >
                            <div class="arrow-size">
                                <div
                                    class="line-center"
                                    v-if="btnItem.timeCount!=0 && btnItem.setType!='EquipStop'"
                                >{{btnItem.timeCount }}</div>
                                <image
                                    v-else
                                    src="{{h5StaticPath}}{{btnItem.icon}}"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import wepy from '@wepy/core'
import config from '@/config'
import { changeManualTempHttp, getObjectDataEqpGroupHttp } from '@/packagesEnv/api/officehome.js'
let prev = Date.now()
const initBtnArr = [
    { id: 0, show: false, type: 'all', setType: 'openPop', value: '', icon: 'curtain_icon_adjust_3.svg', size: '40', timeCount: '', text: '' },
    { id: 1, show: false, type: 'updown', setType: 'EquipOffSet', value: 0, icon: 'curtain_icon_down_3.svg', size: '32', timeCount: 0, text: '下降', timer: null },
    { id: 2, show: false, type: 'leftRit', setType: 'EquipOffSet', value: 0, icon: 'curtain_icon_close_3.svg', size: '32', timeCount: 0, text: '关闭', timer: null },
    { id: 3, show: false, type: 'all', setType: 'EquipStop', value: 2, icon: 'curtain_icon_stop_3.svg', size: '32', timeCount: 0, text: '暂停', timer: null },
    { id: 4, show: false, type: 'updown', setType: 'EquipOnSet', value: 1, icon: 'curtain_icon_up_3.svg', size: '32', timeCount: 0, text: '上升', timer: null },
    { id: 5, show: false, type: 'leftRit', setType: 'EquipOnSet', value: 1, icon: 'curtain_icon_open_3.svg', size: '32', timeCount: 0, text: '打开', timer: null }
]
let setTotalTimer = null
let timerThree = null
wepy.component({
  props: {
    projectId: String,
    spaceId: String,
    curtainVisible: Boolean
  },
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    showTotal: true, // 默认总控
    suspendDownFlag: false, // 总向下暂停
    suspendUpFlag: false, // 总向上暂停
    count: 2, // 倒计时
    countText: '',       // 倒计时文案
    btnArr: [],
    initData: [], // 初始值
    curtainData: []
  },
  watch: {
    curtainVisible(val) {
      if (!val && this.spaceId) {
        this.getData()
      }
    },
    spaceId() {
      this.getData()
    }
  },
  computed: {

  },
  methods: {
    getData() {  //  设备组 - 窗帘
      const params = {
        criteria: {
          projectId: this.projectId,
          spaceId: this.spaceId,   // 空间ID
          type: 0      // 0.窗帘
        },
        orders: [
          {
            column: 'sortNum',
            asc: true
          }
        ]
      }
      getObjectDataEqpGroupHttp(params).then(res => {
        let resData = res.count ? res.content : []
        this.btnArr = []
        this.$emit('comments-curtain-len', resData.length)
        if (!resData.length) return
        let type = ''
        let isOpenSet = 0
        let stopSet = 0
        resData.forEach((item, idx) => {
                        // equipmentType:1//开合方式:1-平开门式；2-左拉单开；3-右拉单开；4-上开；5-下开；99-其他
          if (item.equipmentType === 4 || item.equipmentType === 5 || item.equipmentType === 99) {
            type = 'updown'
          } else {
            type = 'leftRit'
          }
          type = 'leftRit'
          item.childCountText = ''
          item.btnArr = []
          isOpenSet = item.isOpenSet
          stopSet = item.stopSet
          this.itemBtn(item.btnArr, type, item.isOpenSet, item.stopSet)
        })
        this.itemBtn(this.btnArr, type, isOpenSet, stopSet)
        this.initData = JSON.parse(JSON.stringify(resData))
        this.showCurtainNum()
      })
    },
    itemBtn(arr, type, isOpenSet, stopSet) {
      initBtnArr.map(item => {
        if (item.type === type || (isOpenSet && item.type === 'all') || (stopSet && item.type === 'all')) {
          arr.push(item)
        }
      })
    },
    showCurtainNum() {
        // 一个或者多个设备
      let arr = []
      if (this.initData.length === 1) {
        arr.push(this.initData[0])
      } else {
        this.initData.map(item => {
          arr.push(item)
        })
      }
      this.curtainData = JSON.parse(JSON.stringify(arr))
    },
        // 参数
    setParams(arr, setType) {
      arr.forEach(item => {
        item.equipmentCategory = 'CFSSES'
        item.infoCode = setType
        item.value = 1
      })
      return arr
    },
        // 总开关
    handleTotal(setType, type, idx, btnArr, data, value) {
      wx.uma.trackEvent(`officeHome_curtain_card_${setType}`, { key: setType === 'EquipOffSet' ? '卡片-下降' : '卡片-上升' })

      if (setType === 'openPop') {
        this.$emit('commponents-curtain-showPop', {btnArr, data, curtainName: '窗帘'})
        return
      }
    //   let now = Date.now();
    //   if (now - prev <= 2000) return; // 请求间隔 2秒
    //   prev = Date.now();

      this.setSwitchStatus(setType, idx)
      this.sendData(value, 'EquipSwitchSet', data)
    },

    setSwitchStatus(setType, idx) {
      clearInterval(setTotalTimer)
      setTotalTimer = null
      this.btnArr.map(item => {
        if (item.setType !== setType && item.timeCount) {
          item.timeCount = 0
        }
      })
      //  暂停按钮 点击显示一下下
      if (setType === 'EquipStop') {
        this.btnArr[idx].timeCount = 1
        clearInterval(timerThree)
        timerThree = null
        timerThree = setTimeout(() => {
          this.btnArr[idx].timeCount = 0
          clearInterval(timerThree)
          timerThree = null
        }, 300)
      } else {
        this.btnArr[idx].timeCount = 3
        setTotalTimer = setInterval(() => {
          this.btnArr[idx].timeCount--
          if (this.btnArr[idx].timeCount === 0) {
            clearInterval(setTotalTimer)
            setTotalTimer = null
          }
        }, 1000)
      }
    },

        // 子 开关
    handleChild(setType, id, index, btnIdx, btnArr, data) {
      const curtainName = this.curtainData[index].name
      if (setType === 'openPop') {
        this.$emit('commponents-curtain-showPop', {btnArr, data, curtainName})
        return
      }
      let currentBtnArr = this.curtainData[index].btnArr
      let childItem = this.curtainData[index].btnArr[btnIdx]
      //   一组按钮只有一个显示倒计时
      currentBtnArr.map((item, idx) => {
        if (item.setType !== childItem.setType && item.timeCount) {
          item.timeCount = 0
          clearInterval(item.timer)
          item.timer = null
        }
      })
       //  暂停按钮 点击显示一下下
      if (setType === 'EquipStop') {
        childItem.timeCount = 1
        clearInterval(timerThree)
        timerThree = null
        timerThree = setTimeout(() => {
          childItem.timeCount = 0
          clearInterval(timerThree)
          timerThree = null
        }, 300)
      } else {
        childItem.timeCount = 3
        clearInterval(childItem.timer)
        childItem.timer = null
        childItem.timer = setInterval(() => {
          childItem.timeCount--
          if (childItem.timeCount === 0) {
            clearInterval(childItem.timer)
            childItem.timer = null
          }
        }, 1000)
      }

      this.sendData(childItem.value, 'EquipSwitchSet', data)
    },
    sendData(value, sendType, data) {
      const propData = JSON.parse(JSON.stringify(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()
    },

        // 总子设备切换
    handleSpread(val) {
      this.showTotal = val
    }
  }
})
</script>
<config>
    {
        usingComponents: {
            "SwitchLR":   "../comComponents/SwitchLR",
        }
    
    }
</config>
