<template>
  <div class="inputs" ref="inputs" v-express>
    <el-tooltip :placement="tooltipplacement||$tooltipplacement" :disabled="inputWriteable && !errors.has('custom-form.'+inputName)">
      <div  slot="content">{{errors.first('custom-form.'+inputName)}}</div>
      <el-input-number 
          size="small"
          v-if="inputWriteable"
          v-validate="inputValidate"
          :name="inputName"
          :placeholder="placeholder?placeholder:'请输入内容'"
          clearable
          v-model="inputVal"
          :ref="this.atter"
          controls-position="right"
          :min="min" 
          :max="max"
          :step="step">
      </el-input-number>
    </el-tooltip>
    <span v-if="!inputWriteable && option.filterthousandBit=='thousandBit'"> {{inputVal | numFilter(option.filterthousandBit) }} </span>
    <span v-else-if="!inputWriteable  && option.filtercurrency=='currency'"> {{inputVal | numFilter(option.filtercurrency) }} </span>
    <span v-else-if="!inputWriteable"> {{inputVal}} </span>
		<span style="display:none;" v-validate>
      <slot name="labeldesc">{{inputName}}</slot>
    </span>
  </div>
</template>
<script>
import utils from "@/utils.js";
import FormMath from "@/math.js";
import { Message } from "element-ui";

export default {
  name: "ht-input",
  props: [
    "validate",
    "value",
    "name",
    "permission",
    "atter",
    "inputType",
    "placeholder",
    "tooltipplacement",
		"htfuncexp",
	  "option"
  ],
  data() {
    return {
    };
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    inputWriteable: function() {
      return utils.getWriteable(this.permission);
    },
    inputValidate: function() {
      var validateObj = this.$store.state.index.validate;
      return utils.addRequiredOrNot(
        this.permission,
        this.validate,
        validateObj,
        this
      );
    },
    inputName: function() {
      let labeldesc = "";
      if(this.$slots && this.$slots.labeldesc && this.$slots.labeldesc[0].children && this.$slots.labeldesc[0].children[0].text ){
        labeldesc = this.$slots.labeldesc[0].children[0].text;
        return this.name ? this.name : utils.getName()+ "-" +labeldesc;
      }else{
        return this.name ? this.name : utils.getName();
      }
    },
	min: function(){
		return this.option.min || 0;
	},
	max: function(){
		return this.option.max || 999999;
	},
	step: function(){
		return this.option.step || 1;
	}
  },
  mounted() {
		let _me = this;
	 const exp = this.htfuncexp;
	 if (exp) {
	   const elAttr = this.$refs.inputs.getAttribute("attr");
	   
	   const fields = FormMath.parseFuncexpField(exp);
	   const formVm = utils.getOnlineFormInstance(_me);
	   formVm.$on(elAttr, function(args) {
	     if (args.hasOwnProperty("index")) {
	       const subScopeEl = utils.getParentElementByAttribute(
	         _me.$el,
	         "data-subname"
	       );
	       if (!subScopeEl) {
	         throw "要计算子表行数据的输入框不在包含data-subname属性的元素中.";
	       }
	       const index = subScopeEl.dataset["index"];
	       if (index === undefined) {
	         throw "要计算的子表行未获取到index属性.";
	       }
	       if (index === args.index) {
	         _me.$emit("input", args.result);
	       }
	     } else {
	       _me.$emit("input", args.result);
	     }
	   });
	   fields.forEach(ele => {
	     if (formVm.watchMap.has(ele)) {
	       let ary = formVm.watchMap.get(ele);
	       ary.push({ target: elAttr, exp });
	       formVm.watchMap.set(ele, ary.unique("target"));
	     } else {
	       formVm.watchMap.set(ele, [{ target: elAttr, exp }]);
	     }
	   });
	 }
  },
  beforeDestroy() {
  },
  created() {
	// this.validate = this.validate + "|between:"+this.min+","+this.max;
    this.$validator = this.$root.$validator;
  },
  destroyed() {
    sessionStorage.removeItem(this.atter);
  }
};
</script>
<style lang="stylus" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
</style>