<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="选择日期:" size="small">
                    <el-date-picker v-model="formInline.timeQuantum" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" >
                    </el-date-picker>
                </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 @click="upfile" size="small">导入</el-button>
                <el-button type="primary" @click="newnuedialog" size="small">新增</el-button>
            </div>

            <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle">
                <el-table-column align="center" fixed prop="" label="风机编号">
                    <template slot-scope="scope">
                        <el-button @click="particulars(scope.row)" type="text" size="small">泗洪风场</el-button>
                    </template>
                </el-table-column>

                <el-table-column 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="" align="center" label="经纬度" width="100">
                </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="" align="center" label="是否标杆" width="100">
                </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 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="导入文件" :visible.sync="tolead" width="400px">
            <div class="UPcondition">
                <p>所属风场:</p>
                <el-select v-model="superior" placeholder="请选择">
                    <el-option v-for="item in superiorOptions" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-upload class="upload-demo" :file-list="fileList" drag
                action="https://jsonplaceholder.typicode.com/posts/" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                </div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tolead = false" size="small">取 消</el-button>
                <el-button type="primary" @click="UPsubmit" size="small">提交</el-button>
            </span>
        </el-dialog>
        <!-- 新增 -->
        <el-dialog :title="title" :visible.sync="nuedialog" width="800px">
            <div class="general">
                <div class="condition">
                    <p>关联风场:</p>
                    <el-select v-model="superior" placeholder="请选择">
                        <el-option v-for="item in superiorOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="condition">
                    <p>风机编号:</p>
                    <el-input v-model="windsiteName"></el-input>
                </div>
                <div class="condition">
                    <p>风机名称:</p>
                    <el-input v-model="airdensity"></el-input>
                </div>


                <div class="condition">
                    <p>机型编号:</p>
                    <el-input v-model="altitude"></el-input>
                </div>
                <div class="condition">
                    <p>额定容量:</p>
                    <el-input v-model="altitude"></el-input>
                </div>



                <div class="condition">
                    <p>海拔高度:</p>
                    <el-input v-model="longitude"></el-input>
                </div>


                <div class="condition">
                    <p>经度:</p>
                    <el-input v-model="dimensionality"></el-input>
                </div>
                <div class="condition">
                    <p>纬度:</p>
                    <el-input v-model="dimensionality"></el-input>
                </div>
                <div class="condition">
                    <p>轮廓高度:</p>
                    <el-input v-model="dimensionality"></el-input>
                </div>

                <div class="condition">
                    <p>是否标杆:</p>
                    <el-select v-model="anemometer" placeholder="请选择">
                        <el-option v-for="item in anemometerOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <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">
            <div class="general">
                <div class="condition">
                    <p>关联风场:</p>
                </div>
                <div class="condition">
                    <p>风机编号:</p>
                </div>

                <div class="condition">
                    <p>风机名称:</p>
                </div>
                <div class="condition">
                    <p>机型编号:</p>
                </div>
                <div class="condition">
                    <p>额定容量:</p>
                </div>

                <div class="condition">
                    <p>海拔高度:</p>
                </div>
                <div class="condition">
                    <p>经度:</p>
                </div>


                <div class="condition">
                    <p>纬度:</p>
                </div>

                <div class="condition">
                    <p>轮廓高度:</p>
                </div>
                <div class="condition">
                    <p>是否标杆:</p>
                </div>
            </div>

        </el-dialog>






    </div>
</template>

<script>
export default {
    data() {
        return {
            // 新增信息
            windsiteName: "",
            airdensity: "",
            superior: "",
            superiorOptions: [],
            altitude: "",
            sheng: "",
            shengOptions: [],
            shi: "",
            shiOptions: [],
            longitude: "",
            dimensionality: "",
            anemometer: "",
            anemometerOptions: [],

            fileList: [
                {
                    name: "food.jpeg",
                    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
                },

            ],
            formInline: {
                user: "",
                region: "",
                timeQuantum: "",
            },
            tableData: [
                {
                    id: 1,
                    name: "王小虎",
                    transition: "1",
                },
                {
                    id: 3,
                    name: "王小虎",
                    abnormal: "1",
                    transition: "0",
                    children: [
                        {
                            id: 31,

                            name: "王小虎",

                            abnormal: "1",
                        },
                    ],
                },
            ],
            nuedialog: false,
            unusualdialog: false,
            tolead: false,



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

        // 查询
        onSubmit() {
            console.log("submit!");
        },
        // 重置
        reset() { },
        //导入提交
        UPsubmit() {
            this.tolead = false;
        },
        // 新增
        newly() {
            this.nuedialog = false;
        },

        //异常详情
        particulars(row) {
            this.unusualdialog = true;
        },



        // 编辑
        compile(row) {
            this.nuedialog = true;
            this.title = "编辑";
        },


        // 启用
        start(row) { },
        // 停用
        stop(row) { },
        // 删除
        deleted(row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        // 导入
        upfile() {
            this.tolead = true;
        },
        // 新增
        newnuedialog() {
            this.nuedialog = true;
            this.title = "新增";
        },
    },
};
</script>

<style lang="scss" scoped>
.general {
    display: flex;
    flex-wrap: wrap;

    .condition {
        width: 50%;
        display: flex;

        p {
            width: 100px;
            text-align: right;
            line-height: 40px;
        }

        span {
            line-height: 40px;

            padding-left: 20px;
        }

        .el-select {
            width: 100%;
            margin-bottom: 20px;
        }

        .el-input {
            margin-bottom: 20px;
        }
    }
}

.UPcondition {
    display: flex;

    p {
        width: 74px;
        text-align: right;
        line-height: 40px;
    }

    .el-select {
        width: 100%;
        margin-bottom: 20px;
    }

    .el-input {
        margin-bottom: 20px;
    }
}

.attachment {
    display: flex;
    padding-top: 10px;

    p {
        margin-right: 20px;
        color: #409eff;
    }
}

.model-center {
    color: #666;
    line-height: 40px;
    height: 40px;
    font-size: 14px;
}
</style>