<template>
  <div class="container-wrapper"
       :element-loading-text="uploadMsg"
       style="width: 100%">
    <div class="top">
      <el-tabs
          v-model="current_tab" @tab-click="change_tab">
        <el-tab-pane style="font-size: 30px"
                     v-for="(tab, index) in tabs"
                     :key="index"
                     :label="tab.label"
                     :name="tab.name"
        >
          <template #label>
            <el-badge :value="tab.notDoNumber" :max="99" :hidden="tab.notDoNumber === 0">
              <span>{{ tab.label }}</span>
            </el-badge>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="right">
        <span class="default-btn" @click="startUpload">一键上传</span>
      </div>
    </div>
    <div class="content" ref="content">
      <List_3501 v-if="current_tab == 3501"></List_3501>
      <List_3502 v-if="current_tab == 3502"></List_3502>
      <List_3503 v-if="current_tab == 3503"></List_3503>
      <List_3505 v-if="current_tab == 3505"></List_3505>
    </div>
  </div>
  <Mask :is-show="loading" :width="300" height="150" title="上传数据" :close="false">
    {{ uploadMsg }}
    <div class="demo-progress" style="margin-top: 20px">
      <el-progress :percentage="uploadNumber"/>
    </div>
  </Mask>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {ElMessage, type TabsPaneContext} from 'element-plus'
import List_3501 from "@/components/social/inventoryUp/List_3501.vue";
import List_3502 from "@/components/social/inventoryUp/List_3502.vue";
import List_3503 from "@/components/social/inventoryUp/List_3503.vue";
import List_3505 from "@/components/social/inventoryUp/List_3505.vue";
import {post} from "@/utils/request.ts";
import Mask from "@/components/Mask.vue";

let current_tab = ref(3501);
const tabs = ref([
  {label: '建档初始化', name: 3501, notDoNumber: 0},
  {label: '库存变更', name: 3502, notDoNumber: 0},
  {label: '采购信息', name: 3503, notDoNumber: 0},
  {label: '销售信息', name: 3505, notDoNumber: 0},
])
let tableData: any = ref([])
let content: any = ref(null);
const loading = ref(false)
let uploadMsg = ref('')
const uploadNumber = ref()
onMounted(() => {
  init()
});

function init() {
  post("social/upload/getNotDoNumber",).then((res: any) => {
    tabs.value.forEach((tab: any) => {
      tab.notDoNumber = res['number' + tab.name]
    })
  })
}

let change_tab = (tab: TabsPaneContext, event: Event) => {
}
let totalNumber = 0;
// 一键上传
let startUpload = () => {
  loading.value = true
  uploadMsg.value = "正在初始化上传";
  post("social/upload/getNotDoNumber", {catch_error: true}).then((res: any) => {
    totalNumber = res.totalNumber;
    uploadMsg.value = "正在初始化上传，总条数" + totalNumber;
    upload_data()
  }).catch((e: any) => {
    loading.value = false
    ElMessage.error(e)
  })

}
let upload_data = () => {
  post("social/upload/quickUpload", {}, {catch_error: true}).then((res: any) => {
    if (res.totalNumber > 0) {
      upload_data()
      uploadMsg.value = "正在上传,进度:" + (totalNumber - res.totalNumber) + "/" + totalNumber;
      uploadNumber.value = Math.round((totalNumber - res.totalNumber) / totalNumber * 100)
    } else {
      uploadMsg.value = ""
      loading.value = false
      init()
    }
  }).catch(
      (err: any) => {
        loading.value = false
        ElMessage.error(err)
      }
  )
}
</script>

<style scoped lang="scss">
.container-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 24px;
  border-radius: 8px;

  .top {
    width: 100%;
    height: 50px;
  }

  .content {
    flex: 1;
    min-height: 0;
  }
}

.right {
  float: right;
  transform: translateY(-63px);
}

.example-showcase .el-loading-mask {
  z-index: 9;
}

</style>