<script setup lang="ts">
import { ref, reactive } from "vue";
import { httpDeliver } from "/@/api/mobile/exchangeOrder";
import { initheaders, columns } from "./columns-config";
import { ElMessage, ElNotification } from "element-plus";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/useNav";
import { execlUpload } from "/@/components/execlUpload";
const visible = ref(false);
const loading = ref(false);
const tableData = ref([]);
const columnsConfig = columns();
const { logout } = useNav();
const emit = defineEmits(["onSuccess"]);

const handleClose = () => {
  // execlFile.value = null;
  // uploadRef.value.clearFiles();
};
const Uploadsuccess = ({ results, header }) => {
  loading.value = true;
  console.log(results);
  console.log(header);
  if (results.length === 0) {
    ElMessage.error("表格无有效数据！");
    loading.value = false;
    return;
  }
  let headok = true;
  if (header.length !== initheaders.length) {
    headok = false;
  } else {
    initheaders.forEach((si, sii) => {
      if (si !== header[sii]) {
        headok = false;
      }
    });
  }
  if (!headok) {
    ElMessage.error("表头与导入模板不匹配！");
    loading.value = false;
    return;
  }
  tableData.value = [];

  try {
    results.forEach(v1 => {
      const b = Object.values(v1);
      let model = {};
      b.forEach((si, sii) => {
        model["value" + sii] = si + "";
      });
      tableData.value.push(model);
    });
    loading.value = false;
  } catch (e) {
    ElMessage.error("导入数据拼接有误！");
    loading.value = false;
  }
};
//提交
const handleSubmit = async () => {
  if (loading.value) return;
  loading.value = true;
  let isok = true,
    isnum = true,
    list = [];
  tableData.value.forEach((key: Record<string, any>) => {
    let model = {
      orderCode: key.value2 || "",
      post_name: key.value12 || "",
      post_code: key.value13 || ""
    };
    if (key["value2"] === "" || key["value13"] === "") {
      isok = false;
    }
    // if (key["value14"]) {
    //   let num = key["value14"] * 1;
    //   console.log(num);
    //   if (isNaN(num) || num < 0) {
    //     isnum = false;
    //   }
    // }

    list.push(model);
  });
  if (!isok) {
    ElNotification({
      title: "必填字段缺失！",
      message: "订单编号和物流单号为必填项！",
      type: "error"
    });
    loading.value = false;
    return;
  }
  if (!isnum) {
    ElMessage.error("收入金额只能为正数！");
    loading.value = false;
    return;
  }
  console.log(list);
  const { code, message } = await httpDeliver({ list });
  if (code === 1005 || code === 1006) {
    loading.value = false;
    ElMessage.error(message);
  } else {
    responseHandle({
      code,
      message,
      logout,
      handler: () => {
        loading.value = false;
        ElMessage.success("数据导入成功！");
        emit("onSuccess");
        visible.value = false;
      }
    });
  }
};
const cancel = () => {
  tableData.value = [];
};
defineExpose({
  onDisplay: () => ((visible.value = true), (tableData.value = []))
});
</script>

<template>
  <el-dialog
    v-model="visible"
    title="导入表格数据"
    :close-on-press-escape="false"
    width="1040px"
    top="8vh"
    center
    append-to-body
    @close="handleClose"
  >
    <execlUpload @on-success="Uploadsuccess" v-if="tableData.length === 0" />
    <div flex justify-end gap-2 v-if="tableData.length !== 0">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="handleSubmit"
        >保存</el-button
      >
    </div>
    <el-table
      :data="tableData"
      stripe
      border
      max-height="500px"
      size="small"
      style="width: 100%; padding: 10px 0 0 0"
    >
      <el-table-column
        v-for="(si, sii) in columnsConfig"
        v-bind="si"
        :key="sii"
        show-overflow-tooltip
      />
    </el-table>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
