<template>
    <div class="global-variable">
        <div class="condition">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="批次编号:">
                    <el-input v-model="formInline.user" placeholder="请输入批次编号" size="small"></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="formInline.region" placeholder="活动区域" size="small ">
                        <el-option label="区域一" value="shanghai"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
                    <el-button @click="reset" size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="list-page">
            <div class="newly">
                <el-button type="primary" @click="nuedialog = true" size="small">新增</el-button>
            </div>

            <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle" stripe
                style="width: 100%">
                <!-- Table Columns -->
                <el-table-column fixed prop="" align="center" label="批次编号">
                </el-table-column>
                <el-table-column prop="" align="center" label="风场编号">
                </el-table-column>
                <el-table-column prop="" align="center" label="机组数量" width="100">
                </el-table-column>
                <el-table-column prop="" align="center" label="异常状态" width="100">
                </el-table-column>
                <el-table-column prop="abnormal" label="异常信息" width="80">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.abnormal == 1" @click="particulars(scope.row)" type="text"
                            size="small">详情</el-button>
                        <span v-else>/</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" align="center" label="转换时间">
                </el-table-column>
                <el-table-column prop="" align="center" label="状态" width="100">
                </el-table-column>
                <el-table-column prop="" align="center" label="类型" width="100">
                </el-table-column>
                <el-table-column prop="transition" align="center" fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">下载</el-button>
                        <el-button v-if="scope.row.transition == 1" @click="transition(scope.row)" type="text"
                            size="small">转换</el-button>
                        <el-button v-else @click="reconverted(scope.row)" type="text" size="small">重新转换</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination :page-size="10" :pager-count="11" layout="total, prev, pager, next" :total="35">
                </el-pagination>
            </div>
        </div>


        <!-- 弹出层 -->
        <!-- 新增 -->
        <el-dialog title="新增" :visible.sync="nuedialog" width="380px">
            <el-form ref="form" :model="newform" label-width="120px">
                <el-form-item label="批次编号:">
                    <el-select v-model="newform.batch" placeholder="请选择活动区域" size="small">
                        <el-option label="区域一" value="shanghai"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分钟级数据路径:">
                    <el-input v-model="newform.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="秒级数据路径:">
                    <el-input v-model="newform.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="测风塔数据路径:">
                    <el-input v-model="newform.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="事件数据路径:">
                    <el-input v-model="newform.name" size="small"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="nuedialog = false" size="small">取 消</el-button>
                <el-button type="primary" @click="newly" size="small">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 异常信息详情 -->
        <el-dialog title="异常详情" :visible.sync="unusualdialog" width="800px">



        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [{
                abnormal: "1",
                transition: "1"
            }, {
                abnormal: "0",
                transition: "0"
            }, {
                abnormal: "1",
                transition: "1"
            }],
            nuedialog: false,
            unusualdialog: false,
            newform: {
                batch: "",
                name: "",
            },
        }
    },
    methods: {
        rowStyle() {
            return "text-align:center";
        },

        // 查询
        onSubmit() {
            console.log('submit!');
        },
        // 重置
        reset() {

        },
        // 新增
        newly() {
            this.nuedialog = false
        },

        //异常详情
        particulars(row) {
            this.unusualdialog = true;
        },
        // 下载
        handleClick(row) { },
        // 转换
        transition(row) { },
        // 重新转换
        reconverted(row) { },


    }

}
</script>

<style lang="scss" scoped>

</style>