<template>
    <div class="box">
        <div class="searchBar">
            <el-card class="box-card">
                <!-- <div slot="header" class="clearfix" style="font-size:15px">
                    <span>查询条件</span>
                </div> -->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="1">
                <el-form-item label="查询条件">
                </el-form-item>
                <el-form-item label="类型">
                <el-select v-model="value"  placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.label"
                    :value="item.value">
                </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="风场">
                <el-select v-model="value2"  
                @change="queryApData()" placeholder="请选择">
                <el-option
                    v-for="item in options2"
                    :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="timedate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                >
                </el-date-picker>
                </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="toExcel()">导出</el-button>
                </el-form-item>
            </el-row>
            </el-form>
            </el-card>
            <el-table
            id="loadratetable"
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center'}" 
            :header-cell-style="headStyle"
            @sort-change="changeTableSort"
            style="width:100%;margin-top:1%">
            <el-table-column label="负荷率排行榜">
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windfarm"
              label="风场"
               >
            </el-table-column>
            <el-table-column
              prop="windturbine"
              label="风机"
              >
            </el-table-column>
            <el-table-column
            :formatter="formatDatebeginDate"
              label="起始日期"
               >
            </el-table-column>
            <el-table-column
            :formatter="formatDateendDate"
              label="截至日期"
               >
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="speed"
              label="平均风速"
               >
            <template slot-scope="scope">
              <span>{{scope.row.speed | rounding}}</span>
            </template>
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="power"
              label="平均功率"
               >
            <template slot-scope="scope">
              <span>{{scope.row.power | rounding}}</span>
            </template>
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="generatingCapacity"
              label="平均效率"
               >
            </el-table-column>
            </el-table-column>        
       </el-table>
        </div>
    </div>
</template>
<script>
    import rankingLoadRate from "@assets/js/performanceAnalysis/rankingLoadRate";
    export default rankingLoadRate;
</script>
<style lang="scss" scoped>
    @import "@assets/css/performanceAnalysis/rankingLoadRate.scss";
</style>