<template>
    <!-- 设备管理 -->
    <div class="fullHeight">
        <div class="searchBox whiteBlock">
            <el-button type="warning" plain size="medium" @click="refresh">{{$t('message.deviceManage.refresh')}}</el-button>
            <!-- <el-button type="primary" size="medium" @click="add">{{$t('message.deviceManage.add')}}</el-button> -->
        </div>
        <div class="table_wrap whiteBlock">
        <el-table class="tables" :data="List">
            <el-table-column width="200" prop="devName" align="center"
                             :label="$t('message.deviceManage.devName')"
            ></el-table-column>
            <el-table-column prop="devSn" :label="$t('message.deviceManage.devSn')"
                             align="center"></el-table-column>
            <el-table-column prop="isClosed" :label="$t('message.deviceManage.isClosed')" align="center">
                <template slot-scope="scope">{{$t('message.deviceManage.isClosedArr')[scope.row.isClosed-1]}}</template>
            </el-table-column>
            <el-table-column prop="address" width="100" :label="$t('message.deviceManage.address')"
                             align="center"></el-table-column>
            <el-table-column prop="realTime" width="200"
                             :label="$t('message.deviceManage.createTime')"
                             align="center"></el-table-column>
            <el-table-column
                    :label="$t('message.deviceManage.operation')" align="center">
                <template slot-scope="scope">
                    <div class="tableBtns">
                        <div @click="yu(scope.row)" class="operationText"><img src="@/assets/images/yu.png" alt="">{{$t('message.deviceManage.yjz')}}
                        </div>
                        <div @click="bao(scope.row)" class="operationText"><img src="@/assets/images/bao.png" alt="">{{$t('message.deviceManage.bjz')}}
                        </div>
                        <div @click="edit(scope.row)" class="operationText">
                            <img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
                            <span>{{$t('message.deviceManage.edit')}}</span>
                        </div>
                        <!-- <div @click="deleteDev(scope.row)" class="operationText">
                            <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                            <span>{{$t('message.deviceManage.delete')}}</span>
                        </div> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <el-dialog :modal-append-to-body="false" @close="close"
                   :title="$t('message.deviceManage.Popup_title')[Popup.type]"
                   :visible.sync="Popup.show"
                   width="667px">
            <div class="dialog_content">
                <el-form v-show="Popup.type === 'add'||Popup.type === 'edit'" size="medium"
                         ref="addEditForm" :model="addEditForm" :rules="addEditRules"
                         label-width="120px" class="dialogFormBox">
                    <el-form-item :label="$t('message.deviceManage.devName')" prop="devName">
                        <el-input v-model="addEditForm.devName"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.devSn')">
                        <el-input v-model="addEditForm.devSn" :disabled="Popup.type === 'edit'"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="'锁厂家'">
                        <el-input value="深圳施泰信息技术有限公司" :disabled="Popup.type === 'edit'" ></el-input>
                    </el-form-item>
                    <el-form-item :label="'锁编号'">
                        <el-input v-model="addEditForm.lockNo" :disabled="Popup.type === 'edit'"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.alarmPushWorkerId')">
                        <el-select v-model="addEditForm.alarmPushWorkerId" multiple
                                   filterable
                                   :placeholder="$t('message.deviceManage.placeholder_select')">
                            <el-option
                                    v-for="item in options"
                                    :key="item.workerId"
                                    :label="item.workerName"
                                    :value="item.workerId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="Popup.show = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.deviceManage.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="submit"
                                size="medium"
                        >{{$t('message.deviceManage.save')}}
                        </el-button>
                    </div>
                </el-form>
                <el-form v-if="Popup.type === 'ybj'||Popup.type === 'bjz'" size="medium"
                         label-width="140px" class="dialogFormBox yj-dialogFormBox">
                    <el-form-item :label="$t('message.deviceManage.voltageA')" prop="voltageA">
                        <el-input v-model="warningInfo.voltageA"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.voltageB')" prop="voltageB">
                        <el-input v-model="warningInfo.voltageB"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.voltageC')" prop="voltageC">
                        <el-input v-model="warningInfo.voltagec"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.phaseCurrentA')" prop="phaseCurrentA">
                        <el-input v-model="warningInfo.phaseCurrentA"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.phaseCurrentB')" prop="phaseCurrentB">
                        <el-input v-model="warningInfo.phaseCurrentB"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.phaseCurrentC')" prop="phaseCurrentC">
                        <el-input v-model="warningInfo.phaseCurrentC"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.cableTemperatureA')" prop="cableTemperatureA">
                        <el-input v-model="warningInfo.cableTemperatureA"
                                  :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.cableTemperatureB')" prop="cableTemperatureB">
                        <el-input v-model="warningInfo.cableTemperatureB"
                                  :placeholder="$t('message.deviceManage.placeholder')">
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.cableTemperatureC')" prop="cableTemperatureC">
                        <el-input v-model="warningInfo.cableTemperatureC"
                                  :placeholder="$t('message.deviceManage.placeholder')">
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.ambientTemperature')" prop="ambientTemperature">
                        <el-input v-model="warningInfo.ambientTemperature"
                                  :placeholder="$t('message.deviceManage.placeholder')">
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.electricLeakage')" prop="electricLeakage">
                        <el-input v-model="warningInfo.electricLeakage"

                                  :placeholder="$t('message.deviceManage.placeholder')">
                        </el-input>
                    </el-form-item>
                    <!--<el-form-item label="pm2.5报警是否推送" prop="isEnable">
                        <el-radio-group v-model="warningInfo.isNotPush">
                            <el-radio :label="1">推送</el-radio>
                            <el-radio :label="2">不推送</el-radio>
                        </el-radio-group>
                    </el-form-item>-->
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="Popup.show = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.deviceManage.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="submit"
                                size="medium"
                        >{{$t('message.deviceManage.save')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        electricalDevAdd,
        electricalDevEdit,
        electricalDevList,
        electricalDevDelete,
        electricalWarningEdit,
        getEnvironmentWarningInfo
    } from '../../../assets/js/api/equipmentCenter/electricBox'
import {
  getProjectChilderSystemUserListApi
} from "@/assets/js/api/configManage";
    export default {
        mounted() {
            this.getList();
            this.getLaborManagementList();
        },
        data() {
            return {
                props: {
                    multiple: true
                },
                addEditRules: {
                    devName: [
                        {required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: "blur"},
                        {required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: "change"}
                    ]
                },
                options: [],
                warningInfo: {},
                addEditForm: {},
                List: [],
                Popup: {
                    type: 'edit',
                    show: false
                },
            }
        },
        methods: {
            handle(type, show) {//打开弹窗前的统一处理
                this.Popup = {
                    type: type,
                    show: show
                }
            },
            setWarningType(warningType) {
                this.warningInfo.warningType = warningType;
                electricalWarningEdit(this.warningInfo).then(result => {
                    if (result.success) {
                        this.$message.success(result.message);
                        console.log('预警值/报警值设置成功', result);
                    }
                })
            },
            submit() {
                if (this.Popup.type === 'ybj') {
                    console.log('打印预警设置', this.warningInfo)
                    this.setWarningType(2);
                    this.Popup.show = false;
                } else if (this.Popup.type === 'bjz') {
                    this.setWarningType(1);
                    this.Popup.show = false;
                } else {
                    let params = JSON.parse(JSON.stringify(this.addEditForm));
                    if(this.addEditForm.alarmPushWorkerId){
                        params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',');
                    }
                    params.projectSn = this.$store.state.projectSn;
                    params.lockFactory=1
                this.$refs.addEditForm.validate((valid) => {
                    if (valid) {
                        if (this.Popup.type === 'add') {
                            electricalDevAdd(params).then(result => {
                                if (result.success) {
                                    this.$message.success(result.message);
                                    this.getList();
                                }
                            })
                        } else if (this.Popup.type === 'edit') {
                            console.log('编辑信息', this.addEditForm)
                            electricalDevEdit(params).then(result => {
                                if (result.success) {
                                    this.$message.success(result.message);
                                    this.getList();
                                }
                            })
                        }
                        this.Popup.show = false;
                    } else {
                        return false;
                    }
                });
                    // this.$refs.addEditForm.validate((valid) => {
                    //     if (valid) {
                    //         let params = this.addEditForm;
                    //         params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',');
                    //         params.projectSn = this.$store.state.projectSn;
                    //         console.log('编辑信息', this.addEditForm)
                    //         electricalDevEdit(params).then(result => {
                    //             if (result.success) {
                    //                 // console.log('信息编辑成功', result);
                    //                 this.$message.success(result.message);
                    //                 this.getList();
                    //                 this.Popup.show = false;
                    //             }
                    //         })
                    //     } else {
                    //         return false;
                    //     }
                    // });
                }
            },
            Change() {
            },
            yu(obj) {
                console.log('预警', obj);
                this.handle('ybj', true);
                obj.warningType = 2;
                this.getWarningInfo(obj);

            },
            bao(obj) {
                console.log('报警', obj);
                this.handle('bjz', true);
                obj.warningType = 1;
                this.getWarningInfo(obj);
            },
            add() {
                this.handle('add', true);
            },
            edit(obj) {
                console.log('编辑', obj);
                this.addEditForm = JSON.parse(JSON.stringify(obj));
                if (typeof obj.alarmPushWorkerId === 'string' && obj.alarmPushWorkerId != '') {
                    this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId.split(',')
                }
                this.handle('edit', true);
            },
            deleteDev(obj) {
                console.log('删除', obj);
                this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + obj.devName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
                    confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                    cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                    type: "warning",
                }).then(() => {
                    electricalDevDelete({id: obj.id}).then(result => {
                        if (result.success) {
                            this.$message.success(result.message);
                            this.getList();
                        }
                    })
                }).catch(() => {
                });
            },
            getList() {
                electricalDevList({projectSn: this.$store.state.projectSn}).then(result => {
                    if (result.success) {
                        this.List = result.result;
                        console.log('列表', result);
                    }
                })
            },
            refresh() {
                this.getList();
            },
            getWarningInfo(obj) {
                console.log('getWarningInfo', obj);
                let {devSn, projectSn, warningType} = obj;
                getEnvironmentWarningInfo({
                    devSn: devSn,
                    projectSn: projectSn,
                    warningType: warningType
                }).then(result => {
                    if (result.success) {
                        this.warningInfo = result.result || {};
                        console.log('预警信息', result);
                    }
                })
            },
            getLaborManagementList() {
                getProjectChilderSystemUserListApi({projectSn: this.$store.state.projectSn}).then(result => {
                    this.options = result.result;
                })
            },
            close() {
                if (this.Popup.type === 'edit') this.$refs.addEditForm.resetFields();
            }
        }
    }
</script>
<style lang="less">
    .tableBtns {
        display: flex;
        justify-content: center;
    }

    .yj-dialogFormBox {
        width: 462px;
    }
</style>
