<template>
    <!-- 设备管理 -->
    <div class="fullHeight">
        <div class="searchBox whiteBlock">
            <el-button type="warning" size="medium" plain
                @click="refresh">{{ $t('message.deviceManage.refresh') }}</el-button>
            <el-button type="primary" size="medium" @click="add">{{ $t('message.deviceManage.add') }}</el-button>
            <!-- <span class="downloadBtn primaryText" @click="downloadFn">
                {{$t('message.deviceManage.protocolDownload')}}
            </span> -->
            <div class="aiAlarm">
                <span>是否需要项目管理员做AI抓拍初筛</span>
                <el-tooltip effect="light" class="item" popper-class="tooltip-width"
                    content="选择“是”时，AI抓拍的图片首先推送到项目管理员账号，由项目管理员账号做初步筛选(忽略误报的隐患抓拍或选择推送违章信息给相应区域的责任单位责任人进行整改)﹔选择“否”时，AI抓拍的图片跳过项目管理员初步筛选，直接推送给相应区域的责任单位责任进行整改。"
                    placement="bottom">
                    <i class="el-icon-question"></i>
                </el-tooltip>
                <el-radio-group @input="onAiInput" v-model="aiAlarmNeedManageApprove">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="table_wrap whiteBlock">
            <el-table class="tables" :data="List">
                <el-table-column width="200" prop="hardwareName" align="center"
                    :label="$t('message.deviceManage.devName')"></el-table-column>
                <el-table-column prop="hardwareId" :label="$t('message.deviceManage.devSn')"
                    align="center"></el-table-column>
                <el-table-column prop="ip" label="设备ip" align="center"></el-table-column>
                <el-table-column prop="deviceState" label="在线状态" align="center">
                    <template slot-scope="scope">{{ scope.row.deviceState == '1' ? "在线" : '离线' }}</template>
                </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="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.alarmValueSet.yjz')}}
                        </div>
                        <div @click="bao(scope.row)" class="operationText"><img src="@/assets/images/bao.png" alt="">{{$t('message.alarmValueSet.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 @close="close" :modal-append-to-body="false"
            :title="Popup.type === 'add' ? $t('message.deviceManage.add') : $t('message.deviceManage.edit')"
            :visible.sync="Popup.show" width="667px">
            <div class="dialog_content">
                <el-form v-if="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="hardwareName">
                        <el-input v-model="addEditForm.hardwareName"
                            :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.deviceManage.devSn')" prop="hardwareId">
                        <el-input v-model="addEditForm.hardwareId" :disabled="Popup.type === 'edit'"
                            :placeholder="$t('message.deviceManage.placeholder')"></el-input>
                    </el-form-item>
                    <!-- <el-form-item :label="'锁厂家'">
                        <el-input value="深圳施泰信息技术有限公司" disabled ></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
                                   :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>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    aiAnalyseHardWareRecordAdd,
    aiAnalyseHardWareRecordEdit,
    aiAnalyseHardWareRecordDelete,
    aiAnalyseHardWareRecordList,
    aiProjectUpdateBySn,
    aiProjectGetBySn,
} 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: {
                hardwareName: [
                    { required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: "blur" },
                    { required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: "change" }
                ],
                hardwareId: [
                    { required: true, message: this.$t('message.deviceManage.message1'), trigger: "blur" } // 请输入设备编号
                ]
            },
            options: [
                /*{realName: "曾祥万", value: 1},
                {realName: "李先生", value: 2},*/
            ],
            addEditForm: {},
            List: [
                /*{
                    deviceId: "124578",
                    deviceName: "扬尘监测1",
                    isClosed: 2,
                    address: "22",
                    createTime: "2019-05-05 16:55:46",
                }*/
            ],
            aiAlarmNeedManageApprove: 0,
            Popup: {
                type: 'add',
                show: false
            },
        }
    },
    created(){
        this.aiProjectGetBySnInfo();
    },
    methods: {
        downloadFn() {
            // AI识别对接协议
            window.open('/doc/' + this.$t('message.deviceManage.aiAgreement') + '.docx')
        },
        handle(type, show) {//打开弹窗前的统一处理
            this.Popup = {
                type: type,
                show: show
            }
        },
        Change() {
        },
        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(',').map(Number);
            }
            this.handle('edit', true);
        },
        deleteDev(obj) {
            console.log('删除', obj);
            this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + obj.hardwareName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
                confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
                cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
                type: "warning",
            }).then(() => {
                aiAnalyseHardWareRecordDelete({ id: obj.id }).then(result => {
                    if (result.success) {
                        this.$message.success(result.message);
                        this.getList();
                    }
                })
            }).catch(() => {
            });
        },
        submit() {
            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') {
                        aiAnalyseHardWareRecordAdd(params).then(result => {
                            if (result.success) {
                                this.$message.success(result.message);
                                this.getList();
                            }
                        })
                    } else if (this.Popup.type === 'edit') {
                        console.log('编辑信息', this.addEditForm)
                        aiAnalyseHardWareRecordEdit(params).then(result => {
                            if (result.success) {
                                this.$message.success(result.message);
                                this.getList();
                            }
                        })
                    }
                    this.Popup.show = false;
                } else {
                    return false;
                }
            });
        },
        refresh() {
            this.getList();
        },
        aiProjectGetBySnInfo(){
            aiProjectGetBySn({ projectSn: this.$store.state.projectSn }).then(result => {
                if (result.success) {
                    console.log('项目信息', result.result);
                    this.aiAlarmNeedManageApprove = result.result.aiAlarmNeedManageApprove ? result.result.aiAlarmNeedManageApprove : 0;
                }
            })
        },
        onAiInput(){
            console.log("111111");
            this.getList();
            aiProjectUpdateBySn({ 
                projectSn: this.$store.state.projectSn, 
                aiAlarmNeedManageApprove: this.aiAlarmNeedManageApprove 
            }).then(result => {
                if (result.success) {
                    this.$message.success("修改成功!");
                }
            })
        },
        getList() {
            aiAnalyseHardWareRecordList({ 
                projectSn: this.$store.state.projectSn, 
                aiAlarmNeedManageApprove: this.aiAlarmNeedManageApprove 
            }).then(result => {
                if (result.success) {
                    this.List = result.result;
                    console.log('列表', result);
                }
            })
        },
        getLaborManagementList() {
            getProjectChilderSystemUserListApi({ projectSn: this.$store.state.projectSn, workerName: '' }).then(result => {
                if (result.success) {
                    console.log('施工人员', result);
                    this.options = result.result;
                }
            })
        },
        close() {
            this.$refs.addEditForm.clearValidate();
            this.addEditForm = {};
        }
    }
}
</script>
<style lang="less">
.tooltip-width {
    max-width: 300px;
}

.aiAlarm {
    margin-left: 20px;
    font-size: 16px;

    .el-radio-group {
        margin-left: 10px;
    }
}

.tableBtns {
    display: flex;
    justify-content: center;
}

.yj-dialogFormBox {
    width: 462px;
}

.searchBox {
    position: relative;
}

.downloadBtn {
    position: absolute;
    right: 20px;
    top: 30px;
    text-decoration: underline;
    cursor: pointer;
}
</style>