<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="1"></el-option>
                        <el-option label="停用" value="2"></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="newnuedialog" size="small">新增</el-button>
            </div>

            <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle" stripe row-key="id"
                default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <!-- Table Columns -->
                <el-table-column fixed prop="name" align="center" label="单位名称">
                </el-table-column>
                <el-table-column prop="" align="center" label="单位ID">
                </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">10</el-button>
                        <span v-else>/</span>
                    </template>
                </el-table-column>

                <el-table-column prop="" align="center" label="状态" width="100">
                </el-table-column>
                <el-table-column prop="" align="center" label="转换时间">
                </el-table-column>
                <el-table-column prop="transition" align="center" fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="compile(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="newcomer(scope.row)" type="text" size="small">新增</el-button>
                        <el-button v-if="scope.row.transition == 1" @click="start(scope.row)" type="text"
                            size="small">启用</el-button>
                        <el-button v-else style="color: #666;" @click="stop(scope.row)" type="text"
                            size="small">停用</el-button>
                        <el-button style="color: #f00;" @click="deleted(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="title" :visible.sync="nuedialog" width="380px">
            <el-form ref="newform" :rules="rules" :model="newform" label-width="90px">
                <el-form-item label="单位名称:" prop="unit">
                    <el-input v-model="newform.unit" size="small"></el-input>
                </el-form-item>
                <el-form-item label="所属省:" prop="province">
                    <el-select v-model="newform.province" placeholder="请选择" size="small">
                        <el-option label="区域一" value="shanghai"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属市:" prop="city">
                    <el-select v-model="newform.city" 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" type="textarea"></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="1000px">
            <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle" stripe>
                <!-- Table Columns -->
                <el-table-column fixed prop="name" align="center" label="风场名称">
                </el-table-column>
                <el-table-column 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="80">
                </el-table-column>
                <el-table-column prop="" align="center" label="经度" width="80">
                </el-table-column>
                <el-table-column prop="" align="center" label="纬度" width="80">
                </el-table-column>
                <el-table-column prop="" align="center" label="额定容量">
                </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>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            rules: {
                unit: [
                    { required: true, message: '请填写单位名称', trigger: 'blur' }
                ],
                province: [
                    { required: true, message: '请选择省', trigger: 'change' }
                ],
                city: [
                    { required: true, message: '请选择省', trigger: 'change' }
                ],
            },
            formInline: {
                user: '',
                region: ''
            },
            tableData: [{
                id: 1,
                name: '王小虎',
                transition: "1"
            }, {
                id: 3,
                name: '王小虎',
                abnormal: "1",
                transition: "0",
                children: [{
                    id: 31,

                    name: '王小虎',

                    abnormal: "1",
                }]
            },],
            nuedialog: false,
            unusualdialog: false,
            newform: {
                unit: "",
                province: "",
                city: "",
                descr: "",
            },
            title: "新增",
            warningShown: false

        }
    },
    methods: {
        rowStyle() {
            return "text-align:center";
        },

        // 查询
        onSubmit() {
            console.log('submit!');
        },
        // 重置
        reset() {
            this.formInline.user = ""
            this.formInline.region = ""

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

        },

        //异常详情
        particulars(row) {
            this.unusualdialog = true;
        },
        // 编辑
        compile(row) {
            this.nuedialog = true
            this.title = "编辑"
        },
        // 新增子级
        newcomer(row) {
            this.nuedialog = true
            this.title = "新增"
        },
        // 启用
        start(row) {

        },
        // 停用
        stop(row) {

        },
        // 删除
        deleted(row) {
            if (row.transition === "0") {
                if (!this.warningShown) {
                    this.$message({
                        type: 'error',
                        message: '该项处于停用状态，无法删除！'
                    });
                    this.warningShown = true; // 设置警告消息已经显示过了的标志位为true
                }
                return;
            }

            this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行删除操作
                this.$message({
                    type: 'success',
                    message: '删除成功！'
                });
            }).catch(() => {
                // 取消删除
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        newnuedialog() {
            this.nuedialog = true
            this.title = "新增"

        }
    }

}
</script>

<style lang="scss" scoped>
.el-select {
    width: 250px;
}
</style>