<template>
	<div class="xd-base-field">
		<el-form
			v-if="formStatus"
			class="xd-base-field-warpper"
			:ref="refID"
			:model="form"
			:rules="rules"
			:label-width="labelWidth"
			@submit.native.prevent
		>
			<template v-for="(item) in uiList">
			  <div
          class="el-title"
          :class="[getClass(item),item.extendClass,{isFirst: item.isFirst}]"
          v-if="item.ele === 'title'"
          v-show="item.label"
          @click="handleGroup(item)"
          :style="{cursor:(isGroupHide === false ? 'default':'pointer'),...item['cusStyle']||{}}"
        >
          <div v-html="item.label"></div>
          <div class="el-title-icon" v-if="item['isIcon'] === undefined  && isGroupHide">
            <i v-if="groupStatus[`group_id_${item.group_id}`]" class="el-icon-arrow-up"></i>
            <i v-else class="el-icon-arrow-down"></i>
          </div>
        </div>
				<template v-else-if="item.ele === 'slot'">
          <slot
            v-if="isGroupStatusEmpty || groupStatus[`group_id_${item.group_id}`]"
            :name="item.slot"
            :form="form"
            :width="labelWidth"
          ></slot>
        </template>
        <template v-else-if="item.ele === 'xd-line'">
          <div
            :style="[item['cusStyle']||{}]"
            class="xd-line"
            :class="[getCustomClass(item),(groupStatus[`group_id_${item.group_id}`] === undefined ? '': (groupStatus[`group_id_${item.group_id}`]?'':'jfb-icon-hidden'))]"
          ></div>
        </template>
        <template v-else-if="item.ele === 'xd-line-title'">
          <div
            :style="[item['cusStyle']||{}]"
            class="xd-line-title"
            :class="[getCustomClass(item),(groupStatus[`group_id_${item.group_id}`] === undefined ? '': (groupStatus[`group_id_${item.group_id}`]?'':'jfb-icon-hidden'))]"
          ><span v-html="item.label"></span></div>
        </template>
				<el-form-item
					v-else
					:style="[item.cusStyle||{}]"
					:label="item.ele === 'line'?'':item.label"
					:prop="getProp(item)"
					:class="[
            getCustomClass(item),
            (groupStatus[`group_id_${item.group_id}`] === undefined ? '': (groupStatus[`group_id_${item.group_id}`]?'':'jfb-icon-hidden')),
            item.extendClass]"
          >
					<div
						class="xd-base-field__box"
						:class="{ is_inline: getInline(item),is_block: !getInline(item)}"
					>
						<template v-if="item.ele === 'el-input'">
							<el-input
								v-model="form[item.valueKey]"
								:type="item['type']"
								:class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input40'"
								:placeholder="item['placeholder']"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
								:autosize="item['type'] === 'textarea' ? textareaSize: false"
								:maxlength="item['max']"
                :minlength="item['min']"
								@input="handleElInout(item.valueKey)"
								clearable
							><template slot="append" v-if="item['append']"><span v-html="item['append']"></span></template></el-input>
						</template>
						<template v-if="item.ele === 'el-html'">
							<div v-html="item.value"></div>
						</template>
            <div
              v-else-if="item.ele === 'line'"
              class="line-x"
              :class="{'cus-indent': item.indent}"
            ><span v-html="item.label"></span></div>
						<!--动态表单(公有)-->
						{{each files}}
						<template v-else-if="item.ele === '{{$value.value}}'">
							<{{$value.value}}
								v-model="form[item['valueKey']]"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
								:placeholder="item['placeholder']"
								:default-value="item['value']"
								:setting="item['setting']"
								:size="item['size']"
								:maps="item['maps']"
								:key="item['isKey'] ? item['key'] : item['valueKey']"
								:cus-refresh="item['refresh'] || 'refresh'"
								:use-custom-rule="item['useCustomRules']"
								:required="getRequire(item['rules'])"
								:handle-custom="item['handleCustom']"
								:list="item['list']"
								{{if $value.value === 'xd-cascade'}}
                :class="((item['className'] && !isPC) ?'input100' : item['className']) || ''"
                {{else}}
                :class="item['className'] || ''"
                {{/if}}
							></{{$value.value}}>
						</template>
						{{/each}}
						<!--动态表单(公有) 结束-->
						<!--动态表单(私有)-->
						{{each privateFiles}}
              <template v-else-if="item.ele === '{{$value.value}}'">
                <{{$value.value}}
                  v-model="form[item['valueKey']]"
                  :disabled="item['disabled'] === undefined ? false: item['disabled']"
                  :placeholder="item['placeholder']"
                  :default-value="item['value']"
                  :setting="item['setting']"
                  :size="item['size']"
                  :cus-refresh="item['refresh'] || 'refresh'"
                  :maps="item['maps']"
                  :key="item['isKey'] ? item['key'] : item['valueKey']"
                  :use-custom-rule="item['useCustomRules']"
                  :required="getRequire(item['rules'])"
                  :handle-custom="item['handleCustom']"
                  :list="item['list']"
                  {{if $value.value === 'xd-cascade'}}
                  :class="((item['className'] && !isPC) ?'input100' : item['className']) || ''"
                  {{else}}
                  :class="item['className'] || ''"
                  {{/if}}
                ></{{$value.value}}>
              </template>
            {{/each}}
						<!--动态表单(私有) 结束-->
						<template v-else-if="item.ele === 'xd-remote-select'">
              <xd-remote-input
                :placeholder="item['placeholder']"
                :width="item['width'] || '30%'"
                :default-value="item['value']"
                :multiple="item['multiple']"
                :remote-search="item['remoteSearch']"
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
                :collapse-tags="item['collapseTags']"
                :class="item['className'] || ''"
                :mode="item['mode'] || false"
                v-model="form[item['valueKey']]"
              ></xd-remote-input>
            </template>
						<template v-else-if="item.ele === 'xd-select-list'">
							<xd-select-list
								:clearable="true"
								v-model="form[item['valueKey']]"
								:placeholder="item['placeholder']"
								:default-value="item['value']"
								:size="size"
								:list="item['list']"
								:multiple="item['multiple']"
								:collapse-tags="item['collapseTags'] !== undefined ? item['collapseTags']: true"
								:class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input20'"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-select-list>
						</template>
						<template v-else-if="item.ele === 'xd-select-status'">
							<xd-select-status
                :default-value="item['value']"
                v-model="form[item['valueKey']]"
                :placeholder="item['placeholder']"
                :type-value="item['backValueType'] || 1"
                :type="item['list']"
                :is-all="item['isAll']||item['isall']"
                :size="size"
                :class="item['classNmae'] || item['className'] ? (item['classNmae'] || item['className']): 'input20'"
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
              ></xd-select-status>
						</template>
						<template v-else-if="item.ele === 'xd-radio-status'">
							<xd-radio-status
							  :key="item['isKey'] ? item['key'] : item['valueKey']"
								:default-value="item['value']"
								v-model="form[item['valueKey']]"
								:placeholder="item['placeholder']"
								:type="item['list']"
								:type-value="item['backValueType'] || 1"
								:class="item['className']||'input100'"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-radio-status>
						</template>
						<template v-else-if="item.ele === 'xd-radio'">
							<xd-radio-list
							  :key="item['isKey'] ? item['key'] : item['valueKey']"
								:default-value="item['value']"
								v-model="form[item['valueKey']]"
								:placeholder="item['placeholder']"
								:list="item['list']"
								:border="item['border'] || false"
								:class="item['className']||''"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-radio-list>
						</template>
						<template v-else-if="item.ele === 'xd-switch'">
							<xd-switch
								:default-value="item['value']"
								v-model="form[item['valueKey']]"
								:showTips="item['showTips']"
								:list="item['list']"
								:type-value="item['backValueType']"
								:color="item['color']"
								:class="item['className']||'input100'"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-switch>
						</template>
						<template v-else-if="item.ele === 'xd-check'">
							<xd-check-list
							  :key="item['isKey'] ? item['key'] : item['valueKey']"
								:default-value="item['value']"
								v-model="form[item['valueKey']]"
								:list="item['list']"
								:size="size"
								:is-sort="item.isSort || false"
								:class="item['className']||'input100'"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-check-list>
						</template>
						<template v-else-if="item.ele === 'xd-range'">
							<xd-range
								v-model="form[`xdRange__${item['valueKey'].join('__')}`]"
								:placeholder="item['placeholder']"
								:size="size"
								:width="item['width']"
								:class="item['className']||'input100'"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-range>
						</template>
						<template v-else-if="item.ele === 'xd-time-picker'">
							<el-time-picker
								is-range
								v-model="form[item['valueKey']]"
								range-separator="至"
								:start-placeholder="item['placeholder'][0]"
								:end-placeholder="item['placeholder'][1]"
								:value-format="item['formatValue']"
								:format="item['format']"
								:selectableRange="item['selectableRange'] ? item['selectableRange']: []"
							></el-time-picker>
						</template>
						<template v-else-if="item.ele === 'xd-date-range'">
							<el-date-picker
								v-model="form[`xdDate__${item['valueKey'].join('__')}`]"
								type="datetimerange"
								class="xd-search__datetimerange"
								:picker-options="getTimeOptions(item)"
								range-separator="至"
								:start-placeholder="item['placeholder'][0]"
								:end-placeholder="item['placeholder'][1]"
								:value-format="item['formatValue']"
								:format="item['format']"
								align="right"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							>
							</el-date-picker>
						</template>
						<template v-else-if="item.ele === 'xd-date'">
							<el-date-picker
								v-model="form[item['valueKey']]"
								type="datetime"
								:placeholder="item['placeholder']"
								:value-format="item['formatValue']"
								:format="item['format']"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
								:picker-options="getTimeOptions(item, false)"
							>
							</el-date-picker>
						</template>
						<template v-else-if="item.ele === 'xd-transfer'">
							<xd-transfer
								:default-value="item['value']"
								:left-default-value="item['left']"
								:right-default-value="item['right']"
								v-model="form[item['valueKey']]"
								:title="item['title']"
								:placeholder="item['placeholder']"
								:list="item['list']"
							></xd-transfer>
						</template>
						<template v-else-if="item.ele === 'xd-upload'">
						  <div v-if="item['styleType'] === 'one'" style="width: 100%">
                <el-input
                  v-if="!item['slot']&&(item['showType']==='url'||!item['showType'])"
                  class="xd-base-field__upload-input"
                  disabled
                  :class="item['elinputClassName']"
                  v-model="form[item['valueKey']]['url']"
                ></el-input>
                <el-input
                  v-if="!item['slot']&&item['showType']==='name'"
                  class="xd-base-field__upload-input"
                  disabled
                  :class="item['elinputClassName']"
                  v-model="form[item['valueKey']]['name']"
                ></el-input>
                <xd-upload
                  :disabled="item['disabled'] || false"
                  v-if="item.styleType === 'one'"
                  style-type="one"
                  v-model="form[item['valueKey']]"
                  :default-value="item['defaultValue']"
                  :action="item['action']"
                  :is-material="item['isMaterial'] === undefined? null: item['isMaterial']"
                  :qiniu-cdn="item['qiniuCdn']"
                  :size="item['size']"
                  :type="item['type']"
                  :radius="0.5"
                  :pixel-size="item['pixelSize']||''"
                  :upload-type="item['uploadType']"
                  :tips="item['tipsformet']"
                  :showtype="true"
                  :item="item"
                  @success="handleSuccess"
                  @onApiSuccessUrl="handleApiSuccessUrl"
                  @onGetParamsAndHeader="handleGetParamsAndHeader"
                >
                  <template
                    v-if="item['slot']"
                    slot-scope="scope"
                  >
                    <slot :name="`upload_${item['valueKey']}`">
                      <div
                        class="xd-base-field__upload"
                        :class="{has:scope.image.path}"
                        :style="{width: getWH(item, true),height: getWH(item, false)}"
                      >
                        <xd-font-icon
                          class="xd-base-field__upload-icon"
                          icon="iconjia"
                          :size="getWHIcon(item)"
                          :color="!scope.image.path?'#999': 'rgba(0,0,0,0)'"
                        ></xd-font-icon>
                        <img :src="scope.image.path"/>
                      </div>
                    </slot>
                  </template>
                </xd-upload>
              </div>
							<xd-upload
							  :disabled="item['disabled'] || false"
								v-if="item.styleType === 'auth'"
								style-type="auth"
								v-model="form[item['valueKey']]"
								:default-value="item['defaultValue']"
								:action="item['action']"
								:qiniu-cdn="item['qiniuCdn']"
								:is-material="false"
								:size="item['size']"
								:pixel-size="item['pixelSize']||''"
								:type="item['type']"
								:radius="5"
								:upload-type="item['uploadType']"
								:showtype="true"
								:tips="item['tipsformet']"
								@success="handleSuccess"
								@onApiSuccessUrl="handleApiSuccessUrl"
								@onGetParamsAndHeader="handleGetParamsAndHeader"
							>
							</xd-upload>
							<xd-upload
							  :disabled="item['disabled'] || false"
								v-if="item.styleType === 'list'"
								style-type="list"
								v-model="form[item['valueKey']]"
								:default-value="item['defaultValue']"
								:action="item['action']"
								:qiniu-cdn="item['qiniuCdn']"
								:is-material="item['isMaterial'] === undefined? null: item['isMaterial']"
								:size="item['size']"
								:pixel-size="item['pixelSize']||''"
								:type="item['type']"
								:radius="5"
								:upload-type="item['uploadType']"
								:showtype="true"
								:tips="item['tipsformet']"
								:sort="item['sort'] || false"
								:maxlen="item['maxlen']"
								@success="handleSuccess"
								@onApiSuccessUrl="handleApiSuccessUrl"
								@onGetParamsAndHeader="handleGetParamsAndHeader"
							>
							</xd-upload>
						</template>
						<template v-else-if="item.ele === 'xd-over-add-price'">
							<xd-over-add-price
								:size="size"
								:default-value="item['defaultValue']"
								:keys="item['valueKey']"
								:list="item['list']"
								:unit="item['unit']"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
								v-model="form[getItemToFormKey(item, 'xdOverAddPrice')]"
							></xd-over-add-price>
						</template>
						<template v-else-if="item.ele === 'xd-select-week-time'">
							<xd-select-week-time
								:size="size"
								:default-value="item['defaultValue']"
								:keys="item['valueKey']"
								:list="item['list']"
								:collapse="true"
								:time-type="timeType"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
								v-model="form[getItemToFormKey(item, 'xdSelectWeekTime')]"
							></xd-select-week-time>
						</template>
						<template v-else-if="item.ele === 'xd-remote-cascader'">
              <xd-remote-cascader
                :placeholder="item['placeholder']"
                v-model="form[item['valueKey']]"
                :default-value="item['value']"
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
                :remote-search="item['handleChildren']"
                :multiple="item['multiple']"
                :notice="item['tips']"
                :required="getRequire(item['rules'])"
              ></xd-remote-cascader>
            </template>
            <template v-else-if="item.ele === 'xd-cascade-select'">
              <xd-cascade-select
                v-model="form[item['valueKey']]"
                @loadChildren="item['handleChildren']"
                :default-value="item['value']"
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
                :multiple="item['multiple']"
                :required="getRequire(item['rules'])"
              >
              </xd-cascade-select>
            </template>
            <template v-else-if="item.ele === 'xd-tinymce'">
              <xd-tinymce
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
                v-model="form[item['valueKey']]"
                :image-config="item['imageConfig'] || null"
                :height="item['height'] || 400"
                @success="handleSuccess"
                @onApiSuccessUrl="handleApiSuccessUrl"
                @onGetParamsAndHeader="handleGetParamsAndHeader"
              ></xd-tinymce>
            </template>
						<template v-else-if="item.ele === 'xd-range-group'">
							<xd-range-group
								:size="size"
								:keys="item.keys"
								:placeholder="item['placeholder']"
								:default-value="item['defaultValue']"
								:tip="item['tips']"
								v-model="form[item['valueKey']]"
								:disabled="item['disabled'] === undefined ? false: item['disabled']"
							></xd-range-group>
						</template>
						<template v-else-if="item.ele === 'xd-set-label'">
              <xd-set-label
                :disabled="item['disabled'] === undefined ? false: item['disabled']"
                :keys="item.keys"
                :list="item['list']"
                :defaultValue="item.defaultValue"
                v-model="form[item['valueKey']]"
              ></xd-set-label>
            </template>
						<template v-if="item['unit'] || item['notice']  || item['tips']">
              <el-tooltip
                v-if="item['tips']"
                class="xd-form-notice"
                effect="dark"
              >
                <div slot="content" v-html="item['tips']"></div>
                <i class="el-icon-info" style="color: #999;font-size: 16px"></i>
              </el-tooltip>
              <div
                v-else
                class="xd-form-notice"
                v-html="item.unit || item.notice"
              ></div>
            </template>
					</div>
				</el-form-item>
			</template>
		</el-form>
		<div class="xd-base-field__mask" v-if="!initStatus"></div>
	</div>
</template>

