<template>
    <div class="box">
        <div class="searchBar">
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                <el-tab-pane label="总功率情况" name="first" :key="'first'">
                    <el-card class="box-card">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
                <el-row :gutter="1">
                    <el-form-item label="查询条件:">
                    </el-form-item>
                    <el-form-item label="风电电场：">
                    <el-select v-model="value"  
                    @change="queryApData()" 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-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>
                    <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-tab-pane>
            <el-tab-pane label="月功率情况" name="second" :key="'second'">
                <el-card class="box-card">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
                <el-row :gutter="1">
                    <el-form-item label="查询条件:">
                    </el-form-item>
                    <el-form-item label="风场">
                    <el-select v-model="value"  
                    @change="queryApData()" 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-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
                        value-format="yyyy"
                        v-model="timeyear"
                        type="year"
                        placeholder="选择年"
                        format="yyyy"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="月份：">
                        <el-date-picker
                        value-format="yyyy-MM"
                        v-model="month"
                        type="month"
                        placeholder="选择月"
                        format="yyyy-MM"
                        >
                        </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-tab-pane>
            <el-tab-pane label="日功率情况" name="cord" :key="'cord'">
                <el-card class="box-card">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
                <el-row :gutter="1">
                    <el-form-item label="查询条件:">
                    </el-form-item>
                    <el-form-item label="风场">
                    <el-select v-model="value"  
                    @change="queryApData()" 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-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
                        value-format="yyyy-MM-dd"
                        v-model="time"
                        type="date"
                        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-tab-pane>
        </el-tabs>
        <el-table v-if="switchtableall"
            id="singlemachinepower"
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center' }" 
            :header-cell-style="headStyle"
            @sort-change="changeTableSort"
            style="width:100%;margin-top:0.5%">
            <el-table-column :label=title>
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机"
               width="460">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="speed"
              label="风速"
              width="460">
            </el-table-column>
            <el-table-column
              prop="actualpower"   
              label="实际拟合功率"
              width="460">
            </el-table-column>
            <el-table-column
              prop="optimalpower"
              label="最优拟合功率"
              width="460">
            </el-table-column>
            </el-table-column>        
       </el-table>
       <el-table v-if="switchtableday"
            id="singlemachinepower"
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center' }" 
            :header-cell-style="headStyle"
            @sort-change="changeTableSort"
            style="width:100%;margin-top:0.5%">
            <el-table-column :label=title>
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机"
               width="370">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="speed"
              label="风速"
              width="370">
            </el-table-column>
            <el-table-column
              prop="actualpower"   
              label="实际拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
              prop="optimalpower"
              label="最优拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作"
                    width="370">
                    <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-table v-if="switchtablemonth"
            id="singlemachinepower" 
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center' }" 
            :header-cell-style="headStyle"
            @sort-change="changeTableSort"
            style="width:100%;margin-top:0.5%">
            <el-table-column :label=title>
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="windturbineid"
              label="风机"
               width="370">
            </el-table-column>
            <el-table-column
            :sortable="'custom'"
              prop="speed"
              label="风速"
              width="370">
            </el-table-column>
            <el-table-column
              prop="actualpower"   
              label="实际拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
              prop="optimalpower"
              label="最优拟合功率"
              width="370">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作"
                    width="370">
                    <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>
       <div style="text-align: center;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
				:page-sizes="[10, 50, 100, 1000]"
				:page-size="pagesize" layout="total,sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
        <div id="leiDaTu" class="echart"></div>
        </div>
    </div>
</template>
<script>
    import singleMachinePower from "@assets/js/performanceAnalysis/singleMachinePower";
    export default singleMachinePower;
</script>
<style lang="scss" scoped>
    @import "@assets/css/performanceAnalysis/singleMachinePower.scss";
</style>