<template>
  <div class="page-container warningModeAddPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{showType?'详情':(newData.typeId?'编辑':'新增')}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-submit-p" v-if="!showType" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="showType?noRules:rules" label-width="120px">
        <el-form-item label="名称：" prop="name">
          <el-input :disabled="showType" v-model="newData.name" placeholder="请输入名称" maxLength="20" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="方式：" prop="alarmType">
          <el-select :disabled="showType" v-model="newData.alarmType"
                     @change="selectChange"
                     placeholder="请选择方式" style="width:500px;">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="newData.alarmType == 1">
          <el-form-item label="类型：" prop="category">
            <el-radio-group :disabled="showType" v-model="newData.category">
              <el-radio :label="1">钉钉消息</el-radio>
              <el-radio :label="2">钉钉群机器人</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="appKey：" prop="key" v-if="newData.category==1">
            <el-input :disabled="showType" v-model="newData.key" placeholder="请输入appKey" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="appSecret：" prop="secret" v-if="newData.category==1">
            <el-input :disabled="showType" v-model="newData.secret" placeholder="请输入appSecret" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="webHook：" prop="host" v-if="newData.category==2">
            <el-input :disabled="showType" v-model="newData.host" placeholder="请输入webHook" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 2">
          <el-form-item label="类型：" prop="category">
            <el-radio-group :disabled="showType" v-model="newData.category">
              <el-radio :label="1">企业微信</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="corpId：" prop="key" v-if="newData.category==1">
            <el-input :disabled="showType" v-model="newData.key" placeholder="请输入corpId" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="corpSecret：" prop="secret" v-if="newData.category==1">
            <el-input :disabled="showType" v-model="newData.secret" placeholder="请输入corpSecret" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 3">
          <el-form-item label="邮箱：" prop="email">
            <el-input :disabled="showType" v-model="newData.email" placeholder="请输入邮箱" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="主机：" prop="host">
              <el-input :disabled="showType" v-model="newData.host" placeholder="请输入主机" maxLength="200" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="端口：" prop="port" label-width="80px">
              <el-input :disabled="showType" v-model="newData.port" placeholder="请输入端口" maxLength="8" style="width:120px;"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="账号：" prop="key">
            <el-input :disabled="showType" v-model="newData.key" placeholder="请输入账号" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="secret">
            <el-input show-password :disabled="showType" v-model="newData.secret" placeholder="请输入密码" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="超时：" prop="timeout">
            <el-input-number v-model="newData.timeout" controls-position="right" :min="1000" :max="100000" style="width:500px;"></el-input-number>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 4">
          <el-form-item label="类型：" prop="category">
            <el-radio-group :disabled="showType" v-model="newData.category">
              <el-radio :label="1">专业设备</el-radio>
              <el-radio :label="2">云语音</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="主机：" prop="host">
            <el-input :disabled="showType" v-model="newData.host" placeholder="请输入主机" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="key：" prop="key" v-if="newData.category==2">
            <el-input :disabled="showType" v-model="newData.key" placeholder="请输入host" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="secret：" prop="secret" v-if="newData.category==2">
            <el-input :disabled="showType" v-model="newData.secret" placeholder="请输入port" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 5">
          <el-form-item label="类型：" prop="category">
            <el-radio-group :disabled="showType" v-model="newData.category">
              <el-radio :label="1">专业设备</el-radio>
              <el-radio :label="2">云短信</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="主机：" prop="host">
            <el-input :disabled="showType" v-model="newData.host" placeholder="请输入主机" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="key：" prop="key" v-if="newData.category==2">
            <el-input :disabled="showType" v-model="newData.key" placeholder="请输入host" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="secret：" prop="secret" v-if="newData.category==2">
            <el-input :disabled="showType" v-model="newData.secret" placeholder="请输入port" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="说明：" prop="remark">
          <el-input
            :disabled="showType"
            style="width:500px;"
            type="textarea"
            resize="none"
            maxLength="50"
            :rows="6"
            placeholder="请输入说明"
            show-word-limit
            v-model="newData.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { iotAlarmTypeAdd,iotAlarmTypeUpdate } from "@/api/iotDevice/index";
  export default {
    name: 'addPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        showType:false,
        newData:{},
        rules:{
          name: [
            { required: true, message: "请输入名称", trigger: "blur" },
            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          alarmType: [
            { required: true, message: "请选择方式", trigger: "blur" },
            { required: true, message: "请选择方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
          category: [
            { required: true, message: "请选择类型", trigger: "blur" },
            { required: true, message: "请选择类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
          key: [
            { required: true, message: "请输入", trigger: "blur" },
            { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          ],
          secret: [
            { required: true, message: "请输入", trigger: "blur" },
            { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          ],
          // host: [
          //   { required: true, message: "请输入", trigger: "blur" },
          //   { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          email: [
              { required: true, message: "请输入邮箱地址", trigger: "blur" },
              { required: true, message: "请输入正确的邮箱地址", type: 'email'},
              { required: true, message: "请输入邮箱地址", validator: this.spaceJudgment, trigger: "blur" }
          ],
          port: [
            { required: true, message: "请输入", trigger: "blur" },
            { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          ],
          account: [
            { required: true, message: "请输入", trigger: "blur" },
            { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          ],
          passwd: [
            { required: true, message: "请输入", trigger: "blur" },
            { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          ],
          timeout: [
            { required: true, message: "请输入", trigger: "blur" },
            { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        noRules:{},
        typeList:[
          {name:"钉钉",id:1,},
          {name:"微信",id:2,},
          {name:"邮件",id:3,},
          {name:"电话",id:4,},
          {name:"短信",id:5,},
        ],
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        this.$set(this,'showType',this.propsData.showType);
        if(this.propsData.typeId){
          let params = JSON.parse(this.propsData.params)
          let obj = {
            typeId:this.propsData.typeId,
            name:this.propsData.name,
            alarmType:this.propsData.alarmType,
            category:this.propsData.category,
            remark:this.propsData.remark,
            key:params.key?params.key:null,
            secret:params.secret?params.secret:null,
            host:params.host?params.host:null,
            email:params.email?params.email:null,
            port:params.port?params.port:null,
            timeout:params.timeout?params.timeout:null,
          };
          this.$set(this,'newData',obj);
        }else{
          this.$set(this,'newData',{
            name:'',
            alarmType:1,
            category:1,
            remark:'',
            key:'',
            secret:'',
            host:'',
            email:'',
            port:'',
            timeout:1000,
          });
        }
      },
      //方式选中
      selectChange(val){
        this.$set(this.newData,'category',val==3?0:1);
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.newData))
            let newObj = {
              name:obj.name,
              alarmType:obj.alarmType,
              category:obj.alarmType == 3 ? 0 : obj.category,
              remark:obj.remark,
              params:
                obj.alarmType == 1 && obj.category == 1 ? {
                  key:obj.key,
                  secret:obj.secret,
                }:(
                obj.alarmType == 1 && obj.category == 2 ? {
                  host:obj.host,
                }:(
                obj.alarmType == 2 && obj.category == 1 ? {
                  key:obj.key,
                  secret:obj.secret,
                }:(
                obj.alarmType == 3 && obj.category == 0 ? {
                  email:obj.email,
                  host:obj.host,
                  port:obj.port,
                  key:obj.key,
                  secret:obj.secret,
                  timeout:obj.timeout,
                }:(
                obj.alarmType == 4 && obj.category == 1 ? {
                  host:obj.host
                }:(
                obj.alarmType == 4 && obj.category == 2 ? {
                  host:obj.host,
                  key:obj.key,
                  secret:obj.secret,
                }:(
                obj.alarmType == 5 && obj.category == 1 ? {
                  host:obj.host
                }:(
                obj.alarmType == 5 && obj.category == 2 ? {
                  host:obj.host,
                  key:obj.key,
                  secret:obj.secret,
                }:'')))))))
            }
            if(this.newData.typeId){
              newObj.typeId = obj.typeId;
              iotAlarmTypeUpdate(newObj).then(response => {
                this.msgSuccess(response.message)
                this.backPage();
              });
            }else{
              iotAlarmTypeAdd(newObj).then(response => {
                this.msgSuccess(response.message)
                this.backPage();
              });
            }
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .warningModeAddPage{
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
      ::v-deep .el-input.is-disabled .el-input__inner{
        background-color: #fff;
        color: #666;
        cursor: auto;
      }
      ::v-deep .el-textarea.is-disabled .el-textarea__inner{
        background-color: #fff;
        color: #666;
        cursor: auto;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
        background-color: #fff;
        border-color: #1890ff;
        cursor: auto;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
        background-color: #1890ff;
        cursor: auto;
      }
      ::v-deep .el-radio__input.is-disabled + span.el-radio__label{
        color: #666;
        cursor: auto;
      }
    }
  }
</style>
