@extends('layouts.base')

@section('content')
    <div class="w1200 m0a">
        <!-- 新增加右侧顶部三级菜单 -->
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">地址名称修改</a></li>
            </ul>
        </div>
        <div id="app">
            <div class="panel panel-default">
                <div class="panel panel-body">
                    <el-form :model="form_data" :rules="rules" ref="form_data" label-width="20%">
                        <el-form-item label="修改地址级别" prop="level">
                            <div>
                                <el-radio-group v-model="form_data.level" prop="level">
                                    <el-radio-button label="3">区级</el-radio-button>
                                    <el-radio-button label="4">街道级</el-radio-button>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="选择修改地址" v-loading="all_loading">
                            <el-select v-model="address.province" filterable placeholder="请选择省" clearable style="width:20%"
                                       @change="changeProvince()" value-key="id">
                                <el-option v-for="item in province_list" :key="item.id" :label="item.areaname"
                                           :value="item"></el-option>
                            </el-select>
                            <el-select v-model="address.city" filterable placeholder="请选择市" clearable style="width:20%"
                                       value-key="id" @change="changeCity()">
                                <el-option v-for="item in city_list" :key="item.id" :label="item.areaname"
                                           :value="item"></el-option>
                            </el-select>
                            <el-select v-model="address.district" filterable placeholder="请选择区" clearable style="width:20%"
                                       value-key="id" @change="changeDistrict()">
                                <el-option v-for="item in district_list" :key="item.id" :label="item.areaname"
                                           :value="item"></el-option>
                            </el-select>
                            <el-select v-if="form_data.level == 4" v-model="address.street" placeholder="请选择街道"
                                       clearable style="width:20%" value-key="id">
                                <el-option v-for="item in street_list" :key="item.id" :label="item.areaname"
                                           :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="修改名称" prop="name">
                            <el-input style="width: 50%" v-model="form_data.name"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="success" round @click="submitForm('form_data')">提交</el-button>
                            <el-button round @click="backtrack()">返回</el-button>
                            <el-button type="danger" round @click="submitDeleteForm('form_data')">删除</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    all_loading: false,
                    province_list: [],//省
                    city_list: [],//市
                    district_list: [],//区域
                    street_list: [],//街道
                    address: {
                        city: "",
                        city_id: 0,
                        district: "",
                        district_id: 0,
                        province: "",
                        province_id: 0,
                        street: "",
                        street_id: 0,
                    },

                    form_data: {
                        name: '',
                        level: 3,
                        parent_address: {},

                    },

                    rules: {
                        name: [
                            {required: true, message: '请输入地址名称', trigger: 'blur'},
                            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                        ],
                        level: [
                            {required: true, message: '请选择地址修改级别', trigger: 'blur'},
                        ],
                    },
                }
            },
            created() {
                this.getProvince();
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.validateAddress()) {
                                this.confirm();
                            }
                        } else {
                            return false;
                        }
                    });
                },
                submitDeleteForm(formName) {
                    if (this.form_data.level !== 3 && this.form_data.level !== 4 && this.form_data.level !== '3' && this.form_data.level !== '4') {
                        console.log(this.form_data.level);
                        this.$message.warning('请选择地址修改级别123');
                        return false;
                    } else {
                        if (this.validateAddress()) {
                            this.deleteConfirm();
                        }
                    }
                },
                deleteConfirm() {
                    this.$confirm('删除地址会对收银台、区域分红、订单地址、供应商、自提点、商品配送模板、租赁等功能造成影响，删除区级地址会连带删除下属街道，请确认已经对相应数据做好处理，是否删除？', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '删除',
                        type: 'warning'
                    }).then(() => {
                        this.$message({type: 'success', message: '删除中,成功则跳转...'});
                        this.deleteAddress();
                    }).catch(() => {
                        this.$message({type: 'info', message: '取消提交'});
                    });
                },
                confirm() {
                    this.$confirm('地址是无法删除的确认修改吗？', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        this.$message({type: 'success', message: '修改中,成功则跳转...'});
                        this.createAddress();
                    }).catch(() => {
                        this.$message({type: 'info', message: '取消提交'});
                    });
                },
                validateAddress() {
                    if (this.address.province.id) {
                        this.form_data.parent_address.province = this.address.province;
                    } else {
                        this.$message.warning('请选择地址的省级');
                        return false;
                    }
                    if (this.address.city.id) {
                        this.form_data.parent_address.city = this.address.city;
                    } else {
                        this.$message.warning('请选择地址的市级');
                        return false;
                    }
                    if (this.address.district.id) {
                        this.form_data.parent_address.district = this.address.district;
                    } else {
                        this.$message.warning('请选择地址的区级');
                        return false;
                    }
                    if (this.address.street.id) {
                        this.form_data.parent_address.street = this.address.street;
                    } else {
                        if (this.form_data.level == 4) {
                            this.$message.warning('请选择地址的街道级');
                            return false;
                        }
                    }

                    return true;
                },
                deleteAddress() {
                    var that = this;
                    console.log(that.form_data);
                    that.$http.post("{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.delete') !!}", {address: that.form_data}).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            that.backtrack();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    }), function (res) {
                        console.log(res);
                        that.$message.error(response.data.msg);
                    };
                },
                createAddress() {
                    var that = this;
                    console.log(that.form_data);
                    that.$http.post("{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.edit') !!}", {address: that.form_data}).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            that.backtrack();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    }), function (res) {
                        console.log(res);
                        that.$message.error(response.data.msg);
                    };
                },
                backtrack() {
                    window.location.href = '{!! yzWebFullUrl('plugin.address-mgmt.admin.manage.index') !!}';
                },
                // 获取省份信息
                getProvince() {
                    var that = this;
                    that.all_loading = true;
                    that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'province']) !!}",).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            this.province_list = response.data.data;
                        } else {
                            that.$message.error(response.data);
                            that.all_loading = false;
                        }
                        that.all_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.all_loading = false;
                    };
                },

                // 省份改变
                changeProvince(parentid) {
                    var that = this;
                    if (!parentid) {
                        parentid = that.address.province.id;
                        that.address.city_id = 0;
                        that.address.city = '';
                        that.address.district_id = 0;
                        that.address.district = '';
                        that.address.street_id = 0;
                        that.address.street = '';
                    }
                    that.all_loading = true;
                    that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'city','parentid' => '']) !!}" + parentid).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            this.city_list = response.data.data;
                        } else {
                            // that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.all_loading = false;
                    };
                },
                // 城市改变
                changeCity(parentid) {
                    var that = this;
                    if (!parentid) {
                        parentid = that.address.city.id;
                        that.address.district_id = 0;
                        that.address.district = '';
                        that.address.street_id = 0;
                        that.address.street = '';
                    }
                    that.all_loading = true;
                    that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'district','parentid' => '']) !!}" + parentid).then(response => {
                        if (response.data.result == 1) {
                            that.district_list = response.data.data;
                        } else {
                            //that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }),
                        function (res) {
                            console.log(res);
                            that.all_loading = false;
                        };
                },
                // 区域改变
                changeDistrict(parentid) {
                    var that = this;
                    if (this.form_data.level == 4) {
                        if (!parentid) {
                            parentid = that.address.district.id;
                            that.address.street_id = 0;
                            that.address.street = '';
                        }
                        that.all_loading = true;
                        that.$http.get("{!! yzWebFullUrl('plugin.address-mgmt.admin.select.get-address',['type' => 'street','parentid' => '']) !!}" + parentid).then(response => {
                            if (response.data.result == 1) {
                                that.street_list = response.data.data;
                            } else {
                                // that.$message.error(response.data);
                            }
                            that.all_loading = false;
                        }), function (res) {
                            console.log(res);
                            that.all_loading = false;
                        };
                    }
                },
            },
        })

    </script>
@endsection('content')