<template>
    <div class="reportConpanyDetail">
        <van-nav-bar title="单位考评报告详情" left-text="返回" @click-left="onClickLeft" />
        <div class="mobeilVant">
            <div class="mobeilTop">
                <div class="topLeft">
                    <!-- <van-icon name="star" size="20" /> -->
                    <img :src="logoImg" alt="">
                    <span>全业务域考评系统</span>
                </div>
                <div class="topRight">
                    <span>系统导航</span>
                    <!-- <van-icon name="wap-nav"  size="23" /> -->
                    <img :src="daohangImg" alt="" @click="chooseMenu">
                </div>
            </div>
            <div class="reportConpanyMain">
                <p>{{rowevalradio.evaluateReportName}}</p>
                <div class="mainModel">
                    <el-table :data="reportTableData.body" ref="report-table" style="width: 100%">
                        <el-table-column :label="rowevalradio.des" align="center">
                            <el-table-column label="序号" type="index" width="50" align="center" />
                            <el-table-column :label="item.nameZh" :prop="item.nameEh"
                             v-for="item in reportTableData.title" :key="item"
                             :width="item.nameZh === '考评组织名称' || item.nameZh === '生产经营得分' || item.nameZh === '备注' ? '130': ''" />
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import logoImg from '../assets/mobeilImg/logo.png'
import daohangImg from '../assets/mobeilImg/daohang.png'
import dateImg from '../assets/mobeilImg/date.png'
import sortImg from '../assets/mobeilImg/sort.png'
import seachImg from '../assets/mobeilImg/seach.png'

import {apiGetEvalReportinfoList} from '../api/api'
export default {
    data() {
        return {
            logoImg: logoImg,
            daohangImg: daohangImg,
            dateImg: dateImg,
            sortImg: sortImg,
            seachImg: seachImg,
            currentDate: [],
            binSection: '',
            binSectionName: '',
            reportTableData: [],
            rowevalradio: {}
        }
    },
    created() {
        if (this.$route) {
            if (this.$route.query.row) {
                this.rowevalradio = JSON.parse(this.$route.query.row)
                this.getreportTableData(this.rowevalradio.id)
            }
        }
    },
    methods: {
        // 查询规则详情数据
        getreportTableData(id) {
            let that = this
            let params = {
                evaluateReportId: id
            }
            apiGetEvalReportinfoList(params).then(datas =>{
                if (datas && datas.data) {
                    that.reportTableData = datas.data
                }
            })
        },
        chooseMenu() {
            this.$router.push({ path: "/menu"})
        },
        onClickLeft() {
            // this.$router.push({ path: "/report"})
            this.$router.go(-1)
        },
    }
}
</script>

<style lang="less">
.reportConpanyDetail {
    background-color: #184FB4;
    .van-nav-bar{
        width: 100%;
        background-color: #184FB4;
        color: #fff;
        position: fixed;
        top: 0;        
        z-index: 111111;
        .van-nav-bar__content{
            .van-nav-bar__left{
                .van-nav-bar__text{
                    color: #fff;
                }
            }
        }
    }
    .mobeilVant{
        height: 100%;
        margin-top: 45px;
        border-radius: 10px 10px 0 0;
        background-color: #fff;
        .mobeilTop{
            height: 60px;
            display: flex;
            justify-content: space-around;
            .topLeft{
                display: flex;
                img{
                    width: 24px;
                    height: 28px;
                    position: relative;
                    top: 18px;
                    left: -10px;
                }
                span{
                    font-family: MicrosoftYaHei;
                    font-weight: 600;
                    font-size: 16px;
                    color: #444950;
                    line-height: 60px;
                }
            }
            .topRight{
                display: flex;
                img{
                    width: 22px;
                    height: 18px;
                    position: relative;
                    top: 21px;
                    left: 5px;
                }
                span{
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #545960;
                    line-height: 60px;
                    margin-right: 5px;
                }
            }
        }
        .reportConpanyMain{
            // height: 50px;
            background-color: #ededf5;
            padding: 17px 20px;
            width: calc(100% - 40px);
            p{
                text-align: center;
                font-weight: 600;
                margin-bottom: 20px;
            }
            .mainModel{
                background: #fff;
                border-radius: 5px;
                padding: 5px 0;
                .yearFromHeader{
                    width: 100%;
                    border-bottom: 1px solid #E1E3EA;
                    .headerNameTit{
                        display: flex;
                        justify-content: space-between;
                        padding: 8px 20px;
                        font-size: 14px;
                        color: #414141;
                    }
                    .headerTit{
                        position: relative;
                        top: 10px;
                        left: 150px;
                    }
                }
                .yearFromMsg{
                    display: flex;
                    width: 100%;
                    height: 35px;
                    background: #F6F7FA;
                    margin: 5px 8px;
                    padding: 2px 10px 0;
                    border-radius: 5px;
                    .msgProgress{
                        margin-top: 5px;
                        display: flex;
                        width: 100%;
                        img{
                            width: 20px;
                            height: 20px;
                            position: relative;
                            left: 5px;
                            margin-right: 30px;
                        }
                        span{
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                        }
                        span:nth-child(1){
                            display: inline-block;
                            width: 14%;
                            font-weight: 600;
                            color: #666;
                            margin-left: 10px;
                        }
                        span:nth-child(2){
                            display: inline-block;
                            width: 61%;
                            font-weight: 400;
                            color: #666;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        span:nth-child(3){
                            width: 15%;
                            font-weight: 600;
                            color: #F65177;
                        }
                        span:nth-child(4){
                            width: 10%;
                            font-weight: 600;
                            color: #666;
                        }
                    }
                }
                .el-table{
                    .el-table__header-wrapper{
                        .el-table__header{
                            tr{
                                .cell{
                                    line-height: 18px !important;
                                }
                            }
                        }
                    }
                    .el-table__body-wrapper{
                        .el-table__body{
                            tr{
                                .cell{
                                    img{
                                        width: 20px;
                                        height: 20px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>