<template>
  <div>
    <div v-if="isShow">
      <span class="mg-r-10">日期增减</span>
      <el-button size="small" type="info" @click="showSelectEle">选择参数</el-button>
    </div>
    <div class="text-warning" v-if="isShow">
      输入某个固定日期/选择引用某个日期参数+/-固定天数（可选择引用某个参数值，也可输入固定值）
    </div>
    <div class="mg-t-10 flex jc-al-c">
      <template>
        <el-tag closable v-if="arg0Name" @close="deleteEle('0')">{{arg0Name}}</el-tag>
        <el-input v-else :value="''" @focus="curFocusIndex = 1" placeholder="引用参数名称" size="medium" style="width:100px"></el-input>
      </template>
      
      <span style="font-size:35px" class="mg-l-20 mg-r-20">/</span>
      <el-date-picker v-model="dateValue" type="date" :size="inputSize" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="dateChange"></el-date-picker>
      <el-select v-model="operator" @change="operChange" placeholder="请选择" :size="inputSize" style="width:100px" class="mg-l-20 mg-r-20">
        <el-option label="+" value="+"></el-option>
        <el-option label="-" value="-"></el-option>
      </el-select>

      <template>
        <el-tag closable v-if="arg1Name" @close="deleteEle('1')">{{arg1Name}}</el-tag>
        <el-input v-else :value="''" @focus="curFocusIndex = 2" :size="inputSize" placeholder="参数名称" style="width:100px"></el-input>
      </template>

      <span style="font-size:35px" class="mg-l-20 mg-r-20">/</span>
      <el-input v-model="input" placeholder="输入值" :size="inputSize" @change="inputChange" style="width:100px"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "dateDeviation",
  props: {
    formulainfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
    curele: {
      type: Object,
      default: function () {
        return {};
      }
    },
    isShow:{
      type:Boolean,
      default:true
    },
    inputSize:{
      type:String,
      default:'medium'
    }
  },
  data(){
    return{
      dateValue:'',
      operator:'+',
      input:'',
      arg0Name:"",
      arg1Name:"",

      curFocusIndex:0,
    }
  },
  mounted(){
    //console.log(this.formulainfo.arguments[0])
    //console.log(this.formulainfo.arguments[1])
    let arg0 = this.formulainfo.arguments[0];
    let arg1 = this.formulainfo.arguments[1];
    if(this.isELe(arg0)){
      this.arg0Name = arg0.name;
    }else{
      this.dateValue = arg0;
    }

    if(this.isELe(arg1)){
      this.arg1Name = arg1.name;
    }else{
      this.input = arg1;
    }
  },
  methods:{
    showSelectEle(){
      this.$set(this.formulainfo,'showSelectEle',!this.formulainfo.showSelectEle);
    },

    deleteEle(type){
      if(type == '0'){
        if(this.formulainfo.arguments[0]){
          this.$emit('uncheck',this.formulainfo.arguments[0].id)
        }
        this.arg0Name = '';
        this.formulainfo.arguments[0] = undefined;
      }else if(type == '1'){
        if(this.formulainfo.arguments[1]){
          this.$emit('uncheck',this.formulainfo.arguments[1].id)
        }
        this.arg1Name = '';
        this.formulainfo.arguments[1] = undefined;
      }
    },

    isELe(ele){
      if(typeof ele == 'object' && ele != null){
        return true;
      }
      return false;
    },

    dateChange(value){
      this.arg0Name = '';
      if(this.formulainfo.arguments[0]){
        this.$emit('uncheck',this.formulainfo.arguments[0].id)
      }
      this.formulainfo.arguments[0] = value;
    },

    inputChange(value){
      if(this.formulainfo.arguments[1]){
        this.$emit('uncheck',this.formulainfo.arguments[1].id)
      }
      this.arg1Name = '';
      this.formulainfo.arguments[1] = value;
    },

    operChange(value){
      if(!this.isELe(this.formulainfo.arguments[1])){
        if(value == '-'){
          this.formulainfo.arguments[1] = value + this.input;
        }else{
          this.formulainfo.arguments[1] = this.input;
        }
      }
    },

    setELe(ele){
      if(this.curFocusIndex){
        let obj = {
          type:'Element',
          name:ele.eName,
          id:ele.id,
          selected:false,
          tableElementKey:ele.tableElementKey,
          children:[],
        }
        if(this.curFocusIndex == 1){
          if(this.formulainfo.arguments[0]){
            this.$emit('uncheck',this.formulainfo.arguments[0].id)
          }
          this.formulainfo.arguments[0] = obj;
          this.arg0Name = obj.name;
          this.dateValue = '';
        }else if(this.curFocusIndex == 2){
          if(this.formulainfo.arguments[1]){
            this.$emit('uncheck',this.formulainfo.arguments[1].id)
          }
          this.formulainfo.arguments[1] = obj;
          this.arg1Name = obj.name;
          this.input = '';
        }

        //this.curFocusIndex = 0;
      }
    }
  }
}
</script>
<style scoped lang="scss">
  
</style>