<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import PurchaseModal from "./purchase-modal.vue";

import {
  cg_order_type_options,
  cg_order_source_options,
  send_status_list,
  sendStatusOptions
} from "/@/utils/status";

const emit = defineEmits(["push", "delete", "choose"]);

const props = defineProps<{
  companyNo?: string;
  supplierNo?: string;
  purchaseOrders: any;
  readonly: boolean;
  isPurchPay?: boolean;
}>();

const PurchaseModalRef = ref<InstanceType<typeof PurchaseModal> | null>(null);

const sendOptions = [
  {
    value: "1",
    label: "未入库",
    type: "warning"
  },
  {
    value: "2",
    label: "部分入库",
    type: "primary"
  },
  {
    value: "3",
    label: "全部入库",
    type: "success"
  }
];

function addition(arg1, arg2) {
  var r1, r2, m;
  try {
    r1 = arg1.toString().split(".")[1].length;
  } catch (e) {
    r1 = 0;
  }
  try {
    r2 = arg2.toString().split(".")[1].length;
  } catch (e) {
    r2 = 0;
  }
  m = Math.pow(10, Math.max(r1, r2));
  return (arg1 * m + arg2 * m) / m;
}

//采购单个数
const total = computed(() => {
  return props.purchaseOrders.length;
});

const totalPrice = computed(() => {
  const { purchaseOrders } = props;
  const total = purchaseOrders.reduce(
    (prev, { totalPrice }) => addition(prev, totalPrice || 0),
    0
  );
  return Number(total).toFixed(2);
});

function handleAddPurchase() {
  const { supplierNo, companyNo } = props;
  if (!supplierNo || !companyNo) {
    return ElMessage.warning("请选择供应商和业务公司");
  }
  PurchaseModalRef.value.onDisplay();
}
</script>

<template>
  <div>
    <div flex justify-between w-full mb-1>
      <ElTag type="warning"
        >共计:{{ total }}个订单,共计 {{ totalPrice }} 元</ElTag
      >

      <ElButton
        v-if="!readonly && !isPurchPay"
        type="primary"
        @click="handleAddPurchase"
        >添加采购单</ElButton
      >
    </div>

    <ElTable
      ref="tableRef"
      row-key="id"
      size="small"
      :data="purchaseOrders"
      max-height="400"
    >
      <ElTableColumn
        label="采购单编码"
        show-overflow-tooltip
        prop="sequenceNo"
        width="150"
      />
      <ElTableColumn
        label="销售订单编码"
        show-overflow-tooltip
        prop="qrdCode"
        width="150"
      />
      <ElTableColumn
        label="采购主单号"
        show-overflow-tooltip
        prop="cxCode"
        width="150"
      />
      <ElTableColumn label="采购单信息">
        <ElTableColumn
          label="供货商"
          prop="supplierName"
          min-width="160"
          show-overflow-tooltip
        />
        <ElTableColumn
          label="销售单发货状态"
          prop="qrdSend"
          width="110"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <ElTag>{{
              send_status_list.find(s => s.value === String(row.qrdSend))
                ?.label || "--"
            }}</ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="入库状态"
          prop="sendStatus"
          width="90"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <ElTag>{{
              sendStatusOptions.find(s => s.value === String(row.sendStatus))
                ?.label || "--"
            }}</ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="业务公司"
          prop="companyName"
          min-width="180"
          show-overflow-tooltip
        />
        <ElTableColumn
          label="订单来源"
          prop="cgdSource"
          width="100"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <ElTag>
              {{
                cg_order_source_options.find(t => t.value === row.cgdSource)
                  ?.label
              }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="总货款"
          prop="totalPrice"
          width="80"
          show-overflow-tooltip
        />
      </ElTableColumn>
      <ElTableColumn label="商品信息">
        <ElTableColumn
          label="商品编码"
          prop="goodNo"
          width="150"
          show-overflow-tooltip
        />
        <ElTableColumn
          label="商品名称"
          prop="goodName"
          width="180"
          show-overflow-tooltip
        />
        <ElTableColumn
          label="商品单价"
          prop="goodPrice"
          show-overflow-tooltip
        />
        <ElTableColumn
          label="商品来源"
          prop="cgdType"
          width="90"
          show-overflow-tooltip
        >
          <template #="{ row }">
            <ElTag>
              {{
                cg_order_type_options.find(t => t.value === String(row.cgdType))
                  ?.label
              }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn
          label="商品数量"
          prop="goodNum"
          width="90"
          show-overflow-tooltip
        />
        <ElTableColumn label="税率" prop="tax" show-overflow-tooltip>
          <template #="{ row }"> {{ row.tax }}% </template>
        </ElTableColumn>
      </ElTableColumn>
      <ElTableColumn
        label="采购员"
        prop="ownerName"
        width="75"
        show-overflow-tooltip
      />

      <ElTableColumn label="操作" v-if="!readonly" fixed="right">
        <template #default="{ $index }">
          <ElButton link type="primary" @click="() => emit('delete', $index)"
            >删除</ElButton
          >
        </template>
      </ElTableColumn>
    </ElTable>

    <PurchaseModal
      ref="PurchaseModalRef"
      :companyNo="companyNo"
      :supplierNo="supplierNo"
      @pushOrder="orders => emit('push', orders)"
    />
  </div>
</template>
