<template>
    <div class="scene-popup air-popup">
        <div class="scene-popup-head">
            <div
                class="head-imgbg grey"
                :class="{'blue':airSetText.toWhere=='toCold', 'red':airSetText.toWhere=='toWarm'}"
            >
                <div class="air-head-imgbox">
                    <image
                        src="{{h5StaticPath+airPopImg}}"
                        lazyload
                    />
                </div>
            </div>
        </div>
        <div class="scene-popup-body air-popup-body">
            <div class="body-item air-body-item">
                <div
                    class="air-body-item-num"
                >
                    <div
                        v-if="airSetText.notice"
                        class="air-temp-num"
                    >{{airSetText.notice}}</div>
                    <div
                        v-else
                        class="air-temp-num-load"
                    >
                        <image
                            style="padding-top: 4px; height: 20px;width: 20px;"
                            src="{{h5StaticPath}}loading.svg"
                        ></image>
                    </div>
                </div>
                <p
                    v-if="airSetText.remark"
                    class="air-notice"
                    v-for="(item,idx) in airSetText.remark"
                    :key="idx"
                > <span>{{item}}</span></p>
            </div>
        </div>
        <div class="btns">
            <span
                @click="closePop"
                class="btn air_btn"
            >确定</span>

        </div>

    </div>
</template>
<script>
import wepy from '@wepy/core';
import config from '@/config';

wepy.component({
  props: {
    airSetText: Object,
    officeData: Object
  },
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    airPopImg: ''
  },
  watch: {
    airSetText() {
      let nowImg = '';
      if (this.airSetText.toWhere === 'toCold') {
        nowImg = 'dialog_cooling.svg'
      } else if (this.airSetText.toWhere === 'toWarm') {
        nowImg = 'dialog_warmUp.svg'
      } else {
        nowImg = 'icon_wind.svg';
      }
      this.airPopImg = nowImg
    }
  },
  methods: {
    closePop() {
      this.$emit('component-open-sceneShowpop')
    }
  }
})
</script>
<style lang="less" scoped>
.scene-popup {
    width: 520rpx;
    height: 860rpx;
    background: linear-gradient(0deg, #fff 720rpx, #f3f3f3 140rpx);
    &.air-popup {
        width: 560rpx;
        height: 720rpx;
        background: linear-gradient(
            0deg,
            #fff 580rpx,
            rgba(243, 243, 243, 1) 140rpx
        );
    }
    .scene-popup-head {
        padding-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 38rpx;
        .head-imgbg {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 140rpx;
            height: 140rpx;
            background: #f0da21;
            border-radius: 50%;
            margin-bottom: 30rpx;
            &.grey {
                background: rgba(196, 196, 196, 1);
            }
            &.blue {
                background: rgba(94, 139, 207, 1);
            }
            &.red {
                background: rgba(229, 87, 79, 1);
            }
            .air-head-imgbox {
                width: 72rpx;
                height: 72rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .head-imgbox {
                width: 40rpx;
                height: 40rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .scene-popup-body {
        display: flex;
        flex-direction: column;
        margin-left: 72rpx;
        margin-top: 50rpx;
        margin-right: 20rpx;
        &.air-popup-body {
            flex-direction: row;
            margin: 0;
            justify-content: center;
        }
        .body-item {
            padding-top: 60rpx;
            font-style: normal;
            font-weight: 500;
            font-size: 30rpx;
            line-height: 42rpx;
            color: #c4c4c4;
            .text-status {
                width: 16rpx;
                height: 16rpx;
                background: #f0da21;
                border-radius: 100%;
                display: inline-block;
                margin-right: 16rpx;
                &.grey {
                    background: #f3f3f3;
                }
            }
            &.air-body-item {
                width: 366rpx;
                .air-body-item-num {
                    display: flex;
                    justify-content: center;
                }
            }
            .air-temp-num {
                padding-bottom: 54rpx;
                font-family: Montserrat;
                font-size: 22px;
                font-weight: 400;
                line-height: 29px;
                color: rgba(20, 0, 80, 1);
                &.arrow-cooling {
                    color: #5e8bcf;
                    margin: 0 30rpx;
                    margin-bottom: 70rpx;
                }
                &.arrow-warn {
                    color: rgba(229, 87, 79, 1);
                    margin: 0 30rpx;
                    margin-bottom: 70rpx;
                }
            }
            .air-temp-load {
                font-size: 26px;
                display: flex;
                justify-content: center;
            }
            .air-notice {
                text-align: center;
                display: flex;
                justify-content: center;
                font-family: PingFang SC;
                font-size: 15px;
                font-weight: 400;
                line-height: 21px;
                color: rgba(77, 82, 98, 1);
            }
        }
        .order-item {
            font-style: normal;
            font-weight: 500;
            font-size: 32rpx;
            line-height: 52rpx;
            color: #c4c4c4;
            .time-span {
                color: #000000;
                font-size: 38rpx;
            }
        }
    }
}
.btns {
    display: flex;
    position: absolute;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    .btn {
        width: 240rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #c4c4c4;
        &.air_btn {
            height: 100rpx;
            width: 176rpx;
            border-radius: 60rpx;
            padding: 34rpx, 60rpx;
            border: 1px solid rgba(196, 196, 196, 1);
            line-height: 100rpx;
            font-family: PingFang SC;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(77, 82, 98, 1);
        }
    }
    .btn_com {
        border: 1px solid #c4c4c4;
        border-radius: 60rpx;
    }
}
</style>
