<template>
  <div class="vee-label-edit-list">
    <div class="vee-label-edit-list-content">
      <div
        class="vee-label-edit-list-item"
        v-for="item of propsKeys"
        :key="item"
      >
        <VeeLabelEditItem
          class="vee-object-edit-input"
          :model="model.props[item]"
          :parentPropPath="parentPropPath"
        ></VeeLabelEditItem>
      </div>
    </div>
    <div class="vee-more-wrapper" v-if="mNeedShowMore" :class="{'vee-more-wrapper-show': !model.isMore}">
      <span class="vee-more-btn vee-more-arrow-down" v-show="!model.isMore" @click="handleArrowDownBtnClick">显示更多</span>
      <span class="vee-more-btn vee-more-arrow-up" v-show="model.isMore" @click="handleArrowUpBtnClick">收起</span>
    </div>
  </div>
</template>
<script>
import VeeLabelEditItem from './VeeLabelEditItem'
import { mapGetters } from 'vuex'
import { veeStoreName } from '../store/name'

export default {
  name: 'VeeLabelEditList',
  components: {
    VeeLabelEditItem
  },
  props: {
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    parentPropPath: {
      type: String,
      default: ''
    },
    ignoreKeys: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    handleArrowDownBtnClick () {
      this.model.isMore = !this.model.isMore
    },
    handleArrowUpBtnClick () {
      this.model.isMore = !this.model.isMore
    }
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(veeStoreName, ['needShowMore', 'showMoreLimit']),
    mNeedShowMore () {
      return this.needShowMore && this.allPropsKeys.length > this.showMoreLimit
    },
    allPropsKeys () {
      return Object.keys(this.model.props).filter(key => {
        return !this.ignoreKeys.includes(key)
          && !this.model.props[key].hideInEditor // 隐藏的不显示，避免显示更多与简化配置冲突
      })
    },
    propsKeys () {
      if (!this.mNeedShowMore || this.model.isMore) return this.allPropsKeys
      return Object.keys(this.model.props).slice(0, this.showMoreLimit)
    }
  }
}
</script>

<style lang="scss">
</style>
