<style lang="less">
.homeIndex {
  padding: 68px 0px 30px;
  position: relative;
  background-color: #ebf5fa;
  background-repeat: no-repeat;
  background-size: contain;

  .projectTitle {
    color: #1f2429;
    font-size: 22px;
    line-height: 32px;
    font-weight: 500;
    display: flex;
    padding-left: 20px;
    .name {
      margin-right: 5px;
    }
  }

  .projectInfo {
    padding-left: 20px;
    color: #626c78;
    font-size: 13px;
    line-height: 20px;
    margin-top: 8px;
  }
  .weather {
    color: #626c78;
    font-size: 13px;
    position: absolute;
    top: 108px;
    right: 12px;
    display: flex;

    .image {
      width: 20px;
      height: 20px;
    }
    .value {
      margin-left: 8px;
      margin-right: 8px;
    }
    .text {
    }
  }
  .scroll-view {
    position: relative;
    width: 100%;
    height: 350px;
    z-index: 2;
    white-space: nowrap;
    margin-top: 27px;
    // padding: 0 20px;
    overflow: hidden;
  }
  .scroll-view-item {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 280px;
    height: 350px;
    background: red;
    border-radius: 24px;
    margin-right: 12px;
    .itemCont {
      position: relative;
      bottom: -260px;
      padding-left: 20px;
      line-height: 32px;
      font-size: 22px;
      color: #fff;
      .spaceName {
        font-weight: 600;
        display: flex;
        align-items: center;
        .name {
          max-width: 180px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .resident {
          color: #1b2129;
          font-size: 11px;
          margin-left: 8px;
          padding: 0 5px;
          line-height: 18px;
          height: 18px;
          background: #96f2e3;
          border-radius: 4px;
          vertical-align: middle;
        }
      }
      .environment {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.8);
        .param {
          margin-right: 20px;
        }
      }
    }
    .envirItem {
      // top: 270px;
    }
  }
  .scroll-view-item:nth-child(1) {
    margin-left: 20px;
  }
  .scroll-view-item:nth-last-child(1) {
    margin-right: 20px;
  }
  .scroll-view2 {
    position: relative;
    width: 100%;
    height: 76px;
    z-index: 2;
    white-space: nowrap;
    margin-top: 25px;
    // padding: 0 20px;
    overflow: hidden;
  }
  .scroll-view-item2 {
    display: inline-block;
    min-width: 164px;
    height: 76px;
    margin-right: 8px;
    background: #fff;
    border-radius: 20px;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
    .title {
      color: #1b2129;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
    }
    .info {
      margin-top: 3px;
      color: #8b949e;
      font-size: 13px;
      line-height: 20px;
      display: flex;
    }
    .imageDiv {
      position: absolute;
      top: 0;
      right: 0;
      .image {
        width: 76px;
        height: 76px;
      }
    }
  }
  .scroll-view-item2:nth-child(1) {
    margin-left: 20px;
  }
  .scroll-view-item2:nth-last-child(1) {
    margin-right: 20px;
  }
  .menuWrap {
    padding: 0 20px;
    .menuHeader {
      color: #626c78;
      line-height: 24px;
      font-size: 16px;
      margin-top: 24px;
    }
    .menuList {
      margin-top: 8px;
      overflow: hidden;
    }
    .menuItem {
      width: 205rpx;
      height: 84px;
      border-radius: 20px;
      margin-right: 15rpx;
      float: left;
      background: #fff;
      margin-bottom: 8px;
      padding-top: 12px;
      box-sizing: border-box;
      .menuImg {
        text-align: center;
        .image {
          height: 32px;
          width: 32px;
        }
      }
      .menuTitle {
        font-size: 13px;
        color: #1b2129;
        text-align: center;
      }
    }
  }
  .projectPop {
    position: relative;
    overflow: hidden;
    .projectWrap {
      overflow-y: auto;
      max-height: 400px;
      .projectItem {
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color: #1b2129;
        &:hover {
          background: #f1f4f6;
        }
        &.sel {
          color: #1db1b2;
        }
      }
    }
    .button {
      width: 100%;
      font-size: 16px;
      background: #fff;
      color: #8b949e;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-top: 5px solid #f1f4f6;
    }
  }
}
.van-popup {
}
</style>
<template>
<div class="homeIndex" :style="{'background-image': 'url('+h5StaticPath+'homeBack.jpg)'}">
  <div class="projectTitle"  @click="showProject"><span class="name">{{nowCompanyName}}</span><van-icon name="arrow-down" size="20"/></div>
  <div class="projectInfo">成为一家牛的让员工幸福的企业</div>
  <div class="weather"><image class="image" :src="h5StaticPath+weather.imgname"/><span class="value">{{weather.temperature}}℃</span><span class="text">{{weather.text}}</span></div>
  <scroll-view scroll-x="true" class="scroll-view">
    <view class="scroll-view-item">
      <div class="itemCont" v-if="reSpaceId"   @click="goEnv('homeShowEnv')">
        <div class="spaceName"><div class="name">{{ reSpaceName }}</div><span class="resident">常驻工区</span></div>
        <div class="environment"><span class="param">{{spaceParam.temperature||'--'}}℃</span><span class="param">{{spaceParam.co2||'--'}}ppm</span><span class="param">{{spaceParam.pm25||'--'}}μg/m³</span></div>
      </div>
      <div class="itemCont" v-if="!reSpaceId"   @click="goEnv('homeSetSpace')">去设置<br>您的常驻工区<van-icon name="arrow" size="20"/></div>
    </view>
    <view class="scroll-view-item"><div class="itemCont envirItem" @click="goToIntroduce('environment')">环境健康小知识<van-icon name="arrow" size="20"/></div></view>
  </scroll-view>  
   <scroll-view scroll-x="true" class="scroll-view2">
    <view class="scroll-view-item2" v-if="showCard.openLight" @click="goEnv('openLamp')"><div class="title">开启照明</div><div class="info">快速启动</div><div class="imageDiv">
      <image class="image" :src="h5StaticPath+'lamb.png'"/>
    </div></view>
    <view class="scroll-view-item2"  v-if="showCard.raiseTemperature"  @click="goEnv('airAddOne')"><div class="title">调高温度</div><div class="info">快速启动</div><div class="imageDiv">
      <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
    </div></view>
    <view class="scroll-view-item2"  v-if="showCard.lowerTemperature"  @click="goEnv('airReduceOne')"><div class="title">调低温度</div><div class="info">快速启动</div><div class="imageDiv">
      <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
    </div></view>
    <view class="scroll-view-item2"  v-if="showCard.oneClickFullClose"  @click="goEnv('closeLampAir')"><div class="title">一键全关</div><div class="info">快速全关</div><div class="imageDiv">
      <image class="image" :src="h5StaticPath+'allClose.png'"/>
    </div></view>
    <view class="scroll-view-item2" @click="goToIntroduce('overtime')"><div class="title">如何预约加时？</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
    <view class="scroll-view-item2" @click="goToIntroduce('resident')"><div class="title">如何设置常驻工区？</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
    <view class="scroll-view-item2" @click="goToIntroduce('carboncredit')"><div class="title">如何获取碳积分？</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  </scroll-view>
<div class="menuWrap">
  <div class="menuHeader">服务</div>
  <div class="menuList">
    <div class="menuItem" @click="goEnv('homeShowEnv')"><div class="menuImg"><image class="image" :src="h5StaticPath+'environment.png'"/></div><div class="menuTitle">环境调节</div></div>
    <div class="menuItem"  @click="goToFind"><div class="menuImg"><image class="image" :src="h5StaticPath+'find.png'"/></div><div class="menuTitle">找一找</div></div>
    <div class="menuItem" @click="goPortrait"><div class="menuImg"><image class="image" :src="h5StaticPath+'myhabits.png'"/></div><div class="menuTitle">我的习惯</div></div>
    <div class="menuItem" @click="goPersonCenter"><div class="menuImg"><image class="image" :src="h5StaticPath+'myself.png'"/></div><div class="menuTitle">个人中心</div></div>
  </div>
  <div class="menuHeader" v-if="userInfo.manageUserType==3">管理</div>
  <div class="menuList" v-if="userInfo.manageUserType==3">
    <div class="menuItem"  @click="goAdministration"><div class="menuImg"><image class="image" :src="h5StaticPath+'control.png'"/></div><div class="menuTitle">行政端管理</div></div>
  </div>
</div>
<van-popup :show="show" position="bottom"  @close="hideProject" round>
  <div class="projectPop">
    <div class="projectWrap" style="max-height:{{screenHeight-200}}px">
      <div class="projectItem"  :class="{'sel':item.id==userInfo.companyId}" v-for="(item, index) in companyList" :key="index" @click="projectClick(item)">{{ item.name }}</div>
    </div>
    <div class="button">取消</div>
  </div>
</van-popup>
</div>
</template>

<script>
import wepy from '@wepy/core';
import eventHub from '@/common/eventHub';
import { mapState } from '@wepy/x';
import store from '@/store';
import config from '@/config';
import {
  queryControlSpaceCompany,
  querySpaceFunctionCard,
  getSpaceProperty,
  switchCompany,
  getWeather,
} from '@/api/home.js';
import {
  getCompanyDataByPhone,
  wxLogin,
  checkHasUserInfo,
  checkLoginNew,
} from '@/service/user.js';

wepy.page({
  store,
  config: {},
  data: {
    show: false,
    h5StaticPath: config.h5StaticPath + '/page-home/',
    screenHeight: 560,
    companyList: [],
    controlSpaces: [], //租户可控空间
    reSpaceId: '', //常驻空间
    reSpaceName: '',
    showCard: {},
    spaceParam: {},
    weather: {},
    iii: 1,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      projctId: (state) => state.user?.userInfo?.projctId,
      companyId: (state) => state.user?.userInfo?.companyId,
    }),
    nowCompanyName: function() {
      console.log('watchwatchwatch', this.companyId, this.companyList);
      var filter = this.companyList.filter((item) => {
        return item.id == this.companyId;
      });
      store.commit('setCompanyName', filter[0]?.name);
      return filter[0]?.name;
    },
  },
  watch: {
    // companyId: function(newSpaceId, oldSpaceId) {
    //   console.log('watchwatchwatch', this);
    //   var filter = this.companyList.filter((item) => {
    //     return item.id == newSpaceId;
    //   });
    //   this.nowCompanyName = filter[0]?.name;
    // },
  },
  methods: {
    loadData() {
      var paramObj = {
        criteria: {
          companyId: this.userInfo.companyId,
        },
      };
      //查找租户可控空间
      queryControlSpaceCompany(paramObj)
        .then((res) => {
          this.controlSpaces = res.data || [];
        })
        .catch((err) => {});
      //常驻空间快速调节卡片
      querySpaceFunctionCard({
        userId: this.userInfo.userId,
        companyId: this.userInfo.companyId,
      })
        .then((res) => {
          //console.log('querySpaceFunctionCard', res);
          if (res.message == '该用户没有常驻空间') {
            this.reSpaceId = '';
            this.reSpaceName = '';
            this.showCard = {};
            return;
          }
          this.reSpaceId = res.spaceId || ''; //有常驻空间
          this.reSpaceName = res.spaceName || '';
          this.showCard = res || {};
          //console.log('showCardshowCard', this.showCard);

          //常驻空间参数属性
          this.reSpaceId &&
            getSpaceProperty({
              projectId: this.userInfo.projectId,
              spaceId: this.reSpaceId,
            })
              .then((res) => {
                this.spaceParam = res || {};
              })
              .catch((err) => {});
        })
        .catch((err) => {});
    },
    projectClick: function(item) {
      var _this = this;
      this.show = false;
      switchCompany(item.id)
        .then((res) => {
          if (res.result == 'success') {
            console.log('switchCompanyswitchCompany');
            wxLogin()
              .then((res) => {
                _this.loadData();
              })
              .catch((err) => {});
          }
        })
        .catch((err) => {});
    },
    hideProject: function() {
      this.show = false;
    },
    showProject: function() {
      this.show = true;
    },
    goEnv(param) {
      if (this.controlSpaces.length == 0) {
        wx.showToast({
          title: '您还未配置可控空间',
          icon: 'none',
          duration: 4000,
        });
        return;
      }
      // switch (param) {
      //   case 'homeShowEnv':
      //     break;

      //   case 'homeSetSpace':
      //     break;

      //   case '':
      //     break;

      //   default:
      // }

      wx.navigateTo({
        url: `/packagesEnv/pages/officehome/index?from=${param}`,
      });
    },
    goToIntroduce(id) {
      //有没有可控空间
      var hasControlSpaces = this.controlSpaces.length == 0 ? 'no' : 'has';
      wx.navigateTo({
        url: `/packagesEnv/pages/home/${id}?hasControlSpaces=${hasControlSpaces}`,
      });
    },
    goToFind() {
      wx.navigateTo({
        url: '/packagesEnv/pages/search/index',
      });
    },
    goPortrait() {
      wx.navigateTo({
        url: '/packagesEnv/pages/portrait/home',
      });
    },
    goPersonCenter() {
      wx.navigateTo({
        url: '/packagesEnv/pages/personalCenter/index',
      });
    },
    goAdministration() {
      wx.navigateTo({
        url: `/packagesEnv/pages/administration/index`,
      });
    },
  },
  onLoad() {
    console.log("home----onLoad");
    checkLoginNew()
      .then(() => {
        checkHasUserInfo();
        //获取项目list
        getCompanyDataByPhone()
          .then((res) => {
            this.companyList = res || [];
          })
          .catch((err) => {});
        getWeather(this.userInfo.projectId)
          .then((res) => {
            this.weather = res.content || {}; //{ temperature: 30, text: '云' };
            var text = '云';
            var imgname = 'sunny.png';
            if (text.indexOf('晴') > -1) {
              imgname = 'sunny.png';
            } else if (text.indexOf('雨') > -1) {
              imgname = 'rain.png';
            } else if (text.indexOf('阴') > -1) {
              imgname = 'cloudy.png';
            } else if (text.indexOf('云') > -1) {
              imgname = 'muchCloud.png';
            } else if (text.indexOf('雾') > -1 || text.indexOf('霾') > -1) {
              imgname = 'fog.png';
            } else if (text.indexOf('风') > -1) {
              imgname = 'wind.png';
            } else if (text.indexOf('雪') > -1) {
              imgname = 'snow.png';
            }
            this.weather.imgname = imgname;
          })
          .catch((err) => {});
        this.loadData();
      })
      .catch((err) => {});

    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    this.screenHeight = systemInfo.screenHeight;
  },
  onShow() {
    console.log("home----onShow");
    this.loadData();

  },
});
</script>
<config>
{
"navigationStyle":"custom",
usingComponents: {
  "van-icon": "module:@vant/weapp/dist/icon",
  "van-popup": "module:@vant/weapp/dist/popup"
}
}
</config>
