<template>
  <div class="curtain" v-if="curtainData && curtainData.length">
    <div class="curtain-top">
      <div class="curtain-desc">
        <p class="curtain-title">
          {{ curtainData.length && curtainData.length == 1 ? curtainData[0].name : '窗帘' }}
        </p>
        <p class="curtain-status">
          <!--          窗帘已打开-->
          <span class="curtain-tip">{{ countText }}</span>
        </p>
        <div class="show-all" @click="showAll" v-if="isShowChildLight">
          <van-icon
            :name="lightIcon"
            class="light-icon"
          />
          <span>显示全部</span>
        </div>
      </div>
      <div class="curtain-right">
        <img
          :src="parseImgUrl('page-officehome','curtain-img.svg')"
          alt=""
        >
        <div class="curtain-control" v-if="!showFlag">
          <div class="control-item mr10"
               @click="handleTotal('EquipOffSet')"
               :class="{'box-active':curtainClose && count,'control-item-disabled':!userIsControl}"
          >
            <span class="timer-text" v-if="curtainClose && count">{{ count }}</span>
            <img
              v-else
              :src="parseImgUrl('page-officehome','curtain-close.png')"
              alt=""
            >
          </div>
          <div class="control-item"
               @click="handleTotal('EquipOnSet')"
               :class="{'box-active':curtainOpen && count,'control-item-disabled':!userIsControl}"
          >
            <span class="timer-text" v-if="curtainOpen && count">{{ count }}</span>
            <img
              v-else
              :src="parseImgUrl('page-officehome','curtain-open.png')"
              alt=""
            >
          </div>
        </div>
      </div>
    </div>
    <!--窗帘按钮-->
    <div class="child-curtain" v-if="showFlag"
         :key="item.id"
         v-for="(item,index) in curtainData"
    >
      <div class="child-title">{{ item.name }}</div>
      <div class="curtain-control">
        <div class="control-item mr10"
             @click="handleChild('EquipOffSet',item.id,index)"
             :class="{'box-active':item.curtainClose  && count,'control-item-disabled':!userIsControl}"
        >
          <span class="timer-text" v-if="item.curtainClose && count">{{ count }}</span>
          <img
            v-else
            :src="parseImgUrl('page-officehome','curtain-close.png')"
            alt=""
          >
        </div>
        <div class="control-item"
             @click="handleChild('EquipOnSet',item.id,index)"
             :class="{'box-active':item.curtainOpen  && count,'control-item-disabled':!userIsControl}"
        >
          <span class="timer-text" v-if="item.curtainOpen && count">{{ count }}</span>
          <img
            v-else
            :src="parseImgUrl('page-officehome','curtain-open.png')"
            alt=""
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { getObjectDataEqpGroupHttp, setEquipeHttp } from '@/apis/envmonitor'
import { parseImgUrl } from '@/utils'
import { Toast } from 'vant'

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => ''
    },
    spaceId: {
      type: String,
      default: () => ''
    },
    userIsControl: {
      type: Boolean,
      default: () => false
    }
  },
  setup(props) {
    let curtainData: any = []
    let timer: any = null
    let projectId: any = props.projectId
    const proxyData = reactive({
      curtainData: curtainData,
      userIsControl: props.userIsControl,
      lightIcon: 'arrow-down',
      showFlag: false,
      projectId: projectId,
      countText: '',  // 到记时文案
      count: 0,      // 到记时
      curtainOpen: false,
      curtainClose: false,
      parseImgUrl: parseImgUrl,
      timer: timer,
      // 获取窗帘列表
      getEqpGroup() {
        const params: any = {
          criteria: {
            projectId: props.projectId,
            spaceId: props.spaceId,   // 空间ID
            type: 0      // 0.窗帘
          },
          orders: [
            {
              column: 'sortNum',
              asc: true
            }
          ]
        }
        getObjectDataEqpGroupHttp(params).then(res => {
          const resData: any = res
          proxyData.curtainData = resData.count ? resData.content : []
          for (let i = 0; i < proxyData.curtainData.length; i++) {
            let item = proxyData.curtainData[i]
            item.childDownFlag = false
            item.childUpFlag = false
            item.childCount = 2
            item.childCountText = ''
          }
        })
      },
      // 点击展示所有的登录
      showAll() {
        proxyData.showFlag = !proxyData.showFlag
        if (proxyData.showFlag) {
          proxyData.lightIcon = 'arrow-up'
        } else {
          proxyData.lightIcon = 'arrow-down'
        }
      },
      checkCount() {
        if (proxyData.count > 0) {
          return true
        } else {
          return false
        }
      },
      // 窗帘总开关
      handleTotal(setType: string) {
        if (proxyData.userIsControl) {
          let flag = proxyData.checkCount()
          /**
           * flag：true 代表指令正在发送中，false:代表当前没有指令在发送
           */
          if (!flag) {  // 只要有一条指令在发送中，要求其它指令不能再发送
            proxyData.changeStatus(setType)
            let arr = JSON.parse(JSON.stringify(proxyData.curtainData))  // 窗帘数据
            let paramsArr = proxyData.setParams(arr, setType)
            // 更新窗帘的按钮可点击状态
            proxyData.setSwitchStatus(setType)
            // 发送窗帘指令
            setEquipeHttp(paramsArr).then(res => {
            })
          }
        } else {
          Toast('您没有当前空间的控制权限！')
        }
      },
      handleChild(setType: string, id: any, index: any) {
        if (proxyData.userIsControl) {
          let flag = proxyData.checkCount()
          /**
           * flag：true 代表指令正在发送中，false:代表当前没有指令在发送
           */
          if (!flag) {  // 只要有一条指令在发送中，要求其它指令不能再发送
            let childItem: any = proxyData.curtainData[index]
            const params = {
              projectId: proxyData.projectId,
              objectId: id,                // 设备ID/窗帘组ID
              equipmentCategory: 'CFSSES',  // 设备编码 窗帘：CFSSES
              infoCode: setType,  // 窗帘开设定：EquipOnSet 窗帘关设定：EquipOffSet
              value: 1                // 窗帘 1 移动/停止
            }
            let paramsArr = []
            paramsArr.push(params)
            // 更新窗帘的按钮可点击状态
            proxyData.changeStatus(setType, childItem)
            proxyData.setSwitchStatus(setType, childItem)
            // 发送窗帘指令
            setEquipeHttp(paramsArr).then(res => {
            })
          }
        } else {
          Toast('您没有当前空间的控制权限！')
        }
      },
      clearCurtain() {
        proxyData.curtainData.map((item: any) => {
          item.curtainClose = false
          item.curtainOpen = false
          proxyData.curtainClose = false
          proxyData.curtainOpen = false
        })
      },
      changeStatus(setType: any, item: any = null) {
        proxyData.clearCurtain()
        if (setType === 'EquipOffSet') {
          if (item) {
            item.curtainClose = true
          } else {
            proxyData.curtainClose = true
          }
        } else {
          if (item) {
            item.curtainOpen = true
          } else {
            proxyData.curtainOpen = true
          }
        }
      },
      // 窗帘状态数据
      setSwitchStatus(setType: any, item: any = null) {
        proxyData.count = 2  // 恢复count
        proxyData.countText = '指令下发中'
        proxyData.timer = setInterval(() => {
          if (proxyData.count === 0) {
            proxyData.countText = ''
            clearInterval(proxyData.timer)
            proxyData.clearCurtain()
          }
          if (proxyData.count === 1) {
            proxyData.countText = '再次点击停止窗帘'
          }
          if (proxyData.count > 0) {
            proxyData.count--
          } else {
            proxyData.count = 0
          }
        }, 1000)
      },
      // 设置发送给后台的窗帘数据
      setParams(arr: any, setType: any) {
        let paramsArr = []
        for (let i = 0; i < arr.length; i++) {
          let obj = {
            objectId: arr[i].id,                // 设备ID/窗帘组ID
            equipmentCategory: 'CFSSES',  // 设备编码 窗帘：CFSSES
            infoCode: setType,  // 窗帘开设定：EquipOnSet 窗帘关设定：EquipOffSet
            value: 1
          }
          paramsArr.push(obj)
        }
        return paramsArr
      }
    })
    const isShowChildLight = computed(() => {
      return proxyData.curtainData.length && proxyData.curtainData.length > 1
    })
    watch(
      props,
      (newProps: any) => {
        if (newProps.spaceId) {
          // 当前空间的控制权限
          proxyData.getEqpGroup()
          proxyData.userIsControl = newProps.userIsControl
        }
      }
    )
    onMounted(() => {
      // 获取空调信息
      proxyData.getEqpGroup()
    })
    return {
      isShowChildLight,
      ...toRefs(proxyData)
    }
  }
})
</script>
<style lang="scss" scoped>
.curtain {
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  background: #FFFFFF;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  margin: 15px 0px;
}

.curtain-top {
  padding-left: 20px;
  //padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
}

.curtain-desc {
  flex: 1 98px;
  padding-top: 10px;
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 19px;
  color: #4D5262;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 5px 0px;
}

.curtain-right {
  position: relative;
  width: 92px;
  text-align: center;

  img {
    width: 92px;
    height: 69px;
  }

  .curtain-control {
    position: absolute;
    right: 10px;
    bottom: 0px;
  }
}

.curtain-title {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 16px;
  line-height: 19px;
  color: #4D5262;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 5px 0px;
}

.curtain-status {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 14px;
  line-height: 16px;
  color: #C4C4C4;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 10px 0px;

  .curtain-tip {
    display: block;
    padding-top: 20px;
  }
}

.show-all {
  font-family: PingFang SC;
  //display: none;
  .curtain-icon {
    font-size: 12px;
    padding-right: 10px;
  }

  padding-top: 10px;
  padding-bottom: 22px;
  font-size: 14px;
  line-height: 16px;
  color: #C4C4C4;
  margin: 0px 5px;
}

.curtain-control {
  text-align: right;
  padding-bottom: 15px;
  width: 100px;
  padding-top: 5px;
  //padding-right: 10px;

  .control-item {
    width: 40px;
    display: inline-block;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    background: rgba(196, 196, 196, 0.2);


    img {
      margin-top: 10px;
      width: 19px;
      height: 19px;
    }
  }

  .control-item-disabled {
    opacity: 0.3;
  }

  .timer-text {
    width: 40px;
    display: inline-block;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    margin: 0;
    text-align: center;
  }
}

.child-curtain {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px 0px 28px;
  border-top: 1px solid rgba(196, 196, 196, 0.4);

  .child-title {
    flex: 1 110px;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    color: #4D5262;
  }

  .curtain-control {
    text-align: right;
    padding-right: 0;
  }
}

</style>
