<template>
  <div style="position: fixed; z-index: 10000">
    <el-dialog :title="jdt.title" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
               v-model="jdt.isOpen">
      <el-progress :text-inside="true" :stroke-width="22" :percentage="percentage"
                   :status="percentage === 100 ? 'success' : ''">
        <span>
          {{ cptUpldRsTxt }}
          <i v-show="percentage < 100" class="el-icon-loading"></i>
          <i v-show="percentage === 100" class="el-icon-check"></i>
        </span>
      </el-progress>
      {{ size }} / {{ total }}
      <div v-if="notExcel">
        <div v-show="tips.length > 0">
          <el-divider></el-divider>
          <el-alert :title="tips" type="error" @close="closeAlert"/>
        </div>
        <el-divider></el-divider>
        <ul style="overflow: auto" class="infinite-list" id="jdtRef">
          <li v-for="i in jdtData" :key="i" class="infinite-list-item" :class="infiniteList(i)">
            <div class="jdt-message" :title="i.message">{{ i.title }} 结果: {{ i.message }}</div>
          </li>
        </ul>
        <el-divider></el-divider>
        <div style="width: 100%; display: flex; justify-content: right">
          <el-button @click="closeModal" :disabled="percentage < 100" type="warning" icon="el-icon-close" size="small">
            关闭
          </el-button>
          <el-button @click="exportExcel" :disabled="percentage < 100" type="primary" icon="el-icon-download"
                     size="small"> 导出Excel
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {computed, onMounted, ref} from 'vue-demi'
import {useStore} from 'vuex'
import {setCallback} from '@/utils/websocket'
import {Export} from '@/utils/ExportExcel'
import {makePercentage} from "./progUtils";
import {stringNotBlank} from "../../utils/blank-utils";

export default {
  setup() {
    const store = useStore()
    const jdt = computed(() => {
      return store.state.app.jdt
    })
    const cptUpldRsTxt = computed(() => {
      if (percentage.value < 100) {
        return `上传中 ( ${percentage.value}% ) ...`
      }
      return '上传完成(100%)'
    })
    const jdtData = ref([])
    const closeModal = () => {
      jdtData.value = []
      excelTitle.value = {}
      percentage.value = 0
      tips.value = ''
      store.commit('app/closeJdt')
    }
    const tips = ref('')
    const notExcel = ref(true)

    const total = ref(0)
    const size = ref(0)

    const excelTitle = ref({})

    const socketCallback = (data) => {
      if (stringNotBlank(data.jdtType) && data.jdtType === 'pureProgress') {
        store.commit('app/setJdt', {
          title: data.jdtTitle,
          isOpen: true,
          abnormalClosing: true
        })
        total.value = data.total
        size.value = data.size
        percentage.value = makePercentage(data.size, data.total)
        notExcel.value = false
        if (percentage.value === 100) {
          setTimeout(() => {
            store.commit('app/closeJdt')
          }, 500)
        }
      } else {
        percentage.value = data.percentage
        for (let key in data) {
          if (key.indexOf("#") > -1) {
            let newKey = key.split("#")
            data[newKey[0]] = data[key]
            if (newKey[0] === 'type') {
              excelTitle.value.typeName = newKey[1]
            } else {
              excelTitle.value[newKey[0]] = newKey[1]
            }
            delete data[key]
          }
        }
        jdtData.value.push(data)
        const jdtRef = document.getElementById('jdtRef')
        jdtRef.scrollTop = jdtRef.scrollHeight
      }
    }

    const percentage = ref(0)

    const infiniteList = (val) => {
      switch (val.type) {
        case 0:
          val.typeName = '成功'
          return 'jdt-success'
        case 1:
          val.typeName = '上传错误'
          return 'jdt-danger'
        case 2:
          val.typeName = '内部错误'
          return 'jdt-warning'
        default:
          val.typeName = '未知错误'
          return 'jdt-info'
      }
    }

    const exportExcel = () => {
      if (Object.keys(excelTitle.value).length === 0) {
        return tips.value = '没有可以导出 Excel 的字段。'
      }
      const arr = {}
      for (let key in excelTitle.value) {
        // 这里获取 | 符号后面的 数字
        arr[key] = excelTitle.value[key].split("|")[1]
      }
      // 排序按照从大到小
      let result = Object.values(arr).sort((a, b) => {
        return a - b;
      })
      const new_obj = {};
      // 按照排序生成新的对象
      for (let i = 0; i < result.length; i++) {
        Object.keys(arr).map((item, index) => {
          if (arr[item] === result[i]) {
            new_obj[item] = result[i];
          }
        });
      }
      const title = {}
      for (const a in new_obj) {
        title[a] = excelTitle.value[a].split("|")[0]
      }
      Export(jdtData.value, title, store.state.app.jdt.title)
    }

    const closeAlert = () => {
      tips.value = ''
    }

    onMounted(() => {
      setCallback(socketCallback)

    })

    return {
      jdt,
      closeModal,
      jdtData,
      infiniteList,
      exportExcel,
      percentage,
      cptUpldRsTxt,
      tips,
      closeAlert,
      notExcel,
      total,
      size,
    }
  },
}
</script>

<style scoped>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  height: 35px;
  margin: 10px;
  align-items: center;
  border-radius: 8px;
}

.jdt-success {
  background: #83e3534d;
  color: #67c23a;
}

.jdt-danger {
  background: #f38e8e5c;
  color: #f56c6c;
}

.jdt-warning {
  background: #e5a03a5c;
  color: #ea9c29;
}

.jdt-info {
  background: #a3a4ab6c;
  color: #909399;
}

.jdt-message {
  padding: 0 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
