<template>
  <div
    class="info-collapse"
  >
    <el-collapse
      v-model="activeName"
      :accordion="false"
    >
      <template
        v-for="(item, index) in data"
        :key="index"
      >
        <el-collapse-item
          v-show="item.show ? item.show() : true"
          :name="index"
        >
          <template #title>
            <div class="collapse-title">
              <div class="title">
                {{
                    typeof item.title === "function"
                      ? $t(item.title())
                      : $t(item.title)
                }}
              </div>
            </div>
          </template>
          <slot :name="item.slotName" />
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import { reactive, defineComponent } from 'vue'
interface dataInterface {
  title: Function | string
  slotName: string
  show?: Function
  rowConfig?: object
  modelData?: object
}
export default defineComponent({
  name: 'InfoCollapse',
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    data: {
      type: Array<dataInterface>,
      default: () => {
        return []
      }
    }
  },
  setup () {
    const activeName: string | number[] = reactive([])
    return {
      activeName
    }
  }
})
</script>
<style lang="scss" scoped>
.info-collapse {
  padding: 0 5px;
  .collapse-title {
    flex: 1;
    order: 1;
    display: flex;
    align-items: center;

    :deep(.el-form-item--small.el-form-item) {
      margin-bottom: 0px;
    }
  }

  :deep(.el-collapse-item__header) {
    line-height: 1;
  }

  .title {
    font-weight: bold;
  }
}
</style>
