<template>
    <div class="book-equipments">
        <div class="content">
            <div class="line"></div>
            <div class="text">预约开启设备</div>
            <div class="line"></div>
        </div>

        <scroll-view
            :scroll-y="true"
            style="height: 240px;"
        >
        <div style="padding-bottom:100rpx">
            <div v-for="(item,prIndx) in equipData" class="contain">
                <div class="title">{{item.name}}</div>
                <div class="box">
                    <div
                        :class="{'item-box':true,'item-box-fullwidth':item.eqlist.length===1 }"
                        v-for="(child,idx) in item.eqlist"
                        :key="idx"
                    >
                        <span :class="{'child-name':true, 'def':true}">{{child.localName}}</span>
                        <div @click="change(child.status,idx,prIndx)">
                            <image
                                v-if="child.status"
                                style="height: 18px;width: 18px;"
                                :src="h5StaticPath+'book-act-btn.svg'"
                            />
                            <image
                                v-if="!child.status"
                                style="height: 18px;width: 18px;"
                                :src="h5StaticPath+'book-dis-btn.svg'"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="child-name"
                style="color: #8d9399;padding-bottom:40rpx;padding-top:12rpx"
            >
                <div>计费方式：</div>
                <div class="pdtop">*空调延时采用后付费方式，系统将根据您申请的时间产生延时费用。预约时间下您可自由开启空间下的设备。</div>
                <div class="pdtop">
                    收费标准按开机设备对应空间的面积计费，空调加时费用按0.4元/m²·h进行计费，照明设备延时使用不计费。
                </div>
                <div class="pdtop">
                    如您提前结束工作，请点击“我要离开”按钮，系统会自动调整设备关闭时间，感谢与您一同共创可持续的办公环境。
                </div>
            </div>
        </div>
           
        </scroll-view>

    </div>
</template>

<script>
import store from '@/store';
import wepy from '@wepy/core';
import config from '@/config';
import { mapActions } from '@wepy/x';

wepy.component({
  props: {
    spaceEquipList: [], // 空间id
    projectId: String,
    bookEquipList: String // 显示的设备类型

  },
  store,
  data: {
    equipData: [],
    h5StaticPath: config.h5StaticPath + '/page-officehome/'
  },
  computed: {
  },
  watch: {
    spaceEquipList(val) {
      this.setequipData(val)
    }
  },
  detached() {

  },
  methods: {
    ...mapActions([
      'setHandPopHight'
    ]),
    change(status, idx, prIndx) {
      this.equipData[prIndx].eqlist[idx].status = !status
    },
    setequipData(val) {
      this.equipData = [];
      const eqArr = JSON.parse(JSON.stringify(val));
      let lampObj = { eqlist: [] }
      let AirObj = { eqlist: [] }
      eqArr.length && eqArr.map(item => {
        item.status = 0;
        if (this.bookEquipList === item.id || this.bookEquipList === 'all') {
          item.status = 1;
        }

        if ((this.bookEquipList === 'allLamp' && item.equipmentCategory === 'SELTLT') || (item.equipmentCategory !== 'SELTLT' && this.bookEquipList === 'air') || (this.bookEquipList === 'allsocket' && item.equipmentCategory === 'CFIDSC')) {
          item.status = 1;
        }
        // 根据点击的设备类型 展示不同的设备列表
        if (item.equipmentCategory === 'SELTLT') {
          lampObj.name = '照明'
          lampObj.eqlist.push(item)
        }
        if (item.equipmentCategory !== 'SELTLT') {
          AirObj.name = '空调';
          AirObj.eqlist.push(item)
        }
      })
      //  根据设备情况 设置弹窗高度
      if (AirObj.eqlist.length) {
        this.equipData.push(AirObj);
      }
      if (lampObj.eqlist.length) {
        this.equipData.push(lampObj)
      }
      if (lampObj.eqlist.length || AirObj.eqlist.length) {
        this.setHandPopHight(75)
      }
      if (!this.equipData.length) {
        this.setHandPopHight(50)
      }
    }
  }
})
</script>

<style lang="less" scoped>
.book-equipments {
    font-family: PingFang SC;
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40rpx 42rpx;
        .line {
            height: 0;
            border-top: 1px solid #eee;
            flex: 1;
        }
        .text {
            height: 34rpx;
            width: 144rpx;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 34rpx;
            color: #8d9399;
            margin: 0rpx 20rpx;
        }
    }
    .contain{
        padding-top:24rpx; 
    }
    .contain:first-child{
        padding-top:0rpx; 
    }
    .title {
        font-family: 'PingFang SC';
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        color: #000000;
    }
  
    .box {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding-top:12rpx;
        .item-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 48%;
            height: 76rpx;
            border-radius: 8rpx;
            padding: 20rpx 16rpx 20rpx 16rpx;
            box-sizing: border-box;
            background: #f7f9fa;
            margin-right: 10rpx;
            margin-bottom: 12rpx;
        }
        .item-box-fullwidth {
            width: 100%;
        }
    }
    .act-icon {
        color: #00dc23;
    }
    .icon {
        color: linear-gradient(0deg, #c4c4c4, #c4c4c4),
            linear-gradient(0deg, #ffffff, #ffffff);
    }
    .child-name {
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-weight: 400;
        line-height: 36rpx;
    }
    .def {
            color: #1b2129;
    }
    .pdtop{
        padding-top: 12rpx;
    }
}
</style>
<config>
    {
      usingComponents: {
      "van-icon": "module:@vant/weapp/dist/icon",
      }
    }
</config>
