<template>
  <div class="page-container messageTemplateAddPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{showType?'详情':(newData.templateId?'编辑':'新增')}}</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="templateName">
          <el-input :disabled="showType" v-model="newData.templateName" placeholder="请输入名称" maxLength="20" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="方式：" prop="typeId">
          <el-select :disabled="showType || !!newData.templateId" v-model="newData.typeId"
                     @change="selectChange"
                     placeholder="请选择方式" style="width:500px;">
            <el-option
              v-for="item in typeList"
              :key="item.typeId"
              :label="item.typeDesc"
              :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型：" prop="businessType">
          <el-select :disabled="showType" v-model="newData.businessType" clearable
                     placeholder="请选择业务类型" style="width:500px;">
            <el-option
              v-for="item in businessList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="newData.alarmType == 1 && newData.category==1">
          <el-form-item label="AgentID：" prop="agentId">
            <el-input :disabled="showType" v-model="newData.agentId"
                      placeholder="请输入AgentID" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="接收部门：" prop="receiveDept">
              <el-select :disabled="showType" v-model="newData.receiveDept"
                         collapse-tags multiple
                         placeholder="请选择接收部门" style="width:200px;">
                <el-option label="测试部门-1" value="1"></el-option>
                <el-option label="测试部门-2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="接收人：" prop="receiver" label-width="100px">
              <el-select :disabled="showType" v-model="newData.receiver"
                         collapse-tags multiple
                         placeholder="请选择接收人" style="width:200px;">
                <el-option label="测试人员-1" value="1"></el-option>
                <el-option label="测试人员-2" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div v-if="newData.alarmType == 1 && newData.category==2">
          <!--<el-form-item label="消息类型：" prop="bodyType">-->
            <!--<el-select :disabled="showType" v-model="newData.bodyType"-->
                       <!--placeholder="请选择消息类型" style="width:500px;">-->
              <!--<el-option label="text" :value="1"></el-option>-->
              <!--<el-option label="link" :value="2"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
        </div>
        <div v-if="newData.alarmType == 2">
          <el-form-item label="AgentID：" prop="agentId">
            <el-input :disabled="showType" v-model="newData.agentId"
                      placeholder="请输入AgentID" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="接收部门：" prop="receiveDept">
              <el-select :disabled="showType" v-model="newData.receiveDept"
                         multiple collapse-tags
                         placeholder="请选择接收部门" style="width:500px;">
                <el-option
                  v-for="(item,index) in sectionOptionList"
                  :key="item.receiveCode"
                  :label="item.receiveName"
                  :value="item.receiveCode">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item label="接收人：" prop="receiver">
              <el-select :disabled="showType" v-model="newData.receiver"
                         multiple collapse-tags @change="receiverChange"
                         placeholder="请选择接收人" style="width:500px;">
                <el-option
                  v-for="(item,index) in personnelOptionList"
                  :key="item.receiveCode"
                  :label="item.receiveName"
                  :value="item.receiveCode">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="标签：" prop="receiveTag ">
            <el-select :disabled="showType" v-model="newData.receiveTag"
                       multiple collapse-tags
                       placeholder="请选择标签" style="width:500px;">
              <el-option
                v-for="(item,index) in tagOptionList"
                :key="item.receiveCode"
                :label="item.receiveName"
                :value="item.receiveCode">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 3">
          <el-form-item label="邮件标题：" prop="title">
            <el-input :disabled="showType" v-model="newData.title"
                      placeholder="请输入邮件标题" maxLength="50" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="收件人：" prop="receiver">
            <el-select
              style="width:500px;"
              :disabled="showType"
              v-model="newData.receiver"
              multiple
              filterable
              remote
              clearable
              reserve-keyword
              @change="userSelectClick"
              @clear="userClearClick"
              placeholder="请选择"
              :remote-method="userSelect">
              <el-option
                v-for="item in userOptions"
                :key="item.email"
                :label="item.email"
                :value="item.email">
                <span>{{item.userName}}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 4">
          <el-form-item label="消息类型：" prop="bodyType">
            <el-select :disabled="showType" v-model="newData.bodyType"
                       placeholder="请选择消息类型" style="width:500px;">
              <el-option label="音频播放" :value="1"></el-option>
              <el-option label="文本播报" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="被叫人：" prop="receiver">-->
            <!--<el-select-->
              <!--style="width:500px;"-->
              <!--:disabled="showType"-->
              <!--v-model="newData.receiver"-->
              <!--collapse-tags-->
              <!--multiple-->
              <!--filterable-->
              <!--remote-->
              <!--clearable-->
              <!--reserve-keyword-->
              <!--@change="userSelectClick"-->
              <!--@clear="userClearClick"-->
              <!--placeholder="请选择"-->
              <!--:remote-method="userSelect">-->
              <!--<el-option-->
                <!--v-for="item in userOptions"-->
                <!--:key="item.userId"-->
                <!--:label="item.userName"-->
                <!--:value="item.userId">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="手机号码：" prop="receiver">
            <el-input :disabled="showType" v-model="newData.receiver"
                      placeholder="请输入手机号码" maxLength="11" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="播放次数：" prop="retry">
            <el-input-number :disabled="showType" v-model="newData.retry"
                             controls-position="right" :min="1" :max="10" style="width:500px;"></el-input-number>
          </el-form-item>
        </div>
        <div v-if="newData.alarmType == 5">
          <el-form-item label="第三方ID：" prop="agentId">
            <el-input :disabled="showType" v-model="newData.agentId"
                      placeholder="请输入第三方ID" maxLength="200" style="width:500px;"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="receiver">
            <el-input :disabled="showType" v-model="newData.receiver"
                      placeholder="请输入手机号码" maxLength="11" style="width:500px;"></el-input>
          </el-form-item>
          <!--<el-form-item label="接收人：" prop="receiver">-->
            <!--<el-select-->
              <!--style="width:500px;"-->
              <!--:disabled="showType"-->
              <!--v-model="newData.receiver"-->
              <!--collapse-tags-->
              <!--multiple-->
              <!--filterable-->
              <!--remote-->
              <!--clearable-->
              <!--reserve-keyword-->
              <!--@change="userSelectClick"-->
              <!--@clear="userClearClick"-->
              <!--placeholder="请选择"-->
              <!--:remote-method="userSelect">-->
              <!--<el-option-->
                <!--v-for="item in userOptions"-->
                <!--:key="item.userId"-->
                <!--:label="item.userName"-->
                <!--:value="item.userId">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="短信签名：" prop="signature" v-if="newData.category == 1">-->
            <!--<el-input :disabled="showType" v-model="newData.signature"-->
                      <!--placeholder="请输入短信签名" maxLength="50" style="width:500px;"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="短信签名：" prop="signature" v-if="newData.category == 2">-->
            <!--<el-select :disabled="showType" v-model="newData.signature"-->
                       <!--placeholder="请选择消息类型" style="width:500px;">-->
              <!--<el-option label="已配置签名-1" :value="1"></el-option>-->
              <!--<el-option label="已配置签名-2" :value="2"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="短信签名：" prop="signature">
            <el-input :disabled="showType" v-model="newData.signature"
              placeholder="请输入短信签名" maxLength="50" style="width:500px;"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="文本类型：" prop="bodyType"
                      v-if="(newData.alarmType == 2 && newData.category==1)||
                      (newData.alarmType == 1 && newData.category==2)||
                      (newData.alarmType == 1 && newData.category==1)">
          <el-select :disabled="showType" v-model="newData.bodyType"
                     placeholder="请选择文本类型" style="width:500px;">
            <el-option
              v-for="item in bodyTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签名：" prop="signature"
                      v-if="(newData.alarmType == 1 && newData.category==2)||(newData.alarmType == 1 && newData.category==1)">
          <el-input :disabled="showType" v-model="newData.signature"
                    placeholder="请输入短信签名" maxLength="50" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="模板内容：" prop="content">
          <el-input
            :disabled="showType"
            style="width:500px;"
            type="textarea"
            resize="none"
            maxLength="1000"
            :rows="6"
            placeholder="变量格式：${name} : 示例：尊敬的${name}，监测到${deviceName} 掉线，请及时确认！"
            show-word-limit
            v-model="newData.content"></el-input>
        </el-form-item>
        <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 { iotAlarmTemplateAdd,iotAlarmTemplateUpdate,iotAlarmTemplateBodyType,
      iotAlarmReceiveDropList,iotAlarmTemplateBusinessType } from "@/api/iotDevice/index";
    import { iotAlarmTypeSelect,systemUserSelect } from "@/api/commonality/permission";
    export default {
      name: 'addPage',
      props:{
        propsData:{},
      },
      data(){
        return{
          showType:false,
          newData:{},
          rules:{
            templateName: [
              { required: true, message: "请输入名称", trigger: "blur" },
              { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
            ],
            typeId: [
              { required: true, message: "请选择方式", trigger: "blur" },
              { required: true, message: "请选择方式", validator: this.spaceJudgment, trigger: "blur" }
            ],
            agentId: [
              { required: true, message: "请输入AgentID", trigger: "blur" },
              { required: true, message: "请输入AgentID", validator: this.spaceJudgment, trigger: "blur" }
            ],
            // receiveDept: [
            //   { required: true, message: "请选择接收部门", trigger: "blur" },
            //   { required: true, message: "请选择接收部门", validator: this.spaceJudgment, trigger: "blur" }
            // ],
            // receiver: [
            //   { required: true, message: "请选择人员", trigger: "blur" },
            //   { required: true, message: "请选择人员", validator: this.spaceJudgment, trigger: "blur" }
            // ],
            // bodyType: [
            //   { required: true, message: "请选择消息类型", trigger: "blur" },
            //   { required: true, message: "请选择消息类型", validator: this.spaceJudgment, trigger: "blur" }
            // ],
            title: [
              { required: true, message: "请输入", trigger: "blur" },
              { required: true, message: "请输入", validator: this.spaceJudgment, trigger: "blur" }
            ],
            // retry: [
            //   { required: true, message: "请输入播放次数", trigger: "blur" },
            //   { required: true, message: "请输入播放次数", validator: this.spaceJudgment, trigger: "blur" }
            // ],
            // signature: [
            //   { required: true, message: "短信签名不能为空", trigger: "blur" },
            //   { required: true, message: "短信签名不能为空", validator: this.spaceJudgment, trigger: "blur" }
            // ],
            content: [
              { required: true, message: "请输入模板内容", trigger: "blur" },
              { required: true, message: "请输入模板内容", validator: this.spaceJudgment, trigger: "blur" }
            ],
            // remark: [
            //   { required: true, message: "请输入说明", trigger: "blur" },
            //   { required: true, message: "请输入说明", validator: this.spaceJudgment, trigger: "blur" }
            // ],
          },
          noRules:{},
          //可用模板列表
          typeList:[],
          //人员
          userOptions:[],
          //消息模板类型列表
          bodyTypeList:[],
          //业务类型列表
          businessList:[],
          //部门/人员/标签下拉列表
          personnelOptionList:[],
          sectionOptionList:[],
          tagOptionList:[],
        }
      },
      created(){
        this.initialize();
      },
      mounted(){
        this.iotAlarmTemplateBodyType();
        this.iotAlarmTypeSelect();
        this.iotAlarmTemplateBusinessType();
      },
      methods:{
        //接收人选中
        receiverChange(val){
          if(val[1]){
            for(let i=0;i<val.length;i++){
              if(val[i] == '@all'){
                if(i == val.length - 1 && i > 0){
                  this.$set(this.newData,'receiver',['@all']);
                }else{
                  this.newData.receiver.splice(i,1);
                }
              }
            }
          }
        },
        //人员查询
        userSelect(query){
          if (query !== '') {
            let obj = {
              userType:1,
              userName:query,
            }
            systemUserSelect(obj).then(response => {
              let list = [];
              let num = 0;
              response.data.forEach((item)=>{
                if(item.email){
                  list.push(item)
                }else{
                  num++
                }
              })
              if(num != 0){
                this.msgSuccess('已过滤 '+num+' 个未绑定邮箱的用户');
              }
              this.$set(this,'userOptions',list);
            });
          } else {
            this.userOptions = [];
          }
        },
        //人员选中触发
        userSelectClick(data){
        },
        //人员清空触发
        userClearClick(){
          this.tutorUserOptions = [];
        },
        //消息模板类型列表
        iotAlarmTemplateBodyType(){
          iotAlarmTemplateBodyType({}).then(response => {
            this.$set(this,'bodyTypeList',response.data);
          });
        },
        //告警方式列表
        iotAlarmTypeSelect(){
          iotAlarmTypeSelect({}).then(response => {
            this.$set(this,'typeList',response.data);
          });
        },
        //模板类型列表
        iotAlarmTemplateBusinessType(){
          iotAlarmTemplateBusinessType({}).then(response => {
            this.$set(this,'businessList',response.data);
          });
        },
        //初始化
        initialize(){
          this.$set(this,'showType',this.propsData.showType);
          //获取部门/人员/标签下拉列表数据
          iotAlarmReceiveDropList({receiveType:1}).then(response => {
            let obj = JSON.parse(JSON.stringify(response.data))
            obj.push({receiveCode:'@all',receiveName:'全部人员'});
            this.$set(this,'personnelOptionList',obj);
          });
          iotAlarmReceiveDropList({receiveType:2}).then(response => {
            this.$set(this,'sectionOptionList',response.data);
          });
          iotAlarmReceiveDropList({receiveType:3}).then(response => {
            this.$set(this,'tagOptionList',response.data);
          });
          if(this.propsData.templateId){
            let obj = JSON.parse(JSON.stringify(this.propsData))
            let newObj = {
              templateId:obj.templateId,
              templateName:obj.templateName,
              typeId:obj.typeId,
              businessType:obj.businessType,
              alarmType:obj.alarmType,
              category:obj.category,
              remark:obj.remark,
              agentId:obj.agentId?obj.agentId:null,
              receiveDept:obj.receiveDept?obj.receiveDept.split('|'):[],
              receiveTag:obj.receiveTag?obj.receiveTag.split('|'):[],
              bodyType:obj.bodyType?obj.bodyType:null,
              title:obj.title?obj.title:null,
              retry:obj.retry?obj.retry:null,
              signature:obj.signature?obj.signature:null,
              content:obj.content?obj.content:null,
            };
            if(newObj.alarmType == 2){
              newObj.receiver = obj.receiver?obj.receiver.split('|'):[];
            }else if(newObj.alarmType == 3){
              newObj.receiver = obj.receiver?obj.receiver.split(','):[];
            }else{
              newObj.receiver = obj.receiver?obj.receiver:'';
            }
            this.$set(this,'newData',newObj);
          }else{
            this.$set(this,'newData',{
              templateName:null,
              typeId:null,
              businessType:null,
              alarmType:null,
              category:null,
              agentId:null,
              receiveDept:[],
              receiver:[],
              receiveTag:[],
              bodyType:null,
              title:null,
              retry:1,
              signature:null,
              content:null,
              remark:null,
            });
          }
        },
        // 返回按钮
        backPage(){
          this.$parent.tableButton(7);
        },
        //方式选中
        selectChange(val){
          let self = this;
          for(let i=0;i<self.typeList.length;i++){
            if(val == self.typeList[i].typeId){
              this.$set(this.newData,'alarmType',self.typeList[i].alarmType);
              this.$set(this.newData,'category',self.typeList[i].category);
            }
          }
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              let obj = JSON.parse(JSON.stringify(this.newData))
              let newObj = {
                templateName:obj.templateName,
                typeId:obj.typeId,
                businessType:obj.businessType,
                alarmType:obj.alarmType,
                category:obj.category,
                content:obj.content,
                remark:obj.remark,
              }
              if(obj.alarmType == 1 && obj.category == 1){
                newObj.agentId = obj.agentId;
                newObj.receiveDept = obj.receiveDept+'';
                newObj.receiver = obj.receiver+'';
                newObj.bodyType = obj.bodyType;
                newObj.signature = obj.signature;
              }else if (obj.alarmType == 1 && obj.category == 2){
                newObj.bodyType = obj.bodyType;
                newObj.signature = obj.signature;
              }else if (obj.alarmType == 2){
                newObj.agentId = obj.agentId;
                newObj.receiveDept = obj.receiveDept+'';
                newObj.receiver = obj.receiver+'';
                newObj.receiveTag = obj.receiveTag+'';
                newObj.bodyType = obj.bodyType;
              }else if (obj.alarmType == 3){
                newObj.title = obj.title;
                newObj.receiver = obj.receiver+'';
              }else if (obj.alarmType == 4){
                newObj.bodyType = obj.bodyType;
                newObj.receiver = obj.receiver+'';
                newObj.retry = obj.retry;
              }else if (obj.alarmType == 5){
                newObj.agentId = obj.agentId;
                newObj.bodyType = 0;
                newObj.receiver = obj.receiver+'';
                newObj.signature = obj.signature;
              }
              if(obj.templateId){
                newObj.templateId = obj.templateId;
                iotAlarmTemplateUpdate(newObj).then(response => {
                  this.msgSuccess(response.message)
                  this.backPage();
                });
              }else{
                iotAlarmTemplateAdd(newObj).then(response => {
                  this.msgSuccess(response.message)
                  this.backPage();
                });
              }
            }
          })
        }
      }
    }
  </script>

  <style scoped lang="scss">
    .messageTemplateAddPage{
      .content-box{
        flex:1;
        display: flex;
        margin: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;
        }
      }
      .button-box{
        display: flex;
        padding:20px 0;
        .null-p{
          flex:1;
        }
        .button-p{
          width:100px;
        }
      }
    }
  </style>
