export default OakComponent({
    entity: 'address',
    projection: {
        id: 1,
        name: 1,
        phone: 1,
        detail: 1,
        area: {
            id: 1,
            name: 1,
            parent: {
                id: 1,
                name: 1,
                parent: {
                    id: 1,
                    name: 1,
                },
            },
        },
    },
    isList: false,
    formData({ data: address }) {
        return {
            name: address?.name,
            phone: address?.phone,
            // areaName: `${address?.area?.parent.parent.name}${address?.area?.parent.name}${address?.area?.name}`,
            // provinceName: address?.area?.parent.parent.name,
            districtName: address?.area?.name,
            area: address?.area,
            areaText: address?.area &&
                `${address?.area?.parent?.parent?.name}${address?.area?.parent?.name}${address?.area?.name}`,
            detail: address?.detail,
        };
    },
    methods: {
        setValue(input) {
            const { currentTarget, detail } = input;
            const { dataset } = currentTarget;
            const { value } = detail;
            const { attr } = dataset;
            this.update({
                [attr]: value,
            });
        },
        callAreaPicker() {
            this.navigateTo({
                url: '/pickers/area',
            }, {
                depth: 3,
            });
        },
        async confirm() {
            await this.execute();
            this.navigateBack();
        },
        reset() {
            this.clean();
        },
    },
});