<template>
  <el-form ref="ruleForm" :model="formData" class="demo-ruleForm" inline>
    <el-row>
      <el-col
        v-for="(formItems, index) in formObj"
        v-show="!formItems.notShow"
        :span="formItems.span"
        :key="index"
      >
        <el-form-item
          :label="null"
          :prop="formItems.prop"
          :rules="formItems.rules"
          label-width="80px"
        >

          <!-- 文件上传 -->
          <!-- 如果对象有值就回显，没有值就为空 -->
          <el-upload
            v-if="formobj.upload"
            :ref="formobj.prop"
            :accept="formobj.accept ? formobj.accept : 'PNG,JPEG'"
            :file-list="formData[formobj.prop] ? formData[formobj.prop] : []"
            :action="`${uploadUrl}${
              formobj.uploadObj.fileType ? formobj.uploadObj.fileType : ''
            }`"
            :limit="formobj.uploadObj.limit"
            :class="{
              hide:
                formobj.uploadObj.hideUpload ||
                formData[formobj.prop].length == formobj.uploadObj.limit,
            }"
            :on-preview="handlePictureCardPreview"
            :on-remove="
              (file, fileList) =>
                handleRemove(
                  file,
                  fileList,
                  formobj.uploadObj.limit,
                  formobj.prop,
                  index
                )
            "
            :on-success="
              (response, file, fileList) =>
                uploadSuccess(
                  response,
                  file,
                  fileList,
                  formobj.uploadObj.limit,
                  formobj.prop,
                  index
                )
            "
            list-type="picture-card"
            :auto-upload="true"
          >
            <i slot="default" class="el-icon-plus" />
          </el-upload>

          <el-dialog
            v-if="formobj.upload"
            :visible.sync="dialogVisible"
            :append-to-body="true"
            width="40%"
          >
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

          <!-- text展示 -->
          <span v-if="formobj.text" v-text="formData[formobj.prop]" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import FormItem from "./formItem.vue";
export default {
  components: {
    FormItem,
  },
  props: {
    formObj: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
    searchSelectOptionsCb: {
      type: Array,
    },
  },
  data() {
    return {
      uploadUrl: "",
      dialogImageUrl: "",
      searchSelectLoading: false,
      dialogVisible: false,
      disabled: false,
      searchShow: "", //高德地图input收索联想
      setSearchVal: [], //高德地图赋值搜索内容
    };
  },
  created() {},
  watch: {},
  methods: {
    //select变化调用
    selectChange(value, index, prop) {
      this.$emit("selectChange", value, index, prop);
    },
    // input的input事件
    inputINPUT(value, index, prop) {
      this.$emit("inputINPUT", value, index, prop);
    },
    // input的change事件
    inputChange(value, index, prop) {
      this.$emit("inputChange", value, index, prop);
    },
    // 搜索类型select搜索
    remoteMethod(query, index, prop) {
      if (query) {
        this.searchSelectLoading = true;
        this.$emit("querySelectValue", query, index, prop);
        setTimeout(() => {
          this.formObj[index].options = this.searchSelectOptionsCb;
          this.searchSelectLoading = false;
        }, 500);
      } else {
        this.searchSelectOptios = [];
      }
    },
    //switch变化
    formSwitchChange(val, index, prop) {
      this.$emit("formSwitchChange", val, index, prop);
    },
    //按钮点击事件
    buttonClick(prop, index) {
      this.$emit("buttonClick", prop, index);
    },

    //文件上传成功回调
    uploadSuccess(response, file, fileList, limit, prop, index) {
      this.formObj[index].uploadObj.hideUpload = fileList.length == limit; //文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      this.pushUpload(file, fileList, limit, prop);
    },
    //文件删除
    handleRemove(file, fileList, limit, prop, index) {
      this.formObj[index].uploadObj.hideUpload = fileList.length == limit; //文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      this.pushUpload(file, fileList, limit, prop);
    },
    // 文件预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //提交时验证表单，直接在父级调用
    submitForm() {
      let formValidate = Boolean;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          formValidate = true;
        } else {
          this.$message.warning("请把信息填写完整！");
          formValidate = false;
        }
      });
      return formValidate;
    },
    /* 清空表单
      逻辑：
      1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
      2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
     */
    resetForm(uploadArr) {
      this.$refs.ruleForm.resetFields();
      if (uploadArr) {
        for (let i = 0; i < uploadArr.length; i++) {
          this.$refs[uploadArr[i]][0].clearFiles();
          let index = this.formObj.findIndex(
            (item) => item.prop == uploadArr[i]
          );
          this.formObj[index].uploadObj.hideUpload = false;
        }
      }
    },
    // 单个字段验证
    validateFieldProp(prop) {
      let formValidate = Boolean;
      this.$refs.ruleForm.validateField(prop, (valid) => {
        if (!valid) {
          formValidate = true;
        } else {
          formValidate = false;
        }
      });
      return formValidate;
    },
    // 对文件上传，删除进行赋值，调用form验证
    pushUpload(file, fileList, limit, prop) {
      if (fileList.length > 0) {
        this.formData[prop] = fileList;
      } else {
        // 表示没有数据,把字段置空
        this.formData[prop] = "";
      }
      this.$refs.ruleForm.validateField(prop); //调用验证form表单的文件上传
    },
  },
};
</script>
 
<style lang="scss" scoped>
form {
  overflow: hidden;
}

::v-deep.el-input,
::v-deep.el-select,
::v-deep.el-date-editor.el-input {
  width: 208px;
}

::v-deep.el-input .el-input__inner {
  height: 24px;
  line-height: 24px;
}

::v-deep.el-date-editor .el-range-separator {
  width: 20px !important;
}
::v-deep.el-range-editor--small.el-input__inner {
  width: 400px;
}

.el-textarea {
  width: 400px;
}

.hide {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
.amap_div {
  overflow: hidden;
  height: 400px;
  width: 600px;
  position: relative;

  .sreach_ul {
    position: absolute;
    top: 1;
    background-color: white;
    z-index: 9;
    min-width: 210px;
    float: auto;
    height: 200px;
    overflow: auto;
    padding: 0 20px;
    line-height: 24px;
  }
}
</style>
