89 lines
2.9 KiB
Vue
89 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useZxFwPricingStore } from '@/pinia/zxFwPricing'
|
|
|
|
interface HtBaseInfoState {
|
|
quality: string
|
|
duration: string
|
|
}
|
|
|
|
const { t } = useI18n()
|
|
const DEFAULT_QUALITY = t('htBaseInfo.defaultQuality')
|
|
const DEFAULT_DURATION = ''
|
|
|
|
const props = defineProps<{
|
|
contractId: string
|
|
}>()
|
|
|
|
const zxFwPricingStore = useZxFwPricingStore()
|
|
const storageKey = () => `ht-base-info-${props.contractId}`
|
|
const quality = ref(DEFAULT_QUALITY)
|
|
const duration = ref('')
|
|
const lastSavedSnapshot = ref('')
|
|
|
|
const saveForm = (force = false) => {
|
|
const payload: HtBaseInfoState = {
|
|
quality: quality.value,
|
|
duration: duration.value
|
|
}
|
|
const snapshot = JSON.stringify(payload)
|
|
if (!force && snapshot === lastSavedSnapshot.value) return
|
|
zxFwPricingStore.setKeyState(storageKey(), payload)
|
|
lastSavedSnapshot.value = snapshot
|
|
}
|
|
|
|
const loadForm = async () => {
|
|
const data = await zxFwPricingStore.loadKeyState<HtBaseInfoState>(storageKey())
|
|
const hasStoredValue = Boolean(
|
|
data && (Object.prototype.hasOwnProperty.call(data, 'quality') || Object.prototype.hasOwnProperty.call(data, 'duration'))
|
|
)
|
|
quality.value = typeof data?.quality === 'string' && data.quality ? data.quality : DEFAULT_QUALITY
|
|
duration.value = typeof data?.duration === 'string' ? data.duration : (hasStoredValue ? '' : DEFAULT_DURATION)
|
|
lastSavedSnapshot.value = JSON.stringify({ quality: quality.value, duration: duration.value })
|
|
if (!hasStoredValue) saveForm(true)
|
|
}
|
|
|
|
watch([quality, duration], () => {
|
|
saveForm()
|
|
})
|
|
|
|
onMounted(() => {
|
|
void loadForm()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
saveForm(true)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full min-h-0 flex flex-col">
|
|
<div class="rounded-lg border bg-card p-5">
|
|
<div class="mb-4 border-b pb-3">
|
|
<h3 class="text-sm font-semibold text-foreground">{{ t('htBaseInfo.title') }}</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-5">
|
|
<label class="space-y-1.5">
|
|
<div class="text-xs font-medium text-muted-foreground">{{ t('htBaseInfo.qualityLabel') }}</div>
|
|
<textarea
|
|
v-model="quality"
|
|
rows="3"
|
|
:placeholder="t('htBaseInfo.qualityPlaceholder')"
|
|
class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/30 resize-none"
|
|
/>
|
|
</label>
|
|
<label class="space-y-1.5">
|
|
<div class="text-xs font-medium text-muted-foreground">{{ t('htBaseInfo.durationLabel') }}</div>
|
|
<textarea
|
|
v-model="duration"
|
|
rows="3"
|
|
:placeholder="t('htBaseInfo.durationPlaceholder')"
|
|
class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/30 resize-none"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|