<template>
  <cms-drawer
    v-model="inputValue"
    @close="close"
    @open="open"
    :title="title"
    :before-close="handleClose"
    :direction="direction"
    :size="formWidth"
  >
    <template slot="default">
      <cms-edit-form
        v-bind="formConfig"
        ref="formRef"
        class="box-card cms-page-form"
        :label-width="labelWidth"
        :form-model="formModel"
        :form-rules="formRules"
        :form-type="formType"
        v-on="listeners">
        <slot v-if="formCollapseItem.length === 0"></slot>
        <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>
      </cms-edit-form>
    </template>
    <template slot="anchor">
      <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>
    </template>
    <template slot="buttons">
      <slot name="buttons"></slot>
    </template>
  </cms-drawer>
</template>

<script>
import { CmsEditFormViewMixin } from '../CmsDrawer/_CmsEditFormView'
import { EditFormMixin } from './edit-form-mixin'

export default {
  name: "CmsEditFormView",
  mixins: [ CmsEditFormViewMixin, EditFormMixin ],
  data() {
    return {
      activeName: this.formCollapseItem.length > 0 ? this.formCollapseItem[0].name : ''
    }
  },
  mounted() {
  },
  methods: {
    open() {
      this.$emit('open');
    },
    close() {
      this.inputValue = false;
      this.$emit('close');
    },
    handleClose(done) {
      if (this.beforeClose && this.beforeClose(done)) {
        if (this.modalCallback) this.modalCallback();
        done();
      } else done();
    },
    /**/
    jumpToPosition(name) {
      document.querySelector("#" + name).scrollIntoView(true);
    },
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    },
    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) {
      }
    }
  },
  props: {
    formTitle: { // modal 标题
      type: String,
      default: () => {
        return ''
      }
    },
    formWidth: { // modal 宽度
      type: [ String, Number ],
      default: () => {
        return '30%'
      }
    },
    formConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    modalCallback: {
      type: Function,
      required: false,
      default: () => {
        return undefined
      }
    },
    formCollapseItem: {
      type: Array,
      default: () => {
        return []
      }
    },
    accordion: {
      type: Boolean,
      default: false,
    },
  }
}
</script>

<style lang="scss">
.custom-drawer-cls {
  .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;
  }

  .el-drawer {
    min-width: 300px;
  }

  .el-drawer__body {
    overflow: hidden !important;
  }

  .el-drawer__header {
    padding: 8px 15px !important;
    color: #FFFFFF !important;
    font-weight: bold;
    background-color: #409eff !important;

    i {
      flex: 0;
      color: #F2F2F2;
      font-weight: bold;
      margin-top: 3px;
      width: auto !important;
      padding: 0 10px 0 0;
    }
  }


  .el-drawer__main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 37px);

    .el-drawer__content {
      flex: 1;
      padding: 5px;
      height: calc(100vh - 90px);
      overflow-y: auto;
      overflow-x: hidden;
    }

    .el-drawer__footer {
      width: 100%;
      border-top: 1px solid #eaf0f3;
      height: 50px;
      line-height: 50px;
      text-align: right;
      padding-right: 10px;
      margin-right: 10px;
    }
  }
}

</style>