<template>
    <div class="eContainer-table-block">
        <div style="text-align: left" v-if="showButtonFlg" class="buttonDiv">
            <c-button
                icon="el-icon-s-tools"
                @click="clounmSetting"
                style=""
            ></c-button>
        </div>
        <el-table
            ref="table"
            :data="
                tableData.slice(
                    (currentPage - 1) * pageSize,
                    currentPage * pageSize
                )
            "
            style="width: 100%"
            class="eContainer-table"
            @selection-change="handleSelectionChange"
            :row-key="getRowKey"
            :header-cell-style="{
                background: 'rgb(235, 235, 235)',
                color: 'rgb(51, 51, 51)',
            }"
            :highlight-current-row="false"
            @row-click="rowClick"
            :border="true"
            :row-class-name="tableRowClassName"
        >
            <el-table-column
                type="selection"
                width="55"
                v-if="showSelection"
                :reserve-selection="true"
            ></el-table-column>

            <el-table-column label="类型" width="80" prop="dataType">
            </el-table-column>

            <c-table-column
                v-for="(item, key) in tableColumns"
                :key="key"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
            >
                <template v-slot="{ scope }">
                    <div v-if="checkIsHighLight(scope.$index, item.prop)">
                        <span style="color: red">{{
                            scope.row[item.prop]
                        }}</span>
                    </div>
                    <div v-else>
                        <span>{{ scope.row[item.prop] }}</span>
                    </div>
                </template>
            </c-table-column>
            <slot></slot>
        </el-table>
        <c-col :span="16">
            <el-pagination
                v-if="paginationShow"
                class="eContainer-pagination"
                layout="prev, pager, next, jumper"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="tableData.length"
                @size-change="sizeChange"
                @current-change="currentChange"
            ></el-pagination>
        </c-col>
        <c-col :span="8">
            <div class="paginationLable" v-if="paginationShow">
                当前显示第 {{ (currentPage - 1) * pageSize + 1 }}-{{
                    currentPage * pageSize > tableData.length
                        ? tableData.length
                        : currentPage * pageSize
                }}
                条，共 {{ tableData.length }} 条
            </div>
        </c-col>
    </div>
</template>

<script>
export default {
    props: {
        columns: {
            type: Array,
            default: () => {
                return [];
            },
        },
        high_columns: {
            type: Array,
            default: () => {
                return [];
            },
        },
        list: {
            type: Array,
            default: () => {
                return [];
            },
        },
        maxColumnLength: {
            type: Object,
            default: () => {
                return [];
            },
        },
        showType: {
            type: Number,
            default: () => {
                return 1;
            },
        },
        showSelection: {
            type: Boolean,
            default: false,
        },
        paginationShow: {
            type: Boolean,
            required: false,
            default: true,
        },
        showButtonFlg: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    watch: {
        columns() {
            this.generateColumns();
        },
    },
    computed: {
        tableData() {
            const ret = [];
            for (let i = 0; i < this.list.length; i++) {
                if(this.showType == 0){
                    this.list[i].data["dataType"] = this.list[i].type;
                    ret.push(this.list[i].data);
                }else if(this.showType == 1){
                    if(this.list[i].flag != -1){
                        this.list[i].diffRows["dataType"] = this.list[i].type;
                        ret.push(this.list[i].diffRows);
                    }else{
                        this.list[i].data["dataType"] = this.list[i].type;
                        ret.push(this.list[i].data);
                    }
                }
            }
            return ret;
        },
    },
    data() {
        return {
            tableColumnsOrigin: [],
            tableColumns: [],
            currentPage: 1,
            pageSizes: [5, 10, 20, 30, 40, 50, 100],
            pageSize: 10,
            selectAll: true,
            columnGroup: [],
            setColumnFlg: false,
            select_index:0,
            select_last_index:0,
            select_background_color:{
                warning:["warning-row_1","warning-row_2"],
                success:"success-row",
                fail:"fail-row"
            }
        };
    },
    mounted() {
        this.generateColumns();
    },
    methods: {
        generateColumns() {
            const arr = [];
            for (let i = 0; i < this.columns.length; i++) {
                const column = this.columns[i];
                arr.push({
                    idx: i,
                    prop: column,
                    label: column,
                    width:
                        this.maxColumnLength[column] > 5
                            ? this.maxColumnLength[column] * 14
                            : 80
                });
            }
            this.tableColumns = arr;
        },
        checkIsHighLight(index, prop) {
            if (this.list[index].flag == -1) {
                return false;
            }
            return this.list[index].diffKeys.indexOf(prop) >= 0 ? true : false;
        },
        tableRowClassName({ row, rowIndex }) {
            const id = this.list[rowIndex].id;
            const flag = this.list[rowIndex].flag;
            if(flag == -1){
                return this.select_background_color.fail;
            }
            if(flag == 1){
                return this.select_background_color.success;
            }
            // if(id != this.select_last_index){
            //     this.select_index++;
            //     this.select_last_index = id;
            // }
            // const idx = this.select_index % 2;
            return this.select_background_color.warning[id % 2];
        },
        sizeChange(size) {
            this.pageSize = size;
        },
        currentChange(currentPage) {
            this.currentPage = currentPage;
        },
        handleSelectionChange(val) {
            this.$emit("multipleSelect", this.getSelectedRowIndex(val));
        },
        getRowKey(row) {
            return row["IDX"];
        },
        getSelectedRowIndex(val) {
            const indexArr = [];
            for (let j = 0; j < val.length; j++) {
                const v = val[j];
                for (let i = 0; i < this.tableData.length; i++) {
                    const data = this.tableData[i];
                    if (v["IDX"] === data["IDX"]) {
                        indexArr.push(i);
                    }
                }
            }
            return indexArr;
        },
        // 行点击，设置高亮
        rowClick(row, column, event) {
            this.$refs.table.setCurrentRow(row);
            this.$emit("chooseRowEvent", row);
        },
        clounmSetting() {
            this.setColumnFlg = true;
        },
        saveColumnEvent() {
            this.setColumnFlg = false;
            const arr = this.columnGroup.map((idx) => parseInt(idx));
            arr.sort((a, b) => a - b);
            this.columnGroup = arr;
            this.tableColumns = this.columnGroup.map(
                (index) => this.tableColumnsOrigin[parseInt(index) - 1]
            );
        },
        setAll(val) {
            this.columnGroup = val
                ? this.tableColumnsOrigin.map((item) => parseInt(item.index))
                : [];
        },
        handleColumnChange() {
            this.selectAll =
                this.tableColumnsOrigin.length === this.columnGroup.length;
        },

        //补充自定义列处理函数
        //去掉日期的时分秒毫秒
        date(item, scope) {
            let value = scope.row[item.prop];
            if (!value) {
                return "";
            }
            let idx = value.indexOf(" ");
            if (idx > 0) return value.substring(0, idx);
            return value;
        },
        //code映射
        code(item, scope) {
            let value = scope.row[item.prop];
            let code = item.code;
            if (!value || !code) {
                return "";
            }
            let em = code.find((item) => item.value.trim() == value.trim());
            if (!em) {
                return value;
            }
            return em.label;
        },
        //去掉时间的毫秒
        time(item, scope) {
            let value = scope.row[item.prop];
            if (!value) {
                return "";
            }
            let idx = value.indexOf(".");
            if (idx > 0) return value.substring(0, idx);
            return value;
        },
        //日期格式化
        dateFormat(item, scope) {
            let value = scope.row[item.prop];
            if (!value) {
                return "";
            }
            return (
                value.substring(0, 4) +
                "-" +
                value.substring(4, 6) +
                "-" +
                value.substring(6)
            );
        },
    },
};
</script>

<style>
.eContainer-table-block {
    margin-top: 15px;
    position: relative;
}
.eContainer-table-block .paginationLable {
    font-size: 12px;
    color: #808080;
    height: 26px;
    line-height: 26px;
    float: right;
    /* margin-top: 20px; */
}
.eContainer-table-block .el-table__body-wrapper {
    overflow: auto;
}
.el-table .warning-row {
    background: oldlace;
}
.el-table .success-row {
    background: #f0f9eb;
}
.selectColumnClass .el-checkbox__label {
    width: 67px;
    font-size: 13px;
}
.selectAllClass .el-checkbox__label {
    width: 30px;
    font-size: 13px;
    padding-left: 5px;
}
.eContainer-table-block >>> .el-table .cell {
    white-space: pre-wrap;
}
.buttonDiv {
    text-align: left;
    display: inline-block;
    margin: 0;
    position: absolute;
    z-index: 999;
    right: 5px;
    padding-top: 3px;
}

/*去掉鼠标悬停背景颜色*/
.el-table tbody tr:hover > td {
    background-color: #ffffff !important;
}
.el-table .warning-row_1 {
    background: oldlace;
}

.el-table .warning-row_2 {
    background: rgb(230, 253, 253);
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-table .fail-row {
    background: #f9ebf1;
}
</style>