<template>
  <el-form label-width="80px" :model="formmodel" :rules="rules" ref="ruleForm">
    <el-form-item label="AppId" required prop="name"><el-input @change="changeFunc"  v-model="formmodel.name"></el-input></el-form-item>
    <el-form-item label="页面路径"><el-input @change="changeFunc" v-model="formmodel.url"></el-input></el-form-item>
    <el-form-item label="">
      <p>注意一：同一个小程序链接其他小程序，最多只能链接10个，超过将不生效</p>
      <p>注意二：不能填写自身小程序appid</p>
      <p>注意三：小程序链接留空默认跳到小程序首页</p>
<!--      <p>注意四：需要于路径末尾填写appid信息，格式为&naviAppId=（此处填写需要跳转的appid）</p>-->
    </el-form-item>
  </el-form>
</template>

<script>
  export default{
    data(){
      return {
        /*form模型*/
        formmodel: {
          type:'小程序',
          url:'/',
          name:null
        },
        ruleForm: {
          name:''
        },
        rules: {
          name: [
            {required: true, message: 'appId不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.changeFunc();
    },
    methods:{
      /*选中的值*/
      changeFunc(e){
        if(!this.formmodel.url) {
          this.formmodel.url = '/';
        }
        this.formmodel.url = updateQueryStringParameter( this.formmodel.url, 'naviAppId',  this.formmodel.name);

        function updateQueryStringParameter(uri, key, value) {
          if(!value) {
            return uri;
          }
          var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
          var separator = uri.indexOf('?') !== -1 ? "&" : "?";
          if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
          }
          else {
            return uri + separator + key + "=" + value;
          }
        }

        this.$emit('changeData',this.formmodel);
      }
    }
  }
</script>

<style>
</style>
