<template>
  <el-form
    ref="ruleForm"
    size="small"
    label-position="right"
    :model="getForm.formVal"
    :rules="getForm.rules"
    label-width="100px"
    class="demo-ruleForm">
    <el-form-item v-for="(item, index) in getForm.formItem" :key="index" :label="item.label" :prop="index">
      <!-- 上传文件 -->
      <div v-if="item.type && item.type == 'file'">
        <my-upload :value="getForm.formVal[index]" @input="(val) => getSrc(index, val)"></my-upload>
      </div>
      <!-- 单选组 -->
      <div v-else-if="item.type && item.type == 'radio'">
        <el-radio-group v-model="getForm.formVal[index]">
          <el-radio v-for="(item, index) in item.radioArr" :key="~~index" :label="~~index">{{item}}</el-radio>
        </el-radio-group>
      </div>
      <!-- 自定义 -->
      <div v-else-if="item.type && item.type == 'custom'">
        <custom-input ref="customInput" :value="getForm.formVal" @input="getCustomInput" @reset="resetParams"></custom-input>
      </div>

      <div v-else-if="item.type && item.type == 'kindEditor'">
        <kind-editor id="editor_id" :content.sync="content" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
      </div>

      <!-- 输入框 -->
      <div v-else>
        <el-input v-model="getForm.formVal[index]" :placeholder="item.placeholder || `请输入${item.label}`"></el-input>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">确定</el-button>
      <el-button type="info" @click="resetForm()">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import MyUpload from "@/components/Upload/singleImageX"//上传组件
import CustomInput from "@/components/CustomInput"//自定义组件
import KindEditor from "@/components/Kindeditor";

export default {
  name: "CustomForm",
  components: {
    MyUpload,
    CustomInput,
    KindEditor
  },
  props: {
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      content: ""
    }
  },
  computed: {
    getForm() {
      this.$nextTick(() => this.$refs.ruleForm.resetFields())
      return this.formData
    }
  },
  methods: {
    onContentChange (val) {
      console.log(val)
    },
    afterChange () {

    },
    resetParams(val) {
      this.getForm.formVal.jumpType = val;
      this.getForm.formVal.url = '';
      this.getForm.formVal.jumpId = null;
    },
    //获取图片链接
    getSrc(index, val) {
      let formVal = this.getForm.formVal
      formVal[index] = val
    },
    //获取自定义组件值
    getCustomInput(val) {
      let formVal = this.getForm.formVal
      formVal.url = val
    },
    submitForm() {
      let _this = this;
      this.$refs.ruleForm.validate((valid) => {
        let a = _this.checkCustom()
        if (valid && a) {
          this.$emit('submitFunc', this.getForm.formVal)
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    //校验自定义input
    checkCustom() {
      let form = this.getForm.formVal;

      if (form.jumpType === 1 && form.url == '') {
        this.$refs.customInput[0].showErr('请输入链接地址')
        return false
      } else if ((form.jumpType !== 0 && form.jumpType !== 1) && (form.jumpId === null || form.jumpId === '')) {
        this.$refs.customInput[0].showErr('请选择')
        return false
      }
      this.$refs.customInput[0].showErr('')
      return true
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$emit('reset')
    }
  }
}
</script>

<style>

</style>
