<!--
  * @Author 蒋新平
  * @Date 2022-04-02
  * @Update 蒋新平(2022-04-02)

  * @Info 基于Antd显示、通用组件
  * @FileDescription 用于填写表单页填写信息使用
  * Object configure 自定义表单布局格式
  * Array value 接收父组件配置数组数据
  *       String label（非必填）: '标签名'
  *       String(required) prop（必填）: 'name' 表单数据id
  *       String(required) name（必填）: '' 属性名必须和数据id值保持一致
  *       String(required) type（必填）: 'aInput' 通过类型显示指定Ant组件
  *       Array(required) rules（非必填）: [{ required: false, message: '请选择', trigger: 'change' }] 表单验证规则
  *       ......  其它字段非必填
-->
<template>
  <div>
    <a-form-model
      :ref="configure.ref"
      :model="form"
      :rules="rules"
    >
      <a-row :gutter="configure.gutter || 0">
        <a-col
          :span="list.Grid ? list.Grid.span || 24 : 24"
          v-for="(list, indexs) in listTable"
          :key="indexs"
          v-if="setChecked(list.Card ? list.Card.checked : 1)"
        >
          <a-card
            :title="list.Card ? list.Card.title || '' : ''"
            :bordered="list.Card ? list.Card.bordered || false : false"
            :bodyStyle="list.Card ? list.Card.bodyStyle || {} : {}"
          >
            <a-row
              :gutter="list.Grid ? list.Grid.gutter || 24 : 24"
              :type="list.Grid ? list.Grid.type || 'flex' : 'flex'"
              :justify="list.Grid ? list.Grid.justify || 'start' : 'start'"
            >
              <a-col
                v-for="(item, index) in list.Data"
                v-if="setChecked(item.checked)"
                :key="index"
                :span="item.span || 24"
              >
                <!-- 自定义插槽 + 验证 -->
                <slot v-if="item.type == 'aslot'" :name='item.prop'></slot>
                <!-- 文本框 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  :style="item.modelStyle || ''"
                  v-if="item.type == 'aInput'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-input
                      :placeholder="item.placeholder || '请输入'"
                      v-model="item[item.prop]"
                      :prefix="item.prefix || ''"
                      :suffix="item.suffix || ''"
                      :style="item.style || ''"
                      :disabled="item.disabled || false"
                      @blur="codeverify(configure.ref, item.prop)"
                    />
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 数字框 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aInputNumber'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <div class="space-between" style="flex: 1;">
                      <a-input-number
                        :placeholder="item.placeholder || '请输入'"
                        v-model="item[item.prop]"
                        :style="item.style || 'width: 100%;'"
                        :step="item.step || undefined"
                        :min="item.min || 0"
                        :max="item.max || undefined"
                        :disabled="item.disabled || false"
                        :precision="item.precision || undefined"
                        :formatter="item.formatter ? value => `${value}${item.formatter}` : undefined"
                        :parser="item.formatter ? value => value.replace(item.formatter, '') : undefined"
                        @blur="codeverify(configure.ref, item.prop)"
                      />
                      <span style="padding-left: 10px;flex: none;" v-if="item.subName">{{ item.subName }}</span>
                    </div>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 下拉框 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aSelect'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-select
                      :mode="item.mode || 'default'"
                      v-model="item[item.prop]"
                      :disabled="item.disabled || false"
                      :placeholder="item.placeholder || '请选择'"
                      @change="handleChange($event, configure.ref, item.prop)"
                    >
                      <a-select-option
                        v-for="(val, v) in item.content"
                        :key="v"
                        :value="val.value"
                      >
                        {{ val.name }}
                      </a-select-option>
                    </a-select>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 单选框 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aRadioGroup'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-radio-group
                      v-model="item[item.prop]"
                      :style="item.style || ''"
                      :disabled="item.disabled || false"
                    >
                      <a-radio :value="items.value" v-for="(items, indexs) in item.content" :key="indexs">
                        {{ items.name }}
                      </a-radio>
                    </a-radio-group>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 多选框 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aCheckboxGroup'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-checkbox-group
                      v-model="item[item.prop]"
                      :style="item.style || ''"
                      :disabled="item.disabled || false"
                      @blur="codeverify(configure.ref, item.prop)"
                    >
                      <a-checkbox :value="items.value" v-for="(items, indexs) in item.content" :key="indexs">
                        {{ items.name }}
                      </a-checkbox>
                    </a-checkbox-group>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- Switch 开关 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aSwitch'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-switch
                      v-model="item[item.prop]"
                      :checked-children="item.checkedChildren || ''"
                      :un-checked-children="item.unCheckedChildren || ''"
                      @change="onChangeSwitch($event, item.directive)"
                      :disabled="item.disabled || false"
                    >
                    </a-switch>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 文本域 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aTextarea'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-textarea
                      :placeholder="item.placeholder || '请输入'"
                      v-model="item[item.prop]"
                      :style="item.style || ''"
                      :disabled="item.disabled || false"
                      :maxLength="item.maxLength || 500"
                      :rows="item.rows || 4"
                      @blur="codeverify(configure.ref, item.prop)"
                    />
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 表格选择组件 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  :style="item.modelStyle || ''"
                  v-if="item.type == 'selectionModel'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-input
                      :placeholder="item.placeholder || '请选择'"
                      v-model="item[item.prop]"
                      :prefix="item.prefix || ''"
                      :suffix="item.suffix || ''"
                      :style="item.style || ''"
                      :disabled="item.disabled || false"
                      @click="showTable(item, indexs, index)"
                      @change="codeverify(configure.ref, item.prop)"
                      readOnly
                    />
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 标签分类组件 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  :style="item.modelStyle || ''"
                  v-if="item.type == 'categoryCheckModel'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-input
                      :placeholder="item.placeholder || '请选择'"
                      v-model="item[item.prop]"
                      :prefix="item.prefix || ''"
                      :suffix="item.suffix || ''"
                      :style="item.style || ''"
                      :readOnly="item.readOnly || false"
                      :disabled="item.disabled || false"
                      @click="categoryModel(indexs, index)"
                      @blur="codeverify(configure.ref, item.prop)"
                    />
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 设置选择年份/月份 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'timeMode'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-date-picker
                      v-model="item[item.prop]"
                      :show-time="item.isShowTime || false"
                      :format="item.format || 'YYYY-MM-DD'"
                      :suffix-icon="item.suffix || ''"
                      :placeholder="item.placeholder || '请选择'"
                      :style="item.style || 'width: 100%;'"
                      :disabled="item.disabled || false"
                      :disabled-date="item.disabledDate == 'date' ? disabledDate : item.disabledDate ? item.disabledDate : null"
                      :mode="item.mode || 'year'"
                      :open="item.open || false"
                      @openChange="openChangeOne($event, indexs, index)"
                      @panelChange="panelChangeOne($event, indexs, index)"
                      @change="codeverify(configure.ref, item.prop)"
                    >
                      <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon || ''" />
                    </a-date-picker>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 日期、时间选择器 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'timeDate'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-date-picker
                      v-model="item[item.prop]"
                      :show-time="item.isShowTime || false"
                      :format="item.format || 'YYYY-MM-DD'"
                      :suffix-icon="item.suffix || ''"
                      :placeholder="item.placeholder || '请选择'"
                      :style="item.style || 'width: 100%;'"
                      :mode="item.mode || 'date'"
                      :disabled="item.disabled || false"
                      :disabled-date="item.disabledDate == 'date' ? disabledDate : item.disabledDate ? item.disabledDate : null"
                      @change="codeverify(configure.ref, item.prop)"
                    >
                      <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon || ''" />
                    </a-date-picker>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 日期(选择周) -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'timeWeek'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-week-picker
                      v-model="item[item.prop]"
                      :show-time="item.isShowTime || false"
                      :suffix-icon="item.suffix || ''"
                      :style="item.style || 'width: 100%;'"
                      :placeholder="item.placeholder || '请选择'"
                      :disabled="item.disabled || false"
                      :disabled-date="item.disabledDate == 'date' ? disabledDate : item.disabledDate ? item.disabledDate : null"
                      @change="codeverify(configure.ref, item.prop)"
                    >
                      <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon" />
                    </a-week-picker>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 日期(起始时间跟结束时间) -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'timeRange'"
                >
                  <div :class="item.aIcon ? 'flex-row minHeight' : ''">
                    <a-range-picker
                      v-model="item[item.prop]"
                      :show-time="item.isShowTime || false"
                      :suffix-icon="item.suffix || ''"
                      :style="item.style || 'width: 100%;'"
                      :format="item.format || 'YYYY-MM-DD'"
                      :disabled="item.disabled || false"
                      :disabled-date="item.disabledDate == 'date' ? disabledDate : item.disabledDate ? item.disabledDate : null"
                      @change="codeverify(configure.ref, item.prop)"
                    >
                      <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon" />
                    </a-range-picker>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 多级联动下拉框 -->
                <template
                  :style="item.modelStyle || ''"
                  v-if="item.type == 'selectGanged'"
                >
                  <a-row :gutter="item.gutter">
                    <a-col
                      v-for="(child, c) in item.children"
                      :key="c"
                      :span="child.span"
                    >
                      <a-form-model-item
                        :label="child.label || ''"
                        :label-col="child.labelCol || { span: 6 }"
                        :wrapper-col="child.wrapperCol || { span: 10 }"
                        :prop="child.prop"
                      >
                        <div class="space-between">
                          <a-select
                            v-model="child[child.prop]"
                            :placeholder="child.placeholder || '请选择'"
                            @change="handleSelectChange($event, child.option, indexs, index, c, child.prop)"
                            :disabled="child.disabled || false"
                          >
                            <a-select-option
                              v-for="(val, v) in child.option"
                              :key="v"
                              :value="`${val[child.optionId]}`"
                            >{{ val[child.optionName] }}</a-select-option>
                          </a-select>
                          <span style="padding-left: 10px;" v-if="child.subName">{{ child.subName }}</span>
                        </div>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </template>
                <!-- 多行表单（增加删减） -->
                <a-form-model-item
                  :label="item.label || ''"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'multiRowForms'"
                  :rules="item.rules"
                  class="formItem"
                >
                  <FromTable
                    :listconfigure='item.config'
                    v-model="item[item.prop]"
                    @change="multiRowChange($event, item.prop)"
                  >
                  </FromTable>
                </a-form-model-item>
                <!-- 富文本 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'Editor'"
                >
                  <editor
                    :editorType="item.editorType || 'block'"
                    v-model="item[item.prop]"
                    :style="item.style || ''"
                  >
                  </editor>
                </a-form-model-item>
                <!-- 上传组件 + 验证 -->
                <a-form-model-item
                  :label="item.label || ''"
                  :prop="item.prop"
                  :style="item.modelStyle || ''"
                  :label-col="item.labelCol || { span: 6 }"
                  :wrapper-col="item.wrapperCol || { span: 10 }"
                  v-if="item.type == 'aUpload'"
                >
                  <div :class="item.aIcon ? 'flex-row' : ''">
                    <Upload
                      v-model="item[item.prop]"
                      :type="item.configured.type"
                      :urlShowFiles='item.configured.urlShowFiles'
                      :urlUpload='item.configured.urlUpload'
                      :tokenUser="item.configured.tokenUser"
                      :maxFiles="item.configured.maxFiles"
                      :maxSizes="item.configured.maxSizes"
                      :verifyType="item.configured.verifyType"
                      :protected="item.configured.protected"
                      :multiple="item.configured.multiple"
                      :directory="item.configured.directory"
                      :cropper="item.configured.cropper"
                      :cropperOptions="item.configured.cropperOptions"
                      :picture="item.configured.picture"
                      :resultFormat="item.configured.resultFormat"
                      @change="codeverify(configure.ref, item.prop)"
                    ></Upload>
                    <div :style="item.aIcon.style || ''" v-if="item.aIcon">
                      <a-tooltip>
                        <template slot="title">{{ item.aIcon.tooltip }}</template>
                        <a-icon :type="item.aIcon.type || 'question-circle'" />
                      </a-tooltip>
                    </div>
                  </div>
                </a-form-model-item>
                <!-- 动态table表格 -->
                <template v-if="item.type == 'aTable'">
                  <ListTable
                    :ref="'cTable'"
                    :configure="item.configure"
                    :searchList="item.searchList"
                    :columns="item.columns"
                    :row-key="record => record.id"
                  >
                    <div slot="selectCallBtn" style='text-align: right'>
                      <a-button type="primary">确定</a-button>
                    </div>
                    <!-- 循环表单内所需要展示以及操作 -->
                    <template
                      v-if="item.listScopedSlots"
                      v-for="(sItem, sl) of item.listScopedSlots"
                      :slot="sItem.slotName"
                      slot-scope="{ text, record, index }"
                    >
                      <!-- index 代表排序 -->
                      <template v-if="sItem.slotName == 'index'">{{ index + 1 }}</template>
                      <!-- action 代表操作方法 -->
                      <template
                        v-else-if="sItem.slotName == 'action'"
                        v-for="(bItem, btn) of sItem.arrButton"
                      >
                        <a @click="$emit('handleAction', bItem.type, record)"> {{ bItem.name }} </a>
                      </template>
                      <!-- 其它字段 根据属性名称显示指定内容 -->
                      <template v-else>{{ sItem.attribute[text] }}</template>
                    </template>
                  </ListTable>
                </template>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <!-- 分类标签弹窗 -->
      <div
        v-for="(list, indexs) in listTable"
        :key="indexs"
      >
        <CategoriesList
          v-for="(obj, o) in list.Data"
          :key="o"
          v-if="obj.type == 'categoryCheckModel'"
          ref="categoriesList"
          :title="obj.aModal.title || ''"
          :tagVis="obj.aModal.visible || false"
          :index="o"
          :pitchOn="obj.checkarr || []"
          :tagsList="obj.listTags || []"
          :search="obj.aModal.search || ''"
          @callbackCheckIds='callbackCheckIds'
          @handleCancel='handleCancel'
        />
      </div>
    </a-form-model>
    <!-- 循环多个 - 表格选择组件 -->
    <a-modal
      v-if="objModal"
      :title="objModal.aModal.title || ''"
      :width="objModal.aModal.width || 600"
      :cancelText="objModal.aModal.cancelText || ''"
      :centered="objModal.aModal.centered || false"
      :closable="objModal.aModal.closable || true"
      :footer="objModal.aModal.footer || null"
      :maskClosable="objModal.aModal.maskClosable || true"
      :maskStyle="objModal.aModal.maskStyle || {}"
      :okText="objModal.aModal.okText || ''"
      :zIndex="objModal.aModal.zIndex || 1000"
      :visible="objModal.aModal.visible || false"
      @ok="objModal.aModal.visible = false"
      @cancel="objModal.aModal.visible = false"
    >
      <ListTable
        ref="customTable"
        v-if="objModal.aModal.visible"
        :configure="objModal.configure"
        :searchList="objModal.searchList"
        :columns="objModal.columns"
        @selectCall="selectCallBack($event, objModal, indexs, index)"
        @singleCall="singleCallBack($event, objModal, indexs, index)"
      >
        <div slot="selectCallBtn" style='text-align: right'>
          <a-button type="primary">确定</a-button>
        </div>
      </ListTable>
    </a-modal>
    <!-- （提交、返回）按钮 -->
    <a-card
      :title="submitCard.title || ''"
      :bordered="submitCard.bordered || false"
      :bodyStyle="submitCard.bodyStyle || {}"
    >
      <a-button
        :type="submitCard.goBack.type || ''"
        :style="submitCard.goBack.style"
        @click="onGoBack"
      >
        {{ submitCard.goBack.name || '返回' }}
      </a-button>
      <a-button
        :type="submitCard.submit.type || ''"
        :style="submitCard.submit.style"
        @click="onSubmit(configure.ref || 'ruleForm')"
      >
        {{ submitCard.submit.name || '确定' }}
      </a-button>
    </a-card>
  </div>
</template>

<script>
  import FromTable from '../FormAddList/FormAddList'
  import CategoriesList from '../Categories/Index'
  import Upload from '../Upload/Upload'
  import ListTable from '../ListTable/Index'
  import editor from '../Tinymce'
  import moment from 'moment'
  export default {
    name: "FormModelList",
    components: {
      Upload,
      ListTable,
      FromTable,
      CategoriesList,
      editor
    },
    props: {
      // 基础配置
      configure: {
        type: Object,
        default: () => {
          return {
            ref: 'ruleForm', // 唯一标识名称 => String(非必传)，默认：'ruleForm'
            gutter: 20 // 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距] => Number/Object/Array(非必传)，默认：20
          }
        }
      },
      // 表单列表数据
      value: {
        type: Array,
        default: () => [],
        required: true
      },
      // 匹配表单唯一标识并赋值 以数据形式进行
      matchedData: {
        type: Object,
        default: () => null
      },
      // （提交、返回）配置
      submitCard: {
        type: Object,
        default: () => {
          return {
            bordered: false,
            bodyStyle: { padding: '20px', textAlign: 'right' },
            submit: {
              name: '保存',
              type: 'primary'
            },
            goBack: {
              name: '返回',
              type: '',
              style: 'margin-right: 20px;',
              url: ''
            }
          }
        }
      }
    },
    data () {
      return {
        indexs: 0, // listTable（下标）
        index: 0, // list.Data（下标）
        listTable: this.value,
        objModal: null, // 弹窗表格对象数据
        listData: [] // 列表数据
      }
    },
    mounted () {
      const _this = this
      _this.$nextTick(() => {
        _this.setMatchedData()
        setTimeout(()=>{
          // 获取多级联动下拉框数据
          _this.setRequest()
        },1000)
      })
    },
    computed: {
      // 计算表单返回对象
      form () {
        var objForm = {}
        this.listTable.forEach((items, indexs) => {
          items.Data.forEach((item, index) => {
            if (item.children && item.type == 'selectGanged') {
              item.children.forEach((child, c) => {
                objForm[`${child.prop}`] = child[child.prop]
              })
            } else if (item.children && item.type == 'multiRowForm') {
              item.children.forEach((child, c) => {
                child.forEach((rules, r) => {
                  objForm[`${item.prop}${c}${r}`] = rules[rules.prop]
                })
              })
            } else {
              objForm[`${item.prop}`] = item[item.prop]
            }
          })
        })
        return objForm
      },
      // 计算返回对应规则格式
      rules () {
        var objRules = {}
        this.listTable.forEach((items, indexs) => {
          items.Data.forEach((item, index) => {
            if (item.children && item.type == 'selectGanged') {
              item.children.forEach((child, c) => {
                objRules[`${child.prop}`] = child.rules || []
              })
            } else if (item.children && item.type == 'multiRowForm') {
              item.children.forEach((child, c) => {
                child.forEach((rules, r) => {
                  objRules[`${item.prop}${c}${r}`] = rules.rules || []
                })
              })
            } else {
              objRules[`${item.prop}`] = item.rules || []
            }
          })
        })
        return objRules
      }
    },
    watch: {
      // 监听赋值对象赋值变化
      matchedData (obj) {
        // 设置返回数据并赋值
        this.setMatchedData()
      },
      // 监听当前页面文本输入
      form (list) {
        const _this = this
        _this.$emit('onChange', list)
        _this.$nextTick(() => {
          // let ref = _this.configure.ref || 'ruleForm'
          // _this.$refs[`${ref}`].validate(valid => {})
        })
      }
    },
    methods: {
      moment,
      // 处理失去焦点时没有校验
      codeverify (ref, prop) {
        const _this = this
        setTimeout(() => {
          _this.$refs[`${ref}`].validateField(prop)
        }, 500)
      },
      // 日期选择器 - 弹出日历和关闭日历的回调
      openChangeOne (status, indexs, index) {
        const _this = this
        if (status) {
          _this.listTable[indexs].Data[index].open = true
        }
      },
      // 日期选择器 - 日期面板变化时的回调
      panelChangeOne (value, indexs, index) {
        const _this = this
        _this.listTable[indexs].Data[index][_this.listTable[indexs].Data[index].prop] = value
        _this.listTable[indexs].Data[index].open = false
      },
      // 选择器 - 发生变化时触发
      handleChange (value, ref, prop) {
        const _this = this
        _this.$emit('handleSelect', prop, value)
        setTimeout(() => {
          _this.$refs[`${ref}`].validateField(prop)
        }, 500)
      },
      // Switch 开关，控制指定组件是否显示
      onChangeSwitch (checked, directive) {
        const _this = this
        if (directive) {
          _this.listTable.forEach((items, indexs) => {
            items.Data.forEach((item, index) => {
              if (directive == item.prop) {
                item.checked = checked ? 1 : 2
              }
            })
          })
        }
      },
      // 设置表单组件是否显示
      setChecked (c) {
        if (c == 2 && c) {
          return false
        } else {
          return true
        }
      },
      // 设置返回数据并赋值
      setMatchedData () {
        const _this = this
        for (let key in _this.matchedData) {
          // console.log(key)
          _this.listTable.forEach((items, indexs) => {
            items.Data.forEach((item, index) => {
              // 判断是否是“多级联动”下拉框
              if (item.children && item.type == 'selectGanged') {
                item.children.forEach((child, c) => {
                  if (child.prop == key) {
                    child[`${child.prop}`] = _this.matchedData[key]
                  }
                })
              } else {
                if (item.prop == key) {
                  item[`${item.prop}`] = _this.matchedData[key]
                }
              }
            })
          })
        }
      },
      // 触发“多行表单组件”事件
      multiRowChange (list, prop) {
        const _this = this
        _this.listTable.forEach((item, index) => {
          if (item.prop == prop) {
            _this.form[`${item.prop}`] = list
          }
        })
        // console.log(_this.form)
      },
      // 打开对应的“标签分类”组件
      categoryModel (indexs, index) {
        const _this = this
        _this.indexs = indexs
        _this.index = index
        _this.listTable[indexs].Data[index].aModal.visible = true
      },
      // 关闭对应的“标签分类”组件
      handleCancel (index) {
        const _this = this
        _this.listTable[_this.indexs].Data[_this.index].aModal.visible = false
      },
      // 标签分类组件返回值
      callbackCheckIds (checkarr, o) {
        const _this = this
        _this.listTable[_this.indexs].Data[_this.index].checkarr = checkarr
        let ListData = _this.listTable[_this.indexs].Data[_this.index].checkarr.map(v => _this.listTable[_this.indexs].Data[_this.index].objTags[v])
        _this.listTable[_this.indexs].Data[_this.index][_this.listTable[_this.indexs].Data[_this.index].prop] = ListData.join('、')
        _this.handleCancel()
      },
      // 获取多级联动下拉-发生改变时触发该事件
      handleSelectChange (value, item, indexs, index, chil, prop) {
        const _this = this
        // 处理失去焦点时没有校验
        setTimeout(() => {
          _this.$refs[`${_this.configure.ref}`].validateField(prop)
        }, 500)
        // 获取数据 选中的 name名称
        if (_this.listTable[indexs].Data[index].children[chil].getOptionName) {
          _this.listTable[indexs].Data[index].children[chil].getOptionName.name = item.filter(val => val.id == value)[0][_this.listTable[indexs].Data[index].children[chil].getOptionName.prop]
        }
        // 清空当前下拉框之后的所有数据和值
        _this.listTable[indexs].Data[index].children.forEach((newItem, c) => {
          if (c > chil) {
            newItem[newItem.prop] = undefined
            newItem.option = []
          }
        })
        // 如果子下标大于数组长度时，返回结束该方法
        chil++
        if (chil >= _this.listTable[indexs].Data[index].children.length) return
        // let dataObj = Object.assign({}, _this.ArrayApiParams)
        let itemObj = item.filter(val => val.id == value)[0]
        let request = {}
        let params = {}
        request = Object.assign(request, _this.listTable[indexs].Data[index].children[chil].request)
        params[request.params.name] = itemObj[request.params.prop]
        request.params = params
        _this.getSelectParams(request, indexs, index, chil)
      },
      // 获取多级联动下拉框接口方法
      // Obj => 接口参数，index => 列表数据，chil => 列表数据下的子数据
      getSelectParams (Obj, indexs, index, chil) {
        const _this = this
        Obj.getFunction(Obj.params).then(res => {
          if (res.message) {
            _this.$message.error(res.message)
          } else {
            let Data
            // 判断是否需要自定义获取属性，否则就显示默认数据
            if (Obj.getPostfix) {
              Data = res.data.data || res.data
              // 判断该属性是否是对象，否则就是数组
              if (Data.constructor === Object) {
                Data = Data[Obj.getPostfix]
              } else {
                Data = Data[0][Obj.getPostfix]
              }
            } else {
              Data = res.data.data || res.data
            }
            _this.listTable[indexs].Data[index].children[chil].option = Data
          }
        })
      },
      // 重组标签数据
      formatData (data, indexs, index) {
        const _this = this
        const objTags = {}
        // 数据格式转换成显示的格式
        _this.listTable[indexs].Data[index].listTags = data.map((v) => {
          v.indeterminate = false
          v.checkAll = false
          v.category_tags = v.category_tags.map((vl) => {
            objTags[vl.id] = vl.name
            return { value: vl.id, label: vl.name, color: false }
          })
          return v
        })
        _this.listTable[indexs].Data[index].objTags = objTags
        // 判断如果有参数就重新赋值
        let propNumber = JSON.parse(_this.listTable[indexs].Data[index][_this.listTable[indexs].Data[index].prop])
        // console.log(propNumber)
        if (_this.listTable[indexs].Data[index][_this.listTable[indexs].Data[index].prop]) {
          _this.listTable[indexs].Data[index].checkarr = propNumber
          let ListData = _this.listTable[indexs].Data[index].checkarr.map(v => _this.listTable[indexs].Data[index].objTags[v])
          _this.listTable[indexs].Data[index][_this.listTable[indexs].Data[index].prop] = ListData.join('、')
        }
      },
      // Obj => 接口参数
      getCategoriesList (Obj, indexs, index) {
        const _this = this
        Obj.getFunction(Obj.params).then(res => {
          if (res.message) {
            _this.$message.error(res.message)
          } else {
            let Data = res.data.data || res.data
            _this.formatData(Data, indexs, index)
          }
        })
      },
      // 设置接口对象数据（初始值）并循环匹配名称请求不同接口
      setRequest () {
        const _this = this
        _this.listTable.forEach((items, indexs) => {
          items.Data.forEach((item, index) => {
            // 判断是否是多级下拉框
            if (item.type == 'selectGanged') {
              _this.getSelectParams(item.children[0].request, indexs, index, 0)
              let request = {}
              item.children.forEach((child, c) => {
                if (child[child.prop] && c > 0) {
                  // 对象重新赋值，并且不影响原来对象
                  request = Object.assign(request, child.request)
                  c--
                  let paramsName = {}
                  paramsName[request.params.name] = item.children[c][item.children[c].prop]
                  request.params = paramsName
                  c++
                  // console.log(request)
                  _this.getSelectParams(request, indexs, index, c)
                }
              })
            } else if (item.type == 'categoryCheckModel') {
              // 获取标签列表数据
              _this.getCategoriesList(item.request, indexs, index)
            }
          })
        })
      },
      // 多选返回
      selectCallBack (list, obj, indexs, o) {
        const _this = this
        _this.listTable[indexs].Data[o].listSelect = list
        _this.$emit('handleSelect', obj.prop, list)
        _this.listTable[indexs].Data[o][_this.listTable[indexs].Data[o].prop] = list.names.join('、 ')
        _this.listTable[indexs].Data[o].aModal.visible = false
        setTimeout(() => {
          _this.$refs[`${_this.configure.ref}`].validateField(_this.listTable[indexs].Data[o].prop)
        }, 500)
      },
      // 单选返回
      singleCallBack (item, obj, indexs, o) {
        const _this = this
        let name = this.listTable[indexs].Data[o].configure.nameCustom
        if (item.hasOwnProperty(name)) {
          _this.listTable[indexs].Data[o].listSelect = item
          _this.$emit('handleSelect', obj.prop, item)
          _this.listTable[indexs].Data[o][_this.listTable[indexs].Data[o].prop] = item[name || 'name']
          _this.listTable[indexs].Data[o].aModal.visible = false
          setTimeout(() => {
            _this.$refs[`${_this.configure.ref}`].validateField(_this.listTable[indexs].Data[o].prop)
          }, 500)
        } else {
          _this.$message.error('对象内未找到该属性名称，请设置属性名称')
        }
      },
      // 显示 - 弹窗表格选择（单选）
      showTable (data, indexs, index) {
        const _this = this
        _this.indexs = indexs
        _this.index = index
        data.aModal.visible = true
        _this.objModal = data
      },
      // 当前日期之前的都不能选
      disabledDate (current) {
        return current && current < moment().endOf('day')
      },
      // 新增多行表单
      lineAdd (i) {
        const _this = this
        var lineArray = []
        var lineObj = {}
        _this.listTable[i].children[0].forEach(item => {
          lineObj = {
            span: item.span,
            prop: item.prop,
            type: item.type,
            placeholder: item.placeholder,
            style: item.style,
            subName: item.subName,
            content: item.content,
            suffix: item.suffix,
            rules: item.rules
          }
          lineObj[item.prop] = undefined

          if (item.type == 'aSelect') {
            lineObj[item.prop] = undefined
          } else {
            lineObj[item.prop] = ''
          }
          lineArray.push(lineObj)
        })
        _this.listTable[i].children.push(lineArray)
      },
      // 删除多行表单
      lineRemove (i, c) {
        const _this = this
        _this.listTable[i].children.splice(c, 1)
      },
      // 提交表单数据
      onSubmit (ref) {
        const _this = this
        _this.$refs[`${ref}`].validate(valid => {
          if (valid) {
            let params = {}
            // 循环数据优化数据（格式）
            for (let i = 0; i < _this.listTable.length; i++) {
              _this.listTable[i].Data.forEach((item, index) => {
                if (_this.form[item.prop]) {
                  if (item.type == 'timeDate' || item.type == 'timeMonth' || item.type == 'timeMode') {
                    _this.form[item.prop] = moment(_this.form[item.prop]).format(item.format)
                  } else if (item.type == 'timeWeek') {
                    _this.form[item.prop][0] = moment(_this.form[item.prop]).day(1).format(item.format) // 周一日期
                    _this.form[item.prop][1] = moment(_this.form[item.prop]).day(7).format(item.format) // 周日日期
                  } else if (item.type == 'timeRange') {
                    _this.form[item.prop][0] = moment(_this.form[item.prop][0]).format(item.format)
                    _this.form[item.prop][1] = moment(_this.form[item.prop][1]).format(item.format)
                  } else if (item.type == 'categoryCheckModel') { // 如果是分类标签
                    _this.form[item.prop] = item.checkarr
                  } else if (item.type == 'selectionModel') { // 如果是表格选择弹窗
                    _this.form[item.prop] = item.listSelect
                  } else if (item.type == 'aUpload') { // 如果是上传（图片、文件）组件
                    if (item[item.prop].length < 1) _this.form[item.prop] = null
                  }
                }
              })
            }
            // 判断是否请求接口
            if (_this.submitCard.submit.configure && _this.submitCard.submit.configure.getFunction) {
              // 判断是否需要传参拼接
              if (_this.submitCard.submit.configure.ginseng) {
                params = { ..._this.form, ..._this.submitCard.submit.configure.ginseng }
              } else {
                params = _this.form
              }
              // 通过循环去除空字段
              for (let key in params) {
                if (!params[key]) {
                  delete params[key]
                }
              }
              // console.log(params)
              // 满足以上条件开始请求接口数据
              _this.submitCard.submit.configure.getFunction(params).then(res => {
                // console.log(res)
                if (res.message) {
                  _this.$message.error(res.message)
                } else {
                  _this.$message.success(_this.submitCard.submit.configure.message || '提交成功')
                  // 请求失败返回
                  _this.onGoBack()
                }
              }).catch(error => {
                console.error(error)
                // 请求失败返回
                // _this.onGoBack()
              })
            } else {
              params = _this.form
              // 通过循环去除空字段
              for (let key in params) {
                if (!params[key]) {
                  delete params[key]
                }
              }
              _this.$emit('formSubmit', params)
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 返回按钮
      onGoBack () {
        const _this = this
        // 关闭当前标签
        _this.$handleMultiTab.$emit('close', _this.$router.fullPath)
        // 判断是否有返回对象数据，否则返回默认方法
        if (_this.submitCard.goBack && _this.submitCard.goBack.url) {
          // 判断返回页面是否需要传递参数
          if (_this.submitCard.goBack.query && JSON.stringify(_this.submitCard.goBack.query) !== '{}') {
            _this.$router.push({ path: _this.submitCard.goBack.url, query: _this.submitCard.goBack.query })
          } else {
            _this.$router.push({ path: _this.submitCard.goBack.url })
          }
        } else {
          _this.$router.go(-1)
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .formItem {
    margin: 0;
  }
  .btn {
    padding-left: 10px;
    >.subtract {
      cursor: pointer;
    }
  }
  .minHeight {
    min-height: 40px;
    align-items: center;
  }
</style>

<style>
  .ant-upload-picture-card-wrapper {
    display: flex;
  }
</style>
