<template>
    <el-dialog title="修改收货地址" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
               :close-on-press-escape="false" width="40%">
        <el-form size="small" :model="addorder" ref="addorder">
           <el-form-item label="收货人" :label-width="formLabelWidth" prop="name" >
                <el-input  v-model="addorder.name" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                <el-input  v-model="addorder.phone" style="width:100"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" :label-width="formLabelWidth">
              <el-select v-model="addorder.province_id" placeholder="省" @change="initCity" style="width:32.8%">
                <el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList"
                  :key='index' ></el-option>
              </el-select>
              <el-select v-if="addorder.province_id" v-model="addorder.city_id" placeholder="市" @change="initRegion" style="width:32.8%">
                <el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[addorder.province_id]['city']"
                  :key='index1'></el-option>
              </el-select>
            <el-select v-if="addorder.city_id" v-model="addorder.region_id" placeholder="区" style="width:32.8%">
                <el-option :label="item2.name" :value="item2.id" v-for="(item2,index2) in areaList[addorder.province_id]['city'][addorder.city_id]['region']"
                  :key='index2' ></el-option>
              </el-select>
            </el-form-item>
           <el-form-item label="详细地址" :label-width="formLabelWidth" prop="detail">
                <el-input  v-model="addorder.detail"  style="width:100"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible">取 消</el-button>
            <el-button type="primary" @click="submitFunc()" :loading="loading">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import OrderApi from '@/api/order.js';
    export default {
        data() {
            return {
                order_id: 0,
                loading: false,
                areaList: [],
                /*左边长度*/
                formLabelWidth: '80px',
                /*是否显示*/
                dialogVisible: true,
                /*表单*/
                addorder: {
                    name: '',
                    phone: '',
                    detail: '',
                    province_id: '',
                    city_id: '',
                    region_id: '',
                }
            };
        },
        props: ['open_add'],
        created() {
            this.addorder.order_id = this.$route.query.order_id;
            this.getData();
        },
        methods: {
            // 获取数据
            getData(){
                let self = this;
                OrderApi.orderaddress({order_id: self.addorder.order_id}, true)
                .then(data => {
                    self.addorder = data.data.order;
                    self.areaList = data.data.regionData;
                    self.loading  = false;
                }).catch(error =>{
                    self.loading = false;
                });
            },
            /*确认事件*/
            submitFunc(e) {
                let self  = this;
                let addorder = this.addorder;
                self.$refs.addorder.validate((valid) =>
                {
                    if (valid) {
                        self.loading = true;
                        OrderApi.addressedit(addorder, true)
                        .then(data =>{
                            self.loading = false;
                            self.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            self.dialogFormVisible(true);
                        }).catch(error =>
                        {
                            self.loading = false;
                        });
                    }
                });
            },

            /*关闭弹窗*/
            dialogFormVisible() {
                this.$emit('close', {openDialog: false});
            },
            /*初始化城市id*/
            initCity() {
              this.addorder.city_id = '';
            },
            /*初始化区id*/
            initRegion() {
              this.addorder.region_id = '';
            },
        }
    };
</script>

<style></style>
