<template>
  <div v-loading="loading">
    <!--上传的清单内容预览-->
    <div v-if="checkResult.checkTemplateResult == 'ok'">
      <div :style="{height: msgHeight}" v-html="checkResult.resultMsg"></div>
      <div>
        <el-table
            id='table'
            :height="tableHeight"
            :data="tableData"
            border
            size="medium"
            style="width: 100%">
          <!-- ExcelNo -->
          <el-table-column
              prop='excelNo'
              label='1'
              align='center'
              width=100px
          >
            <template slot-scope="scope">
              {{scope.row.excelNo + 1}}
            </template>
          </el-table-column>
          <!-- 策略 -->
          <el-table-column
              prop='result'
              label='策略'
              align='center'
              width=100px
              fiexd="left"
          >
            <template slot-scope="scope">
              <p :style="{color: scope.row.isRowOk ? '#009688' : '#ff0000'}">
                <span v-if="scope.row.result == 'add'">新增</span>
                <span v-else-if="scope.row.result == 'update'">更新</span>
                <span v-else-if="(scope.row.result == 'repeat' || scope.row.result == 'blank' || scope.row.result == 'noMatch')">忽略</span>
                <span v-else>————</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column
              v-for="(item, index) in tableTitle"
              :key=item
              :prop=item
              :label="item"
              min-width="150">
            <template slot-scope="scope">
              <template v-if="scope.row.row[index] != undefined">
                {{ scope.row.row[index].value }}
                <span v-if="!scope.row.row[index].isOk" style="color: #ff0000">
                  <br/>{{ scope.row.row[index].msg }}
                </span>
              </template>
            </template>
          </el-table-column>
          <!-- 匹配路径 -->
          <el-table-column
              prop='matchPath'
              label='匹配路径'
              align='left'
              width=500px
          >
            <template slot-scope="scope">
              {{scope.row.pathName}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--上传的清单校验失败时显示内容-->
    <div v-if="checkResult.checkTemplateResult != 'ok'">
      <div style="background-color:#F56C6C;padding: 10px;" v-html="checkResult.checkTemplateResultMsg"></div>
    </div>
  </div>
</template>

<script>
import awsuiAxios from "../../awsuiAxios";

export default {
  name: "check-process",
  props: {
    fileName: {// 文件名称
      type: String,
      default: ''
    },
    totalHeight: {
      type: String,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      wsId: wsId,
      teamId: teamId,
      processFileValue: processFileValue,
      methodCategory: methodCategory,
      msgHeight: '20px',
      tableHeight: parseInt(this.totalHeight) - 20 + 'px',
      tableTitle: [],
      tableData: [],
      checkResult: {
        okData: [],
        errData: [],
        existData: [],
        excelExistData: [],
        resultMsg: '正在校验...',
        chheckDone: false,
        checkTemplateResult: 'ok',
        checkTemplateResultMsg: '',
        totalCount: 0,
        okCount: 0,
        repeatCount: 0,
        blankCount: 0,
        errCount: 0,
        noMatchCount: 0
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const that = this;
      that.loading = true;
      const params = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_process_data_check",
          wsId: that.wsId,
          teamId: that.teamId,
          type: 'processList',
          fileValue: that.processFileValue,
          fileName: that.fileName,
          methodCategory: methodCategory
        }
      };
      awsuiAxios.post(params).then(function (ro) {
        that.loading = false;
        if (ro.result == 'ok') {
          // 标题
          that.tableTitle = ro.data.data.titleRow;
          // 内容
          const data = ro.data.data.data;
          let totalCount = data.totalCount;// 总数
          that.checkResult.totalCount = totalCount;
          let okCount = data.okCount;// 校验成功数
          that.checkResult.okCount = okCount;
          let repeatCount = data.repeatCount;// Excel数据重复数
          that.checkResult.repeatCount = repeatCount;
          let blankCount = data.blankCount;// 关键信息空白数
          that.checkResult.blankCount = blankCount;
          let errCount = data.errCount;// 校验失败数
          that.checkResult.errCount = errCount;
          let noMatchCount = data.noMatchCount;// 校验不匹配数
          that.checkResult.noMatchCount = noMatchCount;
          let result = '共<span style="font-weight:bold;">' + totalCount + '</span>条';
          if (okCount > 0) {
            if (totalCount == okCount) {
              result += '，全部校验通过';
            } else {
              result += '，通过<span style="font-weight:bold;">' + okCount + '</span>条';
            }
          }
          if (errCount > 0) {
            result += '，失败<span style="color:red;font-weight:bold;">' + errCount + '</span>条';
          }
          if (blankCount > 0) {
            result += '，名称、上级名称或文件类型缺失<span style="color:red;font-weight:bold;">' + blankCount + '</span>条';
          }
          if (repeatCount > 0) {
            result += '，重复<span style="color:red;font-weight:bold;">' + repeatCount + '</span>条';
          }
          if (noMatchCount > 0) {
            result += '，不匹配<span style="color:red;font-weight:bold;">' + noMatchCount + '</span>条';
          }

          that.checkResult.resultMsg = result;
          that.tableData = data.result;
          that.checkResult.okData = that.tableData;
          that.checkResult.chheckDone = true;
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {// 校验excel失败或其他错误类信息
          // that.$message.error(ro.msg);
          that.checkResult.checkTemplateResult = 'error';
          that.checkResult.checkTemplateResultMsg = ro.msg;
        }
      }).catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>

</style>