<template>
    <div class="box">
        <div class="searchBar">
            <el-card class="box-card">
                <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="请选择" @change="projectData">
                <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"  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>
                <el-button type="primary" @click="queryApData" :plain="true"
                    >查询</el-button
                >
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="dialogFormVisible = true" :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
            class="table_sty"
            id="callthepolicetable"
            :data="gridData"
            :row-style="{ height: '10px' }" 
            :cell-style="{ textAlign: 'center'}" 
            :header-cell-style="headStyle"
            @row-click="tableDatawindturbineName"
            @sort-change="changeTableSort"
            style="width:100%;margin-top:1%;cursor: pointer;">
            <el-table-column label="计划发电量列表">
            <el-table-column
              type="index"
              width="40">
            </el-table-column>
            <el-table-column
              prop="projectName"
              label="名称"
            >
            </el-table-column>
            <el-table-column
              prop="year"
              label="年">
            </el-table-column>
            <el-table-column
              prop="gc01"
              label="1月">
            </el-table-column>
            <el-table-column
              prop="gc02"
              label="2月">
            </el-table-column>
            <el-table-column
              prop="gc03"
              label="3月">
            </el-table-column>
            <el-table-column
              prop="gc04"
              label="4月">
            </el-table-column>
            <el-table-column
              prop="gc05"
              label="5月">
            </el-table-column>
            <el-table-column
              prop="gc06"
              label="6月">
            </el-table-column>
            <el-table-column
              prop="gc07"
              label="7月">
            </el-table-column>
            <el-table-column
              prop="gc08"
              label="8月">
            </el-table-column>
            <el-table-column
              prop="gc09"
              label="9月">
            </el-table-column>
            <el-table-column
              prop="gc10"
              label="10月">
            </el-table-column>
            <el-table-column
              prop="gc11"
              label="11月">
            </el-table-column>
            <el-table-column
              prop="gc12"
              label="12月">
            </el-table-column>
            <el-table-column
              prop="generatingcapacity"
              label="合计">
            </el-table-column>
            </el-table-column>        
       </el-table>
       <el-dialog title="新增信息" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
            <el-form :model="form">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:3.5%">
                <el-form-item label="风场：" >
                    <el-select v-model="value3"  placeholder="请选择" @change="projectData2">
                    <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="value4"  placeholder="请选择">
                    <el-option
                        v-for="item in options3"
                        :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="timeyear"
                        type="year"
                        placeholder="选择年"
                        >
                        </el-date-picker>
                </el-form-item>
                </el-form>
                <el-form-item label="1月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc01" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="2月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc02" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="3月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc03" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="4月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc04" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="5月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc05" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="6月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc06" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="7月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc07" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="8月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc08" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="9月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc09" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="10月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc10" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="11月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc11" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="12月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.gc12" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="全年计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form.generatingcapacity" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSaveData()">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改信息" :visible.sync="dialogFormVisible2">
            <el-form :model="form2">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:3.5%">
                <el-form-item label="风场：" >
                    {{fc}}
                </el-form-item>
                <el-form-item label="项目：" >
                    {{xm}}
                </el-form-item>
                 <el-form-item label="年份：" >
                    {{nf}}
                </el-form-item>
                </el-form>
                <el-form-item label="1月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc01" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="2月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc02" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="3月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc03" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="4月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc04" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="5月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc05" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="6月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc06" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="7月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc07" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="8月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc08" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="9月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc09" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="10月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc10" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="11月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc11" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="12月份计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.gc12" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="全年计划发电量(万kWh)" :label-width="formLabelWidth">
                    <el-input v-model="form2.generatingcapacity" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="saveData()">保存</el-button>
            </div>
        </el-dialog>
       </div>
    </div>
</template>
<script>
    import plannedGeneration from "@assets/js/performanceAnalysis/plannedGeneration";
    export default plannedGeneration;
</script>
<style lang="scss" scoped>
    @import "@assets/css/performanceAnalysis/plannedGeneration.scss";
</style>