<template>
  <a-table ref="tableRef"
           row-key="contractSettleId" :dataSource="dataList" :columns="columns">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'shareAmount'">
        <a-input v-model:value="record.shareAmount" type="number">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'action'">
        <div class="flex justify-center items-center">
          <close-circle-outlined style="font-size: 1.5rem; color: pink;cursor: pointer"
                                 @click.native="del(index)" />
        </div>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { ColumnItem } from "ele-admin-pro/es/ele-pro-table/types";
import { assignObject, EleProTable } from "ele-admin-pro";
import {
  CloseCircleOutlined
} from "@ant-design/icons-vue";
import { InvoicingSettle } from "@/api/tower/invoicingSettle/model";

const props = defineProps<{
  dataSource: InvoicingSettle[]
}>();
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

const emits = defineEmits(["total"]);

const columns = ref<ColumnItem[]>([
  {
    title: "序号",
    key: "index",
    width: 48,
    align: "center",
    fixed: "left",
    hideInSetting: true,
    customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 1)
  },
  {
    title: "结算编号",
    dataIndex: "settleNumber"
  },
  {
    title: "结算所属年月",
    dataIndex: "startDate"
  },
  {
    title: "结算金额",
    dataIndex: "settleAmount"
  },
  {
    title: "分摊开票金额",
    dataIndex: "shareAmount",
    key: "shareAmount"
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action"
  }
]);

const dataList = ref<InvoicingSettle[]>([]);

const del = (index: number) => {
  dataList.value.splice(index, 1);
};

watch(
  () => props.dataSource,
  (dataSource) => {
    dataList.value = dataSource;
  },
  { deep: true }
);

defineExpose({ dataList });
</script>
