<template>
    <div class="benchmarkingIndicator">
        <div class="benchmarkingIndicatorBtn">
            <div class="collectSeach" :style="$utils.collectSeachSty()">
                <div style="display: flex;width:70%">
                    <div class="exceed">
                        <span class="exceedSpan" style="margin-left: 10px;width: 50px">阶段：</span>
                        <el-select v-model="stageIds" placeholder="请选择业务阶段">
                            <el-option
                            v-for="item in stageData"
                            :key="item.id"
                            :label="item.stageName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="exceed">
                        <span class="exceedSpan" style="margin-left: 10px;width: 50px">指标：</span>
                        <el-select v-model="indicatorIds" placeholder="请选择指标类型">
                            <el-option
                            v-for="item in indicatorTypeData"
                            :key="item.id"
                            :label="item.typeName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="exceed">
                        <span class="exceedSpan" style="margin-left: 10px;width: 50px">类型：</span>
                        <el-select v-model="timeStr" placeholder="请选择时间类型">
                            <el-option
                            v-for="item in timerData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="exceed">
                        <span class="exceedSpan" style="margin-left: 10px;width: 50px">时间：</span>
                        <el-date-picker
                            v-model="timeIds"
                            type="month"
                            value-format="YYYY-MM"
                            placeholder="选择时间"
                        />
                    </div>
                </div>
                <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
                <el-button type="info" icon="Download" size="mini" @click="handleExport" style="margin-left:30px">导出</el-button>
            </div>
            <!-- <div class="PeriodBtn">
                <btns 
                    :showImport="false" :showExport="true" 
                    :showAdd="false"
                    :showSave="false"
                    :showDelete="false"
                    :disSave="true"
                    :disDelete="true" :disImport="true" :disExport="true"
                    @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete"
                    @handleImport="handleImport" @handleExport="handleExport"></btns>
            </div> -->
            <div class="benchmarkingIndicatorTableData">
                <div class="tableMain">
                    <el-table :data="benchmarkingIndicatorData" style="width: 100%" ref="benchmark" :border="true" >
                        <el-table-column type="index" label="排名" align="center"></el-table-column>
                        <el-table-column label="考评单位" prop="organization_name" width="200" sortable>
                            <template #default="scope">
                                <el-tooltip class="box-item" effect="customized" :content="scope.row.organization_name"
                                    placement="right">
                                    <span class="tooltipCC">{{scope.row.organization_name}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="综合得分" prop="score_total" sortable />
                        <el-table-column  v-for="(it, index) in benchmarkingIndicatorHeader" :key="index" :label="it.name" align="center">
                            <el-table-column sortable :sort-method="(a,b)=>sortMethods(a,b,iv.code)"
                             v-for="(iv, index) in it.children" :key="index" :label="iv.key" align="center">
                                <template #default="scope">
                                    <span
                                    style="font-weight: bold"
                                     :style="scope.row[iv.code+'_flag'] === '1'?'color:#3B7AD1': scope.row[iv.code+'_flag'] === '-1'?'color:#F65177':'color:#666666'">{{scope.row[iv.code]}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="tableSeach">
                    <div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
                     :class="item.showClick? 'seachTypeCha':''" @click="changType(item)">
                        <img :src="item.img" alt="" v-if="!item.showClick">
                        <img :src="item.clickImg" alt="" v-else>
                        <p :style="item.showClick? 'color: #3B7AD1' : ''">{{item.isName}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import btns from '../elbuttonS.vue'
import seachs from '../seachGroup.vue'

import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import  * as XLSXD from 'xlsx-js-style'

import huoDef from '../../assets/benchmarkImg/huoDef.png'
import shuiDef from '../../assets/benchmarkImg/shuiDef.png'
import xinDef from '../../assets/benchmarkImg/xinDef.png'
import meiDef from '../../assets/benchmarkImg/meiDef.png'
import guoDef from '../../assets/benchmarkImg/guoDef.png'
import zongDef from '../../assets/benchmarkImg/zongDef.png'

import huoCha from '../../assets/benchmarkImg/huoCha.png'
import shuiCha from '../../assets/benchmarkImg/shuiCha.png'
import xinCha from '../../assets/benchmarkImg/xinCha.png'
import meiCha from '../../assets/benchmarkImg/meiCha.png'
import guoCha from '../../assets/benchmarkImg/guoCha.png'
import zongCha from '../../assets/benchmarkImg/zongCha.png'
import {apiGetscoreCountevaluationList, apiGetbinstageList, apiGetIndicatorTypeList} from '../../api/api'
export default {
    components: {btns, seachs},
    data() {
        return {
            benchmarkingIndicatorData: [],
            benchmarkingIndicatorHeader: [],
            indicatorTypeData: [],
            stageData: [],
            companyDatas: [],
            periodId: '',
            stageIds: '',
            indicatorIds: '',
            timeIds: '',
            timeStr: 'JDKP',
            binSectionStr: 'HD',
            page: {
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            titleMsgArr: [],
            timerData: [],
        }
    },
    created() {
        let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        if (month<10) {
            this.timeIds = (year + '-0' + month).toString()
        } else {
            this.timeIds = (year + '-' + month).toString()
        }
        this.timerData = [
            {
                label: '年度',
                value: 'NDKP'
            },
            {
                label: '季度',
                value: 'JDKP'
            },
            {
                label: '月度',
                value: 'YDKP'
            }
        ]
        this.titleMsgArr = [
            {
                isClass: 'huoDef',
                isClassC: 'huoCha',
                isName: '火电',
                isNameEn: 'HD',
                img: huoDef,
                clickImg: huoCha,
                showClick: true
            },
            {
                isClass: 'shuiDef',
                isClassC: 'shuiCha',
                isName: '水电',
                isNameEn: 'SD',
                img: shuiDef,
                clickImg: shuiCha,
                showClick: false
            },
            {
                isClass: 'xinDef',
                isClassC: 'xinCha',
                isName: '新能源',
                isNameEn: 'XNYFG',
                img: xinDef,
                clickImg: xinCha,
                showClick: false
            },
            {
                isClass: 'meiDef',
                isClassC: 'meiCha',
                isName: '煤电一体化',
                isNameEn: 'MDYTH',
                img: meiDef,
                clickImg: meiCha,
                showClick: false
            },
            {
                isClass: 'guoDef',
                isClassC: 'guoCha',
                isName: '国际业务',
                isNameEn: 'GJYW',
                img: guoDef,
                clickImg: guoCha,
                showClick: false
            },
            {
                isClass: 'zongDef',
                isClassC: 'zongCha',
                isName: '综合支持',
                isNameEn: 'ZHZC',
                img: zongDef,
                clickImg: zongCha,
                showClick: false
            }
        ]
        this.getBinstageAndType()
    },
    methods: {
        // 查询考评对标分析数据
        getEvalBenchmarkingIndicData() {
            let that = this
            let binSectionFin = ''
            if (that.binSectionStr === 'XNYFG') {
                if (that.timeStr === 'YDKP' || that.timeStr === 'JDKP') {
                    binSectionFin = 'FD'
                } else {
                    binSectionFin = 'XNYFG'
                }
            } else {
                binSectionFin = that.binSectionStr
            }
            let params = {
                condition: that.timeStr,
                date: that.timeIds,
                type: that.indicatorIds,
                binSection: binSectionFin,
                binStage: that.stageIds
            }
            apiGetscoreCountevaluationList(params).then(datas => {
                if (datas && datas.data) {
                    that.benchmarkingIndicatorData = []
                    if (datas.data.title) {
                        let header = []
                        for(let i in datas.data.title) {
                            let obj = {
                                name: i,
                                children: datas.data.title[i]
                            }
                            header.push(obj)
                        }
                        that.benchmarkingIndicatorHeader = header
                    }
                    if (datas.data.value.length>0) {
                        let arr = datas.data.value
                        for(let i =0; i<arr.length-1; i++) {
                            for(let j =0; j<arr.length-1-i; j++) {
                                if (arr[j] > arr[j+1]) {
                                    const temp = arr[j]
                                    arr[j] = arr[j+1]
                                    arr[j+1] = temp
                                }
                            }
                        }
                        that.benchmarkingIndicatorData = arr
                        console.log('arr', arr)
                    }
                }
            })
        },
        sortMethods(a, b, it) {
            if (a[it] < b[it]) {
                return -1
            }
        },
        // 获取阶段数据及指标类型数据
        getBinstageAndType() {
            let that = this
            apiGetbinstageList().then(datas =>{
                if (datas && datas.data) {
                    that.stageData = datas.data
                    datas.data.forEach(it =>{
                        if (it.stageName === '生产经营') {
                            that.stageIds = it.id
                        }
                    })
                }
            })
            apiGetIndicatorTypeList({
                type: 2
            }).then(datas =>{
                if (datas && datas.data) {
                    that.indicatorTypeData = datas.data
                }
            })
            that.getEvalBenchmarkingIndicData()
        },
        changType(data) {
            this.titleMsgArr.forEach(it =>{
                it.showClick = false
                if (it.isName === data.isName) {
                    it.showClick = true
                    this.binSectionStr = it.isNameEn
                }
            })
            this.getEvalBenchmarkingIndicData()
        },
        getSeachData() {
            this.page.currentPage = 1
            this.getEvalBenchmarkingIndicData()
        },
        resetSeach() {
            this.page.currentPage = 1
            this.indicatorIds = ''
            this.stageIds = ''
            this.getEvalBenchmarkingIndicData()
        },
        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'}),
                    `考评对标分析数据导出.xlsx`,
                )
            } catch (e) {
                if (typeof console !== 'undefined') console.error(e)
            }
        },
    }
}
</script>

<style lang="less">
    .benchmarkingIndicator {
        .benchmarkingIndicatorBtn {
            .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-date-editor{
                        width: 68%;
                    }
                    .el-select{
                        width: 70%;
                    }

                    .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: flex-end;
                padding: 20px 0;
            }

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

                // padding-top: 8px;
                span {
                    margin: 0;
                }
            }

            .indexdialog {
                .el-overlay {
                    .el-dialog {
                        .el-dialog__body {
                            padding: 30px 60px 30px 20px !important;

                            .periodFrom {

                                .el-select,
                                .el-input {
                                    width: 100%;
                                }

                                .el-input {
                                    height: 30px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .benchmarkingIndicatorTableData {
            display: flex;
            width: 100%;
            margin-top: 20px;
            .tableMain{
                width: calc(100% - 100px);
                .el-table {
                    .el-table__header-wrapper{
                        .el-table__header{
                            .el-table__cell {
                                border-bottom: none !important;
                            }
                            thead{
                                tr{
                                    th{
                                        .cell{
                                            line-height: 16px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .el-table__body-wrapper {
                        height: 68vh !important;
                        .el-scrollbar{
                            .is-horizontal{
                                .el-scrollbar__thumb{
                                    width: 100% !important;
                                }
                            }
                            .el-table__body{
                                tr{
                                    td{
                                        padding: 0;
                                        .cell{
                                            background: #F6F7FA;
                                            line-height: 47px;
                                            height: 47px;
                                        }
                                    }
                                    td:hover {
                                        line-height: 45px;
                                        height: 45px;
                                    }
                                }
                            }
                        }
                    }
                    .el-table--border .el-table__cell{
                        border: none;
                    }
                    .el-table thead.is-group th.el-table__cell{
                        background: transparent;
                    }
    
                    .tooltipCC {
                        width: 180px;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .el-pagination {
                    margin-top: 20px;
                    text-align: end;
                    position: relative;
                }
            }
            .tableSeach{
                width: 81px;
                height: 100%;
                margin-left: 10px;
                border: 1px solid #D6DBEA;
                padding: 5px 0;
                border-radius: 5px;
                .seachType{
                    width: 78px;
                    height: 78px;
                    cursor: pointer;
                    border-left: 3px solid transparent;
                    img{
                        margin-top: 17px;
                        margin-left: 27px;
                    }
                    p{
                        text-align: center;
                        font-size: 14px;
                    }
                }
                .seachTypeCha{
                    background: #E6EBF5;
                    cursor: pointer;
                    border-left: 3px solid #3B7AD1;
                }
            }
        }

    }
</style>