<template>
  <div>
    <div class="el-dialog-div">
      <el-form
        :inline="false"
        ref="formFormRef"
        class="demo-form-inline"
        :model="formData"
        :disabled="formConfig.formEditDisabled"
        autocomplete="formConfig.autocomplete"
        :label-width="labelWidth"
      >
        <el-form-item
          v-if="item.if==undefined||item.if==true"
          v-for="item in formForm"
          :class="itemClass"
          v-show="item.show == undefined ? true : item.show"
          :label="item.label"
          :key="item.prop"
          :prop="item.prop"
          :rules="filter_rules(item.label, item.rules)"
          :label-width="item.labelWidth"
        >
          <!-- <span v-if="item.cusTomLabel" slot="label" :style="item.style">
            {{item.label}}
          </span> -->
          <!-- 输入框 -->
          <el-input
            v-if="item.type === 'Input'"
            :style="'width:' + item.width"
            v-model="formData[item.prop]"
            :placeholder="'请输入' + item.label"
            size="item.size"
            :clearable="item.clearable"
            :disabled="item.disabled && item.disabled(formData[item.prop])"
            @clear="item.clear && item.clear(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
            @input="item.input && item.input(formData[item.prop])"
            @focus="item.focus && item.focus(formData[item.prop])"
          ></el-input>
          <el-col v-if="item.type === 'Line'" class="line" :span="2">-</el-col>
          <el-input
            v-if="item.type === 'Input2'"
            :style="'width:' + item.width"
            v-model="formData[item.prop]"
            :placeholder="'请输入' + item.title"
            size="item.size"
            :clearable="item.clearable"
            :disabled="item.disabled && item.disabled(formData[item.prop])"
            @clear="item.clear && item.clear(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
            @input="item.input && item.input(formData[item.prop])"
            @focus="item.focus && item.focus(formData[item.prop])"
          ></el-input>
          <!-- <cron v-if="item.cron" @change="item.changeCron" @close="item.cron=false" i18n="cn"></cron> -->
          <!-- 下拉框 -->
          <!-- {
                              type: "Select",
                              label: "资讯分类",
                              prop: "contentTypeId",
                              options: [],
                              props:{label:"mainTypeName",value:"mainTypeId"}
                            }, -->
          <el-select
            :ref="item.ref"
            :style="'width:' + item.width"
            v-if="item.type === 'Select'"
            :multiple="item.multiple"
            :filterable="item.remote"
            :remote="item.remote"
            :remote-method="item.remoteMethod"
            v-model="formData[item.prop]"
            size="item.size"
            :disabled="item.disabled && item.disabled(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
            @focus="item.focus && item.focus(formData[item.prop], item.params)"
          >
            <el-option
              v-if="!(item.multiple || !item.default)"
              :label="'请选择' + item.label"
              value=""
            ></el-option>
            <el-option
              v-for="op in item.options"
              :label="item.props ? op[item.props.label] : op.label"
              :value="item.props ? op[item.props.value] : op.value"
              :key="item.props ? op[item.props.value] : op.value"
            ></el-option>
          </el-select>
          <!-- 单选 -->
          <el-radio-group
            :style="'width:' + item.width"
            v-if="item.type === 'Radio'"
            v-model="formData[item.prop]"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
            :disabled="item.disabled"
          >
            <el-radio
              v-for="ra in item.radios"
              :label="ra.value"
              :key="ra.value"
              >{{ ra.label }}</el-radio
            >
          </el-radio-group>
          <!-- 单选按钮 -->
          <el-radio-group
            :style="'width:' + item.width"
            v-if="item.type === 'RadioButton'"
            v-model="formData[item.prop]"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          >
            <el-radio-button
              v-for="ra in item.radios"
              :label="ra.value"
              :key="ra.value"
              >{{ ra.label }}</el-radio-button
            >
          </el-radio-group>
          <!-- 复选框 -->
          <el-checkbox-group
            :style="'width:' + item.width"
            v-if="item.type === 'Checkbox'"
            v-model="formData[item.prop]"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          >
            <el-checkbox
              v-for="ch in item.checkboxs"
              :label="ch.value"
              :key="ch.value"
              >{{ ch.label }}</el-checkbox
            >
          </el-checkbox-group>
          <!-- 级联选择器 -->
          <el-cascader
            v-if="item.type === 'Cascader'"
            v-model="formData[item.prop]"
            :options="item.data"
            filterable
            :props="
              Object.assign(item.props ? item.props : {}, {
                expandTrigger: 'hover',
                checkStrictly: true,
              })
            "
          ></el-cascader>
          <!-- 日期 -->
          <el-date-picker
            :style="'width:' + item.width"
            v-if="item.type === 'Date'"
            v-model="formData[item.prop]"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          ></el-date-picker>
          <!-- 日期范围 -->
          <el-date-picker
            :style="'width:' + item.width"
            v-if="item.type === 'DateRange'"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="formData[item.prop]"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          ></el-date-picker>
          <!-- 时间 -->
          <el-time-picker
            :style="'width:' + item.width"
            v-if="item.type === 'Time'"
            v-model="formData[item.prop]"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          ></el-time-picker>
          <!-- 时间范围 -->
          <el-time-picker
            :style="'width:' + item.width"
            v-if="item.type === 'TimeRange'"
            v-model="formData[item.prop]"
            is-range
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          ></el-time-picker>
          <!-- 日期时间 -->
          <el-date-picker
            :style="'width:' + item.width"
            v-if="item.type === 'DateTime'"
            type="datetime"
            v-model="formData[item.prop]"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="item.disable && item.disabled(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          ></el-date-picker>
          <!-- 日期时间范围 -->
          <el-date-picker
            :style="'width:' + item.width"
            v-if="item.type === 'DateTimeRange'"
            type="datetimerange"
            v-model="formData[item.prop]"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="item.disable && item.disabled(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
            :default-time="item.defaultTime"
          ></el-date-picker>
          <!-- 计数器 -->
          <el-input-number
            v-if="item.type === 'InputNumber'"
            v-model="formData[item.prop]"
            :style="'width:' + item.width"
            :disabled="item.disabled && item.disabled(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
          ></el-input-number>
          <!-- 开关 -->
          <el-switch
            v-if="item.type === 'Switch'"
            :disabled="item.disabled && item.disabled(formData[item.prop])"
            v-model="formData[item.prop]"
            :active-text="item.activeText || ''"
            :inactive-text="item.inActiveText || ''"
            :active-value="item.activeValue!=undefined ? item.activeValue : true"
            :inactive-value="item.inActiveValue !=undefined? item.inActiveValue : false"
          ></el-switch>
          <!-- 文本输入 -->
          <el-input
            v-if="item.type === 'Textarea'"
            type="textarea"
            :style="'width:' + item.width"
            :rows="item.rows ? item.rows : 2"
            v-model="formData[item.prop]"
            :placeholder="'请输入' + item.label"
            size="item.size"
            :disabled="item.disabled && item.disabled(formData[item.prop])"
            @change="
              item.change && item.change(formData[item.prop], item.params)
            "
            @input="item.input && item.input(formData[item.prop])"
            @focus="item.focus && item.focus(formData[item.prop])"
            :label-width="item.labelWidth"
          ></el-input>
          <!-- 省市区 -->
          <region
            v-if="item.type === 'Region'"
            ref="cascaderRegion"
            v-model="formData[item.prop]"
            :areaCode.sync="formData[item.prop]"
            :customStyle="'width:' + item.width"
            :disabled="item.disabled && item.disabled()"
          ></region>
          <!-- 文件上传 -->
          <!--           {type: "Upload",label: "封面",fileUrl:"imageUrl" 单个文件地址,prop:"fileList",accept:".jpg,.jpeg,.png,.JPG,.JPEG",width: "300px",}, -->
          <!-- <fileUpload
            :style="'width:' + item.width"
            v-if="item.type === 'Upload'"
            :file-list="formData[item.prop]"
            :fileUrl.sync="formData[item.fileUrl]"
            :fileList.sync="formData[item.prop]"
            :accept="item.accept"
            :tips="item.tips"
            :limit="item.limit"
            :multiple="item.multiple"
            :readonly="item.readonly"
            :filesize="item.filesize"
          ></fileUpload> -->
          <!-- 增加isVideo来修改原生listType为text的样式为视频类型 -->
          <!-- {{item.prop}} -->
          <fileUpload
                :style="'width:' + item.width"
                v-if="item.type === 'Upload'"
                :file-list="formData[item.prop]"
                :listType="item.listType"
                :isVideo="item.isVideo"
                :fileUrl.sync="formData[item.fileUrl]"
                :fileList.sync="formData[item.prop]"
                :accept="item.accept"
                :tips="item.tips"
                :limit="item.limit"
                :multiple="item.multiple"
                :readonly="item.readonly"
                :filesize="item.filesize"
                :drag="item.drag"
              ></fileUpload>
          <!-- <cusTable v-if="item.type==='Table'" 
                    :isIndex='item.isIndex'
                    :isPagination='item.isPagination'
                    :tableCols='item.tableCols' 
                    :tableHandles='item.tableHandles'
                    :tableData='item.tableData'
                    :tablePage='item.tablePage'></cusTable> -->
          <div class="sub-title">{{ item.suggestions }}</div>

          <!-- 树 -->
          <el-tree
            v-if="item.type === 'Tree'"
            :data="item.data"
            show-checkbox
            :default-expand-all="defaultexpandall"
            :node-key="item.key"
            :ref="item.ref"
            :default-checked-keys="item.checked"
            highlight-current
            :props="item.props"
          >
          </el-tree>

          <!-- 拖拽排序
                        {type: "Draggable",label: "拖拽排序",  data: [],  prop:'footprintTypeName',  key:'footprintTypeId'},
                     -->
          <draggable
            v-if="item.type === 'Draggable'"
            class="wrapper"
            v-model="item.data"
          >
            <transition-group>
              <div
                v-for="ditem in item.data"
                :key="ditem[item.key]"
                class="item"
              >
                {{ ditem[item.prop] }}
              </div>
            </transition-group>
          </draggable>
          <!-- 富文本 -->
          <!-- <tinymce
            :style="'width:' + item.width"
            v-if="item.type === 'Tinymce'"
            :showButton="false"
            id="formTinymce"
            :tinymceData="formData"
          ></tinymce> -->
          <tinymce
            v-if="item.type === 'Tinymce'"
            :style="'width:' + item.width"
            v-model="formData[item.prop]"
          ></tinymce>
          <!-- treeselect -->
          <selectNode
            v-if="item.type === 'TreeSelect'"
            :ref="item.ref"
            v-model="formData[item.prop]"
            :props="item.props"
            :options="item.data"
            :lazy="item.lazy"
            :url="item.url"
            :clearable="item.clearable"
          >
          </selectNode>
          <multiselectNode
            v-if="item.type === 'MultiTreeSelect'"
            :ref="item.ref"
            v-model="formData[item.prop]"
            :props="item.props"
            :options="item.data"
            :lazy="item.lazy"
            :url="item.url"
          >
          </multiselectNode>
          <el-divider v-if="item.divider"></el-divider>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-left: 30px">
      <el-button
        v-for="item in formHandles"
        :key="item.label"
        :type="item.type"
        :icon="item.icon"
        :disabled="formConfig.disabled && item.disabled()"
        @click="item.handle()"
        >{{ item.label }}</el-button
      >
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import tinymce from "../../tinymce/index.vue";
import fileUpload from "../upload/fileUpload.vue";
import region from "../region/region.vue";
export default {
  components: {
    draggable,
    fileUpload,
    tinymce,
    region,
  },
  props: {
    labelWidth: {
      type: String,
      default: "100px",
    },
    itemClass: {
      type: String,
      default: "form_input",
    },
    formConfig: {
      type: Object,
      default: () => ({
        title: "新增",
        show: false,
        width: "700px",
        formEditDisabled: false,
        autocomplete: false,
      }),
    },
    formFormRef: {
      type: String,
      default: "formFormRef",
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    formHandles: {
      type: Array,
      default: () => [],
    },
    formForm: {
      type: Array,
      default: () => [],
    },
    defaultexpandall: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  // max-height: 60vh;
  overflow: auto;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.item {
  margin-bottom: 5px;
  padding: 0px 5px;
  border: 1px solid #000000;
}

</style>