<template>
  <div class="page-container externalLink-addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{dialogForm.linkId?'编辑':'新增'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form :model="dialogForm" class="dialogForm" ref="dialogForm"
               :rules="rules" style="width:100%;" label-width="110px">
        <div class="externalLink-dialog-big-box">
          <div class="externalLink-dialog-left-box">
            <el-form-item label="名称：" prop="linkName">
              <el-input
                maxLength="20"
                v-model="dialogForm.linkName"
                placeholder="请输入名称"
                clearable
                style="width: 280px"
              />
            </el-form-item>
            <el-form-item label="链接地址：" prop="linkUrl">
              <el-input
                maxLength="50"
                v-model="dialogForm.linkUrl"
                placeholder="请输入链接地址"
                clearable
                style="width: 280px">
              </el-input>
            </el-form-item>
            <el-form-item label="跳转类型：" prop="skipType">
              <el-radio-group v-model="dialogForm.skipType">
                <el-radio :label="false" style="width:70px;">当前窗口</el-radio>
                <el-radio :label="true" style="width:70px;">新窗口</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="登录验证：" prop="isAuth">
              <el-radio-group v-model="dialogForm.isAuth">
                <el-radio :label="false" style="width:70px;">否</el-radio>
                <el-radio :label="true" style="width:70px;">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="认证方式：" prop="authMode">
              <el-radio-group v-model="dialogForm.authMode">
                <el-radio :label=0 style="width:70px;">无</el-radio>
                <el-radio :label=2 style="width:70px;">cookie</el-radio>
                <el-radio :label=1 style="width:70px;">携参</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="请求地址：" prop="reqApi" v-if="dialogForm.isAuth">
              <el-input
                maxLength="50"
                v-model="dialogForm.reqApi"
                placeholder="请输入请求地址"
                clearable
                style="width: 280px">
                <template slot="prepend">http://</template>
              </el-input>
            </el-form-item>
            <el-form-item label="请求类型：" prop="reqMethod" v-if="dialogForm.isAuth">
              <el-radio-group v-model="dialogForm.reqMethod">
                <el-radio label="post" style="width:60px;">POST</el-radio>
                <el-radio label="get" style="width:60px;">GET</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="参数类型：" prop="paramType" v-if="dialogForm.isAuth&&dialogForm.reqMethod == 'post'">
              <el-radio-group v-model="dialogForm.paramType">
                <el-radio label="JSON" style="width:60px;">JSON</el-radio>
                <el-radio label="formData" style="width:60px;">formData</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="externalLink-dialog-center-box scrollbar-box" v-if="dialogForm.isAuth">
            <el-form-item label="请求参数：" prop="requestArgument">
              <div class="for-custom-parameter-max-big-box" v-for="(item,index) in dialogForm.requestArgument" :key="index">
                <div class="input-box">
                  <el-select v-model="item.type" placeholder="请选择参数类型" clearable size="small">
                    <el-option
                      v-for="dict in requestArgumentOptions"
                      :key="dict.value"
                      :label="dict.name"
                      :value="dict.value"
                    />
                  </el-select>
                  <el-input class="top-border" maxLength="30"
                            v-model="item.key" :placeholder="item.type == 1 || item.type == 5?'请输入key':'请输入查询key'"/>
                  <el-input class="top-border" v-if="item.type != 5" maxLength="100"
                            v-model="item.value" :placeholder="item.type == 1?'请输入value':'请输入提交key'"/>
                  <el-select class="top-border" v-model="item.num" v-if="item.type == 5" placeholder="请选择时间戳长度" clearable size="small">
                    <el-option key="10" label="10位时间戳" value="10"/>
                    <el-option key="13" label="13位时间戳" value="13"/>
                  </el-select>
                </div>
                <div class="del-button-box" @click="delRequestArgument(index)">
                  <p class="del-button-null"></p>
                  <p class="del-button el-icon-remove"></p>
                  <p class="del-button-null"></p>
                </div>
              </div>
              <p class="el-icon-circle-plus-outline add-button" @click="addRequestArgument" v-if="!dialogForm.requestArgument[4]"></p>
            </el-form-item>
          </div>
          <div class="externalLink-dialog-right-box scrollbar-box" v-if="dialogForm.authMode == '1'">
            <el-form-item label="携带参数：" prop="carryArgument">
              <div class="for-custom-parameter-max-big-box" v-for="(item,index) in dialogForm.carryArgument" :key="index">
                <div class="input-box">
                  <el-select v-model="item.type" placeholder="请选择参数类型" clearable size="small">
                    <el-option
                      v-for="dict in carryArgumentOptions"
                      :key="dict.value"
                      :label="dict.name"
                      :value="dict.value"
                    />
                  </el-select>
                  <el-input class="top-border" maxLength="30"
                            v-model="item.key" :placeholder="item.type == 1 || item.type == 5?'请输入key':'请输入查询key'"/>
                  <el-input class="top-border" v-if="item.type != 5" maxLength="100"
                            v-model="item.value" :placeholder="item.type == 1?'请输入value':'请输入提交key'"/>
                  <el-select class="top-border" v-model="item.num" v-if="item.type == 5" placeholder="请选择时间戳长度" clearable size="small">
                    <el-option key="10" label="10位时间戳" value="10"/>
                    <el-option key="13" label="13位时间戳" value="13"/>
                  </el-select>
                </div>
                <div class="del-button-box" @click="delCarryArgument(index)">
                  <p class="del-button-null"></p>
                  <p class="del-button el-icon-remove"></p>
                  <p class="del-button-null"></p>
                </div>
              </div>
              <p class="el-icon-circle-plus-outline add-button" @click="addCarryArgument" v-if="!dialogForm.carryArgument[4]"></p>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { systemLinkAdd,systemLinkUpdate } from "@/api/serviceCenter/index";
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  export default {
    name: 'addPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        dialogForm:{},
        rules:{
          linkName:[
            { required: true, message: '请输入名称', trigger: 'blur' },
            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          linkUrl:[
            { required: true, message: '请输入链接地址', trigger: 'blur' },
            { required: true, message: "请输入链接地址", validator: this.spaceJudgment, trigger: "blur" }
          ],
          skipType:[
            { required: true, message: '请选择跳转类型', trigger: 'blur' },
            { required: true, message: "请选择跳转类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
          isAuth:[
            { required: true, message: '请选择登录验证', trigger: 'blur' },
            { required: true, message: "请选择登录验证", validator: this.spaceJudgment, trigger: "blur" }
          ],
          authMode:[
            { required: true, message: '请选择认证方式', trigger: 'blur' },
            { required: true, message: "请选择认证方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
          reqMethod:[
            { required: true, message: '请选择请求类型', trigger: 'blur' },
            { required: true, message: "请选择请求类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
          paramType:[
            { required: true, message: '请选择参数类型', trigger: 'blur' },
            { required: true, message: "请选择参数类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
          reqApi:[
            { required: true, message: '请输入请求地址', trigger: 'blur' },
            { required: true, message: "请输入请求地址", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        requestArgumentOptions:[
          {name:'数据',value:'1'},
          {name:'cookie',value:'2'},
          {name:'localStorage',value:'3'},
          {name:'sessionStorage',value:'4'},
          {name:'timestamp',value:'5'},//13位10位
        ],
        carryArgumentOptions:[
          {name:'数据',value:'1'},
          {name:'回调数据',value:'6'},
          {name:'cookie',value:'2'},
          {name:'localStorage',value:'3'},
          {name:'sessionStorage',value:'4'},
          {name:'timestamp',value:'5'},//13位10位
        ],
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        this.$set(this,'dialogForm',this.propsData);
      },
      //新增请求参数
      addRequestArgument(){
        this.dialogForm.requestArgument.push({
          type:'',
        })
      },
      //删除请求参数
      delRequestArgument(index){
        this.dialogForm.requestArgument.splice(index,1);
      },
      //新增携带参数
      addCarryArgument(){
        this.dialogForm.carryArgument.push({
          type:'',
          key:'',
          value:'',
          num:'',
        })
      },
      //删除携带参数
      delCarryArgument(index){
        this.dialogForm.carryArgument.splice(index,1);
      },
      //新增接口
      systemLinkAdd(obj){
        systemLinkAdd(obj).then(response => {
          this.msgSuccess(response.message)
          this.backPage();
        });
      },
      //编辑接口
      systemLinkUpdate(obj){
        systemLinkUpdate(obj).then(response => {
          this.msgSuccess(response.message)
          this.backPage();
        });
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(4);
      },
      /** 提交按钮 */
      submitForm() {
        let self = this;
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            //检查请求参数
            if(this.dialogForm.isAuth){
              if(!this.dialogForm.requestArgument[0]){
                this.msgError('请添加请求参数')
                return
              }
              for(let i=0;i<self.dialogForm.requestArgument.length;i++){
                if(!self.dialogForm.requestArgument[i].type){
                  this.msgError('请选择第 '+(i+1)+' 条,请求参数的参数类型')
                  return
                }else if(self.dialogForm.requestArgument[i].type != 5){
                  if(!self.dialogForm.requestArgument[i].key){
                    this.msgError('请输入第 '+(i+1)+self.dialogForm.requestArgument[i].type == 1?' 条,请求参数的key':' 条,请求参数的查询key')
                    return
                  }else if(!self.dialogForm.requestArgument[i].value){
                    this.msgError('请输入第 '+(i+1)+self.dialogForm.requestArgument[i].type == 1?' 条,请求参数的value':' 条,请求参数的提交key')
                    return
                  }
                }else if(self.dialogForm.requestArgument[i].type == 5){
                  if(!self.dialogForm.requestArgument[i].key){
                    this.msgError('请输入第 '+(i+1)+' 条,请求参数的key')
                    return
                  }else if(!self.dialogForm.requestArgument[i].num){
                    this.msgError('请选择第 '+(i+1)+' 条,请求参数的时间戳长度')
                    return
                  }
                }
              }
            }
            //检查携带参数
            if(this.dialogForm.authMode == 1){
              if(!this.dialogForm.carryArgument[0]){
                this.msgError('请添加携带参数')
                return
              }
              for(let i=0;i<self.dialogForm.carryArgument.length;i++){
                if(!self.dialogForm.carryArgument[i].type){
                  this.msgError('请选择第 '+(i+1)+' 条,携带参数的参数类型')
                  return
                }else if(self.dialogForm.carryArgument[i].type != 5){
                  if(!self.dialogForm.carryArgument[i].key){
                    this.msgError('请输入第 '+(i+1)+self.dialogForm.carryArgument[i].type == 1?' 条,携带参数的key':' 条,携带参数的查询key')
                    return
                  }else if(!self.dialogForm.carryArgument[i].value){
                    this.msgError('请输入第 '+(i+1)+self.dialogForm.carryArgument[i].type == 1?' 条,携带参数的value':' 条,携带参数的提交key')
                    return
                  }
                }else if(self.dialogForm.carryArgument[i].type == 5){
                  if(!self.dialogForm.carryArgument[i].key){
                    this.msgError('请输入第 '+(i+1)+' 条,携带参数的key')
                    return
                  }else if(!self.dialogForm.carryArgument[i].num){
                    this.msgError('请选择第 '+(i+1)+' 条,携带参数的时间戳长度')
                    return
                  }
                }
              }
            }
            //数据处理
            let requestArgument = [];
            let carryArgument = [];
            this.dialogForm.requestArgument.forEach((item)=>{
              let minObj = {
                type:item.type
              }
              if(item.type != 5){
                minObj.key = item.key;
                minObj.value = item.value;
              }else if(item.type == 5){
                minObj.key = item.key;
                minObj.num = item.num;
              }
              requestArgument.push(minObj)
            })
            this.dialogForm.carryArgument.forEach((item)=>{
              let minObj = {
                type:item.type
              }
              if(item.type != 5){
                minObj.key = item.key;
                minObj.value = item.value;
              }else if(item.type == 5){
                minObj.key = item.key;
                minObj.num = item.num;
              }
              carryArgument.push(minObj)
            })
            let params = {
              requestArgument:requestArgument,
              carryArgument:carryArgument,
            }
            let obj = {
              linkName:this.dialogForm.linkName,
              linkUrl:this.dialogForm.linkUrl,
              skipType:this.dialogForm.skipType,
              isAuth:this.dialogForm.isAuth,
              authMode:this.dialogForm.authMode,
              reqApi:this.dialogForm.isAuth?this.dialogForm.reqApi:'',
              reqMethod:this.dialogForm.isAuth?this.dialogForm.reqMethod:'',
              paramType:this.dialogForm.reqMethod == 'post'?this.dialogForm.paramType:'',
              params:JSON.stringify(params),
            };
            if(this.dialogForm.linkId){
              obj.linkId = this.dialogForm.linkId
              this.systemLinkUpdate(obj);
            }else{
              this.systemLinkAdd(obj);
            }
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .externalLink-addPage{
    .content-box{
      flex:1;
      display: flex;
      overflow: hidden;
      padding:20px 0;
      .dialogForm{
        flex:1;
        display: flex;
        overflow: hidden;
        .externalLink-dialog-big-box{
          display: flex;
          flex:1;
          overflow: hidden;
          .externalLink-dialog-left-box{
            padding:20px;
            width:500px;
          }
          .externalLink-dialog-center-box{
            padding:20px;
            width:500px;
            border-left:1px dashed #dedede;
          }
          .externalLink-dialog-right-box{
            padding:20px;
            width:500px;
            border-left:1px dashed #dedede;
          }
          .for-custom-parameter-max-big-box{
            display: flex;
            width:260px;
            margin-bottom:20px;
            .input-box{
              flex:1;
              border: 1px solid #999;
              border-right:none;
              border-top-left-radius:4px;
              border-bottom-left-radius:4px;
              .top-border{
                border-top:1px solid #999;
              }
              ::v-deep .el-input--suffix{
                border:none;
              }
              ::v-deep .el-input__inner{
                border:none;
              }
            }
            .del-button-box{
              display: flex;
              flex-direction: column;
              width:30px;
              background-color: #FF6666;
              border:1px solid #FF6666;
              border-top-right-radius:4px;
              border-bottom-right-radius:4px;
              cursor: pointer;
              .del-button-null{
                flex:1;
              }
              .del-button{
                line-height:83px;
                text-align: center;
                font-size:20px;
                color:#fff;
              }
            }
          }
          .add-button{
            width:260px;
            height:40px;
            line-height:40px;
            text-align: center;
            font-size:20px;
            color:#fff;
            background-color: #0183FA;
            border:1px solid #0183FA;
            border-radius:4px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
