<script setup lang="ts">
import { ref, unref, watch } from "vue";
import { ElTable } from "element-plus";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpBatch } from "/@/api/purchase/orderRecord";
import { selectOptions as _selectOptions } from "../_options";
import { ElMessage } from "element-plus";

import {
  send_status_list,
  cg_order_source_options,
  cg_order_type_options
} from "/@/utils/status";
const emit = defineEmits(["selection"]);
const props = defineProps<{
  supplierNo?: string;
  companyNo?: string;
  type: string;
}>();
const searchType = ref(props.type);
const placeholder = ref(setPlaceholder(searchType.value));
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const sourceText = ref("");

const {
  data: tableData,
  loading,
  run
} = useAsync({
  success: _data => {}
});

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;
}

function handleEnter() {
  const text = replaceTextWrapAndSpace(sourceText.value);
  /* 统一替换字符 **/
  const parserText = text
    .replace(/[，。；、; .]/g, ",")
    .replace(/(^,*)|(,*$)/g, "");
  const cgdNoArr = parserText.split(",");
  /* 去掉回车和空格 **/
  if (parserText.length === 0 || cgdNoArr.length === 0) {
    ElMessage.warning("不能解析空文本");
    sourceText.value = text;
    return;
  }
  run(
    httpBatch(
      searchType.value == "2"
        ? {
            size: 100,
            cgdNoArr,
            companyNo: props.companyNo,
            supplierNo: props.supplierNo
          }
        : {
            size: 100,
            qrdNoArr: cgdNoArr,
            companyNo: props.companyNo,
            supplierNo: props.supplierNo
          }
    )
  );
  sourceText.value = "";
}

function onSubmit() {
  // const isHasCancelSend = tableData.value.some(
  //   ({ sendStatus }) => String(sendStatus) === "4"
  // );

  // if (isHasCancelSend) {
  //   ElMessage.warning("不能选择发货状态为'已取消'的采购单");
  //   return;
  // }
  emit("selection", unref(tableData));
}
function setPlaceholder(type) {
  return `输入${
    type === "2" ? "采购单" : "销售单"
  }编码(小于100条)，系统支持的分割符为逗号(,)、句号(.)、分号(;)、顿号(、)，回车后开始解析。`;
}
watch(
  () => props.type,
  type => {
    searchType.value = type;
    placeholder.value = setPlaceholder(type);
    tableData.value = [];
    loading.value = false;
    sourceText.value = "";
  },
  {
    immediate: true
  }
);
</script>

<template>
  <ElInput
    :rows="4"
    v-model="sourceText"
    style="margin-bottom: 10px"
    :placeholder="placeholder"
    type="textarea"
    @keydown.enter="handleEnter"
  />
  <ElTable
    ref="tableRef"
    size="small"
    :data="tableData"
    v-loading="loading"
    max-height="580px"
  >
    <el-table-column
      type="index"
      width="50"
      show-overflow-tooltip
      label="序号"
    />
    <ElTableColumn
      label="采购单编码"
      prop="sequenceNo"
      show-overflow-tooltip
      width="150"
    />
    <ElTableColumn
      label="销售订单编码"
      prop="qrdCode"
      show-overflow-tooltip
      width="150"
    />
    <ElTableColumn
      label="采购主单编码"
      show-overflow-tooltip
      prop="cxCode"
      width="150"
    />
    <ElTableColumn label="采购单信息">
      <ElTableColumn
        label="供货商"
        prop="supplierName"
        width="160"
        show-overflow-tooltip
      />
      <ElTableColumn
        label="发货状态"
        prop="sendStatus"
        width="90"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <ElTag size="small">{{
            send_status_list.find(s => s.value === String(row.sendStatus))
              ?.label
          }}</ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn
        label="业务公司"
        prop="companyName"
        width="180"
        show-overflow-tooltip
      />
      <ElTableColumn
        label="订单来源"
        prop="cgdSource"
        width="100"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <ElTag size="small">
            {{
              cg_order_source_options.find(
                t => t.value === String(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="cgdType"
        width="90"
        show-overflow-tooltip
      >
        <template #="{ row }">
          <ElTag size="small">
            {{
              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>
    <ElTableColumn
      label="采购员"
      prop="ownerName"
      width="70"
      show-overflow-tooltip
    />
  </ElTable>

  <div flex w-full justify-end mt-2>
    <ElButton type="primary" @click="onSubmit">保存</ElButton>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-select-v2__wrapper) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}

::v-deep(.el-input__wrapper) {
  // box-shadow: none !important;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
</style>
