<template>
  <BasicModal width="800px" v-bind="$attrs" @register="register" @ok="confirm" title="账户详情">
    <BasicTable
      @register="registerTable"
      :dataSource="infoData"
      rowKey="id"
      :maxHeight="500"
      :canResize="true"
    />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { info_columns } from './data';

  export default defineComponent({
    components: { BasicModal, BasicTable },
    emits: ['saveData'],
    setup() {
      const modelRef = ref({});
      const reactData = reactive({
        infoData: [],
      });
      const [register, { closeModal }] = useModalInner((data) => {
        console.log(`model --- data`, data);
        reactData.infoData = data.info;
        console.log(`data.info`, data.info);
      });
      const [registerTable] = useTable({
        columns: info_columns,
        showIndexColumn: true,
        bordered: true,
      });

      function confirm() {
        closeModal();
      }

      return {
        register,
        registerTable,
        confirm,
        model: modelRef,
        ...toRefs(reactData),
      };
    },
  });
</script>
<style lang="less">
  .ant-form-item-label {
    overflow: hidden;
    text-align: center !important;
    // white-space: pre-wrap !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 639px) {
    .ant-form-item-label {
      line-height: 2.5715 !important;
      text-align: center !important;
    }
  }
</style>
