<template>
    <div class="box">
        <div class="searchBar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="1">
                <el-form-item label="风场">
                <el-select v-model="value"  placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id">
                </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="年份">
                    <el-date-picker
                        v-model="value2"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="月份">
                    <el-date-picker
                        v-model="value3"
                        type="month"
                        placeholder="选择月"
                        value-format="MM"
                        >
                    </el-date-picker>
                </el-form-item>

                 <el-form-item label="值际周期">
                <el-select v-model="value4"  placeholder="请选择">
                <el-option
                    v-for="item in options2"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
                </el-select>
                </el-form-item>

                <el-form-item>
                <el-button type="primary" @click="queryApData" :plain="true"
                    >添加</el-button
                >
                </el-form-item>

                <el-form-item >
                <el-button type="primary" @click="queryApDataMx"
                    >风场对标</el-button
                >
                </el-form-item>

                <el-form-item>
                <el-button type="primary" @click="clearAll">清空</el-button>
                </el-form-item>
            </el-row>
            </el-form>
            <el-table
            :data="tableData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center'}" 
            :header-cell-style="headStyle"
            @selection-change="handleSelectionChange"
            @sort-change="changeTableSort"
            style="width:100%">
                <!-- <el-table-column label="值际对标列表"> -->
                <el-table-column
                    type="index"
                    width="30">
                </el-table-column>
                <el-table-column
                    type="selection"
                    width=45>
                </el-table-column>
                <el-table-column
                    prop="wpName"
                    label="风电场名称"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="ordernum"
                    label="综合排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="scadafdlnum"
                    label="发电量排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="scadafdl"
                    label="发电量"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="gzssnum"
                    label="故障损失电量排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="gzss"
                    label="故障损失电量"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="jxsslnum"
                    label="检修损失电量排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="jxssl"
                    label="检修损失电量"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="xnsslnum"
                    label="性能损失电量排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="xnssl"
                    label="性能损失电量"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="xdssnum"
                    label="限电损失电量排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="xdss"
                    label="限电损失电量"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="slssnum"
                    label="受累损失电量排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="slss"
                    label="受累损失电量"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="fnlyl"
                    label="风能利用率(%)"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="gzsslnum"
                    label="故障损失率排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="gzssl"
                    label="故障损失率(%)"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="jxsslnum"
                    label="检修损失率排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="jxssl"
                    label="检修损失率(%)"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="qflnum"
                    label="弃风率排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="qfl"
                    label="弃风率(%)"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="xnsslnum"
                    label="性能损失率排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="xnssl"
                    label="性能损失率(%)"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="slsslnum"
                    label="受累损失率排名"
                    width="200">
                </el-table-column>
                <el-table-column
                :sortable="'custom'"
                    prop="slssl"
                    label="受累损失率(%)"
                    width="200">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
                <!-- </el-table-column> -->
            </el-table>
            	<el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
							<div class="margin">
								<div class="dialogLeftData">
									<div id="leiDaTu" class="echart"></div>
                                    <div id="leiDaTu2" class="echart"></div>
								</div>
								<div class="dialogRightData">
									<el-table :data="getTableData" height="618"
									:row-style="{ height: '10px' }"
									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }" 
									 style="width: 100%;font-size: 10px;">
											<el-table-column prop="index" label="指标">
											</el-table-column>
											<el-table-column prop="data1" :label=fdcName1>
											</el-table-column>
											<el-table-column prop="data2" :label=fdcName2>
											</el-table-column>
									</el-table>
								</div>
							</div>
				</el-dialog>
        </div>
    </div>    
</template>
<script>
import interValue from "@assets/js/lossBenchmarking/interValue";
export default interValue;
</script>
<style lang="scss" scoped>
    @import "@assets/css/lossBenchmarking/interValue.scss";
</style>