<template>
    <div class="content">
        <el-form :model="form" label-position="left" label-width="80px">
            <el-form-item style="width: 350px;" :model="form.manageUnit" label="管理单位：">
                <el-input v-model="manageUnit" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="width: 350px;" :model="form.hostUnit" label="托管单位：">
                <el-input v-model="hostUnit" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="width: 350px;" :model="form.profile" label="公司简介：">
                <el-input v-model="profile" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="width: 500px;" :model="form.contact_person" label="联 系 人：">
                <el-input v-model="contact_person" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="width: 500px;" :model="form.contact_num" label="联系方式：">
                <el-input v-model="contact_num"></el-input>
            </el-form-item>
            <el-form-item style="width: 500px;" :model="form.imageUpload" label="上传图片：">
                <el-upload action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="item.imageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div class="bottom">
            <el-button>重置</el-button>
            <el-button>提交</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible:false,
            item:{
                imageUrl:'',
            },
            allImageUrl:[],
            hostUnit: '',
            profile: '',
            contact_person: '',
            contact_num: '',
            hostUnit: '',
            form: {

            },
            action: ''//上传地址
        }
    },

    methods: {
        handleRemove(file, fileList) {
            let removeUrl = file.respone.data.url;
            this.allImageUrl = this.allImageUrl.filter(item => item != removeUrl);
        },
        handlePictureCardPreview(file) {
            this.item.imageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style lang="less" scoped>
.el-form {
    margin-left: 100px;

    .el-form-item {
        padding-top: 20px;
        margin-inline: 20px;
        margin-bottom: 0;
    }

    /deep/.el-form-item__label {
        padding: 0;
    }

    /deep/.el-form-item__content {
        display: flex;
    }
}

.el-button--text {
    position: absolute;
    top: 70px;
    right: 20px;
}

.el-button {
    height: 30px;
    width: 100px;
    margin-top: 20px;
    margin-inline: 40px;
    padding: 5px;
}

/deep/.el-upload--picture-card {
    width: 70px;
    height: 70px;
    border: 1px solid #c0ccda;
}

/deep/.el-upload--picture-card i {
    display: flex;
    padding: 20px;
}

.bottom {
    position: absolute;
    left: 700px;
    top: 700px;
}
</style>