<template>
    <div class="matrix">
        <div class="btn-group-tabs">
            <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
        </div>
        <div class="panel-title">
            <div class="panel-title-name">
                <i class="fa fa-send"></i>
                <span>某某某风电场</span>
                <span class="sub-title">接入台数</span>
                <span class="sub-count">256</span>
            </div>
        </div>
        <div class="panel-body">
            <table>
                <tbody>
                    <tr v-for="(row, i) of groupDatas" :key="i">
                        <td v-for="(col, j) of row" :key="j">
                            <div class="card" :class="col.color">
                                <div class="card-panel">
                                    <div class="card-left">
                                        <div class="tag">{{col.tag}}</div>
                                    </div>
                                    <div class="card-right">
                                        <div class="num">{{col.num1}}</div>
                                        <div class="num">{{col.num2}}</div>
                                        <div class="num">{{col.num3}}</div>
                                    </div>
                                </div>
                                <div class="card-percent">
                                    <div class="percent" :style="'width: ' + col.percent + '%'"></div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import util from '@/helper/util.js';
    import BtnGroup2 from '@com/coms/btn/btn-group-double.vue';
    export default {
        // 名称
        name: "Matrix",
        // 使用组件
        components: {
            BtnGroup2
        },
        // 数据
        data() {
            return {
                col: 15,
                datas: [{
                    tag: "SG1",
                    num1: "985.97 kw",
                    num2: "985.97 kw",
                    num3: "6.45 m/s",
                    percent: 70,
                    color: "blue"
                }],
                groupDatas: [],
                btnGroups: [{
                        icon: "fa fa-fire",
                        btns: [{
                            text: "某某风场",
                            code: "mmfdc1",
                        }, {
                            text: "某某风场",
                            code: "mhsfc",
                        }, {
                            text: "某某风场",
                            code: "mmfdc2",
                        }, {
                            text: "某某风场",
                            code: "mmfdc3",
                        }, {
                            text: "某某风场",
                            code: "mmfdc4",
                        }]
                    },
                    {
                        icon: "fa fa-fire-extinguisher",
                        btns: [{
                            text: "某某风场",
                            code: "mmgf1",
                        }, {
                            text: "某某风场",
                            code: "mmgf2",
                        }, {
                            text: "某某风场",
                            code: "mmgf3",
                        }, {
                            text: "某某风场",
                            code: "mmgf4",
                        }]
                    }
                ],
            }
        },
        // 函数
        methods: {
            createGroupDatas: function() {
                this.groupDatas = [];
                let tempDatas = [];
                this.datas.forEach((data, index) => {
                    if (index % this.col == 0) {
                        if (tempDatas.length > 0) {
                            this.groupDatas.push(util.copy(tempDatas));
                            tempDatas = [];
                        }
                    }
                    tempDatas.push(util.copy(data));
                })
                if (tempDatas.length > 0) {
                    this.groupDatas.push(util.copy(tempDatas));
                    tempDatas = [];
                }
            }
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
            let tempData = [];
            for (let i = 0; i < 195; i++) {
                tempData.push(util.copy(this.datas[0]));
                if (i == 115) {
                    tempData[i].color = "purple";
                }
                if (i == 116) {
                    tempData[i].color = "orange";
                }
                if (i == 117) {
                    tempData[i].color = "red";
                }
                if (i == 118) {
                    tempData[i].color = "write";
                }
                if (i == 119) {
                    tempData[i].color = "gray";
                }
            }
            this.datas = util.copy(tempData);
            this.createGroupDatas();
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less" scoped>
    @titleHeight: 3.704vh;

    .matrix {
        width: 100%;
        height: 100%;
        
        .btn-group-tabs {
            display: flex;
            flex-direction: row;
        
            .photovoltaic {
                margin-left: 1.481vh;
            }
        }

        .panel-title {
            width: 100%;
            height: @titleHeight;
            line-height: @titleHeight;
            background-color: fade(@gray, 40%);
            margin-top: 1.481vh;

            .panel-title-name {
                font-size: 1.111vh;
                color: @green;

                i {
                    margin: 0 0.556vh 0 1.481vh;
                }

                .sub-title {
                    color: @gray;
                    font-size: 1.019vh;
                    margin: 0 0.556vh 0 1.481vh;
                }

                .sub-count {
                    font-size: 1.204vh;
                    color: @write;
                    font-weight: 600;
                }
            }
        }

        .panel-body {
            height: calc(100% - 7.407vh);
            background-color: fade(@gray, 20%);
            padding: 0.741vh;
            overflow: auto;

            table {
                width: 100%;

                .card {
                    border: 0.093vh solid;

                    .card-panel {
                        display: flex;
                        flex-grow: row;

                        .card-left {
                            width: 40%;
                            border-right: 0.093vh dotted;

                            .tag {
                                color: @write;
                                font-size: 1.111vh;
                                width: 100%;
                                text-align: center;
                            }
                        }

                        .card-right {
                            width: 60%;

                            .num {
                                width: 100%;
                                font-size: 1.019vh;
                                text-align: right;
                                padding-right: 0.278vh;
                            }
                        }

                    }

                    .card-percent {
                        height: 0.926vh;
                        padding: 0.093vh 0.185vh;
                        position: relative;
                        border-top: 1px solid;
                        background-color: transparent;

                        .percent {
                            height: 0.648vh;
                            background-color: @green;
                            position: absolute;
                            left: 0.185vh;
                            top: 0.093vh;
                        }
                    }

                    &.blue {
                        border-color: @darkBlue;
                        background-color: fade(@darkBlue, 30%);
                    
                        .card-panel {
                            .card-left {
                                border-color: @darkBlue;
                    
                                .tag {
                                    background-color: @darkBlue;
                                }
                            }
                            
                            .card-right {
                                .num {
                                    color: @darkBlue;
                                }
                            }
                        }
                        
                        .card-percent {
                            border-color: @darkBlue;
                        }
                    }
                    
                    &.purple {
                        border-color: @purple;
                        background-color: fade(@purple, 30%);
                    
                        .card-panel {
                            .card-left {
                                border-color: @purple;
                    
                                .tag {
                                    background-color: @purple;
                                }
                            }
                            
                            .card-right {
                                .num {
                                    color: @purple;
                                }
                            }
                        }
                        
                        .card-percent {
                            border-color: @purple;
                        }
                    }
                    
                    &.orange {
                        border-color: @orange;
                        background-color: fade(@orange, 30%);
                    
                        .card-panel {
                            .card-left {
                                border-color: @orange;
                    
                                .tag {
                                    background-color: @orange;
                                }
                            }
                            
                            .card-right {
                                .num {
                                    color: @orange;
                                }
                            }
                        }
                        
                        .card-percent {
                            border-color: @orange;
                        }
                    }
                    
                    &.gray {
                        border-color: @gray;
                        background-color: fade(@gray, 30%);
                    
                        .card-panel {
                            .card-left {
                                border-color: @gray;
                    
                                .tag {
                                    background-color: @gray;
                                }
                            }
                            
                            .card-right {
                                .num {
                                    color: @gray;
                                }
                            }
                        }
                        
                        .card-percent {
                            border-color: @gray;
                        }
                    }
                    
                    &.red {
                        border-color: @red;
                    
                        .card-panel {
                            background-color: @red;
                            
                            .card-left {
                                border-color: @darkRed;
                    
                                .tag {
                                    background-color: @darkRed;
                                }
                            }
                            
                            .card-right {
                                .num {
                                    color: @write;
                                }
                            }
                        }
                        
                        .card-percent {
                            border-color: @red;
                        }
                    }
                    
                    &.write {
                        border-color: @write;
                    
                        .card-panel {
                            background-color: @write;
                            
                            .card-left {
                                border-color: @black;
                    
                                .tag {
                                    background-color: @gray;
                                }
                            }
                            
                            .card-right {
                                .num {
                                    color: @black;
                                }
                            }
                        }
                        
                        .card-percent {
                            border-color: @write;
                        }
                    }

                }
            }
        }
    }
</style>
