<template>
  <div>
    <el-card :class="!showButtons ? 'box-card cms-page-form no-buttons' : 'box-card cms-page-form'">
      <div slot="header" class="clearfix cms-page-form-header" v-if="titleConfig && titleConfig.title">
        <span class="cms-page-form-title">
          <i class="el-icon-document" style="margin-right: 5px;font-size: 18px;margin-top: -8px"></i>
          {{ titleConfig.title }}
        </span>
        <span class="cms-page-form-tips">
          <span class="cms-page-form-date">
           <el-icon class="el-icon-date" style="margin-right: 5px"></el-icon>{{ titleConfig.date }}
          </span>
          <span class="cms-page-form-info">
            <el-icon class="el-icon-info" style="margin-right: 5px"></el-icon>{{ titleConfig.info }}</span>
        </span>
      </div>
      <cms-edit-form
        v-bind="$attrs"
        ref="formRef"
        :label-width="labelWidth"
        :form-model="formModel"
        :form-rules="formRules"
        :form-type="formType">
        <el-collapse v-if="formCollapseItem.length > 0" v-model="activeNames" :accordion="accordion">
          <el-collapse-item v-for="(item, index) in formCollapseItem" :key="index" :name="item.name" :id="item.name">
            <div slot="title" style="padding-left: 0">
              <i class="el-icon-notebook-1"></i> {{ item.title }}
            </div>
            <div :style="!item.isTable ? 'padding: 10px': 'paddingTop: 0'">
              <slot :name="item.name"></slot>
            </div>
          </el-collapse-item>
        </el-collapse>
      </cms-edit-form>
      <div class="cms-page-button" v-if="showButtons">
        <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
              @click="onBack">
              <span>{{ $t("common.button.back") }}</span>
            </cms-button>
          </slot>
        </div>
      </div>
    </el-card>
    <el-backtop :visibility-height="50" target=".cms-page-form"></el-backtop>
  </div>
</template>

<script>
  import { EditFormMixin, CmsPageFormMixin } from './edit-form-mixin'
  import { childNav } from '@/comps/mixin/routerNavTools'
  import { formatDate } from "@/utils/formatTime";

  export default {
    name: "CmsPageForm",
    mixins: [ EditFormMixin, CmsPageFormMixin, childNav ],
    provide() {
      return {
        CmsPageForm: this
      };
    },
    data() {
      return {
        activeName: this.formCollapseItem.length > 0 ? this.formCollapseItem[0].name : ''
      };
    },
    methods: {
      /**/
      jumpToPosition(name) {
        this.activeName = name;
        document.querySelector("#" + name).scrollIntoView(true);
      },
      /** 提交 */
      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();
      },
      /** 执行返回 */
      onBack() {
        if (this.formType === 'view') {
          this.$close();
        }
        this.$emit("back");
      },
      getForm() {
        return this.$refs.formRef;
      },
      validate(callback) {
        this.$refs.formRef.validate((valid) => {
          if (callback) callback(valid);
        });
      },
      clearValidate(props = []) {
        this.$refs['formRef'].clearValidate(props);
      },
    },
    mounted() {
      if (this.titleConfig) {
        this.titleConfig.date = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS')
      }
    },
    props: {
      titleConfig: { type: Object, default: () => undefined },
    },
  };
</script>

<style scoped lang="scss">
  .el-page-header {
    line-height: 50px;
  }

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

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

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

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