<template>
    <div class="addRoleDialog">
        <el-dialog width="836px" center @close="closeDialog()" v-if="addRoleData.dialogVisible" title="新增监测系统信息"
            :visible.sync="addRoleData.dialogVisible">
            <el-form label-width="100px" ref="ruleForm" :rules="rules" :model="addRoleForm" label-position="top">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="监测系统名称：" prop="monitorSystemName">
                            <el-input placeholder="请输入监测系统名称" v-model="addRoleForm.monitorSystemName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监测系统编码：" prop="clientId">
                            <el-input placeholder="请输入监测系统编码" v-model="addRoleForm.clientId"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="密钥：" prop="clientSecret">
                            <div class="" style="display:flex">
                                <el-button class="changKerBtn" @click="generateKeyFormal">点击生成密钥</el-button>
                            <el-input placeholder="请输入密钥" v-model="addRoleForm.clientSecret" type="text" disabled/>
                            </div>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="测试环境密钥：" prop="testSecret">
                            <div class="" style="display:flex">
                                <el-button class="changKerBtn" @click="generateKeyTest">点击生成密钥</el-button>
                                <el-input placeholder="请输入测试环境密钥" v-model="addRoleForm.testSecret" type="text" disabled/>
                            </div>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="报警信息内容：" prop="alarmContent">
                            <el-input placeholder="请输入报警信息内容" v-model="addRoleForm.alarmContent" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="报警信息生成机制：" prop="alarmGenerate">
                            <el-input placeholder="请输入报警信息生成机制" v-model="addRoleForm.alarmGenerate" type="textarea"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警解除机制：" prop="alarmRelease">
                            <el-input placeholder="请输入报警解除机制" v-model="addRoleForm.alarmRelease" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="系统简介：" prop="systemIntroduce">
                            <el-input placeholder="请输入系统简介" v-model="addRoleForm.systemIntroduce" type="textarea"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警对应的处理措施：" prop="treateMeasure">
                            <el-input placeholder="请输入报警对应的处理措施" v-model="addRoleForm.treateMeasure" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="备注：" prop="remark">
                            <el-input placeholder="请输入备注" v-model="addRoleForm.remark" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="报警对应的处理措施：" prop="treateMeasure">
                            <el-input placeholder="请输入报警对应的处理措施" v-model="addRoleForm.treateMeasure" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="cancel()">取 消</el-button>
                        <el-button type="primary" @click="addRole()">保 存</el-button> -->
                <div class="search" @click="addRole()">保 存</div>
                <div class="reset" @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { toGenerateKey } from '@/api/monitor'
export default {
    name: 'addRoleDialog',
    props: {
        addRoleData: {
            type: Object,
            default: {}
        }
    },
    created() {
    },
    data() {
        return {
            checkAll: false,
            defaultExpanded: [],
            addRoleForm: {
                monitorSystemName: '',//监测系统名称
                clientId: "",//监测系统编码
                clientSecret: '',//密钥
                testSecret: '',//测试环境密钥
                alarmGenerate: '',//报警信息生成机制
                systemIntroduce: '',//系统简介
                alarmContent: '',//报警信息内容
            },
            rules: {
                monitorSystemName: [{ required: true, message: '请输入监测系统名称', trigger: 'blur' }],
                clientSecret: [{ required: true, message: '请输入密钥', trigger: 'blur' }],
                testSecret: [{ required: true, message: '请输入测试环境密钥', trigger: 'blur' }],
                clientId: [{ required: true, message: '请输入监测系统编码', trigger: 'blur' }],
            }
        }
    },
    methods: {
        generateKeyFormal(){
            toGenerateKey().then(res=>{
                this.addRoleForm.clientSecret=res.data
            })
        },
        generateKeyTest(){
            toGenerateKey().then(res=>{
                this.addRoleForm.testSecret=res.data
            })
        },
        addRole() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                        this.$emit("addRoleBtn1", this.addRoleForm)
                }
            })
        },
        cancel() {
            this.addRoleData.dialogVisible = false
            this.addRoleForm = {
                monitorSystemName: '',//监测系统名称
                clientId: "",//监测系统编码
                clientSecret: '',//密钥
                testSecret: '',//测试环境密钥
                alarmGenerate: '',//报警信息生成机制
                systemIntroduce: '',//系统简介
                alarmContent: '',//报警信息内容
            }
        },
        closeDialog() {
            this.addRoleData.dialogVisible = false
            this.addRoleForm = {
                monitorSystemName: '',//监测系统名称
                clientId: "",//监测系统编码
                clientSecret: '',//密钥
                testSecret: '',//测试环境密钥
                alarmGenerate: '',//报警信息生成机制
                systemIntroduce: '',//系统简介
                alarmContent: '',//报警信息内容
            }
        }

    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 20px 95px !important;
}
.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;
      }
}
// 选中后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;
}
.changKerBtn{
    margin: 0px 10px 15px 0;
    cursor: pointer;
    text-align: center;
    height: 39px;
    color: #fff;
    border-radius: 2px;
    border: 1px solid #ABC7FD;
    font-weight: 400;
    font-size: 14px;
    background-color: #2250C8;
}
</style>