<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">-->
<!--        当前页面数据全部通过校验，请点击“下一步”进行导入<br><br>-->
<!--        <span v-if="insertCount > 0">新增：{{ insertCount }}条 </span>-->
<!--        <span v-if="updateCount > 0" style="color: orange;margin-left:10px;">修改：{{ updateCount }}条</span>-->
<!--        <span v-if="deleteCount > 0" style="color: red;margin-left:10px;"> 删除：{{ deleteCount }}条</span> -->
      <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="uploadResult.errorList.length === 0 && modifiedCount === 0" slot="title">没有可以导入的数据</p>-->
<!--      <p v-else slot="title">有{{ uploadResult.errorList.length }}条数据存在逻辑错误或系统数据重复错误</p>   -->
      <p v-else-if="uploadResult.errorList.length === 0 && modifiedCount === 0" slot="title">{{$t('import.noData')}}</p>
      <p v-else slot="title">{{$t('import.errMsg',[uploadResult.errorList.length])}}</p>
      <div style="max-height:200px; width:435px;overflow-y:auto;">
        <div v-if="uploadResult.message && !uploadResult.messages" v-for="msg in uploadResult.message">
          <p>{{ msg }}</p>
        </div>
        <div v-if="uploadResult.messages" v-for="(value,key,index) in uploadResult.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: {
    uploadResult: {
      type: Object,
      required: true,
      desc: '模板数据校验结果'
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    checkPass() {
      return this.uploadResult.errorList.length === 0 && this.modifiedCount > 0
    },
    modifiedCount() {
      return this.insertCount + this.updateCount + this.deleteCount
    },
    insertCount() {
      return this.uploadResult.successList.filter(({ operation }) => operation === '增').length
    },
    updateCount() {
      return this.uploadResult.successList.filter(({ operation }) => operation === '改').length
    },
    deleteCount() {
      return this.uploadResult.successList.filter(({ operation }) => operation === '删').length
    },
    tableName() {
      return this.uploadResult.successList[0].tableName
    }
  },
  methods: {
    handleSave() {
      this.loading = true
      const { data: tableInfo, successList: dataList } = this.uploadResult
      saveBatch({ tableInfo, dataList }).then(res => {
        if (res.code === 200) {
          if(res.data.errorList.length === 0){
            this.$emit('forward')
          }else {
            this.uploadResult = res.data
          }

        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

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