<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"@/components/bizComponents/utils.js";
import FormMath from "@/components/bizComponents/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) {
		if(this.option.decimalDigits){
			val = val.toFixed(this.option.decimalDigits);
		}
        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.$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>