<script setup lang="ts">
import { ref, h } from "vue";
import { ElButton, ElDialog, ElMessage } from "element-plus";
import { httpBatchAdd } from "/@/api/purchase/ticketReturn";
import { execlUpload } from "/@/components/execlUpload";
import { useResponseHandle } from "/@/hooks";
import { useVModel } from "@vueuse/core";

import { columns, mapProp } from "./columns-config";

const loading = ref(false);
const tableData = ref([]);

const props = defineProps<{ visible: boolean }>()
const emit = defineEmits(["onSuccess"]);

const row = ref(1);
const visible = useVModel(props, 'visible')

const responseHandle = useResponseHandle();

const Uploadsuccess = ({ results, header }) => {
  loading.value = true;
  if (results.length === 0) {
    ElMessage.error("表格无有效数据！");
    loading.value = false;
    return;
  }

  let headok = true;

  if (header.length !== columns.length - 1) {
    headok = false;
  } else {
    columns.slice(1).forEach((si, sii) => {
      if (si.label !== header[sii]) {  headok = false; }
    });
  }

  if (!headok) {
    ElMessage.error("表头与导入模板不匹配！");
    loading.value = false;
    return;
  }

  tableData.value = [];

  for (const v1 of results) {
    const b = Object.values(v1);
    let model = {};
    b.forEach((si, sii) => { model["value" + sii] = si + ""; });
    tableData.value.push(model);
    row.value = row.value + 1;
  }

  const data = [];
  tableData.value.forEach((key) => {
      const obj: Record<string, string> = {};
      for (let i in key) {
        const prop = mapProp[i];
        const value = key[i];
        obj[prop] = value;
     }
      
    data.push(obj);
  });

  loading.value = false;
};

//提交
const handleSubmit = async () => {
  try {
    if (loading.value) return;
    loading.value = true;
    const data = [];

    const { code, message, data: _d } = await httpBatchAdd({ list: data, companyNo: '',  is_comon: '0' });

    loading.value = false;

    responseHandle({
      code,
      message,
      noMessage: false,
      handler: () => {
        ElMessage.success("数据导入成功！");
        emit("onSuccess");
        visible.value = false;
      },
    });
  } catch (err) { 
    console.log(err)
  }
};
const cancel = () => {
  tableData.value = [];
};
</script>

<template>
  <ElDialog
    v-model="visible"
    :close-on-click-modal="false"
    title="批量创建盘点"
    width="1040px"
    top="8vh"
    center
  >
    <execlUpload style="margin-bottom: 10px" @on-success="Uploadsuccess" v-if="tableData.length === 0" />

    <el-table
      :data="tableData"
      stripe
      border
      max-height="500px"
      size="small"
      style="width: 100%"
    >
      <el-table-column
        v-for="(si, sii) in columns"
        :minWidth="si.minWidth"
        show-overflow-tooltip
        :fixed="si.fixed"
        :prop="si.prop"
        :type="si.type"
        :key="sii"
      >
        <template #header>
          <span v-if="!si.required">
            {{ si.label }}
          </span>
          
          <p v-else>
            <span style="color: #f56c6c; font-size: 14px">* </span>
            {{ si.label }}
          </p>
        </template>
      </el-table-column>
    </el-table>
    <div
      flex
      justify-end
      gap-2
      v-if="tableData.length !== 0"
      style="padding: 10px 0 0 0"
    >
      <ElButton size="small" @click="cancel">取消</ElButton>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="handleSubmit"
        >保存</el-button
      >
    </div>
  </ElDialog>
</template>

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