<template>
  <div class="inputs" ref="inputs">
    <el-input
      type="textarea"
      :name="inputName"
      :placeholder="placeholder?placeholder:'请输入内容'"
      :autosize="{ minRows: 1, maxRows: 4}"
      clearable
      :style="this.styles"
	    v-model="inputValue"
			readonly
      v-html='this.inputValue'
    ></el-input>
	<span style="display:none;"  v-validate>
	  <slot name="labeldesc">{{inputName}}</slot>
	</span>
  </div>
</template>
<script>
import utils from "@/utils.js";
import { Message, Loading } from 'element-ui';
import { Base64 } from "js-base64";
import i18n from '@/lang/index.js';
import req from "@/request.js";

export default {
  name: "ht-realtime-textarea",
  props: ["value", "name", "placeholder", "option","styles"],
  data() {
    return {
      inputValue:"",
    };
  },
  components: {

  },
  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();
      }
    }
  },
  mounted() {
    if(this.value){
      this.inputValue = this.value;
    }
	let _me = this;
	if(this.option.script){
		let htCustomScript = Base64.decode(this.option.script);
		const formVm = utils.getOnlineFormInstance(_me);
		function evil() {
			let Fn = Function('req','data','i18n','Message','Loading','formVm', htCustomScript); //一个变量指向Function，防止有些前端编译工具报错
			let result = Fn(req,formVm.data,i18n,Message,Loading,formVm);
			return result;
		}
		let resultValue = evil();
		if(resultValue){
			this.inputValue = resultValue;
		}
	}
	
  },
  destroyed() {

  },
  created() {
    this.$validator = this.$root.$validator;
  },
  methods: {
    clear(){
		this.inputValue = "";
	}
  }
};
</script>
<style lang="stylus" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.form-table th {
  text-align: left ;
  color: #666;
}

.form-table th > span {
  color: #f00;
}

.form-table th, .form-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}
</style>