<template>
    <div class="updataRoleDialog">
        <el-dialog width="836px" center title="修改监测系统信息" :visible.sync="updateRoleData.dialogVisible">
            <el-form label-width="100px" ref="ruleForm" :rules="rules" :model="updateRoleData.data"  label-position="top">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="监测系统名称：" prop="monitorSystemName">
                            <el-input v-model="updateRoleData.data.monitorSystemName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监测系统编码：" prop="clientId">
                            <el-input v-model="updateRoleData.data.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 v-model="updateRoleData.data.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 v-model="updateRoleData.data.testSecret" type="text" disabled/>
                            </div>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="报警信息内容：" prop="alarmContent">
                            <el-input v-model="updateRoleData.data.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 v-model="updateRoleData.data.alarmGenerate" type="textarea"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警解除机制：" prop="alarmRelease">
                            <el-input v-model="updateRoleData.data.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 v-model="updateRoleData.data.systemIntroduce" type="textarea"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警对应的处理措施：" prop="treateMeasure">
                            <el-input v-model="updateRoleData.data.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 v-model="updateRoleData.data.remark" type="textarea"/>
                        </el-form-item>
                    </el-col>
                </el-row>          
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="search" @click="updateRole">保 存</div>
                <div class="reset" @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { toGenerateKey } from '@/api/monitor'
export default {
    name: 'updateRoleDialog',
    props: {
        updateRoleData: {
            type: Object,
            default: {}
        }
    },
    created() {
    },
    data() {
        return {
            checkAll: false,
            defaultExpanded: [],
            meunTreeData: [],
            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.updateRoleData.data.clientSecret=res.data
            })
        },
        generateKeyTest(){
            toGenerateKey().then(res=>{
                this.updateRoleData.data.testSecret=res.data
            })
        },
        handleCheckAllChange(val) {
            if (this.checkAll) {
                this.$refs.tree.setCheckedNodes(this.meunTreeData);
            } else {
                this.$refs.tree.setCheckedKeys([]);
            }
        },
        updateRole() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                        this.$emit("updateRoleBtn", this.updateRoleData.data)
                }
            })
        },
        cancel() {
            this.updateRoleData.dialogVisible = false
        },
        closeDialog() {
        }

    }
}
</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>