<template>
    <view :class="['form_select_to_page', borderType]" @click="handleClickToPage">
        <view>{{ val }}</view>
        <view @click.stop="clear" v-if="val && isDelete">
            <u-icon size="13" name="close-circle"></u-icon>
        </view>
        <u-icon size="20" name="arrow-right"></u-icon>
    </view>
</template>
<script>
export default {
    components: {
    },
    props: {
        val: {
            type: String || Number,
            default: '' || null,
        },
        url: {
            type: String,
            default: '',
        },
        isDelete: {
            type: Boolean,
            default: false,
        },
        borderType: {   
            type: String,
            default: 'none',//none,bottom
        }
    },
    emits: ['handleClear'],
    data() {
        return {

        }
    },
    methods: {
        clear(){
            console.log(this.val);
            this.$emit('handleClear');
        },
        handleClickToPage(){
            uni.navigateTo({
                url: this.url
            })
        }
    }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>