<template>
    <view class="design-field">
        <text class="field" :style="labelStyle">{{ label }}</text>
        <view class="wrapper" @click="onClick">
            <view class="input">
                <view class="content">
                    <text class="placeholder" v-show="isShow">请选择地址</text>
                    <text class="value">{{ innerValue }}</text>
                </view>
                <TIcon name="icon-location" :size="24" color="#DF6351" />
            </view>
            <view v-if="!isShow" class="location">{{ address }}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    modelValue: {
        type: String,
        default: ''
    },
    address: {
        type: String,
        default: ''
    },
    labelWidth: {
        type: Number,
        default: 120
    }
})
const emit = defineEmits(['onClick', 'update:modelValue'])

const innerValue = ref('')
const isShow = computed(() => innerValue.value === '')
const labelStyle = computed(() => {
    const { labelWidth } = props
    return {
        width: `${labelWidth * 2}rpx`
    }
})

const onClick = () => {
    emit('onClick')
}
watch(
    () => props.modelValue,
    (newVal: string) => {
        innerValue.value = newVal
    }
)
</script>

<style lang="scss" scoped>
.design-field {
    display: flex;
    padding: 24rpx 20rpx 24rpx 32rpx;
    border-bottom: 1px solid $gray-3;

    .field {
        // width: 240rpx;
    }
    .wrapper {
        flex: 1;
        .input {
            @include flex-justify;
            .content {
                flex: 1;
                .placeholder {
                    font-size: 30rpx;
                    color: $gray-2;
                }
            }
        }
        .location {
            font-size: 30rpx;
            color: $gray-2;
        }
    }
}
</style>
