<template>
  <div class="lofty-home-valuation-content">
    <img v-if="imgUrl" class="lofty-home-valuation-bg" :src="imgUrl" alt="">
    <div class="img-mask"></div>
    <div class="step-progress">
      <div class="step-block" :class="{active: currentStep === 1}">
        <div class="step-num has-line">1</div>
        <div class="step-desc">Enter Property Address</div>
      </div>
      <div class="step-block" :class="{active: currentStep === 2}">
        <div class="step-num has-line">2</div>
        <div class="step-desc">Property Details</div>
      </div>
      <div class="step-block" :class="{active: currentStep === 3}">
        <div class="step-num">3</div>
        <div class="step-desc">Property Valuation</div>
      </div>
    </div>
    <div class="title">{{ step1.title}}</div>
    <div class="desc">{{ step1.desc}}</div>
    <Step1 v-if="currentStep === 1" @next="changeStep1" :step1="step1"></Step1>
    <Step2 v-if="currentStep === 2" @next="changeStep2" :step2="step2" :address="location" :unit="unit"></Step2>
    <Step3 v-if="currentStep === 3" :step3="step3" :submitJs="submitJs"></Step3>
  </div>
</template>

<script setup>
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';
import { userState } from "@/common/sign-log/user.js";
import util, { getQueryParams } from "@/util/index.js";
const { imgUrl, config, submitJs } = defineProps({ imgUrl: String, config: Object, submitJs: String });
const { step1, step2, step3 } = config;
util.getHereMapPs();
const currentStep = ref(1);
const obj = getQueryParams();
const location = ref(decodeURIComponent(obj.address || ''))
const unit = ref(decodeURIComponent(obj.unit || ''))
if(obj.evaluationId) {
  if(obj.isPopup === '0' || userState.loginStatus.value) {
    currentStep.value = 3
  } else {
    currentStep.value = 2
  }
}
function changeStep1(address, un) {
  location.value = address
  unit.value = un
  const url = new URL(window.location.href);
  url.searchParams.set("address", encodeURIComponent(address));
  url.searchParams.set("unit", encodeURIComponent(un));
  window.history.replaceState({}, "", url);
  if(userState.loginStatus.value) {
    currentStep.value = 3
  } else {
    currentStep.value = 2
  }
}

function changeStep2() {
  currentStep.value = 3
}
</script>
<style lang="scss">
.lofty-home-valuation-content {
  position: relative;
  min-height: 800px;
  color: #fff;
  @include media-600 {
    min-height: 700px;
  }
  .lofty-home-valuation-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
  }
  .img-mask {
    background: rgba(25, 25, 25, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .title {
    margin-top: 40px;
    font-size: 34px;
    font-family: var(--lofty-font-play-bold);
    text-align: center;
    z-index: 20;
    position: relative;
    @include media-600 {
      font-size: 20px;
    }
  }
  .desc {
    margin-top: 20px;
    font-size: 16px;
    font-family: var(--lofty-font-regular);
    text-align: center;
    padding: 0 15px;
    z-index: 20;
    position: relative;
    @include media-600 {
      text-align: left;
    }
  }
}

.lofty-home-valuation-content {
  --gap: 80px;
  --blockWidth: 180px;
  --r: 60px;
  --line: calc(var(--gap) + var(--blockWidth) - var(--r));
}
@include media-600 {
  .lofty-home-valuation-content {
    --gap: 20px;
    --blockWidth: 100px;
    --r: 40px;
    --line: calc(var(--gap) + var(--blockWidth) - var(--r));
  }
}
.step-progress {
  padding-top: 50px;
  display: flex;
  align-items: center;
  position: relative;
  margin: auto;
  width: fit-content;
  z-index: 10;
  gap: var(--gap);
  .step-block {
    width: var(--blockWidth);
    text-align: center;
    .step-num {
      position: relative;
      width: var(--r);
      height: var(--r);
      margin: 0 auto 16px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .step-desc {
      font-family: var(--lofty-font-regular);
      color: rgba(255, 255, 255, 0.8);
      height: 34px;
      @include media-600 {
        font-size: 12px;
      }
    }
    .has-line:after {
      content: '';
      position: absolute;
      left: var(--r);
      width: var(--line);
      height: 1px;
      background-color: rgba(255, 255, 255, 0.3);
      z-index: 12;
    }
  }
  .active {
    .step-num {
      color: rgb(25,25,25);
      background-color: #fff;
    }
  }
}
</style>