<!--
 * @Author: your name
 * @Description: 该组件，为表单组件。
 *  关联js：@/utils/formDatas.js
 *  使用到该组件的地方：
 *  在@/views/webSiteManagement/bannerSetting/index.vue中使用 轮播图设置
 *  在@/views/webSiteManagement/satelliteIntroduction/index.vue中使用 卫星介绍
 *  在@/views/webSiteManagement/imageLibrary/index.vue中使用 影像图库
-->
<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"></custom-input><!-- @input="getCustomInput" @reset="resetParams"-->
      </div>

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

      <!-- 输入框 -->
      <div v-else>
        <el-input :class="customClass" 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: {
    customClass: {
      type: String,
      default: ""
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      content: ""
    }
  },
  // watch: {
  //   formData: {
  //     handler(newVal, oldVal) {
  //       console.log(22, newVal, oldVal)
  //       this.getForm = newVal
  //       // this.$set(this, 'getForm', newVal)
  //     }
  //   },
  //   deep: true
  // },
  computed: {
    getForm() {
      this.$nextTick(() => this.$refs.ruleForm.resetFields())
      return this.formData
    }
  },
  methods: {
    onContentChange (val) {
      this.getForm.formVal.content = 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
      // console.log(index, val)
      formVal[index] = val
      // this.$set(this.getForm.formVal, index, val)
    },
    //获取自定义组件值
    getCustomInput(val) {
      let formVal = this.getForm.formVal
      formVal.jumpType = val.jumpType;

      if (val.jumpType == 1) {
        formVal.url = val.value
      } else {
        formVal.jumpId = val.value
      }

    },
    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;
      // console.log('自定义input', 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 && this.$refs.customInput[0].showErr('')
      return true
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$emit('reset')
    }
  }
}
</script>

<style>
.half-width {
  width: 50%;
}
</style>
