<template>
    <div class="page" :class="{ page_red: theme === 1 }">
        <div class="my-address icon-box">
            <span>地址：</span>
            <input
                class="my-address__input"
                type="text"
                :disabled="true"
                @click="mapClick"
                v-model="form.regionInfo"
                placeholder="地址"
            />
            <img
                class="icon"
                @click="mapClick"
                src="/static/icon/address.png"
                alt=""
            />
        </div>

        <div class="my-address">
            <span>门牌号：</span>
            <input
                class="my-address__input"
                type="text"
                v-model="form.address"
                placeholder="详细地址：例1层101室"
            />
        </div>

        <div class="my-address">
            <span>联系人：</span>
            <input
                class="my-address__input"
                type="text"
                v-model="form.name"
                placeholder="姓名"
            />
            <!-- <img class="icon" src="/static/icon/contacts.png" alt="" /> -->
        </div>
        <div class="my-address">
            <span>手机号：</span>
            <input
                class="my-address__input"
                type="text"
                v-model="form.mobile"
                placeholder="11位手机号"
            />
        </div>
        <!-- <div class="my-address">
            <span>默认地址：</span>
            <switch :checked="form.isDefault" @change="switchChange" />
        </div> -->
        <button class="add-btn" @click="submit">保存</button>
        <button class="add-btn remove-btn" @click="remove" v-if="dataId">
            删除
        </button>
    </div>
</template>

<script>
export default {
    name: "",
    components: {},
    // 数据
    data() {
        return {
            dataId: "",
            area: [],
            oldData: {},
            userLocation: false, // 用户定位权限
            form: {
                name: "",
                mobile: "",
                address: "",
                isDefault: false,
                province: "",
                city: "",
                county: "",
                regionInfo: "",
                latitude: "", // 纬度
                longitude: "", // 经度
                zipCode: "",
            },
            isOrder: false,
        };
    },

    onLoad(opts) {
        if (opts.id) {
            this.fn.setTitle("编辑地址");
            this.dataId = opts.id;
            this.oldData = this.$store.state.common.addressData;
            this.form.name = this.oldData.name;
            this.form.mobile = this.oldData.mobile;
            this.form.address = this.oldData.address;
            this.form.isDefault = this.oldData.isDefault;
            this.form.province = this.oldData.province;
            this.form.city = this.oldData.city;
            this.form.county = this.oldData.county;
            if (this.oldData.regionInfo) {
                this.form.regionInfo = this.oldData.regionInfo;
            } else {
                this.form.regionInfo =
                    this.oldData.province +
                    this.oldData.city +
                    this.oldData.county;
            }
            this.form.latitude = this.oldData.latitude;
            this.form.longitude = this.oldData.longitude;
            this.$store.commit("common/update", {
                addressData: null,
            });
        }
    },
    onShow() {
        let self = this;

        if (this.$mp.query.isOrder == "1") {
            this.isOrder = true;
        } else {
            this.isOrder = false;
        }
    },

    // 函数
    methods: {
        mapClick() {
            let self = this;
            // 判断定位权限
            uni.getSetting({
                success: function (res) {
                    console.log(res, "1234");
                    if (res.authSetting["scope.userLocation"] === false) {
                        self.fn
                            .showModal({
                                content: "请授权位置信息后使用",
                                showCancel: false,
                            })
                            .then((res) => {
                                uni.openSetting({});
                            });
                    } else {
                        self.userLocation = true;
                        self.chooseLocation();
                    }
                },
            });
        },

        chooseLocation() {
            let self = this;
            uni.chooseLocation({
                type: "gcj02", //返回可以用于uni.openLocation的经纬度
                success: function (res) {
                    self.form.province = "";
                    self.form.city = "";
                    self.form.county = "";
                    res.name = res.name.replace("(", "");
                    res.name = res.name.replace(")", "");
                    self.form.regionInfo = res.address + res.name;

                    // self.form.address = ;
                    self.form.latitude = Number(res.latitude.toFixed(6));
                    self.form.longitude = Number(res.longitude.toFixed(6));

                    console.log("定位ok", res, self.form.regionInfo);
                },
                fail(e) {
                    console.log("定位no", e);
                },
            });
        },

        areaChange(e) {
            let areaArr = e.detail.value;
            let str = areaArr.join("");
            this.form.province = areaArr[0];
            this.form.city = areaArr[1];
            this.form.county = areaArr[2];
            this.form.regionInfo = str;
        },

        switchChange(e) {
            this.form.isDefault = e.detail.value;
        },

        submit() {
            if (!this.form.regionInfo) {
                return this.fn.showToast("请选择地址");
            }
            if (!this.form.address) {
                return this.fn.showToast("请输入门牌号");
            }
            if (!this.form.name) {
                return this.fn.showToast("请输入收货人");
            }
            if (!this.form.mobile) {
                return this.fn.showToast("请输入手机号");
            }
            let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
            if (!reg.test(this.form.mobile)) {
                return this.fn.showToast("请填写正确的手机号");
            }
            if (this.dataId) {
                // 编辑
                this.form.id = this.dataId;
                let data = {
                    ...this.oldData,
                    ...this.form,
                };
                this.api.post("/Address/Edit", data).then((res) => {
                    if (res.success) {
                        this.fn.showToast("保存成功");
                        if (this.isOrder) {
                            data.id = res.data;
                            this.$store.commit("common/update", {
                                addressData: data,
                            });
                        }
                        this.router.back();
                    } else {
                        this.fn.showModal({
                            title: "保存失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
            } else {
                // 新增
                this.api.post("/Address/Add", this.form).then((res) => {
                    if (res.success) {
                        this.fn.showToast("保存成功");
                        if (this.isOrder) {
                            this.form.id = res.data;
                            this.$store.commit("common/update", {
                                addressData: this.form,
                            });
                        }
                        this.router.back();
                    } else {
                        this.fn.showModal({
                            title: "保存失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
            }
        },

        remove() {
            this.api
                .delete("/Address/Remove", {
                    id: this.dataId,
                    query: true,
                })
                .then((res) => {
                    if (res.success) {
                        this.fn.showToast("删除成功");
                        this.router.back();
                    } else {
                        this.fn.showModal({
                            title: "删除失败",
                            content: res.message,
                            showCancel: false,
                        });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.my-address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px(40);
    background-color: #fff;
    padding: px(40) px(45);
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    position: relative;
    &.icon-box {
        padding-right: px(100);
    }
    span {
        width: px(200);
        flex-shrink: 0;
    }
    input {
        width: 100%;
    }
    & ~ .my-address {
        border-top: none;
    }
    .icon {
        width: px(60);
        height: px(60);
        position: absolute;
        right: px(30);
        top: 50%;
        transform: translate(0, -50%);
        z-index: 100;
    }
    &__picker {
        display: block;
        width: 100%;
    }
}
.add-btn {
    display: block;
    margin: px(60) px(60) 0;
    height: px(110);
    line-height: px(110);
    border-radius: px(55);
    background-color: #27a34f;
    border: 1px solid #27a34f;
    color: #fff;
    font-size: px(44);
    padding: 0;
}

.remove-btn {
    background-color: #fff;
    color: #666;
    border: 1px solid #f1f1f1;
    margin-top: px(40);
}

.page_red {
    .add-btn {
        background-color: #27a34f;
        border: 1px solid #27a34f;
    }
    .remove-btn {
        background-color: #fff;
        color: #666;
        border: 1px solid #f1f1f1;
        margin-top: px(40);
    }
}
button::after {
    display: none;
}
</style>