<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed } from "vue";
import { send_status_list } from "/@/utils/status";

const emit = defineEmits([
  "addBtnClick", //添加采购单
  "delBtnClick", //删除采购单
  "crateBtnClick", //创建采购单
  "changeSupplieList" //
]);

const props = defineProps<{
  purchaseOrderList?: any;
  readonly?: boolean;
  supplierNo?: number;
  companyNo?: number;
}>();

const hiddenAction = computed(() => !props.readonly);

//采购单个数
const total = computed(() => props.purchaseOrderList.length);
function handleDelete(row) {
  emit("delBtnClick", row);
}

function handleAddClick() {
  const { supplierNo, companyNo } = props;

  if (!supplierNo || !companyNo) {
    return ElMessage.warning("请选择供应商和业务公司");
  }

  emit("addBtnClick");
}
</script>

<template>
  <div flex justify-between w-full mb-1>
    <el-tag type="warning">共计:{{ total }}个订单</el-tag>
    <div v-if="hiddenAction">
      <el-button type="primary" @click="handleAddClick">添加采购单</el-button>
    </div>
  </div>

  <el-table :data="purchaseOrderList" size="small">
    <el-table-column label="采购单编号" prop="sequenceNo" width="180" />
    <el-table-column label="采购单信息" show-overflow-tooltip>
      <el-table-column label="货款" prop="totalPrice" show-overflow-tooltip />
      <el-table-column
        label="供货商"
        prop="supplierName"
        show-overflow-tooltip
      />
      <el-table-column label="联系人" show-overflow-tooltip />
      <el-table-column label="采购员" prop="ownerName" show-overflow-tooltip />
      <el-table-column label="发货状态" prop="sendStatus" show-overflow-tooltip>
        <template #default="{ row }">
          <el-tag>{{
            send_status_list.find(s => s.value === row.sendStatus)?.label
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开票编号" show-overflow-tooltip />
      <el-table-column
        label="开票公司"
        prop="companyName"
        show-overflow-tooltip
      />
    </el-table-column>

    <el-table-column label="操作" v-if="hiddenAction">
      <template #default="{ row }">
        <el-button link type="primary" @click="handleDelete(row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div flex gap-1 mt-2 v-if="hiddenAction">
    <el-button type="primary" @click="emit('crateBtnClick')">保存</el-button>
  </div>
</template>
