<template>
  <PageLayout title="Home Valuation" description="Provide a curated and dynamic home valuation experience, showcasing featured properties to enhance visibility, engage users, and drive lead generation effectively.">
    <template #button>
      <span v-if="copied">Copied!</span>
      <button v-else :class="['btn-save', { disable: !hasPermission }]" @click.prevent="onCopy">
        Copy to clipboard
      </button>
    </template>
    <MetaTags class="market-form-groups" ref="metaTags" v-model="metaTagHtml" isShortCode/>
    <StyleSetting class="market-form-groups" v-model="imgUrl"/>
    <JsSetting v-model="jsCode" class="market-form-groups" desc="The following code will be executed after the report results are generated in step three."/>
    <StepConfig class="market-form-groups" ref="stepConfig" :imgUrl="imgUrl"/>
  </PageLayout>
</template>

<script setup>
import { ref, useTemplateRef} from "vue";
import { useCopy } from "@/hooks/useCopy.js";
import PageLayout from "@/admin/common/PageLayout.vue";
import StyleSetting from './style-setting.vue';
import JsSetting from '@/admin/common/SubmitJs.vue';
import StepConfig from "./step-config.vue";
import { userState } from "@/common/sign-log/user.js";
import MetaTags from "@/admin/common/MetaTags.vue";
import { saveShortCodeLog, types} from "@/admin/shortcodes/common.js";

const imgUrl = ref('')
const jsCode = ref('')
const stepConfig = useTemplateRef('stepConfig')
const metaTagHtml = ref('')
const metaTagsRef = useTemplateRef('metaTags')
const { copied, copyCode } = useCopy();
const hasPermission = ref(true)
function onCopy() {
  if(!userState.permission) {
    hasPermission.value = false
    return
  }
  const { step1, step2, step3} = stepConfig.value.config;
  // 此处不能换行
  const data = {
    img_url: imgUrl.value,
    step1,
    step2,
    step3,
    meta: metaTagsRef.value.getValueString(),
    submitJs: jsCode.value
  }
  const shortcode = `[lofty_idx_home_valuation][[${JSON.stringify(data, null, 2)}]][/lofty_idx_home_valuation]`
  copyCode(shortcode);
  saveShortCodeLog(types.HomeValuation, shortcode);
}
</script>
<style scoped lang="scss">

</style>