<template>
    <app-layout :title="pageTitle">
        <view class="tips-container">
            <widget-tips text="个人信息仅用于发布需求，隐私信息完全保密" textColor="#ffa800" />
        </view>
        <view class="form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>服务地址</text>
                </view>
                <view class="input-box map" @click="chooseLocation">
                    <view class="address-text limit-line clamp-1" :class="{ active: address }">
                        {{ address ? address : "点击选择服务地址" }}
                    </view>
                    <text class="iconfont icon-dingwei"></text>
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>门牌号</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="detail"
                        placeholder="请输入详细地址，如8栋5单元18a"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>联系人</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="name" placeholder="请输入姓名" placeholder-class="form-input-placeholder" />
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>性别</text>
                </view>
                <view class="input-box">
                    <view class="checkbox">
                        <view class="checkbox-item" :class="[gender == 1 ? 'active' : '']" @click="gender = 1">
                            <text>先生</text>
                        </view>
                        <view class="checkbox-item" :class="[gender == 2 ? 'active' : '']" @click="gender = 2">
                            <text>女士</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="input-item">
                <view class="title-box">
                    <text>手机号码</text>
                </view>
                <view class="input-box">
                    <input
                        class="input"
                        v-model="mobile"
                        placeholder="请输入手机号码"
                        placeholder-class="form-input-placeholder"
                    />
                </view>
            </view>
            <view class="input-item default-address">
                <view class="title-box">
                    <text>设为默认地址</text>
                </view>
                <view class="input-box" @click="isDefault = !isDefault">
                    <widget-switch :open="isDefault" />
                </view>
            </view>
        </view>
        <view class="save-form-btn">
            <view class="btn" @click="save">保存</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetTips from "@/components/widgets/tips";
import WidgetSwitch from "@/components/widgets/switch";
export default {
    name: "address-add",
    data() {
        return {
            pageTitle: "新增地址",
            id: 0,
            address: "",
            detail: "",
            gender: 1,
            isDefault: false,
            name: "",
            mobile: "",
        };
    },
    components: {
        AppLayout,
        WidgetTips,
        WidgetSwitch,
    },
    onLoad(e) {
        if (e.id) {
            this.pageTitle = "编辑地址";
            uni.setNavigationBarTitle({
                title: this.pageTitle,
            });
        }
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        save() {
            uni.navigateBack();
        },
        chooseLocation() {
            const t = this;
            uni.chooseLocation({
                success: ({ name, address, longitude, latitude }) => {
                    t.address = address;
                    t.detail = name;
                },
                fail: (error) => {},
            });
        },
    },
};
</script>

<style lang="less" scoped>
.tips-container {
    width: 710rpx;
    margin: 0 auto;
}
.input-item.default-address {
    justify-content: space-between;
    .title-box {
        width: 180rpx;
        flex-shrink: 0;
    }
    .input-box {
        width: auto;
    }
}
.input-box.map {
    .address-text {
        font-size: 28rpx;
        color: #c9c9c9;
        box-sizing: border-box;
        padding-right: 40rpx;
    }
    .address-text.active {
        color: #000000;
    }
    .iconfont {
        position: absolute;
        top: 25rpx;
        right: 0;
        font-size: 35rpx;
        color: #8194f2;
    }
}
</style>