<template>
    <el-dialog title="客户服务地址修改" :visible.sync="dislogFormVisible" width="900px" :close-on-click-modal="false" center
        :modal="false">
        <el-form ref="updateAddressForm" :model="updateAddressForm" :rules="updateAddressFormRules" status-icon
            label-position="center" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="预约人" prop="consignee">
                        <el-input v-model="updateAddressForm.consignee" clearable placeholder="请输入预约联系人" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预约电话" prop="mobile">
                        <el-input v-model="updateAddressForm.mobile" clearable placeholder="请输入预约联系人的电话" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="服务地址" prop="addressDetail" style="margin-bottom: 2px">
                <el-input v-model="updateAddressForm.addressDetail" clearable placeholder="请输入客户详细服务地址" />
            </el-form-item>
            <div style="text-align: right;">
                <el-button type="primary" size="mini" @click="btnSearchClick">查询地址</el-button>
            </div>
            <el-form-item prop="cancelBookOrderDetail" style="margin-top: -20px;margin-right: 200px">
                <div>是否取消已预约未服务工单</div>
                <el-radio-group v-model="updateAddressForm.cancelBookOrderDetail">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <div id="container" style=" height: 500px; width: 100%;"></div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dislogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </div>
    </el-dialog>
</template> 


<script>
import { getLngLat, getAddressByLnglat } from "@/api/address";
import { updateOrderAddressV2 } from "@/api/order";
export default {
    name: 'addressSelectRef',
    data() {
        return {
            dislogFormVisible: false,
            map: "",
            marker: '',
            updateAddressForm: {
                consignee: '',
                mobile: '',
                addressDetail: '',
                cancelBookOrderDetail: 0,
                location: '',//经纬度
                orderId: '',
            },
            updateAddressFormRules: {
                consignee: [
                    { required: true, message: "请输入客户名称", trigger: "blur" },
                ],
                mobile: [
                    { required: true, message: "请输入客户电话", trigger: "blur" },
                ],
                area: [{ required: true, message: "请选择省市区", trigger: "change" }],
                addressDetail: [
                    { required: true, message: "请输入客户地址", trigger: "blur" },
                ],
                cancelBookOrderDetail: [
                    {
                        required: true,
                        message: "是否取消已预约未服务工单",
                        trigger: "blur",
                    },
                ]
            }
        }
    },
    mounted() {
    },
    methods: {
        btnSearchClick() {
            if (!this.updateAddressForm.addressDetail || this.updateAddressForm.addressDetail == '' || this.updateAddressForm.addressDetail.length < 12) {
                this.$notify.warning({
                    title: "提醒",
                    message: "请输入客户详细地址",
                });
                return;
            }
            getLngLat({ address: this.updateAddressForm.addressDetail }).then(res => {
                if (res.data.errno == 0) { 
                    this.updateAddressForm.location = res.data.data;
                    this.makeMarker();
                }
                else
                    this.$notify.warning({
                        title: "提醒",
                        message: res.data.errmsg,
                    });
            })
        },
        init(orderId, mobile, consignee, addressDetail, location) {
            this.dislogFormVisible = true;
            this.updateAddressForm = {
                mobile: mobile,
                consignee: consignee,
                addressDetail: addressDetail,
                cancelBookOrderDetail: 0,
                location: location,
                orderId: orderId
            }
            console.info(this.updateAddressForm)
            if (this.marker != '')
                this.marker.setMap(null);
            setTimeout(() => {
                this.initMap();
                this.makeMarker('init');
            }, 1000);
        },
        submit() {
            this.$refs["updateAddressForm"].validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: "提交中...",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.5)",
                    });
                    console.info(this.updateAddressForm.location)
                    updateOrderAddressV2({
                        addressDto: {
                            addressDetail: this.updateAddressForm.addressDetail,
                            name: this.updateAddressForm.consignee,
                            tel: this.updateAddressForm.mobile,
                            lng: this.updateAddressForm.location[0],
                            lat: this.updateAddressForm.location[1]
                        },
                        orderId: this.updateAddressForm.orderId,
                        cancelBookOrderDetail: this.updateAddressForm.cancelBookOrderDetail,
                    })
                        .then((response) => {
                            loading.close();
                            this.dislogFormVisible = false;
                            this.$notify.success({
                                title: "成功",
                                message: "修改成功,请刷新查看",
                            });
                        })
                        .catch((response) => {
                            loading.close();
                            this.$notify.error({
                                title: "修改失败",
                                message: response.data.errmsg,
                            });
                        });
                    // });
                }
            });
        },
        initMap() {
            if (this.map) return;
            let that = this;
            this.map = new AMap.Map("container", {
                resizeEnable: true
            });
            this.map.setDefaultCursor("pointer");
            this.map.on('click', function (e) {
                that.updateAddressForm.location = [];
                that.updateAddressForm.location.push(e.lnglat.getLng())
                that.updateAddressForm.location.push(e.lnglat.getLat())
                console.info(that.updateAddressForm.location)
                that.makeMarker('');
            });
        },
        makeMarker(type) {
            console.info('makeMarker')
            if (this.updateAddressForm.location == '' || this.updateAddressForm.location.length == 0) return;
            if (this.marker == '') {
                this.marker = new AMap.Marker({
                    icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
                    position: this.updateAddressForm.location,
                    offset: new AMap.Pixel(-15, -15),
                    map: this.map
                });
                this.marker.setLabel({
                    offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
                    content: "<div class='info'>" + this.updateAddressForm.addressDetail + "</div>", //设置文本标注内容
                    direction: 'right' //设置文本标注方位
                });
            }
            else {
                this.marker.setMap(this.map);
                this.marker.setPosition(this.updateAddressForm.location);
                this.marker.setLabel({
                    offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
                    content: "<div class='info'>" + this.updateAddressForm.addressDetail + "</div>", //设置文本标注内容
                    direction: 'right' //设置文本标注方位
                });
            }

            this.map.setCenter(this.updateAddressForm.location);
            if (type && type == "init")
                this.map.setZoom(15);
        }
    }
}
</script>

<style>
.marker {
    position: absolute;
    top: -20px;
    right: -118px;
    color: #fff;
    padding: 4px 10px;
    box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
    white-space: nowrap;
    font-size: 12px;
    font-family: "";
    background-color: #25A5F7;
    border-radius: 3px;
}

.dialog-footer {
    text-align: right;
}

.amap-icon img,
.amap-marker-content img {
    width: 25px;
    height: 34px;
}

.marker {
    position: absolute;
    top: -20px;
    right: -118px;
    color: #fff;
    padding: 4px 10px;
    box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
    white-space: nowrap;
    font-size: 12px;
    font-family: "";
    background-color: #25A5F7;
    border-radius: 3px;
}
</style>
