<script setup lang="ts">
import { ref, unref } from "vue";
// import { invTypeOptions } from "../config/_opitons";
import InvoceForm from "./invoice-form.vue";

const emit = defineEmits(["change"]);

const invArr = ref<string[]>([]);
const invoceFormRef = ref<InstanceType<typeof InvoceForm>>(null);

function handleChange(data) {
  invArr.value = [...invArr.value, ...(Array.isArray(data) ? data : [data])];
  emit("change", unref(invArr));
}

function handleDelete({ $index }) {
  invArr.value.splice($index, 1);
  emit("change", unref(invArr));
}
</script>

<template>
  <div flex w-full justify-end mb-5>
    <el-button type="primary" link @click="() => invoceFormRef.onDisplay()"
      >添加</el-button
    >
  </div>
  <el-table size="small" :data="invArr" border>
    <el-table-column type="index" width="50" />

    <!-- <el-table-column label="发票上传方式" prop="invType" show-overflow-tooltip>
      <template #="{ row }">
        <el-tag>{{
          invTypeOptions.find(t => t.value === row.invType)?.label
        }}</el-tag>
      </template>
    </el-table-column> -->

    <el-table-column label="发票号码" prop="invNumber" show-overflow-tooltip />
    <el-table-column label="发票代码" prop="invCode" show-overflow-tooltip />
    <el-table-column label="校验码" prop="checkNumber" show-overflow-tooltip />
    <el-table-column label="税前金额" prop="subtotal_amount" />

    <el-table-column label="开票日期" prop="open_time" show-overflow-tooltip />

    <el-table-column label="操作">
      <template #="scope">
        <div class="flex w-full justify-end">
          <el-button link type="primary" @click="() => handleDelete(scope)"
            >删除</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>

  <InvoceForm ref="invoceFormRef" @change="handleChange" />
</template>

<style lang="scss">
.el-form-item {
  margin-bottom: 18px !important;
}
</style>
