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

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>{{ inv_type_ls_cg.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="invName" show-overflow-tooltip /> -->
    <!-- <el-table-column label="发票图片" prop="inv_img" show-overflow-tooltip>
      <template #="{ row }">
        <el-image
          :src="row.inv_img"
          :preview-src-list="[row.inv_img]"
          style="height: 30px"
          preview-teleported
        />
      </template>
    </el-table-column> -->
    <el-table-column label="税前金额" prop="subtotal_amount">
      <template #="{ row }">
        {{
          row.invoiceType === 'fully_digitalized_special_electronic' || row.invoiceType === 'fully_digitalized_normal_electronic'
            ? ''
            : row.subtotal_amount
       }}
      </template>
    </el-table-column>
    <el-table-column label="税后金额" prop="subtotal_amount">
      <template #="{ row }">
        {{
          row.invoiceType === 'fully_digitalized_special_electronic' || row.invoiceType === 'fully_digitalized_normal_electronic'
            ? row.subtotal_amount
            : ''
       }}
      </template>
    </el-table-column>
    
    
    <el-table-column label="开票日期" prop="open_time" show-overflow-tooltip />
    <el-table-column label="操作" width="60px">
      <template #="scope">
        <el-button link type="primary" @click="() => handleDelete(scope)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

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

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