<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      title="导入结果"
      :visible.sync="dialogVisible"
      width="70%"
      append-to-body
    >
      <span>
        <el-tabs
          v-model="activeName"
          type="card"
          tab-position="top"
          @tab-click="handleTabClick"
        >
          <el-tab-pane
            v-for="item in data"
            :key="item.entName"
            :label="`${item.desc}(${item.entName})`"
            :name="item.entName"
          >
            <el-table :data="item.pageList.rows" border stripe height="500px">
              <el-table-column label="导入检查" align="center">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column label="主键" align="center">
                  <template slot-scope="scope">
                    <span>
                      {{ scope.row.dataNode[entMap[item.entName].pkKey] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="外键" align="center">
                  <template slot-scope="scope">
                    <span>
                      {{ scope.row.dataNode[entMap[item.entName].fk] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="是否有效" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="!scope.row.state" type="danger">否</el-tag>
                    <el-tag v-if="scope.row.state" type="success">是</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="错误信息"
                  prop="cause"
                  align="center"
                ></el-table-column>
                <el-table-column label="是否重复" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.repeat" type="danger">是</el-tag>
                    <el-tag v-else type="success">否</el-tag>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="导入数据" align="center">
                <el-table-column
                  v-for="column in attributeMap[item.entName] || []"
                  :key="column.id"
                  :label="column.desc"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>
                      {{ scope.row.dataNode[column.name] }}
                    </span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-pagination
          :key="currentIndex"
          :current-page="pageBean.page"
          :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
          :page-size="pageBean.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageBean.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="processImportResult">导入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'TemplateImportResult',
    props: {
      templateInfo: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        cacheKey: '',
        dialogVisible: false,
        activeName: '',
        data: [],
        entMap: {},
        attributeMap: {},
        mapLoaded: false,
        pageBean: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        currentIndex: 0,
      }
    },
    methods: {
      handleSizeChange(pageSize) {
        this.pageBean.pageSize = pageSize
        this.loadData(true)
      },
      handleCurrentChange(page) {
        this.pageBean.page = page
        this.loadData(true)
      },
      showDialog(cacheKey) {
        this.cacheKey = cacheKey
        this.currentIndex = 0
        this.loadData()
        //this.dialogVisible = true
      },
      handleTabClick(tab) {
        this.currentIndex = Number(tab.index)
        this.pageBean = {
          page: 1,
          pageSize: 20,
        }
        this.loadData(true)
      },
      loadData(isSizeOrPageChange = false) {
        const this_ = this
        this.$requestConfig
          .getTemplateImportResult(this_.cacheKey, this.pageBean)
          .then((resp) => {
            const { page, pageSize, total } = resp[this.currentIndex].pageList
            if (!resp || !resp.length) {
              this_.$message.error('导入失败')
            } else {
              this_.data = resp
              this.pageBean = {
                page,
                pageSize,
                total,
              }
              if (resp.length && !isSizeOrPageChange) {
                this.activeName = resp[0].entName
              }
              let entAttributeMap = {}
              let entMap = {}
              if (!this_.mapLoaded) {
                this.$requestConfig
                  .getBoDefinition(this_.templateInfo.boDefAlias)
                  .then((boJson) => {
                    let fn_ = function(obj) {
                      entMap[obj.name] = obj
                      if (obj.attributeList && obj.attributeList.length) {
                        entAttributeMap[obj.name] = obj.attributeList
                      }
                      if (obj.childEnts && obj.childEnts.length) {
                        obj.childEnts.forEach(fn_)
                      }
                    }
                    fn_(boJson.boEnt)
                    this_.attributeMap = entAttributeMap
                    this_.entMap = entMap
                    this_.mapLoaded = true
                    this_.dialogVisible = true
                  })
              } else {
                this_.dialogVisible = true
              }
            }
          })
      },
      processImportResult() {
        const loading = this.$loading({
          text: '正在保存数据',
        })
        this.$requestConfig
          .saveImportResult(this.cacheKey, this.templateInfo.alias)
          .then((result) => {
            if (result.state) {
              this.$message.success(result.message)
              this.dialogVisible = false
              loading.close()
              this.$emit('after-save')
            }
          })
          .catch(() => {
            loading.close()
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-pagination {
    margin-top: 10px;
  }
</style>
