<template>
  <van-dialog
    v-model:show="isShowLeaveDailog"
    class="dialog-width"
    :show-confirm-button="false"
    :show-cancel-button="false"
  >
    <div class="air-dialog-content">
      <div class="dialog-top">
        <img
          class="img-yellow"
          v-if="leaveDetail.img"
          :src="parseImgUrl('page-officehome', leaveDetail.img)"
          alt=""
        />
      </div>
      <div class="leave-title">工作辛苦了!</div>
      <div class="leave-popup-body">
        <div
          class="body-item"
          v-for="(item, idx) in leaveDetail.textObj"
          :key="idx"
        >
          <van-icon
            name="passed"
            style="color: #07c160; margin-right: 8px"
            v-if="item.status === 'ok'"
          />
          <span class="text-status" v-if="item.status === 'go'"></span>
          <span class="text-status grey" v-if="item.status === 'grey'"></span>
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="dialog-btns" @click="closeDailog">
        <span>隐藏</span>
      </div>
    </div>
  </van-dialog>
</template>
    
    <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import { Loading, Dialog, Toast } from "vant";
import { parseImgUrl } from "@/utils";

export default defineComponent({
  props: {
    isShowLeaveDailog: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    VanLoading: Loading,
    [Dialog.Component.name]: Dialog.Component,
  },
  setup(props, contx) {
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      isShowLeaveDailog: props.isShowLeaveDailog,
      leaveDetail: {
        // img: parseImgUrl("ipdImages", "icon-handshake.svg"),
        textObj: [
          {
            text: "已为您取消当前的预约时间",
            status: "ok",
          },
          {
            text: "系统将自动调整设备状态",
            status: "ok",
          },
          {
            text: "感谢您的预约使用",
            status: "ok",
          },
        ],
      },
      closeDailog() {
        contx.emit("closeDailog");
      },
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.isShowLeaveDailog = newProps.isShowLeaveDailog;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    onMounted(() => {});
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.dialog-width {
  width: 300px !important;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
}
.leave-popup-body {
  display: flex;
  flex-direction: column;
  margin-left: 36px;
  margin-top: 20px;
  margin-right: 10px;

  &.air-popup-body {
    flex-direction: row;
    margin: 0;
    justify-content: center;
  }

  .body-item {
    padding-top: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #c4c4c4;

    .text-status {
      width: 16px;
      height: 16px;
      background: #f0da21;
      border-radius: 100%;
      display: inline-block;
      margin-right: 16px;

      &.grey {
        background: #f3f3f3;
      }
    }
  }
}

.air-dialog-content {
  position: relative;
  width: 100%;
  height: 360px;

  .dialog-top {
    position: relative;
    height: 70px;
    background: #f3f3f3;

    .img-yellow {
      background: #ffe823;
    }

    img {
      box-sizing: border-box;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      width: 70px;
      height: 70px;
      padding: 17px;
      transform: translateX(-50%);
      top: 15px;
    }
  }

  .leave-title {
    display: block;
    text-align: center;
    font-family: Black Han Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 21px;
    margin-top: 20px;
    padding-top: 14px;
    align-items: center;
    text-align: center;
  }
}

.dialog-btns {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  margin: 0 auto;
  width: 88px;
  height: 46px;
  line-height: 1;
  color: #4d5262;
  background: #ffffff;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  cursor: pointer;

  span {
    height: 46px;
    line-height: 46px;
    display: inline-block;
  }
}
</style>
    