<template>
    <el-dialog width="70%" @open="opened" @closed="closed" :fullscreen="true" :show-close="true" class="dialogs">
        <template #title>
            <div class="showTitles currentShowTitles">
                <div class="titles">设置</div>
            </div>
        </template>
        <div class="body">
            <div class="title">
                <div :class="current === item.id ? 'title-onItem' : 'title-item'" v-for="(item, index) in stationList"
                    :key="index" @click="handleChange(item.id)">
                    {{ item.name }}
                </div>
            </div>
            <div class="content">
                <div class="models">
                    <div class="models-left">
                        <div class="models-name">机型：</div>
                        <el-select class="inputs" v-model="selectValue" placeholder="请选择" @change="getData()">
                            <el-option v-for="item in models" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="returns" @click="handleReturn()">恢复默认设置</div>
                </div>
                <div class="control">
                    <div class="control-item">
                        <div class="control-title">是否推荐启动：</div>
                        <el-switch v-model="settingsControl.start" @change="updateSettings()">
                        </el-switch>
                    </div>
                    <div class="control-item">
                        <div class="control-title">是否推荐停机：</div>
                        <el-switch v-model="settingsControl.stop" @change="updateSettings()">
                        </el-switch>
                    </div>
                    <div class="control-item">
                        <div class="control-title">是否推荐限电停机：</div>
                        <el-switch v-model="settingsControl.limitedPowerStop" @change="updateSettings()">
                        </el-switch>
                    </div>
                    <div class="control-item">
                        <div class="control-title">是否推荐维护：</div>
                        <el-switch v-model="settingsControl.maintain" @change="updateSettings()">
                        </el-switch>
                    </div>
                    <div class="control-item">
                        <div class="control-title">是否推荐取消维护：</div>
                        <el-switch v-model="settingsControl.unMaintain" @change="updateSettings()">
                        </el-switch>
                    </div>
                    <div class="control-item">
                        <div class="control-title">是否推荐复位：</div>
                        <el-switch v-model="settingsControl.reset" @change="updateSettings()">
                        </el-switch>
                    </div>
                </div>
            </div>
            <div class="warningTable" v-if="settingsControl.reset">
                <div class="teble-buttons">
                    <div class="button" @click="toggleRowExpansionAll(true)">全部展开</div>
                    <div class="button" @click="toggleRowExpansionAll(false)">全部收回</div>
                </div>
                <el-table :data="alertInfo" row-key="id" border default-expand-all ref="dataTreeList"
                    :tree-props="{ children: 'children', hasChildren: false }" height="70vh"
                    style="background-color: #000000;border: 1px solid #000000;" :header-cell-style="{
                        background: 'rgb(30,30,30)',
                        color: 'rgb(220,220,220)',
                        padding: '4px',
                        fontSize: '14px',
                        'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                    }" :cell-style="{
    height: '40px',
    background: 'rgb(30,30,30)',
    color: 'rgb(220,220,220)',
    padding: '3px',
    fontSize: '12px',
    'border-bottom': '1px solid #000000',
}">
                    <el-table-column prop="name" label="名称" sortable width="200" align="center">
                    </el-table-column>
                    <!-- <el-table-column prop="stationId" label="风场" sortable>
                    </el-table-column> -->
                    <!-- <el-table-column prop="modelId" label="机型" sortable>
                    </el-table-column> -->
                    <el-table-column prop="lastUpdateTime" label="故障触发时间" align="center">
                    </el-table-column>
                    <!-- <el-table-column prop="rank" label="故障等级" sortable>
                    </el-table-column> -->
                    <el-table-column prop="alertText" label="故障描述" align="center">
                    </el-table-column>
                    <el-table-column label="是否不可复位" width="180" align="center">
                        <template #default="scope">
                            <span>
                                <el-switch @change="handleSwitchChange(scope.row)" v-model="scope.row.notResettable">
                                </el-switch>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>
  
<script>
import api from "api/index";
export default {
    data() {
        return {
            stationList: [],
            current: "",
            models: [],
            selectValue: "",
            settingsControl: {},
            alertInfo: [],
        };
    },
    mounted() { },
    methods: {
        opened() {
            let stationList = [];
            let stations = this.$store.state.stationList;
            stations.forEach((item) => {
                if (item.id.indexOf("FDC") != -1) {
                    stationList.push(item);
                }
            });
            this.stationList = stationList;
            this.current = stationList[0].id;
            this.getStationModels(true)
        },
        handleChange(val) {
            this.current = val;
            this.tableData = []
            this.pagenum = 1
            this.getStationModels()
        },
        getStationModels(flag) {
            api.getStationModels({
                stationid: this.current
            }).then(res => {
                if (res.data) {
                    this.models = res.data
                    this.selectValue = res.data[0]
                    this.getData(flag);
                }
            })
        },
        getData(flag) {
            api.getSettings({
                stationId: this.current,
                modelId: this.selectValue,
            }).then(res => {
                if (res.data) {
                    this.alertInfo = []
                    this.settingsControl = res.data.settings
                    if (flag) {
                        this.alertInfo = res.data.alertInfo
                    } else {
                        console.log(this.alertInfo);
                        setTimeout(() => {
                            this.alertInfo = res.data.alertInfo
                        }, 100);
                    }


                    // this.toggleRowExpansionAll(this.alertInfo, true)
                }
            })
        },
        toggleRowExpansionAll(isExpansion) {
            this.alertInfo.forEach((item) => {
                this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
            });
        },
        updateSettings() {
            api.updateSettings(this.settingsControl).then(res => {
                if (res.data.message === 'success') {
                    this.$notify({
                        title: "控制",
                        message: '修改成功',
                        type: "success",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    this.getData()
                }
            })
        },
        handleSwitchChange(data) {
            if (!data.modelId) {
                if (data.notResettable) {
                    data.children.forEach(item => {
                        item.notResettable = true
                        this.settingsControl.prohibitResetUniformCodes.push(item.uniformCode)
                    })
                    this.settingsControl.prohibitResetParts.push(data.id)
                } else {
                    for (var i = 0; i < this.settingsControl.prohibitResetParts.length; i++) {
                        if (this.settingsControl.prohibitResetParts[i] == data.id) {
                            this.settingsControl.prohibitResetParts.splice(i, 1);
                        }
                    }
                }
            } else {
                if (data.notResettable) {
                    this.settingsControl.prohibitResetUniformCodes.push(data.uniformCode)
                } else {
                    for (var i = 0; i < this.settingsControl.prohibitResetUniformCodes.length; i++) {
                        if (this.settingsControl.prohibitResetUniformCodes[i] == data.uniformCode) {
                            this.settingsControl.prohibitResetUniformCodes.splice(i, 1);
                        }
                    }
                }
            }
            this.updateSettings()
        },
        handleReturn(){
            
            this.$confirm('确定恢复默认设置?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.returnSetting({
                stationId: this.current,
                modelId: this.selectValue,
            }).then(res =>{
                this.$notify({
                        title: "控制",
                        message: '修改成功',
                        type: "success",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    this.getData()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消恢复'
          });          
        });
            
        },
        closed() {

        },

    },
};
</script>
<style lang="less" scoped>
.body {
    background-color: #000000;
    height: 89vh;
    width: 102%;
    margin-left: -1%;
    margin-top: -40px;
}

.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 3vw;
    padding-top: 8px;
    position: absolute;
    width: 100%;
    background-color: #000000;
    padding-bottom: 10px;

    .title-item {
        background-color: #242424;
        border-radius: 4px;
        padding: 8px 27px 7px 25px;
        font-size: 14px;
        color: #b4bdc0;
        margin-right: 10px;
    }

    .title-onItem {
        background-color: rgba(37, 116, 219, 1);
        border-radius: 4px;
        padding: 8px 27px 7px 25px;
        font-size: 14px;
        color: #b4bdc0;
        margin-right: 10px;
    }
}

.content {
    margin-left: 3vw;
    padding-top: 7vh;
    width: 100%;

    .models {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .models-left{
            display: flex;
        flex-direction: row;
        align-items: center;
        .models-name {
            margin-right: 10px;
            color: #ffffff;
            font-size: 17px;
        }
        }
        .returns{
            background-color: #666666;
            border-radius: 4px;
            padding: 8px 15px 7px 15px;
            font-size: 14px;
            color: #ffffff;
            margin-right: 50px;
        }
    }
}

.control {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;

    .control-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 30px;

        .control-title {
            margin-right: 10px;
            color: #ffffff;
            font-size: 17px;
        }
    }
}

.inputs {
    width: 150px !important;
}

.el-switch {
    width: 50px !important;
}

.warningTable {
    margin-left: 58px;
    margin-top: 20px;
    width: 96%;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
    background-color: #000000 !important;
}

.teble-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;

    .button {
        background-color: rgba(37, 116, 219, 1);
        border-radius: 4px;
        padding: 8px 27px 7px 25px;
        font-size: 14px;
        color: #b4bdc0;
        margin-right: 10px;
    }
}
</style>