<template>
  <el-form
    id="DgForm"
    ref="sonFormData"
    v-bind="$attrs"
    class="dg-form"
    :inline="inline"
    :model="sonFormData"
    :rules="rules"
    :label-width="labelWidth"
    :label-position="labelPosition"
    @submit.native.prevent
  >
    <el-form-item v-if="resetForm">
      <el-button style="float: right" @click="handleResetForm('sonFormData')">重置</el-button>
    </el-form-item>
    <template v-for="(item, index) in formItems">
      <!-- 自定义内容 -->
      <div v-if="item.editer === 'text'" :key="index" :style="item.style" v-html="item.content"></div>
      <!-- 表单自定义内容 -->
      <el-form-item
        v-if="item.editer === 'formText'"
        :key="index + item.value"
        class="textInput"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <template v-if="item.explain" slot="label"
          >{{ item.label }}
          <dg-tooltip
            :effect="item.explain.dark"
            :api-code="item.explain.apiCode"
            :primary-key="item.explain.primaryKey"
            :content="item.explain.content"
            :placement="item.explain.placement"
          >
            <i class="el-icon-question"></i>
          </dg-tooltip>
        </template>
        <div :key="index" :style="item.style" :title="item.content || sonFormData[item.value]">
          {{ item.content || sonFormData[item.value] }}
        </div>
      </el-form-item>
      <!-- 基本输入框 -->
      <el-form-item
        v-if="item.editer === 'input' && !item.autoShow"
        :key="index + item.value"
        class="textInput"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <template v-if="item.explain" slot="label"
          >{{ item.label }}
          <dg-tooltip
            :effect="item.explain.dark"
            :api-code="item.explain.apiCode"
            :primary-key="item.explain.primaryKey"
            :content="item.explain.content"
            :placement="item.explain.placement"
          >
            <i class="el-icon-question"></i>
          </dg-tooltip>
        </template>
        <!-- 判断类型为password密码框禁止复制粘贴剪切，需优化！！！将两个el-input合为一个 -->
        <el-input
          v-if="item.type === 'password'"
          :ref="item.ref"
          v-model="sonFormData[item.value]"
          v-cleaveEl="item.cleave || { notCleave: true }"
          :type="item.type"
          :size="item.size || 'mini'"
          :maxlength="item.maxlength"
          :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
          :prefix-icon="item.prefixIcon"
          :suffix-icon="item.suffixIcon"
          :style="item.style"
          :readonly="item.readonly"
          :placeholder="item.placeholder || (item.disabled ? '' : '请输入')"
          :disabled="item.disabled"
          :show-password="item.showPassword"
          @paste.native.capture.prevent="() => {}"
          @copy.native.capture.prevent="() => {}"
          @cut.native.capture.prevent="() => {}"
          @click.native="clickEvent(item)"
          @input="
            (value) => {
              handleEventInput(value, item)
            }
          "
          @focus="handleEvent(item)"
          @blur="handleEventBlur(item)"
        >
          <template v-if="item.prepend" slot="prepend"
            ><span>{{ item.prepend }}</span></template
          >
          <template v-if="item.append" slot="append"
            ><span>{{ item.append }}</span></template
          >
          <el-button
            v-if="item.myAppend"
            slot="append"
            icon="el-icon-search"
            :disabled="item.disabled"
            @click.native="item.appendClick"
            >{{ item.appendLable ? item.appendLable : '查询' }}</el-button
          >
          <el-button
            v-if="item.myAppendButton"
            slot="append"
            :icon="item.appendIcon"
            :disabled="item.appendDisabled"
            @click.native="item.appendClick"
            >{{ item.appendLable }}</el-button
          >
        </el-input>
        <!-- 非密码类输入框 -->
        <el-input
          v-else
          :ref="item.ref"
          v-model="sonFormData[item.value]"
          v-cleaveEl="item.cleave || { notCleave: true }"
          :type="item.type"
          :size="item.size || 'mini'"
          :maxlength="item.maxlength"
          :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
          :prefix-icon="item.prefixIcon"
          :suffix-icon="item.suffixIcon"
          :style="item.style"
          :readonly="item.readonly"
          :placeholder="item.placeholder || (item.disabled ? '' : '请输入')"
          :disabled="item.disabled"
          :show-password="item.showPassword"
          @click.native="clickEvent(item)"
          @input="
            (value) => {
              handleEventInput(value, item)
            }
          "
          @focus="handleEvent(item)"
          @blur="handleEventBlur(item)"
        >
          <template v-if="item.prepend" slot="prepend"
            ><span>{{ item.prepend }}</span></template
          >
          <template v-if="item.append" slot="append"
            ><span>{{ item.append }}</span></template
          >
          <el-button
            v-if="item.myAppend"
            slot="append"
            icon="el-icon-search"
            :disabled="item.disabled"
            @click.native="item.appendClick"
            >{{ item.appendLable ? item.appendLable : '查询' }}</el-button
          >
          <el-button
            v-if="item.myAppendButton"
            slot="append"
            :icon="item.appendIcon"
            :disabled="item.appendDisabled"
            @click.native="item.appendClick"
            >{{ item.appendLable }}</el-button
          >
        </el-input>
      </el-form-item>
      <!-- 带输入建议的输入框 -->
      <el-form-item
        v-if="item.editer === 'autocomplete' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <template v-if="item.explain" slot="label"
          >{{ item.label }}
          <dg-tooltip
            :effect="item.explain.dark"
            :api-code="item.explain.apiCode"
            :primary-key="item.explain.primaryKey"
            :content="item.explain.content"
            :placement="item.explain.placement"
          >
            <i class="el-icon-question"></i>
          </dg-tooltip>
        </template>
        <el-autocomplete
          v-model="sonFormData[item.value]"
          :size="item.size || 'mini'"
          :style="item.style"
          :placeholder="item.placeholder || (item.disabled ? '' : '请输入')"
          :clearable="item.clearable"
          :readonly="item.readonly"
          :disabled="item.disabled"
          :fetch-suggestions="
            (queryString, cb) => {
              autoQuerySearch(queryString, cb, item)
            }
          "
          @select="
            (selItem) => {
              autoHandleSelect(selItem, item)
            }
          "
        >
          <template slot-scope="{ item }">
            <div>
              {{ item.title
              }}<span style="font-size: 12px; color: rgba(144, 147, 152, 1); float: right">{{ item.value }}</span>
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item
        v-if="item.editer === 'autocomplete1' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-autocomplete
          v-model="sonFormData[item.value]"
          :size="item.size || 'mini'"
          :style="item.style"
          :placeholder="item.placeholder || (item.disabled ? '' : '请输入')"
          :disabled="item.disabled"
          :fetch-suggestions="item.querySearchAsync"
          @select="item.selectChange"
        >
        </el-autocomplete>
      </el-form-item>
      <!-- 选择框 -->
      <el-form-item
        v-else-if="item.editer === 'select' && !item.autoShow"
        ref="selectSpecil"
        :key="index + item.value"
        class="selectSpecil"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <template v-if="item.explain" slot="label"
          >{{ item.label }}
          <dg-tooltip
            :effect="item.explain.dark"
            :api-code="item.explain.apiCode"
            :primary-key="item.explain.primaryKey"
            :content="item.explain.content"
            :placement="item.explain.placement"
          >
            <i class="el-icon-question"></i>
          </dg-tooltip>
        </template>
        <dg-select
          :ref="item.ref"
          v-model="sonFormData[item.value]"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :multiple="item.multiple"
          :size="item.size || 'mini'"
          :dg-style="item.style"
          :no-cache="item.noCache"
          :name="sonFormData[item.selectNameKey]"
          :value-format="item.valueFormat || ''"
          :dim-code="item.dimCode"
          :code-type="item.codeType"
          :api-code="item.apiCode"
          :file-type="item.fileType"
          :filter-val="item.filterVal"
          :collapse-tags="item.collapseTags"
          :filter-limit="item.filterLimit"
          :query-terms="item.queryTerms"
          :default="item.default"
          :select-options="item.selectOptions"
          :select-str="item.selectStr"
          :placeholder="item.placeholder"
          @update:name="item.selectNameKey ? (sonFormData[item.selectNameKey] = $event) : ''"
          @change="(value, index, OPTIONS_LENGTH, flag) => handleEvent(arguments, item, flag)"
        >
        </dg-select>
        <!-- <dg-tooltip v-if="item.explain" :effect="item.explain.dark" :apiCode="item.explain.apiCode" :primaryKey="item.explain.primaryKey" :content="item.explain.content" :placement="item.explain.placement">
                <i class="el-icon-question"></i>
              </dg-tooltip> -->
        <div v-html="helpInfo"></div>
      </el-form-item>
      <!-- inputnumber计数器 -->
      <el-form-item
        v-else-if="item.editer === 'inputNumber' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-input-number
          v-model="sonFormData[item.value]"
          :placeholder="item.placeholder"
          :size="item.size || 'mini'"
          :step="item.step"
          :min="item.min"
          :max="item.max"
          :style="item.style"
          :disabled="item.disabled"
          @change="handleEvent(item)"
        ></el-input-number>
      </el-form-item>
      <!-- textarea输入框 -->
      <el-form-item
        v-else-if="item.editer === 'textarea' && !item.autoShow"
        :key="index + item.value"
        class="textInput"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <template v-if="item.explain" slot="label"
          >{{ item.label }}
          <dg-tooltip
            :effect="item.explain.dark"
            :api-code="item.explain.apiCode"
            :primary-key="item.explain.primaryKey"
            :content="item.explain.content"
            :placement="item.explain.placement"
          >
            <i class="el-icon-question"></i>
          </dg-tooltip>
        </template>
        <slot v-if="item.value === 'paraval'"></slot>
        <el-input
          v-model="sonFormData[item.value]"
          type="textarea"
          :readonly="item.readonly"
          :maxlength="item.maxlength"
          :rows="item.rows || 4"
          :style="item.style"
          :disabled="item.disabled"
          :placeholder="item.placeholder || (item.disabled ? '' : '请输入')"
        >
        </el-input>
        <!-- <dg-tooltip v-if="item.explain" :effect="item.explain.dark" :apiCode="item.explain.apiCode" :primaryKey="item.explain.primaryKey" :content="item.explain.content" :placement="item.explain.placement">
                  <i class="el-icon-question"></i>
                </dg-tooltip> -->
        <!-- <i v-show="item.explain" @click="showExplain(index)" class="el-icon-question"></i>
                <div v-if="switchExplain[index]" @click="betterExperience(index)" class="explainText">{{ item.explainText }}<i class="triangle"></i></div> -->
      </el-form-item>
      <!-- 评级 -->
      <el-form-item
        v-else-if="item.editer === 'rate'"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <div style="display: flex; height: 32px; align-items: center">
          <el-rate
            v-model="sonFormData[item.value]"
            :colors="item.colors"
            :show-score="item.showScore"
            :show-text="item.showText"
            :text-color="item.textColor"
            :max="item.max"
            :disabled="item.disabled"
          >
          </el-rate>
        </div>
      </el-form-item>
      <!-- 开关按钮 -->
      <el-form-item
        v-else-if="item.editer === 'switch' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <template v-if="item.explain" slot="label"
          >{{ item.label }}
          <dg-tooltip
            :effect="item.explain.dark"
            :api-code="item.explain.apiCode"
            :primary-key="item.explain.primaryKey"
            :content="item.explain.content"
            :placement="item.explain.placement"
          >
            <i class="el-icon-question"></i>
          </dg-tooltip>
        </template>
        <el-switch
          v-model="sonFormData[item.value]"
          :style="item.style"
          :disabled="item.disabled"
          :size="item.size || 'mini'"
          :active-text="item.activeText"
          :inactive-text="item.inactiveText"
          :active-value="item.activeValue"
          :inactive-value="item.inactiveValue"
          @change="handleEvent(item)"
        ></el-switch>
      </el-form-item>
      <!-- radio单选框 -->
      <el-form-item
        v-else-if="item.editer === 'radio' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-radio-group
          v-model="sonFormData[item.value]"
          :size="item.size || 'mini'"
          :style="item.style"
          :disabled="item.disabled"
          @change="handleEvent(item)"
        >
          <template v-for="(option, index) in item.options">
            <el-radio :key="option.value" :border="option.border" :disabled="option.disabled" :label="option.value">{{
              option.name
            }}</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
      <!-- radio按钮单选框 -->
      <el-form-item
        v-else-if="item.editer === 'radioButton' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-radio-group
          v-model="sonFormData[item.value]"
          :size="item.size || 'mini'"
          :disabled="item.disabled"
          :style="item.style"
          @change="handleEvent(item)"
        >
          <template v-for="(option, index) in item.options">
            <el-radio-button
              :key="option.value"
              :border="option.border"
              :disabled="option.disabled"
              :label="option.value"
              ><span :class="option.class">{{ option.name }}</span></el-radio-button
            >
          </template>
        </el-radio-group>
      </el-form-item>
      <!-- checkbox单选框 -->
      <el-form-item
        v-else-if="item.editer === 'check' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-checkbox v-model="sonFormData[item.value]" :disabled="item.disable" @change="handleEvent(item)">{{
          item.name
        }}</el-checkbox>
      </el-form-item>
      <!-- checkbox多选框 -->
      <el-form-item
        v-else-if="item.editer === 'checkbox' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-checkbox-group
          v-model="sonFormData[item.value]"
          :style="item.style"
          :min="item.min"
          :max="item.max"
          @change="handleEvent(item)"
        >
          <template v-for="(option, index) in item.options">
            <el-checkbox :key="option.value" :border="option.border" :disabled="option.disable" :label="option.value">{{
              option.name
            }}</el-checkbox>
          </template>
        </el-checkbox-group>
      </el-form-item>
      <!-- checkbox按钮多选框 -->
      <el-form-item
        v-else-if="item.editer === 'checkboxButton' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-checkbox-group v-model="sonFormData[item.value]" :style="item.style" @change="handleEvent(item)">
          <template v-for="(option, index) in item.options">
            <el-checkbox-button
              :key="option.value"
              :border="option.border"
              :disabled="option.disable"
              :label="option.value"
              >{{ option.name }}</el-checkbox-button
            >
          </template>
        </el-checkbox-group>
      </el-form-item>
      <!-- 时间选择框 -->
      <el-form-item
        v-else-if="item.editer === 'timePicker' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-time-picker
          v-model="sonFormData[item.value]"
          :size="item.size || 'mini'"
          :style="item.style"
          :is-range="item.isRange"
          :disabled="item.disabled"
          :value-format="item.valueFormat"
          :default-value="item.defaultValue"
          :picker-options="item.pickerOptions"
          :range-separator="item.rangeSeparator || '至'"
          :start-placeholder="item.startPlaceholder || (item.disabled ? '' : '开始时间')"
          :end-placeholder="item.endPlaceholder || (item.disabled ? '' : '结束时间')"
          :placeholder="item.placeholder || (item.disabled ? '' : '请选择时间')"
          @change="handleEvent(item)"
        ></el-time-picker>
      </el-form-item>
      <!-- 日期选择框 -->
      <el-form-item
        v-else-if="item.editer === 'datePicker' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-date-picker
          v-model="sonFormData[item.value]"
          :size="item.size || 'mini'"
          :style="item.style"
          :type="item.type || 'date'"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :format="item.format || 'yyyy-MM-dd'"
          :value-format="item.valueFormat || 'yyyy-MM-dd'"
          :clearable="item.clearable || false"
          :placeholder="item.placeholder || '选择日期'"
          :range-separator="item.rangeSeparator || '至'"
          :default-time="
            item.type && item.type.indexOf('range') > -1 ? item.defaultTime || ['00:00:00', '23:59:59'] : ''
          "
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          @change="handleEvent(item)"
        ></el-date-picker>
      </el-form-item>
      <!-- 文件上传 -->
      <el-form-item
        v-else-if="item.editer === 'fileUpload' && !item.autoShow"
        :key="index"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <div style="display: flex">
          <el-upload
            ref="upload"
            style="margin-right: 10px; min-width: 30%"
            :class="item.class"
            :action="item.action || ''"
            :http-request="(param) => httpRequest(param, item)"
            :limit="item.limit || 1"
            :on-exceed="handleExceed"
            :on-preview="item.handlePreview"
            :disabled="item.disabled"
            :on-remove="item.handleRemove || handleRemove"
            :file-list="item.fileList || []"
          >
            <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
            <el-button
              class="btn-block"
              :disabled="item.disabled"
              size="mini"
              type="primary"
              @click="submitUpload(item)"
              >点击上传
            </el-button>
            <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
          </el-upload>
          <div>
            <template v-for="(action, index) in item.moreOptions">
              <el-button
                :key="index"
                :title="action.tooltip"
                :style="action.style"
                :type="action.type || 'primary'"
                :size="action.size || 'mini'"
                :plain="action.plain"
                :round="action.round"
                :circle="action.circle"
                :icon="action.icon"
                :disabled="action.disabled"
                @click="clickUploadOptions(action, item)"
                ><span v-if="action.title">{{ action.title }}</span>
              </el-button>
            </template>
          </div>
        </div>
      </el-form-item>
      <!-- 知识库选择器 -->
      <el-form-item
        v-else-if="item.editer === 'knowledgeBaseSelect' && !item.autoShow"
        :key="index"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <dg-knowledge-base-select ref="knowledgeBaseSelect" :form-item="item"> </dg-knowledge-base-select>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item
        v-else-if="(item.editer === 'button' || item.editer === 'add' || item.editer === 'search') && !item.autoShow"
        :key="index"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
        :class="item.editer === 'add' ? 'add-formItem-class' : ''"
      >
        <el-button
          v-if="item.editer === 'search'"
          :title="item.tooltip"
          :style="item.style"
          :type="item.type || 'info'"
          :size="item.size || 'mini'"
          :plain="item.plain === false ? false : true"
          :round="item.round"
          :circle="item.circle"
          :icon="item.icon || 'el-icon-search'"
          :disabled="item.disabled"
          @click="clickHandle(item, sonFormData)"
          >{{ item.title || '查询' }}
        </el-button>
        <el-button
          v-if="item.editer === 'add'"
          :title="item.tooltip"
          :style="item.style"
          :type="item.type || 'primary'"
          :size="item.size || 'mini'"
          :icon="item.icon || 'el-icon-plus'"
          :plain="item.plain === false ? false : true"
          :round="item.round"
          :circle="item.circle"
          :disabled="item.disabled"
          @click="clickHandle(item, sonFormData)"
          >{{ item.title || '新增' }}
        </el-button>
        <el-button
          v-if="item.editer === 'button'"
          :title="item.tooltip"
          :style="item.style"
          :type="item.type"
          :icon="item.icon"
          size="mini"
          :plain="item.plain"
          :round="item.round"
          :circle="item.circle"
          :disabled="item.disabled"
          @click="clickHandle(item, sonFormData)"
          ><span v-if="item.title">{{ item.title }}</span>
        </el-button>
      </el-form-item>
      <!-- 级联选择器 -->
      <el-form-item
        v-else-if="item.editer === 'cascader'"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <el-cascader
          v-model="sonFormData[item.value]"
          :options="item.options"
          :size="item.size || 'mini'"
          :clearable="item.clearable || true"
          :disabled="item.disabled || false"
          :style="item.style"
          :separator="item.separator"
          :props="item.props"
          :filterable="item.filterable || false"
          :show-all-levels="item.showAllLevels"
          :placeholder="item.placeholder"
          @change="handleEvent(item)"
        >
        </el-cascader>
      </el-form-item>
      <!-- 下拉框树选择框（待完善） -->
      <el-form-item
        v-else-if="item.editer === 'treeSelect' && !item.autoShow"
        :key="index + item.value"
        :label="item.label"
        :prop="item.value"
        :style="item.formItemStyle"
      >
        <dg-tree-select
          :style="item.style"
          :clearable="item.clearable"
          :size="item.size || 'mini'"
          :disabled="item.disabled"
          :value="sonFormData[item.value]"
          :options="item.options"
          :multiple-flag="item.multipleFlag"
          :props="item.props"
          :accordion="item.accordion"
          @getValue="(value, name) => getTreeSelectValue(value, name, item)"
        ></dg-tree-select>
      </el-form-item>
    </template>
    <slot />
  </el-form>
</template>

<script>
import Cleave from 'cleave.js'

function getVcStr(str, maxlength) {
  /// 获得字符串实际长度，中文2，英文1
  /// 要获得长度的字符串
  let realLength = 0
  let len = str.length
  let charCode = -1
  let realStr = str

  for (var i = 0; i < len; i++) {
    charCode = str.charCodeAt(i)
    if (charCode >= 0 && charCode <= 128) realLength += 1
    else realLength += 2
    if (realLength > maxlength) {
      realStr = realStr.substr(0, i)
    }
  }
  return realStr
}

export default {
  name: 'DgForm',

  directives: {
    // cleave-input框优化插件(结合到element的input框中)
    cleaveEl: {
      inserted: (el, binding) => {
        if (binding.value.notCleave) return
        let elInput = el.querySelector('input')
        el.cleave = new Cleave(elInput, binding.value || {})
      },
      update: (el, binding) => {
        if (binding.value.notCleave) return
        let elInput = el.querySelector('input')
        const event = new Event('input', { bubbles: true })
        setTimeout(function () {
          if (el.cleave.properties.result) elInput.value = el.cleave.properties.result
          elInput.dispatchEvent(event)
        }, 100)
      },
    },
  },

  props: {
    inline: {
      type: Boolean,
      default: () => false,
    },
    rules: {
      type: Object,
      default: () => {},
    },
    labelWidth: {
      type: String,
      default: () => '100px',
    },
    labelPosition: {
      type: String,
      default: () => '',
    },
    resetForm: {
      type: Boolean,
      default: () => false,
    },
    formItems: {
      type: Array,
      default: () => [],
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },

  data() {
    return {
      selectDataCn: {},
      sonFormData: {},
      switchExplain: {}, // 做为中间人协调 ? 号内容，每个 key 对应每个 ? 号
      helpInfo: '', // 自动显示的 select 帮助信息
    }
  },

  watch: {
    formData: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.sonFormData = newVal
      },
    },
    sonFormData: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.$emit('update:formData', newVal)
      },
    },
  },

  created() {
    this.sonFormData = this.formData
  },

  methods: {
    handleEventInput(value, item) {
      console.log(value, item)
      if (item.maxlengthVc) {
        console.log(getVcStr(value, item.maxlengthVc))
        this.sonFormData[item.value] = getVcStr(value, item.maxlengthVc)
      }
      if (item.handelInput) {
        item.handelInput(event, item, this.sonFormData, this.sonFormData[item.value])
      }
    },
    // input失去焦点事件
    handleEventBlur(item) {
      if (item.handleBlur) {
        item.handleBlur(event, item, this.sonFormData, this.sonFormData[item.value])
      }
    },
    // 处理事件，接收父组件传来的函数体
    handleEvent(event, _item, flag) {
      console.log(event, _item, 7890)
      const item = _item || event
      let _this = this
      if (item.helpSelect && item.editer === 'select') {
        // item.handleChange(event, item, _this)
        eval(item.handleChange)
      } else if (item.handleChange) {
        // console.log(item.handleChange, 777)
        setTimeout(function () {
          console.log(flag)
          item.handleChange(event, item, _this.sonFormData, _this.sonFormData[item.value], flag)
        }, 0)
      } else if (item.handleFocus) {
        console.log('handleFocus')
        setTimeout(function () {
          item.handleFocus(event, item, _this.sonFormData, _this.sonFormData[item.value])
        }, 0)
      }
      console.log(_this.sonFormData[item.value], ' _this.sonFormData[item.value]')
      this.$forceUpdate()
    },
    // 输入框点击事件
    clickEvent(item) {
      if (item.clickEvent) item.clickEvent()
    },
    // 处理带建议的输入框中的建议
    async autoQuerySearch(queryString, cb, item) {
      let result = [{ value: 'no', title: '无建议' }]
      if (item.searchFn) {
        result = await item.searchFn(`${queryString || ''}`, item, this.sonFormData)
      }
      console.log(result)
      cb(result)
    },
    // 带建议的输入框选择建议后触发事件
    autoHandleSelect(selectItem, item) {
      if (item.aftSelect) {
        item.aftSelect(selectItem, item, this.sonFormData)
      }
    },
    // 重置表单
    handleResetForm(formName) {
      this.$refs[formName].resetFields()
      this.helpInfo = ''
      this.formItems.forEach((item) => {
        if (item.autoShow === false) item.autoShow = true
      })
      // 关闭所有 ? 号的解释说明
      for (let key in this.switchExplain) {
        this.switchExplain[key] = false
      }
    },

    // 上传文件项相关操作
    // 上传文件
    submitUpload(item) {
      console.log(this.$refs)
      if (this.$refs.upload[0].uploadFiles.length > 0) {
        return false
      } else {
        this.$refs.upload[0].submit()
      }
    },
    httpRequest(param, item) {
      if (item.httpRequest) item.httpRequest(param, item)
    },
    // 移除文件触发
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 点击文件列表中已上传的文件时触发
    handlePreview(file) {
      console.log(file)
    },
    // 文件超出个数限制时提示
    handleExceed(files, fileList) {
      this.$message.error(`上传文件超出数量限制，请删除后再上传！`)
    },
    // 上传文件中更多操作
    clickUploadOptions(action, item) {
      if (action.fn) action.fn(action, item)
    },
    // 控制解释说明是否显示
    showExplain(index) {
      this.$set(this.switchExplain, index, !this.switchExplain[index])
    },
    betterExperience(index) {
      this.switchExplain[index] = false
    },
    // 处理点击按钮
    clickHandle(item, sonFormData) {
      if (item.fn) {
        item.fn(item, sonFormData)
      }
    },
    // 获取选择的树数据
    getTreeSelectValue(value, name, item) {
      // this.sonFormData[item.value] = value
      // this.sonFormData[item.name || item.name + 'Cn'] = name
      this.$set(this.sonFormData, item.value, value)
      this.$set(this.sonFormData, item.selectNameKey || item.value + 'Cn', name)
      // this.$emit('getValue', value, name, item)
      // if (item.getValue) item.getValue(value, name, item)
    },
  },
}
</script>
