<template>
    <div class="monthQuarterYearReport">
        <el-dialog :title="tableoneLevelName" v-model="dialogVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="collectSeach">
                <div class="exceed">
                    <span class="exceedSpan" style="margin-left: 10px;width: 80px">业务属性：</span>
                    <el-select v-model="binstationStr" placeholder="请选择业务属性">
                        <el-option
                        v-for="item in moduleData"
                        :key="item.id"
                        :label="item.sectionName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <seachs @handleSeach="getSeachData" :showRest="false"></seachs>
                <el-button type="info" icon="Download" size="mini" @click="handleExport" style="margin-left:10px">导出</el-button>
            </div>
            <div class="monthQuarterYearTableData">
                <div class="tableMain">
                    <el-table :data="monthQuarterYearTableData" style="width: 100%" ref="benchmark">
                        <!-- <el-table-column :label="tableoneLevelName" align="center"> -->
                            <el-table-column type="index" label="序号" align="center" fixed></el-table-column>
                            <el-table-column label="单位名称" width="200" fixed>
                                <template #default="scope">
                                    <el-tooltip class="box-item" effect="customized" :content="scope.row.organizationShortName"
                                        placement="right">
                                        <span class="tooltipCC">{{scope.row.organizationShortName}}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column :label="tabletwoLevelName" align="center">
                                <el-table-column  v-for="(it, index) in monthQuarterYearHeader" :key="index" :label="it.name" align="center">
                                    <el-table-column v-for="(iv, index) in it.children" :key="index" :label="iv.name" width="120" align="center">
                                        <template #default="scope">
                                            <span >{{scope.row[iv.key]}}</span>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="综合得分" prop="zhdf" width="100" sortable v-if="isShowZHDF" />
                        <!-- </el-table-column> -->
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import seachs from '../seachGroup.vue'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import  * as XLSXD from 'xlsx-js-style'
import {apiGetorganizationevaluationlist, apiGetbinsectionList} from '../../api/api'
export default {
    components: {
        seachs
    },
    data() {
        return {
            dialogVisible: false,
            binstationStr: '',
            moduleData: [],
            tableoneLevelName: '',
            tabletwoLevelName: '',
            isShowZHDF: false,
            monthQuarterYearTableData: [],
            monthQuarterYearHeader: [],
            rowData: {}
        }
    },
    methods: {
        init(data) {
            this.dialogVisible = true
            this.rowData = data
            this.getBinSectionS(data)
        },
        // 查询业务属性
        getBinSectionS(data) {
            let that = this
            apiGetbinsectionList().then(datas =>{
                if (datas && datas.data) {
                    that.moduleData = datas.data
                    that.binstationStr = datas.data[0].id
                    that.getmonthQuarterYearData(data)
                }
            })
        },
        // 获取得分汇总数据
        getmonthQuarterYearData(row) {
            let that = this
            that.monthQuarterYearTableData = []
            that.monthQuarterYearHeader = []
            let params = {
                id: row.id,
                binSection: that.binstationStr
            }
            apiGetorganizationevaluationlist(params).then(datas =>{
                if (datas && datas.data) {
                    that.isShowZHDF = datas.data.zhdf
                    if (datas.data.title) {
                        let header = []
                        for(let i in datas.data.title) {
                            that.tableoneLevelName = i
                            for(let j in datas.data.title[i]) {
                                that.tabletwoLevelName = j
                                header = datas.data.title[i][j]
                            }
                        }
                        let headerFin = []
                        header.forEach(el => {
                            for(let k in el) {
                                let obj = {
                                    name: k,
                                    children: el[k]
                                }
                                headerFin.push(obj)
                            }
                        });
                        that.monthQuarterYearHeader = headerFin
                    } else {
                        that.tableoneLevelName = '考核打分表'
                    }
                    if (datas.data.values.length>0) {
                        that.monthQuarterYearTableData = datas.data.values
                    }
                }
            })
        },
        getSeachData() {
            this.getmonthQuarterYearData(this.rowData)
        },
        handleExport() {
            let $e = this.$refs.benchmark.$el
            try {
                let $table = $e.querySelector('.el-table__fixed')
                if(!$table) {
                    $table = $e
                }
                const wb = XLSX.utils.table_to_book($table, {raw:true})

                const wbout = XLSXD.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})
                saveAs(
                    new Blob([wbout],{type: 'application/octet-stream'}),
                    `${this.tableoneLevelName}.xlsx`,
                )
            } catch (e) {
                if (typeof console !== 'undefined') console.error(e)
            }
        }
    }
}
</script>

<style lang="less">
.monthQuarterYearReport{
    .el-overlay{
        .el-dialog{
            // margin-top: 7vh;
            .el-dialog__body{
                padding: 0 20px !important;
                .collectSeach {
                    display: flex;
                    padding: 24px 20px;
                    border-bottom: 1px solid#D6DBEA;

                    .exceed {
                        display: flex;

                        .exceedSpan {
                            width: 100px;
                            height: 12px;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #8991B0;
                            line-height: 12px;
                            margin-top: 14px;
                        }

                        .el-input {
                            margin-right: 10px;

                            .el-input__inner {
                                height: 30px;
                            }

                            .el-input__suffix {
                                .el-select__caret {
                                    line-height: 30px;
                                }
                            }
                        }
                        .el-select{
                            line-height: 40px !important;
                            .el-input__inner, .is-disabled{
                                height:40px !important;
                            }
                            .el-input__suffix{
                                .el-select__caret{
                                    line-height:40px;
                                }
                            }
                        }
                        .el-date-editor--month{
                            height: 40px;
                        }
                    }

                    span {
                        font-size: 14px;
                    }

                    .PeriodBtn {
                        display: flex;
                        justify-content: end;
                        padding: 20px 0;
                    }

                    .el-button {
                        height: 30px;
                        // width:100px;
                        padding: 0 30px;

                        // padding-top: 8px;
                        span {
                            margin: 0;
                        }
                    }
                }
                .monthQuarterYearTableData{
                    width: 100%;
                    margin-top: 20px;
                    .tableMain{
                        width: 100%;
                        .el-table {
                            .el-table__body-wrapper {
                                height: 58vh !important;
                            }
            
                            .el-input__inner {
                                height: 30px !important;
                            }
            
                            .el-radio__label {
                                display: none;
                            }
            
                            .tooltipCC {
                                width: 180px;
                                display: inline-block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
            
                            .indicitem {
                                color: #409EFF;
                                font-size: 12px;
                                margin-right: 20px;
                                cursor: pointer;
            
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                        .el-pagination {
                            margin-top: 20px;
                            text-align: end;
                            position: relative;
                        }
                    }
                }
            }
            .el-dialog__footer{
                .dialog-footer{
                    display: flex;
                    justify-content: center;
                    .el-button{
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }
}
</style>