<template>
  <div class="basic-inner">
    <el-form label-position="left" label-width="80px">
      <el-form-item style="width: 350px" label="管理单位：">
        <el-input
          v-model="form.manageUnit"
          placeholder="请输入单位名称"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 350px" label="托管单位：">
        <el-input
          v-model="form.hostUnit"
          placeholder="请输入单位名称"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 350px" label="公司简介：">
        <el-input v-model="form.profile" placeholder=""></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="联 系 人：">
        <el-input v-model="form.contact_person" placeholder=""></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="联系方式：">
        <el-input v-model="form.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 class="reset-btn">重置</el-button>
      <el-button class="confirm-btn">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      item: {
        imageUrl: "",
      },
      allImageUrl: [],
      hostUnit: "",
      profile: "",
      contact_person: "",
      contact_num: "",
      hostUnit: "",
      form: {
        manageUnit: "",
        hostUnit: "",
        profile: "",
        contact_person: "",
        contact_num: "",
      },
      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>
.basic-inner {
  width: 100%;
  height: 100%;
  .el-form {
    width: 90%;
    height: calc(100% - 80px);
    margin: 0 auto;
    .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;
    }
  }

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

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

  .bottom {
    width: 20%;
    margin: 0 auto;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .reset-btn,
    .confirm-btn {
      color: #fff;
      height: 40px;
      width: 100px;
      border-radius: 5px;
    }
    .reset-btn {
      background: #b3b3b3;
    }
    .confirm-btn {
      background: #2ea8e6;
    }
  }
}
</style>
