<template>
    <app-layout :title="pageTitle">
        <view class="tips-container">
            <widget-tips text="个人信息仅用于发布需求，隐私信息完全保密" textColor="#ffa800" />
        </view>
        <view class="common-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="placeholder-style-3"
                    />
                </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="placeholder-style-3" />
                </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="placeholder-style-3" />
                </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="common-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: "",
            longitude: 0,
            latitude: 0,
        };
    },
    components: {
        AppLayout,
        WidgetTips,
        WidgetSwitch,
    },
    onLoad(e) {
        if (e.id) {
            this.pageTitle = "编辑地址";
            uni.setNavigationBarTitle({
                title: this.pageTitle,
            });
            this.id = e.id;
            this.setAddressData();
        }
        if (e.addr) {
            let platformAddress = JSON.parse(decodeURIComponent(e.addr));
            this.address = platformAddress.address;
            this.detail = platformAddress.detail;
            this.name = platformAddress.name;
            this.mobile = platformAddress.mobile;
        }
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        save() {
            this.$request({
                api: "user.address.edit",
                data: {
                    id: this.id,
                    address: this.address,
                    doorplate: this.detail,
                    name: this.name,
                    mobil: this.mobile,
                    sex: this.gender == 1 ? "男" : "女",
                    default: this.isDefault ? 1 : 0,
                    lat: this.latitude,
                    lng: this.longitude,
                },
            }).then((response) => {
                if (response.code == 1) {
                    return this.$utils.toPage("", {}, "back");
                }
                this.$utils.toast(response.msg);
            });
        },
        setAddressData() {
            this.$request({
                api: "user.address.detail",
                data: {
                    id: this.id,
                },
            }).then((response) => {
                this.address = response.data.address;
                this.detail = response.data.doorplate;
                this.name = response.data.name;
                this.mobile = response.data.mobil;
                this.gender = response.data.sex == "男" ? 1 : 2;
                this.isDefault = response.data.default == 1;
                this.latitude = response.data.lat;
                this.longitude = response.data.lng;
            });
        },
        chooseLocation() {
            const t = this;
            uni.chooseLocation({
                success: ({ name, address, longitude, latitude }) => {
                    t.address = address;
                    t.detail = name;
                    t.longitude = longitude;
                    t.latitude = latitude;
                },
                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>