<style lang="less">
page {
    height: 100%;
    background-color: #eceff4;
}
.pagedemo {
    position: relative;
    width: 100%;
    image {
        width: 100%;
    }
    .backDiv {
        position: absolute;
        top: 50px;
        left: 10px;
        height: 36px;
        width: 40px;
        z-index: 2;
    }
    .mainWrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        bottom: 0;
        z-index: 1;
        padding: 592rpx 44rpx 0 44rpx;
        .top {
            height: 226rpx;
            margin-bottom: 15px;
            position: relative;
            .chartDiv {
                position: absolute;
                height: 80px;
                bottom: 0;
                left: 0;
                width: 100%;
            }
            .serviceDiv {
                position: absolute;
                height: 20px;
                top: 9px;
                right: 20px;
                width: 110px;
            }
        }
        .air {
            height: 520rpx;
            margin-bottom: 15px;
            position: relative;
            .openButton {
                position: absolute;
                top: 93px;
                right: 15px;
                width: 50px;
                height: 44px;
            }
            .downCold {
                position: absolute;
                top: 149px;
                right: 76px;
                width: 40px;
                height: 40px;
            }
            .upHot {
                position: absolute;
                top: 149px;
                right: 15px;
                width: 40px;
                height: 40px;
            }
            .xiaoWind {
                position: absolute;
                bottom: 9px;
                right: 76px;
                width: 40px;
                height: 40px;
            }
            .daWind {
                position: absolute;
                bottom: 9px;
                right: 15px;
                width: 40px;
                height: 40px;
            }
        }
        .lamp {
            height: 456rpx;
            margin-bottom: 15px;
            position: relative;
            .openButton {
                position: absolute;
                top: 91px;
                right: 15px;
                width: 50px;
                height: 42px;
            }
            .closeButton {
                position: absolute;
                top: 140px;
                right: 15px;
                width: 50px;
                height: 66px;
            }
        }
        .curtain {
            height: 280rpx;
            margin-bottom: 15px;
            position: relative;
            .openButton {
                position: absolute;
                top: 86px;
                right: 14px;
                width: 40px;
                height: 40px;
            }
            .closeButton {
                position: absolute;
                top: 86px;
                right: 74px;
                width: 40px;
                height: 40px;
            }
        }
        .water {
            height: 280rpx;
            margin-bottom: 15px;
            position: relative;
            .openButton {
                position: absolute;
                bottom: 10px;
                right: 8px;
                width: 55px;
                height: 36px;
            }
        }
        .fan {
            height: 280rpx;
            margin-bottom: 15px;
            position: relative;
            .openButton {
                position: absolute;
                bottom: 8px;
                right: 15px;
                width: 55px;
                height: 36px;
            }
        }
        .wet {
            height: 280rpx;
            margin-bottom: 15px;
            position: relative;
            .openButton {
                position: absolute;
                bottom: 8px;
                right: 15px;
                width: 55px;
                height: 36px;
            }
        }
    }
}
</style>

<template>
    <div
        class="pagedemo"
        :style="{'height':isHome?'1905px':'500px'}"
    >
        <div
            class="backDiv"
            @click="mainBack"
        ></div>
        <image
            class="mainImg"
            :src="img"
            mode="widthFix"
            @click="mainImgShow"
        />
        <div
            class="mainWrap"
            v-show="isHome"
        >
            <div class="top">
                <div
                    class="serviceDiv"
                    @click="serviceTimeClick"
                ></div>
                <div
                    class="chartDiv"
                    @click="chartShowClick"
                ></div>
            </div>
            <div class="air">
                <div
                    class="openButton"
                    @click="airClick"
                ></div>
                <div
                    class="downCold"
                    @click="downCold"
                    v-show="airOpen"
                ></div>
                <div
                    class="upHot"
                    @click="upHot"
                    v-show="airOpen"
                ></div>
                <div
                    class="xiaoWind"
                    @click="xiaoWind"
                    v-show="airOpen"
                ></div>
                <div
                    class="daWind"
                    @click="daWind"
                    v-show="airOpen"
                ></div>
            </div>
            <div class="lamp">
                <div
                    class="openButton"
                    v-show="!lampOpen"
                    @click="lampOpenClick"
                ></div>
                <div
                    class="closeButton"
                    v-show="lampOpen"
                    @click="lampCloseClick"
                ></div>
            </div>
            <div class="curtain">
                <div
                    class="openButton"
                    @click="curtainOpenClick"
                ></div>
                <div
                    class="closeButton"
                    @click="curtainCloseClick"
                ></div>
            </div>
            <div class="water">
                <div
                    class="openButton"
                    @click="waterClick"
                ></div>
            </div>
            <div class="fan">
                <div
                    class="openButton"
                    @click="fanClick"
                ></div>
            </div>
            <div class="wet">
                <div
                    class="openButton"
                    @click="wetClick"
                ></div>
            </div>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import config from '@/config'
import moment from 'moment'
import { mapState } from '@wepy/x'
import { checkHasUserInfo } from '@/service/user'
import { saveCompanyConfig } from '@/service/companyConfig'

wepy.page({
  store,
  data: {
    imgpath: config.h5StaticPath + '/page-officehome-demo/',
    img: config.h5StaticPath + '/page-officehome-demo/tiyan.png', // allopen.png
    isHome: false, // 是否是主页面
    showChart: false,
    serviceTime: false,
    airOpen: true,
    lampOpen: true,
    curtainOpen: true,
    waterOpen: true,
    fanOpen: true,
    wetOpen: true
  },
  computed: {
    ...mapState({ token: state => state.user.token, energyHeadData: state => state.portrait.energyHeadData })
  },
  onLoad() {
    checkHasUserInfo()
    setTimeout(() => {
      this.img = this.imgpath + 'allopen.png'
      this.isHome = true
    }, 2000)
  },
  onReady() { },
  methods: {
    chartShowClick() {
      this.img = this.imgpath + 'chart.png'
      this.isHome = false
      this.showChart = true
    },
    serviceTimeClick() {
      this.img = this.imgpath + 'serviceTime.png'
      this.isHome = false
            // this.serviceTime = true;
    },
    airClick() {
      console.log('this.airOpen', this.airOpen)
      if (this.airOpen) {
        this.airOpen = false
        this.img = this.imgpath + 'airclose.png'
      } else {
        this.airOpen = true
        this.img = this.imgpath + 'allopen.png'
      }
      this.lampOpen = true
      this.curtainOpen = true
      this.waterOpen = true
      this.fanOpen = true
      this.wetOpen = true
    },
    downCold() {
      this.img = this.imgpath + 'downcold.png'
      this.isHome = false
    },
    upHot() {
      this.img = this.imgpath + 'uphot.png'
      this.isHome = false
    },
    xiaoWind() {
      this.img = this.imgpath + 'windxiao.png'
      this.isHome = false
    },
    daWind() {
      this.img = this.imgpath + 'windda.png'
      this.isHome = false
    },
    lampOpenClick() {
      if (!this.lampOpen) {
        this.lampOpen = true

        this.airOpen = true
        this.curtainOpen = true
        this.waterOpen = true
        this.fanOpen = true
        this.wetOpen = true
        this.img = this.imgpath + 'allopen.png'
      }
    },
    lampCloseClick() {
      console.log('this.lampOpen', this.lampOpen)
      if (this.lampOpen) {
        this.lampOpen = false

        this.airOpen = true
        this.curtainOpen = true
        this.waterOpen = true
        this.fanOpen = true
        this.wetOpen = true
        this.img = this.imgpath + 'lampclose.png'
      }
    },
    fanClick() {
      if (this.fanOpen) {
        this.fanOpen = false
        this.img = this.imgpath + 'fanclose.png'
      } else {
        this.fanOpen = true
        this.img = this.imgpath + 'allopen.png'
      }
      this.airOpen = true
      this.lampOpen = true
      this.curtainOpen = true
      this.waterOpen = true
      this.wetOpen = true
    },
    waterClick() {
      if (this.waterOpen) {
        this.waterOpen = false
        this.img = this.imgpath + 'waterclose.png'
      } else {
        this.waterOpen = true
        this.img = this.imgpath + 'allopen.png'
      }
      this.airOpen = true
      this.lampOpen = true
      this.curtainOpen = true
      this.fanOpen = true
      this.wetOpen = true
    },
    wetClick() {
      if (this.wetOpen) {
        this.wetOpen = false
        this.img = this.imgpath + 'wetclose.png'
      } else {
        this.wetOpen = true
        this.img = this.imgpath + 'allopen.png'
      }
      this.airOpen = true
      this.lampOpen = true
      this.curtainOpen = true
      this.waterOpen = true
      this.fanOpen = true
    },
    curtainOpenClick() {
      if (!this.curtainOpen) {
        this.airOpen = true
        this.lampOpen = true
        this.curtainOpen = true
        this.waterOpen = true
        this.fanOpen = true
        this.wetOpen = true
        this.img = this.imgpath + 'allopen.png'
      }
    },
    curtainCloseClick() {
      if (this.curtainOpen) {
        this.curtainOpen = false

        this.airOpen = true
        this.lampOpen = true
        this.waterOpen = true
        this.fanOpen = true
        this.wetOpen = true
        this.img = this.imgpath + 'curtainclose.png'
      }
    },
    mainBack() {
      if (this.isHome) {
        wx.navigateBack()
      } else {
        this.img = this.imgpath + 'allopen.png'
        this.isHome = true
        this.showChart = false

        this.airOpen = true
        this.lampOpen = true
        this.curtainOpen = true
        this.waterOpen = true
        this.fanOpen = true
        this.wetOpen = true
      }
    },
    mainImgShow() {
            // 如果是参数chart页面 则只能通过back按钮
            // 如果是其他非主页面 一点击则 显示主页面图片
      if (!this.isHome && !this.showChart) {
        this.img = this.imgpath + 'allopen.png'
        this.isHome = true

        this.airOpen = true
        this.lampOpen = true
        this.curtainOpen = true
        this.waterOpen = true
        this.fanOpen = true
        this.wetOpen = true
      }
    }
  }
})
</script>

<config>
{
    "navigationStyle": "custom",
    backgroundColor: '#f7f8fa',
    backgroundColorTop:'#FFE823',
    backgroundColorBottom:"#eceff4"	
}
</config>
