<template>
  <a-table ref="tableRef0"
           row-key="contractSettleId" :dataSource="dataList" :columns="columns">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'startDate'">
        <a-date-picker
          class="ele-fluid"
          placeholder="请选择开始日期"
          v-model:value="record.startDate"
          valueFormat="YYYY-MM-DD"
          @change="changeDate($event, index)"
          @ok="changeDate($event, index)"
        />
      </template>
      <template v-if="column.key === 'endDate'">
        <a-date-picker
          class="ele-fluid"
          placeholder="请选择结束日期"
          v-model:value="record.endDate"
          valueFormat="YYYY-MM-DD"
          @change="changeDate($event, index)"
          @ok="changeDate($event, index)"
        />
      </template>
      <template v-if="column.key === 'settleCycle'">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-input v-model:value="record.month">
              <template #addonAfter>月</template>
            </a-input>
          </a-col>
          <a-col :span="12">
            <a-input v-model:value="record.day">
              <template #addonAfter>日</template>
            </a-input>
          </a-col>
        </a-row>
      </template>
      <template v-if="column.key === 'monthAmount'">
        <a-input v-model:value="record.monthAmount" type="number" @change="changeDate($event, index)" />
      </template>
      <template v-if="column.key === 'dailyAmount'">
        <a-input v-model:value="record.dailyAmount" type="number" />
      </template>
      <template v-if="column.key === 'payRate'">
        <a-input v-model:value="record.payRate" type="number">
          <template #addonAfter>%</template>
        </a-input>
      </template>
      <template v-if="column.key === 'amountWithTax'">
        <span v-if="record.monthAmount">{{ ((record.dailyAmount * record.days + record.monthAmount * record.month) * record.payRate / 100).toFixed(2)
          }}</span>
      </template>
      <template v-if="column.key === 'tax'">
        <span v-if="record.monthAmount">{{ (((record.dailyAmount * record.days + record.monthAmount * record.month) * record.payRate / 100) * (record.taxRate / 100)).toFixed(2)
          }}</span>
      </template>
      <template v-if="column.key === 'amountWithoutTax'">
        <span
          v-if="record.monthAmount">{{ (((record.dailyAmount * record.days + record.monthAmount * record.month) * record.payRate / 100) - (record.dailyAmount * record.days * (record.taxRate / 100))).toFixed(2)
          }}</span>
      </template>
      <template v-if="column.key === 'remark'">
        <a-input v-model:value="record.remark" />
      </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>
    <template #summary>
      <a-table-summary-row>
        <a-table-summary-cell>合计</a-table-summary-cell>
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell />
        <a-table-summary-cell>
          {{ totals.amountWithTax }}
        </a-table-summary-cell>
        <a-table-summary-cell>
          {{ totals.tax }}
        </a-table-summary-cell>
        <a-table-summary-cell>
          {{ totals.amountWithoutTax }}
        </a-table-summary-cell>
        <a-table-summary-cell />
        <a-table-summary-cell />
      </a-table-summary-row>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { SettleDetail } from "@/api/tower/settleDetail/model";
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 dayjs from "dayjs";

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

const columns = ref<ColumnItem[]>([
  {
    title: "序号",
    key: "index",
    width: 48,
    align: "center",
    fixed: "left",
    hideInSetting: true,
    customRender: ({ index }) => index + (tableRef0.value?.tableIndex ?? 1)
  },
  {
    title: "设备名",
    dataIndex: "equipmentName",
    key: "equipmentName"
  },
  {
    title: "设备型号",
    dataIndex: "equipmentModel",
    key: "equipmentModel"
  },
  {
    title: "出场编号",
    dataIndex: "factoryNo",
    key: "factoryNo"
  },
  {
    title: "结算开始日期",
    dataIndex: "startDate",
    key: "startDate"
  },
  {
    title: "结算结束日期",
    dataIndex: "endDate",
    key: "endDate"
  },
  {
    title: "实际结算周期",
    dataIndex: "settleCycle",
    key: "settleCycle"
  },
  {
    title: "实际进场日期",
    dataIndex: "inDate",
    key: "inDate"
  },
  {
    title: "实际出场日期",
    dataIndex: "outDate",
    key: "outDate"
  },
  {
    title: "月工资(元)",
    dataIndex: "monthAmount",
    key: "monthAmount"
  },
  {
    title: "日工资(元)",
    dataIndex: "dailyAmount",
    key: "dailyAmount"
  },
  {
    title: "支付比例",
    dataIndex: "payRate",
    key: "payRate"
  },
  {
    title: "含税金额(元)",
    dataIndex: "amountWithTax",
    key: "amountWithTax"
  },
  {
    title: "税金(元)",
    dataIndex: "tax",
    key: "tax"
  },
  {
    title: "不含税金额(元)",
    dataIndex: "amountWithoutTax",
    key: "amountWithoutTax"
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark"
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action"
  }
]);

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

const changeDate = (data, index) => {
  if (dataList.value[index].startDate && dataList.value[index].endDate) {
    dataList.value[index].days = dayjs(dataList.value[index].endDate).diff(dayjs(dataList.value[index].startDate), "day") + 1;
    dataList.value[index].month = Math.floor(dataList.value[index].days / 30);
    dataList.value[index].day = dataList.value[index].days - (Math.floor(dataList.value[index].days / 30) * 30);
    if (dataList.value[index].monthAmount) dataList.value[index].dailyAmount = (dataList.value[index].monthAmount / 30).toFixed(8);
  }
};

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

const totals = ref({ amountWithTax: 0, tax: 0, amountWithoutTax: 0 });
const calTotals = () => {
  let amountWithTax = 0;
  let tax = 0;
  let amountWithoutTax = 0;
  if (dataList.value && dataList.value.length > 0 && (dataList.value[0].taxRate !== undefined)) {
    const taxRate = dataList.value[0].taxRate;
    dataList.value.forEach(({ month, monthAmount, day, dailyAmount, payRate }) => {
      amountWithTax += (month * monthAmount + day * dailyAmount) * payRate / 100;
    });
    amountWithTax = Number(amountWithTax.toFixed(2));
    tax = amountWithTax * (taxRate / 100);
    tax = Number(tax.toFixed(2));
    amountWithoutTax = amountWithTax - tax;
    amountWithoutTax = Number(amountWithoutTax.toFixed(2));
  }
  totals.value = { amountWithTax, tax, amountWithoutTax };
};
onMounted(() => {
  dataList.value = props.dataSource;
  calTotals();
});

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


defineExpose({ dataList });

</script>
