<template>
  <div>
    <el-dialog
      class="m-dialog"
      :title="modalConfig.title"
      :visible.sync="modalConfig.show"
      :width="modalConfig.width"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      @close="closeModal"
      :fullscreen="modalConfig.fullscreen"
    >
     
      <slot name="dialog__content">
        <!-- tinymce的顶部工具栏 -->
        <!-- <div id="tinymce_fixed_toolbar"></div> -->
        <div class="el-dialog-div" :style="{'max-height':modalConfig.fullscreen?'calc(100vh - 54px - 70px - 60px)':''}">
          <slot name="dialog__before"></slot>
          <el-form
            :inline="true"
            :key="modalConfig.key ? modalConfig.key : ''"
            ref="modalFormRef"
            class="demo-form-inline"
            :model="modalData"
            :disabled="modalConfig.formEditDisabled"
            autocomplete="modalConfig.autocomplete"
            :label-width="labelWidth"
          >
            <el-form-item
              style="width: calc(100% - 10px)"
              v-for="item in modalForm"
              :class="itemClass"
              v-show="item.show == undefined ? true : item.show"
              :label="item.label"
              :key="item.label"
              :prop="item.prop"
              :rules="filter_rules(item.label, item.rules)"
              :label-width="item.labelWidth"
            >
              <!-- 公告模块 -->
              <div v-if="item.type === 'Notice'">
                <el-button
                  style="margin-bottom: 20px"
                  :type="item.style"
                  @click="item.handle"
                >
                  {{ item.content }}
                </el-button>
                <el-form
                  :ref="'NoticeForm' + index"
                  style="position: relative"
                  v-for="(notice, index) in modalData[item.prop]"
                  :key="index"
                  :model="modalData[item.prop][index]"
                  :rules="item.rules"
                  label-width="0px"
                >
                  <el-form-item
                    :prop="item.childProp"
                    style="margin-bottom: 20px"
                  >
                    <el-input
                      type="textarea"
                      :style="{ width: item.width }"
                      :rows="4"
                      v-model="notice[item.childProp]"
                      :placeholder="'请输入' + item.label"
                    ></el-input>
                    <div
                      @click="item.del(index)"
                      style="
                        cursor: pointer;
                        color: #fff;
                        background-color: #f56c6c;
                        border-color: #f56c6c;
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        height: 14px;
                        width: 14px;
                        text-align: center;
                        line-height: 14px;
                      "
                      type="danger"
                      circle
                    >
                      ×
                    </div>
                  </el-form-item>
                </el-form>
              </div>

              <!-- 输入框 -->
              <el-input
                v-if="item.type === 'Input'"
                :show-word-limit="item.showWordLimit"
                :maxlength="item.maxlength"
                :style="'width:' + item.width"
                v-model="modalData[item.prop]"
                :placeholder="
                  item.placeholder != undefined
                    ? item.placeholder
                    : '请输入' + item.label
                "
                size="item.size"
                :clearable="item.clearable"
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
                @clear="item.clear && item.clear(modalData[item.prop])"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
                @input="item.input && item.input(modalData[item.prop])"
                @focus="item.focus && item.focus(modalData[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="modalData[item.prop]"
                :placeholder="'请输入' + item.title"
                size="item.size"
                :clearable="item.clearable"
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
                @clear="item.clear && item.clear(modalData[item.prop])"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
                @input="item.input && item.input(modalData[item.prop])"
                @focus="item.focus && item.focus(modalData[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="modalData[item.prop]"
                size="item.size"
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
                @focus="
                  item.focus && item.focus(modalData[item.prop], item.params)
                "
              >
                <el-option
                  v-if="!item.multiple"
                  :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="modalData[item.prop]"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
              >
                <el-radio
                  v-for="ra in item.radios"
                  :label="ra.value"
                  :border="item.border"
                  :key="ra.value"
                  >{{ ra.label }}</el-radio
                >
              </el-radio-group>
              <!-- 单选按钮 -->
              <el-radio-group
                :style="'width:' + item.width"
                v-if="item.type === 'RadioButton'"
                v-model="modalData[item.prop]"
                @change="
                  item.change && item.change(modalData[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="modalData[item.prop]"
                @change="
                  item.change && item.change(modalData[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
                :style="{width:item.width}"
                v-if="item.type === 'Cascader'"
                v-model="modalData[item.prop]"
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
                :options="item.data"
                filterable
                :props="
                  Object.assign(item.props ? item.props : {}, {
                    expandTrigger: 'hover',
                    checkStrictly: false,
                  })
                "
              ></el-cascader>
              <!-- 开关 -->
              <el-switch
                :style="{ width: item.width }"
                v-if="item.type === 'Switch'"
                v-model="modalData[item.prop]"
                :active-text="item.activeText || ''"
                :inactive-text="item.inActiveText || ''"
                :active-value="item.activeValue ? item.activeValue : true"
                :inactive-value="
                  item.inActiveValue ? item.inActiveValue : false
                "
                :disabled="item.disabled&&item.disabled(modalData[item.prop])"
              >
              </el-switch>
              <!-- 日期 -->
              <el-date-picker
                :style="'width:' + item.width"
                v-if="item.type === 'Date'"
                v-model="modalData[item.prop]"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="
                  item.change && item.change(modalData[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="modalData[item.prop]"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
              ></el-date-picker>
              <!-- 时间 -->
              <el-time-picker
                :style="'width:' + item.width"
                v-if="item.type === 'Time'"
                v-model="modalData[item.prop]"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
              ></el-time-picker>
              <!-- 时间范围 -->
              <el-time-picker
                :style="'width:' + item.width"
                v-if="item.type === 'TimeRange'"
                v-model="modalData[item.prop]"
                is-range
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
              ></el-time-picker>
              <!-- 日期时间 -->
              <el-date-picker
                :style="'width:' + item.width"
                v-if="item.type === 'DateTime'"
                type="datetime"
                v-model="modalData[item.prop]"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="item.defaultTime ? item.defaultTime : '00:00:00'"
                :disabled="item.disable && item.disabled(modalData[item.prop])"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
              ></el-date-picker>
              <!-- 日期时间范围 -->
              <el-date-picker
                :style="'width:' + item.width"
                v-if="item.type === 'DateTimeRange'"
                type="datetimerange"
                :picker-options="item.pickerOptions"
                v-model="modalData[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(modalData[item.prop])"
                @change="(val)=>changeDate(val,item)
            
          "
                :default-time="item.defaultTime"
              ></el-date-picker>
              <!-- 计数器 -->
              <el-input-number
                v-if="item.type === 'InputNumber'"
                v-model="modalData[item.prop]"
                :style="'width:' + item.width"
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
                :min="item.min"
              ></el-input-number>
              <!-- textarea -->
              <el-input
                v-if="item.type === 'Textarea'"
                type="textarea"
                :maxlength="item.maxlength"
                :show-word-limit="item.showWordLimit"
                :autosize="item.rows ? false : true"
                :style="{ width: item.width }"
                :rows="item.rows ? item.rows : 2"
                v-model="modalData[item.prop]"
                :placeholder="'请输入' + item.label"
                size="item.size"
                :disabled="item.disabled && item.disabled(modalData[item.prop])"
                @change="
                  item.change && item.change(modalData[item.prop], item.params)
                "
                @input="item.input && item.input(modalData[item.prop])"
                @focus="item.focus && item.focus(modalData[item.prop])"
                :label-width="item.labelWidth"
              ></el-input>
              <!-- 省市区 -->
              <region
                v-if="item.type === 'Region'"
                ref="cascaderRegion"
                v-model="modalData[item.prop]"
                :areaCode.sync="modalData[item.prop]"
                :customStyle="'width:' + item.width"
                :disabled="item.disabled && item.disabled()"
              ></region>
              <!-- 试卷 -->
              <paper v-if="item.type==='Paper'"
              :width="item.width"
              :paper="modalData[item.prop]" />
              <!-- 图片 -->
              <el-image
                v-if="item.type == 'Img'"
                
                :preview-src-list="[modalData[item.prop]]"
                :src="modalData[item.prop]"
                :style="{width:item.width}"
              >
                <img
                  slot="error"
                  :src="require('@/assets/images/noimg.svg')"
                  alt=""
                />
              </el-image>

              <!-- 视频 -->
              <video :src="modalData[item.prop]" v-if="item.type === 'Video'&&modalData[item.prop]" :width="item.width" controls>
              </video>
              <span v-if="item.type === 'Video'&&!modalData[item.prop]">暂无视频</span>
              <audio :src="modalData[item.prop]" v-if="item.type === 'Audio'&&modalData[item.prop]" :width="item.width" controls>
              </audio>
              <span v-if="item.type === 'Audio'&&!modalData[item.prop]">暂无音频</span>

              <!-- 文件上传 -->
              <!--           {type: "Upload",label: "封面",fileUrl:"imageUrl" 单个文件地址,prop:"fileList",accept:".jpg,.jpeg,.png,.JPG,.JPEG",width: "300px",}, -->
              <!-- 增加isVideo来修改原生listType为text的样式为视频类型 -->
              <fileUpload
                :style="'width:' + item.width"
                v-if="item.type === 'Upload' && modalConfig.show"
                :file-list="modalData[item.prop]"
                :drag="item.drag"
                :listType="item.listType"
                :isVideo="item.isVideo"
                :fileUrl.sync="modalData[item.fileUrl]"
                :fileList.sync="modalData[item.prop]"
                :accept="item.accept"
                :tips="item.tips"
                :limit="item.limit"
                :multiple="item.multiple"
                :readonly="item.readonly"
                :filesize="item.filesize"
              ></fileUpload>

              <cusTable
                ref="modalFormTable"
                :style="{ width: item.width }"
                v-if="item.type === 'Table'"
                :isIndex="item.isIndex"
                :isPagination="item.isPagination"
                :tableCols="item.tableCols"
                :tableHandles="item.tableHandles"
                :tableData="modalData[item.prop]"
                :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>
              <!-- 时间线
            <el-timeline class="Timeline" v-if="item.type==='Timeline'" :reverse="item.reverse?item.reverse:false">
                <el-timeline-item
                v-for="(activity, index) in modalData[item.prop]"
                :key="index"
                :timestamp="activity.startTime+'-'+activity.endTime">
                {{activity.content}}
                <div class="Timeline-del" @click="item.del(index)" size="mini" type="danger"  >×</div>
                </el-timeline-item>
            </el-timeline> -->
              <!-- 拖拽排序
                        {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>
              <!-- 展示富文本 -->
              <div
                class="ShowTinymce"
                :style="{ width: item.width }"
                v-if="item.type === 'ShowTinymce'"
              >
                <div v-html="modalData[item.prop]"></div>
              </div>
              <!-- 富文本 -->
              <div v-if="item.type === 'Tinymce' && modalConfig.show">
                <notice />
                <tinymce
                  class="rich_text_editor"
                  :style="'width:' + item.width"
                  :config="item.config"
                  :extraPlugins="item.extraPlugins"
                  :extraToolbars="item.extraToolbars"
                  :plugins="item.plugins"
                  :toolbars="item.toolbars"
                  v-model="modalData[item.prop]"
                ></tinymce>
              </div>
              <!-- <tinymce
              :style="'width:' + item.width"
              v-if="item.type === 'Tinymce' && modalConfig.show"
              v-model="modalData[item.prop]"
            ></tinymce> -->
              <!-- treeselect -->
              <selectNode
                v-if="item.type === 'TreeSelect'"
                :ref="item.ref"
                v-model="modalData[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="modalData[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>
          <slot name="dialog__after"></slot>
        </div>
      </slot>
      
      <span slot="footer" class="dialog-footer">
        <el-button
          v-for="item in modalHandles"
          :key="item.label"
          :type="item.type"
          :icon="item.icon"
          :disabled="item.disabled&&item.disabled()"
          v-show="modalConfig.type != commonConstants.modalType.detail"
          :loading="item.loading"
          @click="item.submit?globalVerify(item.handle):item.handle(item)"
          >{{ item.label }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import paper from '../content-editor/paper/paper.vue'
import notice from "../../tinymce/notice.vue";
import draggable from "vuedraggable";
import tinymce from "../../tinymce/index.vue";
import fileUpload from "../upload/fileUpload.vue";
import region from "../region/region.vue";
import cusTable from "../table/custable.vue";
export default {
  components: {
    draggable,
    fileUpload,
    tinymce,
    notice,
    region,
    cusTable,
    paper
  },
  props: {
    labelWidth: {
      type: String,
      default: "100px",
    },
    itemClass: {
      type: String,
      default: "form_input",
    },
    modalConfig: {
      type: Object,
      default: () => ({
        title: "新增",
        show: false,
        width: "700px",
        formEditDisabled: true,
        autocomplete: false,
      }),
    },
    modalFormRef: {
      type: String,
      default: "modalFormRef",
    },
    modalData: {
      type: Object,
      default: () => ({}),
    },
    modalHandles: {
      type: Array,
      default: () => [],
    },
    modalForm: {
      type: Array,
      default: () => [],
    },
    defaultexpandall: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    closeModal() {
      this.$emit("closeModal");
    },
    // 全局校验
    globalVerify(_fn){
      this.$refs.modalFormRef.validate(val=>{
        if(val){
          _fn()
        }
      })
    },
    changeDate(val,item){
      if(!val){
        this.searchData[item.prop]=[]
      }
      item.change && item.change(val, item.params)
    }
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  max-height: 60vh;
  padding: 0 20px;
  overflow: auto;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.item {
  margin-bottom: 5px;
  padding: 0px 5px;
  border: 1px solid #000000;
}

.Timeline {
  margin-top: 15px;
  line-height: 14px;
  .el-timeline-item {
    position: relative;
  }
  .Timeline-del {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;

    cursor: pointer;
    // padding: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-bottom: 3px;
    line-height: 14px;
  }
  .el-form-item__content {
    line-height: 14px !important;
  }
}
.ShowTinymce {
  box-shadow: 0px 0px 10px rgb(230, 230, 230);
  border-radius: 5px;
  padding:10px
}
.m-dialog ::v-deep {
  .el-dialog__body{
    padding: 30px 0px;
  }
  .el-dialog__footer{
    height: 70px;
  }
}
.rich_text_editor ::v-deep {
  .tox-editor-header{
    position: fixed;
    top: 0;
  }
}
#tinymce_fixed_toolbar{
  position: fixed;
  top: 54px;
  width: 100%;
}
</style>