<template>
    <div v-loading="loading">
        <!-- 校验结果 -->
        <div v-if="checkResult.checkTemplateResult == 'ok'">
            <awsui-tabs v-model="activeName">
                <awsui-tab-pane v-for="(tabItem, index) in tabData" :key="tabItem.id" :name="tabItem.id">
                    <span slot="label"><span :style="{color: tabItem.isOk ? '' : 'red'}">{{tabItem.sheetName}}</span></span>
                    <div :style="{height: msgHeight}" v-html="checkResult.resultMsg[index]"></div>
                    <div>
                        <el-table
                                id='table'
                                :height="tableHeight"
                                :data="tabItem.data"
                                border
                                size="medium"
                                style="width: 100%">
                                <el-table-column
                                    prop='index'
                                    label=''
                                    align='center'
                                    width=50px
                                >
                                </el-table-column>
                                <el-table-column 
                                        v-for="(item) in tabItem.titleRow" 
                                        :key=item
                                        :prop=item
                                        :label="item">
                                        <template slot-scope="scope">
                                            <template v-if="scope.row[item] != undefined">
                                                {{scope.row[item].value}}
                                                <!--警告类提示，上传可忽略-->
                                                <span v-if="!scope.row[item].isRowOk && item == '名称'" style="color: #E6A23C">
                                                    <br/><b>{{scope.row[item].rowMsg}}</b>
                                                </span>
                                                <!--错误类提示，不能上传-->
                                                <span v-if="!scope.row[item].isOk" style="color: #ff0000">
                                                    <br/><b>{{scope.row[item].msg}}</b>
                                                </span>
                                            </template>
                                        </template>
                                </el-table-column>
                        </el-table>
                    </div>
                </awsui-tab-pane>
            </awsui-tabs>
        </div>
        <!-- excel错误提示 -->
        <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-shape",
        props: {
            fileName: {// 文件名称
                type: String,
                default: ''
            },
            totalHeight: {
                type: String, 
                default: 0
            }
        },
        data() {
            return {
                loading: false,
                wsId: wsId,
                teamId: teamId,
                shapeFileValue: shapeFileValue,
                msgHeight: '20px',
                tableHeight: parseInt(this.totalHeight) - 20 - 45 + 'px',
                activeName: 'first',
                tabData: [],
                checkResult: {
                    isOk: true,
                    okData: [],
                    resultMsg: [],
                    chheckDone: false,
                    checkTemplateResult: 'ok',
                    checkTemplateResultMsg: [],
                }
            }
        },
        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: 'shapeList',
                        fileValue: that.shapeFileValue,
                        fileName: that.fileName
                    }
                };
                awsuiAxios.post(params).then(function (ro) {
                    that.loading = false;
                    if (ro.result == 'ok') {
                        const data = ro.data;
                        that.checkResult.okData = JSON.parse(JSON.stringify(data));
                        for (let i = 0; i < data.length; i++) {
                            if (i == 0) {
                                that.activeName = data[i].id;
                            }
                            const tableDataTemp = [];
                            const tableData = data[i].data;
                            let msg = '清单共<span style="font-weight:bold;">' + tableData.length + '</span>条记录';
                            let okCount = 0;
                            let errCount = 0;
                            for (let j = 0; j < tableData.length; j++) {
                                const row = {};
                                const rowArr = tableData[j];
                                let isRowOk = true;// 每行结果
                                for (let m = 0; m < rowArr.length; m++) {
                                    if (!rowArr[m].isOk) {
                                        isRowOk = false;
                                        break;
                                    }
                                }
                                for (let m = 0; m < rowArr.length; m++) {
                                    row[rowArr[m].name2] = rowArr[m];
                                }
                                row.index = j + 1;// 序号列，方便用户识别
                                tableDataTemp.push(row);
                                if (isRowOk) {
                                    okCount++;
                                } else {
                                    errCount++;
                                    that.checkResult.isOk = false;
                                }
                            }
                            if (okCount == tableData.length) {
                                msg += ',全部校验通过';
                            } else if (errCount == tableData.length) {
                                msg += ',全部校验失败';
                            } else {
                                msg += ',校验通过<span style="font-weight:bold;">' + okCount + '</span>条';
                                msg += ',校验失败<span style="color:red;font-weight:bold;">' + errCount + '</span>条';
                            }
                            that.checkResult.resultMsg.push(msg);
                            data[i].data = tableDataTemp;

                        }
                        that.tabData = ro.data;
                        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);
                })
            },
            handleClick() {
                alert(this.activeName)
            }
        }
        
    }
</script>

<style scoped>

</style>