
<template>
    <div>
        <div class="title">{{ airHandItem.name}}</div>
        <div v-if="airHandItem.boundPoint.tempSetBound" class="set-value">
            <div class="text">温度设定</div>
            <div class="dir"></div>
            <div class="value">{{airHandItem.tempSet2}}℃</div>
        </div>
        <div  v-if="airHandItem.boundPoint.tempSetBound" class="silder-box">
            <Floorfeat-Slider
            :typeValue="airHandItem.nowTemp2"
            :maxValue="maxValue"
            :minValue="minValue"
            @silder-mouseEnd="changeSwitch($event)"
            ></Floorfeat-Slider>
        </div>
        <div
                class="air-control-item"
                v-if="!isACATVA && airHandItem.boundPoint.gearSetBound"
            >
                <div class="air-control-item-box">
                  <div class="air-common-text change-text">风量调节</div>
                    <div class="envnum-common air-envnum-comon">
                        <span
                            class="envnum-common-wind"
                            v-for="(item,index) in windGearArr"
                            :key="index"
                            :class="{'windBlack': item == airHandItem.airGear2 }"
                        >{{item}}</span>
                    </div>
                </div>
                <div class="air-common-switch">
                  <div>
                    <div
                        class="switch"
                        :class="{'disabled':airHandItem.airGear2 <=1||!airHandItem.open}"
                        @click="changeOneAir('gear','windLow')"
                    >
                        <image src="{{h5StaticPath}}wind_small2.svg" />
                    </div>
                    <div class="switchName">调小</div>
                  </div>
               <div>
                <div
                    class="switch"
                    :class="{'disabled':airHandItem.airGear2 >=3||!airHandItem.open}"
                    @click="changeOneAir('gear','windUp')"
                    >
                        <image src="{{h5StaticPath}}wind_big2.svg" />
                    </div>
                    <div class="switchName">调大</div>
               </div>
              <div>
                <div
                    class="switch"
                    :class="{'yell': airHandItem.isAutoGear2==1,'disabled':!airHandItem.open}"
                    @click="changeOneAir('gear','auto')"
                    >
                    <image src="{{h5StaticPath}}wind_auto2.svg" />
                    </div>
                    <div class="switchName">自动</div>
              </div>
                  
                </div>
            </div>
            <div
                class="air-control-item"
                v-if="!isACATVA && airHandItem.boundPoint.modeSetBound"
            >  
                <div class="air-control-item-box">
                  <div class="air-common-text change-text">模式设定</div>
                    <div class="envnum-common air-envnum-comon">
                        {{airHandItem.airMode2 ==2?'制热':airHandItem.airMode2 ==1?'制冷':'通风'}}
                    </div>
                </div>
                <div class="air-common-switch">
                  <div> 
                    <div
                        class="switch" :class="{'yell':  airHandItem.airMode2==1,'disabled':!airHandItem.open}"
                        @click="changeOneAir('mode',1)"
                    >
                        <img :src="h5StaticPath+'aircoldblack2.svg'" />
                    </div>
                    <div class="switchName">制冷</div>
                  </div>
                  <div> 
                    <div
                        class="switch"
                        :class="{'yell': airHandItem.airMode2==2,'disabled':!airHandItem.open}"
                        @click="changeOneAir('mode',2)"
                    >
                        <img :src="h5StaticPath+'airsunblack2.svg'" />
                    </div>
                    <div class="switchName">制热</div>
                  </div>
                 <div> 
                  <div
                        class="switch"
                        :class="{'yell':  airHandItem.airMode2==3,'disabled':!airHandItem.open}"
                        @click="changeOneAir('mode',3)"
                    >
                        <img :src="h5StaticPath+'aircloudblack2.svg'" />
                    </div>
                    <div class="switchName">通风</div>
                 </div>
                </div>
            </div>
    </div>
   
</template>
<script>
import wepy from '@wepy/core'
import { isWithinLocation } from '@/service/location'

import config from '@config'
wepy.component({
  props: {
    maxValue: Number,
    minValue: Number,
    airHandItem: Object,
    roomType: String // 房间类型
  },
  data: {
    defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
    windGearArr: [0, 1, 2, 3], // 风量3/5个档位
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    showWorkTime: false // 展示是否需要预约时间
  },
  computed: {},
  watch: {
    // airHandItem(val) {
    //   if (this.changeWatchVal) {
    //     this.temp = val.tempSet || '--';
    //   }
    // },
  },
  methods: {
    changeSwitch(value) {
      this.airHandItem.tempSet2 = value
      this.airHandItem.nowTemp2 = value
      this.changeOneAir('temp', value)
    },
    changeOneAir(btnType, value) {
      if (!this.airHandItem.open) return
      isWithinLocation().then(() => {
        var deviceObjCopy = { ...this.airHandItem }
        var nowairGear = this.airHandItem.airGear2
        var nowAutoGear = this.airHandItem.isAutoGear2
        if (btnType == 'gear' && value == 'windLow') {
          // 降挡
          if (nowairGear > 1) {
            nowairGear = nowairGear - 1
            nowAutoGear = 0
            deviceObjCopy.airGear2 = nowairGear
            deviceObjCopy.isAutoGear2 = nowAutoGear
          } else {
            return
          }
        }
        if (btnType == 'gear' && value == 'windUp') {
          // 升档
          if (nowairGear < 3) {
            nowairGear = nowairGear + 1
            nowAutoGear = 0
            deviceObjCopy.airGear2 = nowairGear
            deviceObjCopy.isAutoGear2 = nowAutoGear
          } else {
            return
          }
        }

        if (btnType == 'gear' && value == 'auto') {
          nowAutoGear = this.airHandItem.isAutoGear2 == 1 ? 0 : 1
          deviceObjCopy.isAutoGear2 = nowAutoGear
        }
        var rval
        if (btnType == 'mode') {
          deviceObjCopy.airMode2 = value
          rval = value
        }
        if (btnType == 'gear') {
          rval = nowAutoGear == 1 ? 4 : nowairGear
        }
        if (btnType == 'temp') {
          rval = value
        }
        var nowModel = this.airHandItem.allModel.find((item) => {
          return item.id == btnType
        })

        this.$emit(
          'change-airHand-order',
          {
            id: this.airHandItem.id,
            code: nowModel.code,
            value: rval
          },
          deviceObjCopy
        )
      }).catch(() => {})
    }
  }
})
</script>
<config>
    {
        usingComponents: {
            "Floorfeat-Slider": "../comComponents/FloorfeatSlider"    
        }
    
    }
</config>
<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: 90rpx;
}

.air-control-item {
  // padding: 23rpx 28rpx 32rpx 43rpx;
  margin-bottom: 90rpx;
  box-sizing: border-box;

  &.item-flex {
    display: flex;
    justify-content: space-between;
  }
  .temp-wrap {
    display: flex;
    padding-top: 26px;
    padding-bottom: 5px;
    height: 20px;
    align-items: center;
    .minVal {
      color: #c4c4c4;
      font-size: 22rpx;
      flex-grow: 0;
      margin-right: 8px;
    }
    .maxVal {
      color: #c4c4c4;
      font-size: 22rpx;
      flex-grow: 0;
      margin-left: 8px;
    }
    .tempBar {
      //background: red;
      height: 10px;
      flex-grow: 1;
      position: relative;
      display: flex;
      border-radius: 10px;
      .circle {
        position: absolute;
        width: 19px;
        height: 19px;
        left: 0px;
        top: -5px;
        background: #ffffff;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
          0px 4px 10px rgba(0, 0, 0, 0.07);
        border-radius: 21px;
        z-index: 1;
        .tvalue {
          position: relative;
          top: -26px;
          text-align: center;
          color: #1f2429;
          font-size: 22rpx;
        }
        &.disable {
          opacity: 0.6;
        }
      }
      .eachBlock {
        width: 20%;
        background: red;
        &:nth-child(1) {
          background: #5e8bcf;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
        &:nth-child(2) {
          background: #9fb7cd;
        }
        &:nth-child(3) {
          background: #f3f3f3;
        }
        &:nth-child(4) {
          background: #ff9882;
        }
        &:nth-child(5) {
          background: #e5574f;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
    }
  }
  .air-control-item-box {
    display: flex;
    margin-bottom: 30rpx;
    align-items: center;

    .air-common-text {
      padding-top: 2rpx;
      font-family: PingFang SC;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 30rpx;
      color: #1b2129;
      padding-right: 12px;
      border-right: 1px solid #e1e5eb;
    }
  }
  .envnum-common {
    padding-left: 12px;
    font-family: PingFang SC;
    line-height: 48rpx;
    font-size: 32rpx;
    color: #1b2129;
    &.air-envnum-comon {
      display: flex;
      align-items: center;
    }
    .envnum-common-wind {
      font-family: Montserrat;
      // font-size: 24rpx;
      // font-weight: 500;
      // line-height: 30rpx;
      margin-right: 14rpx;
      &.windBlack {
        // font-size: 40rpx;
        // font-weight: 500;
        // line-height: 48rpx;
        color: #1b2129;
      }
    }
    &.colorRed {
      color: red;
    }
    &.colorBlue {
      color: rgba(94, 139, 207, 1);
    }
    &.colorBlack {
      color: rgba(77, 82, 98, 1);
    }
    label {
      font-size: 32rpx;
      line-height: 13px;
      color: #C4C9CF;
      vertical-align: top;
    }
  }
  .air-common-switch {
    display: flex;
    justify-content: space-around;
  }
  .switch:last-child {
    margin-right: 0rpx;
  }
  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 112rpx;
    width: 112rpx;
    font-size: 12px;
    background: #F1F4F6;
    border-radius: 50%;
    image {
      width: 56rpx;
      height: 56rpx;
    }
    &.yell {
      background: rgba(61, 203, 204, 0.3);
    }
  }
  .disabled {
    opacity: 0.5;
  }
  .switchName {
    width: 112rpx;
    margin-top: 8px;
    color: #626c78;
    text-align: center;
  }
}
</style>
