<template>
  <div class="el-manager-detail">
    <slot name="header">
      <div v-if="title===''" class="el-manager-detail__header el-dialog__header">
        <span>
          <i class="el-icon-s-order" style="color: rgb(89, 166, 255);"></i>
          {{ title }}
        </span>
        <span style="float:right"
          ><el-button type="text" icon="el-icon-close" @click="handleClose()"></el-button
        ></span>
      </div>
    </slot>
    <div class="el-manager-detail__body el-dialog__body">
      <div class="el-manager-detail__menu" v-if="showMenu">
        <div
          v-for="item in detailData"
          :key="item._key"
          class="el-manager-detail__menu--item"
          @click="handleClick(item)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="el-manager-detail__content">
        <el-form ref="form" :model="queryModel" :size="size" :label-width="labelWidth" :rules="rules">
          <div
            v-for="(item, index) in detailData"
            :key="item._key"
            :id="item._key"
            :class="['el-manager-detail__content--item',{'is-border':border} ]"
          >
            <div
              class="el-manager-detail__content--header"
              v-if="showTitle && item.title"
            >
              <span>{{ item.title }}</span>
            </div>
            <div class="el-manager-detail__content--body">
              <template v-if="item.render">
                <slot :name="item._key"></slot>
              </template>
              <manager-form
                v-if="item.queryItems && queryModel"
                :queryItems="item.queryItems"
                :queryModel="queryModel"
                :defaultSpan="defaultSpan"
                :command="command"
                :gutter="gutter"
              >
                <template
                  :slot="slotItem.slot"
                  v-for="slotItem in querySpreadSlotItems(item.queryItems)"
                >
                  <el-form-item
                    :key="slotItem.slot"
                    :label="slotItem.label ? slotItem.label + ':' : ''"
                    :prop="slotItem.prop ? slotItem.prop : ''"
                    ><slot :name="slotItem.slot"></slot
                  ></el-form-item>
                </template>
              </manager-form>
            </div>
            <el-divider v-if="!border&&detailData.length !== index + 1"></el-divider>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManagerDetail',
  componentName: 'ManagerDetail',
  provide() {
    return {
      managerForm: this
    };
  },
  props: {
    rules: {
      type: Object,
      default: ()=>{}
    },
    size: {
      type: String,
      default: 'small'
    },
    border: {
      type: Boolean,
      default: false
    },
    showMenu: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    gutter: {
      type: Number,
      default: 20
    },
    command: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: 'auto'
    },
    queryModel: {
      type: Object,
      default: () => {}
    },
    detailData: {
      type: Array,
      default: () => []
    },
    defaultSpan: {
      type: Number,
      default: 8
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    staticData: {
      // 查询所需要的一些数据
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    validate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    },
    querySpreadSlotItems(item) {
      return item.filter(item => item.type === 'slot');
    },
    handleClose() {
      this.$emit('close');
    },
    handleClick(item) {
      this.goAnchor(item._key);
      this.$emit('handleMenuClick', item);
    },
    goAnchor(selector) {
      document.querySelector('#' + selector).scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'nearest'
      });
    }
  }
};
</script>
