<template>
  <cms-modal
    v-model="visible"
    @onCancel="onCancel"
    @close="onCancel"
    @show="show"
    class="cms-page-form"
    :closable="false"
    :footer="footer"
    :modal-height="formHeight"
    :modal-width="formWidth"
    :modal-title="formTitle"
    :show-footer="showFooter"
    :modal-config="defaultModalConfig"
    :modal-callback="modalCallback"
  >
    <cms-edit-form
      v-bind="formConfig"
      ref="formRef"
      :label-width="labelWidth"
      :form-model="formModel"
      :form-rules="formRules"
      :form-type="formType"
      v-on="listeners">
      <el-collapse v-if="formCollapseItem.length > 0" v-model="activeNames" :accordion="accordion">
        <div class="el-collapse-item-d" v-for="(item, index) in formCollapseItem" :key="index">
          <el-collapse-item :name="item.name" :id="item.name">
            <div slot="title" style="padding-left: 0">
              <i class="el-icon-notebook-1"></i> {{ item.title }}
            </div>
            <slot :name="item.name"></slot>
          </el-collapse-item>
        </div>
      </el-collapse>
      <slot v-else></slot>
    </cms-edit-form>
    <template slot="footer">
      <div class="cms-page-button">
        <div class="form-item-anchor">
        <span v-for="(item, index) in formCollapseItem" :key="index">
          <a href="javascript:void(0)" :class="item.name === activeName ? 'active' : ''"
             @click="jumpToPosition(item.name)">
            <i class="el-icon-info"></i>
            {{ item.title }}</a>
        </span>
        </div>
        <div class="form-item-button">
          <slot name="buttons">
            <cms-button
              type="primary"
              v-if="showSubmit && !(formType === 'view' || formType === 'approval')"
              @click="onSubmit">
              <span>{{ $t("common.button.submit") }}</span>
            </cms-button>
            <cms-button
              @click="onSave"
              v-if="!(formType === 'view' || formType === 'approval')"
              type="primary">
              <span>{{ $t("common.button.save") }}</span>
            </cms-button>
            <cms-button type="info" @click="onBack">
              <span>{{ $t("common.button.back") }}</span>
            </cms-button>
          </slot>
        </div>
      </div>
    </template>
  </cms-modal>
</template>

<script>
import { EditFormMixin, CmsDialogFormMixin } from "./edit-form-mixin";

export default {
  name: "CmsDialogForm",
  mixins: [ EditFormMixin, CmsDialogFormMixin ],
  provide() {
    return {
      CmsDialogForm: this
    };
  },
  data() {
    return {
      dialogStyle: {},
      activeName: this.formCollapseItem.length > 0 ? this.formCollapseItem[0].name : ''
    }
  },
  created() {
    console.log('=========this.modalConfig', this.modalConfig);
    if (this.initFun)
      this.initFun();
    // console.log(this.$refs);
    // this.$refs.editForm.clearValidate();
  },
  methods: {
    /** 提交 */
    onSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$emit("submit", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 执行保存 */
    onSave() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$emit("save", this.formModel);
        } else {
          return false;
        }
      });
    },
    /** 重置表单 */
    resetFields() {
      this.$refs['formRef'].resetFields();
    },
    validate(callback) {
      this.$refs['formRef'].validate((valid) => {
        if (callback) callback(valid);
      });
    },
    validateField(props = [], callback) {
      this.$refs['formRef'].validateField(props, (valid) => {
        if (callback) callback(valid);
        return false
      });
    },
    clearValidate(props = []) {
      this.$refs['formRef'].clearValidate(props);
    },
    /** 执行返回 */
    onBack() {
      this.$emit("back", false, this.formModel);
    },
    onCancel() {
      this.$emit("back", false);
    },
    show() {
      this.clearValidate();
    },
    /**/
    jumpToPosition(name) {
      this.activeName = name;
      document.querySelector("#" + name).scrollIntoView(true);
    },
    onFullScreen() {
      // this.$messageTips.success(window.innerHeight);
      this.dialogStyle = {
        top: 0,
        height: window.innerHeight,
        width: window.innerWidth
      }
    }
  },
  computed: {
    defaultModalConfig() {
      return Object.assign({}, {
        'resize': false,
        'fullscreen': true,
        'show-close': false,
        'show-zoom': false,
        'mask-closable': false,
        'esc-closable': false,
      }, { ...this.modalConfig })
    },
    activeNames: {
      get() {
        const list = [];
        for (let i = 0; i < this.formCollapseItem.length; i++) {
          const item = this.formCollapseItem[i];
          if (item.collapse) {
            list.push(item.name);
          }
        }
        return list;
      },
      set(val) {
        console.log('activeNames===', val)
      }
    }
  }
};
</script>

<style scoped lang="scss">
.edit-form-main {
  padding: 20px 0 0 0;
}

.edit-form-page {
  padding: 20px 20px 0 0 !important;
  flex-direction: column;
}

.el-card__body {
  padding: 0 !important;
  position: static;
}

.edit-page-form {
  padding: 0 !important;
  margin: 20px 20px 0 0;
}

.edit-form-main {
  padding: 0;
}

.edit-page-form-1 {
  padding: 0 !important;
}

.el-collapse-item__wrap {
  padding: 10px 10px 10px 0 !important;
}
</style>
