<template>
    <div class="disarmingAlarmDialog">
        <el-dialog width="636px" center @close="cancel()" title="解除报警" v-if='disarmingAlarmData.dialogVisible' :visible.sync="disarmingAlarmData.dialogVisible">
            <el-form label-width="120px" ref="ruleForm" :rules="rules" :model="submiteData">
                <el-form-item label="解除报警时间" prop="releaseTime">
                    <el-date-picker
                    v-model="submiteData.releaseTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择解除报警时间">
                    </el-date-picker>
                </el-form-item> 
                <el-form-item label="解除原因" prop="releaseContent">
                    <el-input type="textarea" placeholder="请填写解除原因" v-model="submiteData.releaseContent"></el-input>
                </el-form-item> 
            </el-form> 
            <span slot="footer" class="dialog-footer">
                <div class="search" @click="disarmingAlarmBtn()">保 存</div>
                <div class="reset"  @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'disarmingAlarmDialog',
    props:{
        disarmingAlarmData:{
            type: Object,
            default: {}
        }
    },
    created() {

    },
    data() {
        return {
            rules:{
                releaseTime:[{ required: true, message: '请选择解除报警时间', trigger: 'change' },],
                releaseContent:[{ required: true, message: '请填写解除原因', trigger: 'blur' },],
            },
            submiteData:{
                releaseTime:'',
                releaseContent:''
            }
        }
    },
    methods:{
        cancel() {
            this.submiteData = {
                releaseTime:'',
                releaseContent:''
            }
            this.disarmingAlarmData.dialogVisible = false
        },
        disarmingAlarmBtn() {            
            this.$refs.ruleForm.validate(valid => {
                if(valid){
                    this.$emit('disarmingAlarm',{
                        alarmId:this.disarmingAlarmData.data.alarmId,
                        releaseTime:Date.parse(this.submiteData.releaseTime),
                        releaseContent:this.submiteData.releaseContent,
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
    div {
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
    }

    div:hover {
        cursor: pointer;
    }

    .search {
        margin: 0 12px;
        background-color: #2766DD;
        color: #fff;
    }

    .search:hover {
        background-color: #4D85F4;
    }

    .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
    }

    .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
    }
}

::v-deep .el-dialog__body {
    padding: 20px 95px !important;
}

// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}
</style>