<template>
  <div class="awc-containter">
    <a-form v-bind="layout" v-if="tablecell && Object.keys(tablecell).length > 0" :key="1">
      <a-collapse v-model:activeKey="chooseTab" ghost expandIconPosition="right">
        <a-collapse-panel key="property">
          <template #header><NodeHead nodeName="基础配置" /> </template>
          <a-form-item :label="t('高度')">
            <a-input-number v-model:value="tablecell.height" size="mini" />
          </a-form-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { inject, ref, Ref } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { TableCell } from '../types';

  const { t } = useI18n();
  const tablecell = inject<Ref<TableCell>>('tableCell');
  const chooseTab = ref(['property']);
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
    labelAlign: 'left',
    colon: false,
  };
</script>
<style scoped lang="less">
  :deep(.ant-row) {
    align-items: center;
  }

  :deep(.ant-input-number) {
    width: 100%;
  }
</style>
