<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: rgba(61, 203, 204, 0.3);
            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 {
            margin: 0;
            justify-content: center;
        }
        .body-item {
            padding-top: 20rpx;
            margin-left: 70rpx;
            font-style: normal;
            font-weight: 500;
            font-size: 30rpx;
            line-height: 42rpx;
            color: #c4c4c4;
            font-family: PingFang SC;
            .text-status {
                width: 32rpx;
                height: 32rpx;
                background: rgba(61, 203, 204, 0.3);
                border-radius: 100%;
                display: inline-block;
            }
            .grey {
                color: #4d5262;
            }
        }
    }
}
.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>

<template>
    <div class="scene-popup air-popup">
        <div class="scene-popup-head">
            <div class="head-imgbg">
                <div class="air-head-imgbox">
                    <image
                        src="{{h5StaticPath+'icon-handshake.svg'}}"
                        lazyload
                    />
                </div>
            </div>
        </div>
        <div class="scene-popup-body air-popup-body">
            <div style="text-align: center;font-weight: 500;padding-bottom: 42rpx;">工作辛苦了！</div>
            <div
                class="body-item"
                v-for="(item,idx) in textObj"
                :key="idx"
            >
                <div>
                    <div v-if="item.status === 'pending'" class="text-status"> 
                    </div>
                    <img
                        v-else
                        style="width:32rpx;height:32rpx"
                        src="{{h5StaticPath+ 'icon-check-mark.svg'}}"
                        lazyload
                        alt=""
                    />
                    <span style="margin-left:18rpx" :class="{'grey':item.status === 'pending'}">{{item.text}}</span>
                </div>
            </div>
        </div>
        <div
            class="btns"
            @click.stop="hideScene"
        >
            <span class="btn air_btn">隐藏</span>
        </div>
    </div>
</template>
<script>

import wepy from '@wepy/core'
import config from '@/config'
let textData = [
  {
    text: '已为您取消当前的预约时间',
    status: 'pending'
  },
  {
    text: '系统将自动调整设备状态',
    status: 'pending'
  },
  {
    text: '感谢您的预约使用',
    status: 'pending'
  }
]
wepy.component({
  props: {
    sceneShow: Boolean
  },
  data: {
    h5StaticPath: config.h5StaticPath + '/page-officehome/',
    textObj: []
  },
  watch: {
    sceneShow(newVal) {
      if (newVal) {
        let timer = null
        let statusTimer = null
        let idx = 0
        timer = setInterval(() => {
          if (idx > 2) {
            clearInterval(timer)
            clearTimeout(statusTimer)
            return
          }
          this.textObj.push(textData[idx])
          this.textObj[idx].status = 'ok'
          idx++
        }, 600)
      } else {
        this.textObj = []
      }
    }
  },
  methods: {
    hideScene() {
      this.$emit('component-open-sceneShowpop', 'hideWorkOff')
    }
  }
})

</script>
