<template>
    <el-dialog title="新增地址" center :visible.sync="show" width="30%" @close="closeDialog">
        <div class="content">
            <el-form :label-position="labelPosition" label-width="107px" :model="sizeForm" ref="form" :rules="rules">
                <el-form-item label="收货人" prop="name">
                    <el-input style="width: 300px" v-model="sizeForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input style="width: 300px" v-model="sizeForm.phone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="region">
                    <el-input style="width: 300px" v-model="sizeForm.region" placeholder="请选择"></el-input>
                </el-form-item>
                <el-form-item class="block" prop="address" label="详细地址">
                    <el-input
                        class="textarea"
                        type="textarea"
                        style="width: 300px"
                        v-model="sizeForm.address"
                        maxlength="200"
                        show-word-limit
                        :autosize="{ minRows: 6, maxRow: 5 }"
                        placeholder="请填写对接描述，不超过200字"
                        resize="none"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="btn1">
                <div class="btn">
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                    <div class="btn2" @click="show = false">返回</div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import pageableTable from '../mixins/pageableTable';
export default {
    mixins: [pageableTable],
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            labelPosition: 'right',
            sizeForm: {},
            rules: {
                name: { required: true, message: '请输入', trigger: 'blur' },
                address: { required: true, message: '请输入', trigger: 'blur' },
                phone: { required: true, message: '请输入', trigger: 'blur' },
                region: { required: true, message: '请选择', trigger: 'blur' }
            },
            url: '/userAddress/all'
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        closeDialog() {
            this.$emit('close', this.selectedTabsPage);
        },
        onSubmit() {},
        init(row) {
            console.log(row);
            if (row.id) {
                this.sizeForm = row;
            }
        }
    }
};
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    width: 680px !important;
    height: 534px !important;
    background: #ffffff;
    border-radius: 8px;
    // border-bottom: 0px -1px 0px 0px red;
    .el-dialog__title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        // box-shadow: 0px -1px 0px 0px red;
    }
    .el-dialog__header {
    }
}
/deep/ .el-form-item__error {
    margin-left: 74px !important;
}
.content {
    .btn1 {
        margin-left: 10px;
        .btn {
            display: flex;
            justify-content: center;
            margin-top: 60px;
            .btn2 {
                width: 130px;
                height: 36px;
                background: #c4c7cc;
                border-radius: 4px;
                cursor: pointer;
                color: #ffffff;
                font-size: 13px;
                text-align: center;
                line-height: 38px;
                margin-left: 20px;
            }
        }
    }
    /deep/ .el-button {
        width: 130px;
        height: 36px;
        background: linear-gradient(133deg, @prim 0%, @warn 100%);
        border-radius: 4px;
        line-height: 6px;
        border: 0;
    }
    /deep/ .el-form-item__label {
        margin-left: 75px;
        font-weight: 400;
    }
}
</style>
