<template>
    <div class="eibs-tab">
        <el-form
            :model="model"
            :rules="rules"
            ref="modelForm"
            tokenKey="modelForm"
            label-width="140px"
            size="small"
            :validate-on-rule-change="false"
        >
            <c-col :span="8">
                <el-form-item label="业务主表">
                    <c-input
                        v-model="xxd"
                        placeholder="请输入业务主表"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="业务参考号（TD）">
                    <c-input
                        v-model="tdref"
                        placeholder="请输入业务参考号（TD）"
                    ></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="业务参考号（新国结）">
                    <c-input
                        v-model="newref"
                        placeholder="请输入业务参考号（新国结）"
                    ></c-input>
                </el-form-item>
            </c-col>

            <c-col :span="24" style="text-align: right">
                <el-button size="small" @click="handleReset">重置</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    @click="handleSearch"
                    >查询对比</el-button
                >
            </c-col>

            <c-col :span="24" style="margin-top: 10px">
                <div style="border-bottom: 10px solid rgb(232, 232, 232)"></div>
            </c-col>

            <div v-for="(item, idx) in compareData" :key="idx">
                <c-col
                    :span="24"
                    style="height: 24px; margin-top: 20px; margin-bottom: 5px"
                >
                    <c-col :span="12">
                        <el-form-item :label="item.bo" class="messageLabel">
                        </el-form-item>
                    </c-col>
                    <c-col
                        :span="12"
                        style="
                            text-align: right;
                            font-weight: bold;
                            font-size: 12px;
                        "
                    >
                        <div v-if="showType == 0">
                            <c-button @click="changeShowType(0)" type="primary">原始数据</c-button>
                            <c-button @click="changeShowType(1)">对比结果</c-button>
                        </div>
                        <div v-else>
                            <c-button @click="changeShowType(0)">原始数据</c-button>
                            <c-button @click="changeShowType(1)" type="primary">对比结果</c-button>
                        </div>
                    </c-col>
                </c-col>
                <c-col :span="24" style="height: 0px; margin-top: -5px">
                    <el-divider></el-divider>
                </c-col>
                <c-col :span="24">
                    <c-col :span="24" :offset="0" v-if="showType == 0">
                        <c-compare-table
                            :list="item.diffRows"
                            :columns="item.allKeys"
                            :paginationShow="false"
                            :showType="showType"
                            :maxColumnLength="maxColumnLength[item.bo]"
                            style="width: 100%"
                        >
                        </c-compare-table>
                    </c-col>
                    <c-col :span="24" :offset="0" v-if="showType == 1">
                        <c-compare-table
                            :list="item.diffRows"
                            :columns="item.diffKeys"
                            :paginationShow="false"
                            :showType="showType"
                            :maxColumnLength="maxColumnLength[item.bo]"
                            style="width: 100%"
                        >
                        </c-compare-table>
                    </c-col>
                </c-col>
            </div>
        </el-form>
    </div>
</template>

<script>
import { max } from 'moment';
import { all } from "~/service/compare";

export default {
    data() {
        return {
            tabVal: "menu",
            trnName: "compare",
            model: null,
            rules: null,
            bo: "",
            xxd: "DID",
            tdref: "KZ3500210535AA  ",
            newref: "KZ3500210549AA  ",
            compareData:[],
            DID_Data: {
                data: [],
                columns: [],
            },
            DID_high_columns: [],
            maxColumnLength:{},
            showType: 1,    //0:原始数据， 1:对比数据 
        };
    },
    computed: {},
    name: "TaskList",
    created() {},
    methods: {
        async handleReset() {},
        async handleSearch() {
            const params = {
                xxd: this.xxd,
                tdref: this.tdref,
                newref: this.newref,
            };
            const that = this;
            all(params).then((res) => {
                console.log(res);
                that.compareData = res;
                that.bo = res[0].bo;

                for (let i = 0; i < res.length; i++) {
                    const ret = {};
                    for (let j = 0; j < res[i].allKeys.length; j++) {
                        const key = res[i].allKeys[j];
                        ret[key] = key.length;
                        for (let k = 0; k < res[i].diffRows.length; k++) {
                            var current_length = res[i].diffRows[k].data[key] ? (res[i].diffRows[k].data[key] + '').trim().length : 0;
                            var current_max =  ret[key] ? ret[key] : 0;
                            if(current_length >= current_max){
                                ret[key] = current_length;
                            }
                        }
                    }
                    this.maxColumnLength[res[i].bo] = ret;
                }
                console.log(this.maxColumnLength);
            });
        },
        changeShowType(key){
            this.showType = key;
        }
    },
    components: {},
};
</script>

<style scoped>
.messageLabel >>> .el-form-item__label {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}
</style>
