<template>
  <div :class="$style.maingroupdiv">
    <div :class="$style.groupstyle">
      <span :class="$style.expandicon" @click="changeexpand">
        <a-icon :type="expanded ? 'minus-square' : 'plus-square'" :theme="'filled'" />
        {{ caption }}
      </span>
    </div>
    <div :class="$style.expandCount">
      <span></span>
    </div>
  </div>
</template>

<script>
import components from './_import-components/xm-datagroup-render-import'

const XmDatagroupRender = {
  name: 'XmDatagroupRender',
  metaInfo: {
    title: 'XmDatagroupRender',
  },
  components: {
    ...components,
  },
  props: {
    caption: {
      type: String,
      default: '',
    },
    fields: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      expanded: true,
    }
  },
  inject: {
    webflow: { default: () => ({}) },
    SdFormContext: { default: () => ({}) },
  },
  created() {},
  methods: {
    changeexpand() {
      this.expanded = !this.expanded
      this.$emit('input', this.expanded.toString())
    },
  },
}

export default XmDatagroupRender
export { XmDatagroupRender as forDisplay }
</script>

<style module lang="scss">
@use '@/common/design' as *;

.expandicon {
  // color: #0b75f3;#40a9ff
  // color: rgba(0, 0, 0, 0.85);
  color: #40a9ff;
  line-height: 22px;
  cursor: pointer;
}
.maingroupdiv {
  position: relative;
  .groupstyle {
    float: left;
    position: relative;
    z-index: 11;
  }
  .expandCount {
    // float: right;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
