<script setup lang="ts">
import { shallowRef, ref } from "vue"
import { useAsync } from "/@/hooks/core"
import { tyStatusOptions } from "/@/utils/status";
import { httpList } from "/@/api/InvoiceSales/currentcyAssOrderRecord";

import {
  ElCol,
  ElTag,
  ElRow,
  ElTable,
  ElSelect,
  ElOption,
  ElDialog,
  ElButton,
  ElMessage,
  ElPagination,
  ElTableColumn
} from "element-plus"

const emit = defineEmits(['list']);
const props = defineProps<{ platform_type: string }>();

const visible = shallowRef(false);
const tableRef = ref<InstanceType<typeof ElTable> | null>(null);
const { run, data,loading } = useAsync({ isList: true, success: (data) => params.value.total = data.count });

const initialParams = {
  page: 1,
  size: 15,
  total: 0,
  pay_status: '1',
  status: [1],
  companyNo: "", // 卖方公司
  customerNo: "" // 买方公司
}

const list = ref<any[]>([]);
const params = ref({ ...initialParams });
const requestList = () => run(httpList({ ...params.value, platform_type: props.platform_type }));

function handleList() {
  if (list.value.length === 0) {
    ElMessage.warning("请选择通用订单");
    return;
  }

  emit('list', list.value)
  visible.value = false;
  tableRef.value?.clearSelection();
}

defineExpose({
  onDisplay: (customerNo: string, companyNo: string) => {
    visible.value = true;
    params.value = { ...initialParams, companyNo, customerNo };
    requestList();
  }
})
</script>


<template>
  <ElDialog v-model="visible" title="通用订单列表" center width="1024px" :close-on-click-modal="false"
  :close-on-press-escape="false">
    <ElRow class="mb-[10px]">
      <ElCol :span="8">
        <ElSelect :modelValue="String(params.status[0])" size="small" disabled>
            <ElOption 
              v-for="{ label, value } in tyStatusOptions" 
              :label="label" 
              :value="value" 
              :key="value" 
              />
        </ElSelect>
      </ElCol>
    </ElRow>

      <ElTable border size="small" :data="data" class="mt-[10px]"  @selection-change="val => list = val" v-loading="loading">
        <ElTableColumn type="selection" fixed="left" />
        <ElTableColumn label="通用订单编号" min-width="160" prop="tyCode" show-overflow-tooltip />
        <ElTableColumn label="确认单编号" min-width="160" prop="orderCode" show-overflow-tooltip />
        <ElTableColumn label="销售订单主编号" min-width="160" prop="cxCode" show-overflow-tooltip />
        <ElTableColumn label="商品编号" min-width="160" prop="goodNo" show-overflow-tooltip />
        <ElTableColumn label="商品名称" min-width="160" prop="goodName" show-overflow-tooltip />
        <ElTableColumn label="申请人" prop="apply_name" width="100px" show-overflow-tooltip />
        <ElTableColumn label="买入方公司" min-width="160" prop="customerName" show-overflow-tooltip />
        <ElTableColumn label="卖出方公司" min-width="160" prop="companyName" show-overflow-tooltip />
        <ElTableColumn label="下单数量" width="80" prop="goodNum" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.qrd ? scope.row.qrd.goodNum : "" }}</template>
        </ElTableColumn>
        <ElTableColumn label="销售单价" width="80" prop="goodPrice" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.qrd ? scope.row.qrd.goodPrice : "" }}</template>
        </ElTableColumn>
        <ElTableColumn label="对账状态" width="80" prop="status" show-overflow-tooltip>
          <template #default="scope">
            <ElTag>
              {{ tyStatusOptions.find(c => c.value == scope.row.status)?.label || '--' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="下单时间" width="100" prop="addtime" show-overflow-tooltip />
      </ElTable>

    <div class="flex justify-between w-full mt-[10px]">
      <ElPagination v-model:currentPage="params.page"  v-model:pageSize="params.size" 
        layout="total,prev, pager, next, jumper" :total="params.total" :background="true" :small="true" @size-change="requestList"  @current-change="requestList" />
      <ElButton type="primary" size="small" @click="handleList">添加</ElButton>
    </div>
  </ElDialog>
</template>
