<script setup lang="ts">
import { ref } from "vue";
import { order_columns, order_status } from "../config/configs";
import SalesModal from "./sales-modal.vue";

const emit = defineEmits(["create-btn-click"]);
const saleOrderList = ref<Array<Record<string, string>>>([]);
const tradFeeMap = ref<Record<string, string>>({});

const saleModalRef = ref<InstanceType<typeof SalesModal>>(null);

function addSaleOrder(sales) {
  saleOrderList.value = sales;
  //根据sequenceNo建立映射
  sales.forEach(({ sequenceNo }) => (tradFeeMap.value[sequenceNo] = "0"));
}

function handleCreate() {
  const orderArr: any = [];
  const keys = Object.keys(tradFeeMap.value);

  keys.forEach(sequenceNo =>
    orderArr.push({
      sequenceNo,
      trad_fee: tradFeeMap.value[sequenceNo]
    })
  );

  console.log(orderArr);

  emit("create-btn-click", orderArr);
}
</script>

<template>
  <div flex justify-between items-center>
    <h1 my-4>关联订单:</h1>
    <el-button type="primary" @click="() => saleModalRef.onDisplay()"
      >添加</el-button
    >
  </div>

  <el-table :data="saleOrderList" size="small">
    <el-table-column
      v-for="(col, index) in order_columns"
      :key="index"
      :label="col.label"
      :prop="col.prop"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        <el-input
          size="small"
          placeholder="此次核销金额"
          v-if="col.label === '此次核销'"
          v-model="tradFeeMap[row.sequenceNo]"
        />

        <el-tag v-else-if="col.prop === 'status'">
          {{ order_status.find(p => row.status === p.value)?.label }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>

  <div flex justify-end mt-3>
    <el-button type="primary" @click="handleCreate">保存</el-button>
  </div>

  <SalesModal ref="saleModalRef" @save-click-button="addSaleOrder" />
</template>
