<style lang="less" scoped>
.box {
    margin-bottom: 30rpx;
    position: relative;
    box-sizing: border-box;
    width: 662rpx;
    background: #ffffff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
        0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 50rpx;
    padding-top: 48rpx;
    .card_total {
        position: relative;
        padding-left: 40rpx;
    }
    .divider {
        position: absolute;
        left: 0px;
        top: 312rpx;
        width: 100%;
        border-top: 1px solid #e8ecf0;
    }
    .card_slider {
        display: flex;
        align-items: center;
        height: 164rpx;
        margin-left: 20px;
        margin-right: 20px;
    }
    .img {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 330rpx;
        height: 200rpx;
        border-radius: 50rpx;
    }
    .titleSt {
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 44rpx;

        color: #4d5262;
    }
    .temSt {
        display: flex;
        align-items: flex-start;
        padding-top: 8rpx;
    }
    .num {
        font-family: Montserrat;
        font-size: 64rpx;
        font-weight: 400;
        line-height: 78rpx;
        color: #1b2129;
    }
    .unit {
        font-family: Mulish;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 30rpx;
        color: #c4c4c4;
        margin-left: 8rpx;
    }
    .btn_box {
        padding-top: 34rpx;
        padding-bottom: 44rpx;
        height: 56rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .rl {
        }
        .rt {
            margin-right: 46rpx;
        }
    }
}
.box_feat {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 8rpx;
    padding-top: 24rpx;
}
.eachFeat {
    margin-bottom: 24rpx;
    position: relative;
    height: 232rpx;
    width: 296rpx;
    margin-left: 24rpx;
    background: #f7f9fa;
    border-radius: 32rpx;
    padding-left: 32rpx;
    box-sizing: border-box;
    padding-top: 26rpx;
    padding-bottom: 24rpx;
    padding-right: 24rpx;
    .temp {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Montserrat;
        font-size: 44rpx;
        font-weight: 400;
        line-height: 44rpx;
        color: #1b144e;
    }
    .unit {
        font-family: Mulish;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 30rpx;
        color: #c4c4c4;
    }
    .status {
        padding-top: 8rpx;
        padding-bottom: 52rpx;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 34rpx;
        color: #c4c9cf;
    }
    .eqName {
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 44rpx;
        color: #4d5262;
    }
    .imgSt {
        position: absolute;
        right: 28rpx;
        bottom: 30rpx;
        height: 40rpx;
        width: 40rpx;
    }
}
</style>
<template>
    <div class="box">
        <image
                :src="[totalStatus ?  (h5StaticPath+'floor_heat_open.png') : (h5StaticPath+'floor_heat_close.png')]"
                class="img"
            />
 
        <div class="card_total">
            <div class="titleSt">地暖</div>
            <div class="temSt">
                <div class="num">{{ tempSet ? tempSet : '--'  }}</div>
                <div class="unit">℃</div>
            </div>
            <div class="btn_box">
                <div class="rl">
                    <SwitchLR
                        v-if="len>1"
                        @commponent-SwitchLR-change="changeSwitchLR"
                    ></SwitchLR>
                    <span v-show="onlyOne">{{""}}</span>
                </div>
                <div class="rt">
                    <Switch :checked="totalStatus" @component-switch-change="changeSwitch($event,'total')"></Switch>
                </div>
            </div>
        </div>
        <div
            class="divider"
            v-show="totalStatus || !IsAll"
        ></div>
        <!-- 调节 -->
        <div
            class="card_slider"
            v-if="totalStatus && IsAll"
        >
            <CardSlider
                :cardWidth="cardWidth"
                :maxValue="maxValue"
                :minValue="minValue"
                :onlyLine="false"
                :typeValue="tempSet"
                typeName="地暖"
                type="heating"
                @silder-mouseEnd="changeSwitch($event,'temp')"
            ></CardSlider>
        </div>
        <!-- 子设备 -->
        <div
            class="box_feat"
            v-show="!IsAll"
        >
            <div class="eachFeat"  @click="openFloorFeatPop(item)"
            v-for="item in equipList"
            :key="item.id"
            >
                <div class="temp">
                    <div style="display: flex;">{{item.tempSet ? item.tempSet :'--'}}<span class="unit">℃</span></div>
                    <Switch
                        :checked="item.runStatus"
                        :height="32"
                        :width="64"
                        @component-switch-change="changeSwitch($event,'child',item.id,item.switchCode)"
                    ></Switch>
                </div>
                <div class="status">
                    {{ item.runStatus ? '已开启':'已关闭' }}
                </div>
                <div class="eqName">
                    {{ item.localName }}
                </div>
               
                <img
                    :style="{'opacity':(item.runStatus ? '1' : '0.3;')}"
                    class="imgSt"
                    src="{{h5StaticPath}}icon_adjust.svg"
                />
            </div>
        </div>
    </div>
</template>
<script>
import wepy from '@wepy/core';
import config from '@/config';
import { querySapceFloorHeating, setSocketHttp } from '@/packagesEnv/api/officehome.js'
wepy.component({
  props: {
    cardWidth: Number, // 卡片宽度
    isControl: Boolean, // 是否可控
    roomHasScene: String,
    roomType: String,
    controlMode: Number,
    openEquipList: Array,
    spaceId: String // 空间id
  },
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    onlyOne: false, // 只有一个设备
    IsAll: true, // 总控制
    totalStatus: false,
    tempSet: 0,
    maxValue: 0,
    minValue: 0,
    equipList: [],
    timer: null
  },
  computed: {
    arrowImg() {
      let imgString = '';
      if (!this.arrowType) {
        imgString = 'down_Arrow.svg'
      } else {
        imgString = 'up_Arrow.svg'
      }
      return imgString;
    }
  },
  watch: {
    spaceId() {
      this.getData();
      this.intervalCall();
    }
  },
  detached() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    // 定时调用
    intervalCall() {
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        this.getData();
      }, 1000 * 3);
    },
    getData() {
      querySapceFloorHeating({ spaceId: this.spaceId }).then(res => {
        const resData = res.data;
        this.equipList = resData.equipList || [];
        this.len = this.equipList.length;
        this.tempSet = resData.tempSet;
        this.maxValue = resData.maxTempSet > 35 ? 35 : resData.maxTempSet;
        this.minValue = resData.minTempSet < 16 ? 16 : resData.minTempSet;
        this.totalStatus = resData.runStatus;
        let obj = {
          maxValue: this.maxValue,
          minValue: this.minValue,
          len: !!this.len
        }
        this.$emit('component-floorHeat-data', obj)
      })
    },
    setEquip(paramArr) {
      setSocketHttp(paramArr).then(res => {
        this.intervalCall()
      })
    },
    changeSwitchLR(val) {
      this.IsAll = val;
    },
    // 下发指令
    changeSwitch(val, type, id, code) {
      let paramArr = [];
      if (type === 'total') {
        this.equipList.map(item => {
          paramArr.push({
            value: val ? 1 : 0,
            code: item.switchCode,
            id: item.id
          })
        })
      }
      if (type === 'child') {
        paramArr.push({
          value: val ? 1 : 0,
          code: code,
          id: id
        })
      }
      if (type === 'temp') {
        this.equipList.map(item => {
          paramArr.push({
            value: val,
            code: item.tempSetCode,
            id: item.id
          })
        })
      }
    //   console.log(paramArr, '----paramArr');
      this.setEquip(paramArr)
    },
    openFloorFeatPop(item) {
      if (item.runStatus) {
        this.$emit('component-open-floorFeat-pop', item)
      }
    }
  }
})
</script>
<config>
    {
        usingComponents: {
            "Switch":     "../comComponents/Switch",    
            "SwitchLR":   "../comComponents/SwitchLR",
            "CardSlider": "../comComponents/CardSlider"    
        }
    
    }
</config>
