<style lang="less" scoped>
.box {
    padding-top: 40rpx;
}
.box_sw {
    display: flex;
    justify-content: center;
    align-items: center;
}
.text_box {
    width: 335px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 30rpx;
    align-items: center;
}
.title {
    font-family: PingFang SC;
    font-size: 44rpx;
    font-weight: 500;
    line-height: 62rpx;
    color: rgba(0, 0, 0, 1);
}
</style>
<template>
    <div class="box">
        <div class="box_sw">
            <div class="text_box">
                <div class="title">{{colourItem.localName}}</div>
            </div>
        </div>
        <div v-if="colourObj.bright">
            <Slider
                :onlyLine="false"
                :typeValue="colourObj.brightPercent"
                typeName="亮度"
                type="brightSet"
                @silder-percent-value="silderVal"
                @silder-mouseEnd="mouseEnd"
                @silder-mouseStart="mouseStart"
            ></Slider>
        </div>
        <div
            style="padding-top:100rpx;"
            v-if="colourObj.colorTemperature"
        >
            <Slider
                :onlyLine="true"
                :typeValue="colourObj.tempPercent"
                typeName="色温"
                type="colorTemperatureSet"
                @silder-percent-value="silderVal"
                @silder-mouseEnd="mouseEnd"
                @silder-mouseStart="mouseStart"
            ></Slider>
        </div>
    </div>

</template>
<script>
import wepy from '@wepy/core';
import { changeManualTempHttp } from '@/packagesEnv/api/officehome.js'
wepy.component({
  props: {
    colourObj: Object
  },
  data: {
    timerSetVal: null,
    startTime: 0,
    colourItem: {},
    renew: true
  },
  watch: {
    colourObj(val) {
            // 开始滑动了 就不再更新父级数据
      if (this.renew && val) {
        if (val.brightValue === val.brightMinValue) {
          val.brightValue = 0;
        } else {
          const brightPercent = val.brightValue / (val.brightMaxValue - val.brightMinValue) * 100;
          val.brightPercent = Math.floor(brightPercent);
        }
        if (val.colorTempValue === val.colorTempMinValue) {
          val.colorTempValue = 0;
        } else {
          const tempPercent = val.colorTempValue / (val.colorTempMaxValue - val.colorTempMinValue) * 100;
          val.tempPercent = Math.floor(tempPercent);
        }
        this.colourItem = JSON.parse(JSON.stringify(val))
      }
    }
  },
  methods: {
        // 下发色温指令
    setColour(obj) {
      let paramsObj = JSON.parse(JSON.stringify(obj));
      paramsObj.id = this.colourItem.id;
      paramsObj.code = obj.type;
      delete paramsObj.type
      const arr = [paramsObj]
      changeManualTempHttp(arr)
    },

    countVal(obj) {
      let dxValue = 0;
      if (obj.type === 'brightSet') {
        if (obj.value < this.colourItem.brightMinValue) {
          obj.value = this.colourItem.brightMinValue
          return obj;
        }
        dxValue = this.colourItem.brightMaxValue - this.colourItem.brightMinValue;
      } else {
        if (obj.value < this.colourItem.colorTempMinValue) {
          obj.value = this.colourItem.brightMinValue
          return obj;
        }
        dxValue = this.colourItem.colorTempMaxValue - this.colourItem.colorTempMinValue;
      }
      obj.value = Math.floor(obj.value / 100 * (dxValue));
      return obj
    },
        // 滑动
    silderVal(obj) {
            // 值  obj.value  色温还是亮度 obj.type
      obj = this.countVal(obj);
      const endTime = Date.parse(new Date());
      const dx = endTime - this.startTime;
      if (dx === 1000) {
        this.startTime = endTime;
        this.setColour(obj);
      }
    },
        // 滑动开始
    mouseStart() {
      this.startTime = Date.parse(new Date());
      this.renew = false;
    },
        // 滑动停止
    mouseEnd(obj) {
      obj = this.countVal(obj);
      this.setColour(obj);
    }
  }
})
</script>

<config>
{
    usingComponents: {
        "Slider": "../comComponents/Slider",
    }
}
</config>
