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

const emit = defineEmits(['list'])

const props = defineProps<{
  platformType: string,
  customerNo: String,
  companyNo: string
}>();

const sourceText = ref("");
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: [0],
}

const list = ref<any[]>([]);
const params = ref({ ...initialParams });


function handleList() {
  if (!data.value || data.value.length === 0) {
    ElMessage.warning("至少添加一条通用订单");
    return;
  }

  emit('list', data.value)
  data.value = [];
}

const requestList = async (orderCode: string[]) => run(httpList({
  size: 100000,
  orderCode,
  ...params.value,
  platform_type: props.platformType,
  customerNo: props.customerNo,
  companyNo: props.companyNo
}));


const $space = " ";
const $wrap = "\n";
function replaceTextWrapAndSpace(text = "") {
  if (!text) return "";
  let _text = text;
  const hasSpace = _text.includes($space);
  const hasWrap = _text.includes($wrap);
  if (hasSpace) _text = _text.split($space).join("");
  if (hasWrap) _text = _text.split($wrap).join("");
  return _text;
}

async function handleEnter() {
  const text = replaceTextWrapAndSpace(sourceText.value);
  /* 统一替换字符 **/
  const parserText = text
    .replace(/[，。；、; .]/g, ",")
    .replace(/(^,*)|(,*$)/g, "");
  const orderCode = parserText.split(",");
  /* 去掉回车和空格 **/
  if (parserText.length === 0 || orderCode.length === 0) {
    ElMessage.warning("不能解析空文本");
    sourceText.value = text;
    return;
  }

  await requestList(orderCode);
  sourceText.value = "";
}

</script>

<template>
  <ElInput :rows="4" v-model="sourceText" style="margin-bottom: 10px"
    placeholder="销售单编码(小于100条)，系统支持的分割符为逗号(,)、句号(.)、分号(;)、顿号(、)，回车后开始解析。" type="textarea"
    @keydown.enter="handleEnter" />

  <ElTable ref="tableRef" border size="small" :data="data" class="mt-[10px]" @selection-change="val => list = val"
    v-loading="loading">
    <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>
</template>
