<template>
    <div class="reportForm">
        <div class="left">
            <div class="menu-list">
                <div v-for="(item,index) in resultList" class="menu-item" :class="{'active-menu': activeNav == index}" @click="checkNav(index,item.devSn)">
                    {{item.devName}}
                </div>
            </div>
        </div>
        <div class="right">
            <div style="height: 100%" class="content whiteBlock">
                <vue-scroll style="height: 100%">
                    <el-table
                            :data="tableData"
                            class="tables"
                            style="width: 100%"
                            height="100%"
                    >   
                        <!-- 设备名称 -->
                        <el-table-column align="center" prop="devName" :label="$t('message.towerCrane.equipmentName')">
                        </el-table-column>
                        <!-- 顶升前高度(m) -->
                        <el-table-column align="center" prop="beforeHeght" :label="$t('message.towerCrane.heightBeforeJacking')">
                        </el-table-column>
                        <!-- 顶升后高度(m) -->
                        <el-table-column align="center" prop="height" :label="$t('message.towerCrane.heightAfterJacking')">
                        </el-table-column>
                        <!-- 顶升的塔吊标准节数量 -->
                        <el-table-column
                                prop="sectionCount"
                                :label="$t('message.towerCrane.jackingQuantity')"
                                align="center"
                        >
                        </el-table-column>
                        <!-- 顶升时间 -->
                        <el-table-column
                                prop="createTime"
                                :label="$t('message.towerCrane.jackingTime')"
                                align="center"
                        >
                        </el-table-column>

                        <!-- <el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column> -->

                        <!-- <el-table-column
                          prop="maintenanceRecord"
                          :label="$t('message.lifter.maintenanceRecord')"
                        >
                        </el-table-column> -->
                    </el-table>
                </vue-scroll>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getTowerListApi,
        selectTowerJackingRecordListApi,
    } from "@/assets/js/api/towerCrane";
    export default {
        name: "reportForm",
        props:['sn'],
        data(){
            return {
                activeNav: 0,
                tableData:[],
                projectSn:'',
                resultList:''
            }
        },
        created(){
            this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
        },
        mounted(){
            this.getTowerList()
        },
        methods:{
            checkNav(val,devSn){
                this.activeNav = val
                this.selectTowerJackingRecordList(devSn)
            },
            selectTowerJackingRecordList(devSn){
                let data = {
                    projectSn: this.projectSn,
                    devSn:devSn
                };
                selectTowerJackingRecordListApi(data).then(res => {
                    this.tableData = res.result
                    console.log(res);
                })
            },
            getTowerList(){
                let data = {
                    projectSn: this.projectSn,
                };
                getTowerListApi(data).then(res => {
                    this.resultList = res.result
                    this.selectTowerJackingRecordList(res.result[0].devSn)
                    console.log(res);
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .reportForm{
        width: 100%;
        height: 100%;
        .left{
            float: left;
            width: 188px;
            margin-right: 0;
            padding-top: 28px;
            box-sizing: border-box;
            height: 100%;background: #fff;
            .menu-list{
                .menu-item{
                    color: #7C829E;
                    padding-left: 28px;
                    width: 100%;
                    height: 30px;
                    box-sizing: border-box;
                    line-height: 30px;
                    margin-bottom: 10px;
                    cursor: pointer;
                    position: relative;
                }
                .menu-item:hover{
                    background: rgba(78, 124, 255, 0.1);
                    color: #4E7CFF;
                }
                .active-menu{
                    background: rgba(78, 124, 255, 0.25) !important;
                    color: #4E7CFF;
                }
                .active-menu::before{
                    content: "";
                    width: 3px;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #4E7CFF;
                }
            }
        }
        .right{
            float: right;
            width: calc(100% - 208px);
            height: 100%;
            margin-left: 20px;
        }
    }
</style>
