<template>
  <a-table ref="tableRef"
           row-key="contractSettleId" :dataSource="dataList" :columns="columns">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'amount'">
        <a-input v-model:value="record.amount" type="number" @change="changeItem($event, index)">
          <template #suffix>元</template>
        </a-input>
      </template>
      <template v-if="column.key === 'num'">
        <a-input v-model:value="record.num" type="number" @change="changeItem($event, index)">
          <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 { FinalSettleLost } from "@/api/tower/finalSettleLost/model";

const props = defineProps<{
  dataSource: FinalSettleLost[]
}>();
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: "itemName"
  },
  {
    title: "赔偿单价",
    dataIndex: "amount",
    key: "amount"
  },
  {
    title: "赔偿数量",
    dataIndex: "num",
    key: "num"
  },
  {
    title: "赔偿总额",
    dataIndex: "total",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action"
  }
]);

const changeItem = (value, index) => {
  dataList.value[index].total = parseFloat(dataList.value[index].amount) * parseInt(dataList.value[index].num);
};

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

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

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

defineExpose({ dataList });
</script>
