<template>
  <div>
    <div>{{template}}</div>
    <div>{{formulainfo.example}}</div>
    <div v-for="(item,index) in formulainfo.arguments" :key="index" class="mg-t-20">
      <div>
        <span>参数{{(index+1)}}({{formulainfo.template.args[index].m}})：</span>
        <span>
          <template v-if="(typeof item)=='object' && (item.type == 'Element' || item.type == 'ParamData')">
            <el-tag>{{item.name}}</el-tag>
          </template>
          <template v-else>
            <el-input v-model="formulainfo.arguments[index]" placeholder="请输入内容" style="width:200px"></el-input>
          </template>
        </span>
        <el-link type="primary" @click="changeType('text',index)" class="mg-l-10">输入文本</el-link>
        <el-link type="primary" @click="changeType('ele',index)" class="mg-l-10">选择元素</el-link>
        <el-link type="primary" @click="setCurEle(index)" class="mg-l-10">当前元素</el-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "formulaTemplate",
  props: {
    formulainfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
    curele: {
      type: Object,
      default: function () {
        return {};
      }
    },
  },
  data(){
    return{
      template:'',

    }
  },
  mounted(){
    this.template = this.formulainfo.template.ft;
    //console.log(this.formulainfo.template)
    this.formulainfo.template.args.forEach(element => {
      //console.log(element)
      this.template = this.template.replace(element.key,element.m)
    });
  },
  methods:{
    //切换选择的状态
    changeType(type,index){
      if(type == 'text'){
        this.$set(this.formulainfo.arguments,index,'');
      }else if(type == 'ele'){
        this.$emit('sele-ele-handle',{
          arguments:this.formulainfo.arguments,
          index
        })
      }
    },

    //选择当前元素
    setCurEle(index){
      this.$set(this.formulainfo.arguments,index,this.curele);
    }
  }
}
</script>
<style scoped lang="scss">
  
</style>