<template>
  <div>
    <a-form-model-item label="分组名称">
      <a-input v-model.trim="component.attrFD.formItemProps.inputProps.caption" />
    </a-form-model-item>
    <a-form-model-item label="默认值">
      <a-input v-model="component.attr.defaultValue" />
    </a-form-model-item>
  </div>
</template>

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

export const metaInfo = {
  caption: '基本信息',
  icon: 'sd-list',
  component: {
    props: ['context', 'designerData'],
    render() {
      return (
        <div class='maingroupdiv'>
          <div class='groupstyle'>
            <span class='expandicon' vOn:click={() => this.context.changeexpand()}>
              <a-icon type={this.expanded ? 'minus-square' : 'plus-square'} theme={'filled'} />
              {this.designerData.attrFD.formItemProps.inputProps.caption}
            </span>
          </div>
        </div>
      )
    },
  },
  order: 900,
  category: 'basic',
}

export const fieldProps = {
  dataType: 'string',
  contents: [],
  attrFD: {
    formItemProps: { inputProps: { caption: '基本信息' } },
  },
  attr: {
    defaultValue: 'true',
  },
}

export default {
  name: 'XmDatagroup',
  components,
  data() {
    return {}
  },
  methods: {},
}
</script>

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

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