<template>
  <div class="check">
    <el-button v-if="checkPass" style="margin-left: 10px;" size="small" class="primary button" :loading="loading"
               @click="handleSave">
      <!--      下一步-->
      {{ $t('import.next') }}
    </el-button>
    <el-button v-else slot="trigger" size="small" class="primary button" @click="$emit('back')">
      <!--      返回上一步-->
      {{ $t('import.preview') }}
    </el-button>

    <el-alert style="margin-top:10px;text-align:left;" :type="checkPass ? 'success' : 'warning'" :closable="false">
      <p v-if="checkPass" slot="title">
        {{ $t('import.checkNext') }}<br><br>
        <span v-if="insertCount > 0">{{ $t('import.insMsg', [insertCount]) }}</span>
        <span v-if="updateCount > 0" style="color: orange;margin-left:10px;">{{ $t('import.updMsg', [updateCount])
          }}</span>
        <span v-if="deleteCount > 0" style="color: red;margin-left:10px;"> {{ $t('import.delMsg', [deleteCount])
          }}</span>
      </p>
      <p v-else-if="errorList.length === 0 && modifiedCount === 0" slot="title">{{ $t('import.noData') }}</p>
      <p v-else slot="title">{{ $t('import.errMsg', [errorList.length]) }}</p>
      <div style="max-height:200px; width:435px;overflow-y:auto;">
        <div v-if="Object.keys(messages).length === 0 && message" v-for="msg in message">
          <p>{{ msg }}</p>
        </div>
        <div v-if="Object.keys(messages).length > 0" v-for="(value, key, index) in messages" :key="index">
          <h5 v-if="value && value.length > 0">{{ key }}</h5>
          <p v-for="msg in value" :key="msg">{{ msg }}</p>
        </div>
      </div>
    </el-alert>
  </div>
</template>

<script>
import {saveBatch} from '@/api/excel'

export default {
  name: 'DataCheck',
  props: {
    tableType: {
      type: Number,
      // required: true
    },
    defaultParams: {
      type: Object,
      default: () => {
      },
      desc: '为上传表格设置默认条件',
    },
    uploadResult: {
      type: Array,
      required: true,
      desc: '模板数据校验结果'
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    errorList() {
      return this.uploadResult.flatMap(item => item.errorList)
    },
    successList() {
      return this.uploadResult.flatMap(item => item.successList)
    },
    messages() {
      const res = {}
      this.uploadResult.forEach(item => {
        if (item.messages) {
          Object.keys(item.messages).forEach(key => {
            res[key] = item.messages[key]
          })
        }
      })
      return res
    },
    message() {
      const res = {}
      this.uploadResult.forEach(item => {
        if (item.message) {
          Object.keys(item.message).forEach(key => {
            res[key] = item.message[key]
          })
        }
      })
      return res
    },
    checkPass() {
      return this.errorList.length === 0 && this.modifiedCount > 0
    },
    modifiedCount() {
      return this.insertCount + this.updateCount + this.deleteCount
    },
    insertCount() {
      return this.successList.filter(({operation}) => operation === '增').length
    },
    updateCount() {
      return this.successList.filter(({operation}) => operation === '改').length
    },
    deleteCount() {
      return this.successList.filter(({operation}) => operation === '删').length
    }
  },
  methods: {
    handleSave() {
      this.loading = true
      const {tableType, successList: dataList} = this
      saveBatch({tableType, dataList, param: this.defaultParams}).then(res => {
        if (res.code === 200) {
          this.$emit('forward')
          this.$emit('forward')

          this.$emit('successData',res)
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.check {
  padding: 30px;
  text-align: right;
}
</style>
