<template>
  <el-card class="box-card">
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" ref="submit">
      <template #checkBomList>
        <div style="width: 100%">
          <div style="margin-bottom: 10px">
            <el-upload :show-file-list="false" action="##" :http-request="uploadServerLog">
              <el-button style="background: #20b2aa; color: #fff; border: 1px solid #20b2aa">导入</el-button>
            </el-upload>
          </div>
          <el-table :data="formData.data.checkBomList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
            <el-table-column label="品号" prop="bomSpecCode" width="140" />
            <el-table-column label="品名" prop="bomSpecName" min-width="240" />
            <el-table-column label="事业部" prop="departmentName" width="120" />
            <el-table-column label="仓库" prop="warehouseName" width="120" />
            <el-table-column label="剩余库存" prop="surplusStock" width="120" />
            <el-table-column label="盘点数量" prop="checkQuantity" width="120" />
            <el-table-column label="结存单价" prop="balanceUnitPrice" width="100" />
            <el-table-column label="状态" width="80">
              <template #default="{ row }">
                <span v-if="row.status == 1">正常</span>
                <span v-else-if="row.status == 2" style="color: #f59a23">盘盈</span>
                <span v-else-if="row.status == 3" style="color: #d9001b">盘亏</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>
    <div style="text-align: center; margin: 10px">
      <el-button @click="clickCancel()" size="large">取 消</el-button>
      <el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
    </div>
  </el-card>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import useTagsViewStore from "/src/store/modules/tagsView";

const { proxy } = getCurrentInstance();
const router = useRouter();
const formOption = reactive({
  inline: true,
  labelWidth: "100px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    checkBomList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "title",
      title: "盘点信息",
      label: "",
    },
    {
      type: "slot",
      slotName: "checkBomList",
      label: "",
    },
  ];
});
const clickCancel = () => {
  const useTagsStore = useTagsViewStore();
  useTagsStore.delVisitedView(router.currentRoute.value);
  router.replace({
    path: "/production/warehouse/warehouse-check",
  });
};
const uploadServerLog = (params) => {
  let file = params.file;
  let data = new FormData();
  data.append("file", file);
  proxy.postUploadFile("/check/excelImport", data).then((res) => {
    ElMessage({ message: "导入成功", type: "success" });
    formData.data = res.data;
  });
};
const submitForm = () => {
  if (formData.data.checkBomList && formData.data.checkBomList.length > 0) {
    proxy.post("/check/add", formData.data).then(() => {
      ElMessage({ message: "提交成功", type: "success" });
      clickCancel();
    });
  } else {
    return ElMessage("请导入盘点数据");
  }
};
</script>

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