<template>
  <div class="inputs" ref="inputs" :style="{textAlign: textAlign}">
    <ht-input
      :width="width"
      style="width:100%;"
      size="small"
      :validate="inputValidate"
      :name="inputName"
      :placeholder="placeholder ? placeholder : '请输入内容'"
      v-model="inputVal"
      :ref="this.atter"
      type="textarea"
      :disabled="isInputEdit == 'true' ? true : false"
      v-if="!isEditor && type != 'property-text'"
      :permission="permission_sub"
    ></ht-input>
    <!-- <span v-if="type=='property-text' &&!isEditor && permission_sub!='n'" v-html="inputVal"></span> -->
    <vue-ueditor-wrap
      class="property_text"
      v-if="type == 'property-text' && !isEditor && permission_sub != 'n'"
      v-model="inputVal"
      :config="config_text"
    ></vue-ueditor-wrap>
    <vue-ueditor-wrap
      :ref="this.atter"
      v-model="inputVal"
      :config="config"
      v-if="isEditor && permission_sub != 'n'"
    ></vue-ueditor-wrap>
    <!--用来控制富文本校验-->
    <ht-input
      size="small"
      :validate="inputValidate"
      :permission="permission_sub"
      :name="inputName"
      v-if="isEditor"
      v-model="inputVal"
      :ref="this.atter"
      v-show="false"
      type="input"
    ></ht-input>
  </div>
</template>

<script>
import utils from '@/utils.js'
import hotentUiUtils from '@/hotent-ui-util.js'
import {Base64} from 'js-base64'
import sub_pio_mixin from '@/sub-permission-mixin.js'
export default {
  name: 'eip-textarea',
  props: [
    'validate',
    'value',
    'name',
    'permission',
    'atter',
    'type',
    'initialFrameHeight',
    'initialFrameWidth',
    'placeholder',
    'isEditor',
    'noToolbar',
    'isInputEdit',
    'textValue',
    'precision',
    'textAlign'
  ],
  mixins: [sub_pio_mixin], //混入方式引入表单组件中公共属性，处理子表、孙表行内联动（切面修改permission_sub）
  data() {
    return {
      config_text: {
        initialFrameHeight: 50,
        UEDITOR_HOME_URL:
          window.location.origin +
          '/' +
          window.location.pathname.split('/')[1] +
          '/static/ueditor/',
        toolbars: [],
        elementPathEnabled: false, //是否启用元素路径，默认是true显示
        wordCount: false, //是否开启字数统计
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 99,
        enableAutoSave: false,
        readonly: true
      },
      width: '100%',
      unwatchAry: [],
      newValidate: null,
      data: {}
    }
  },
  methods: {
    getObjectValue(text, t, v) {
      let start = ''
      let end = ''
      if (!text && v) {
        return v
      }
      //start = text.substring(0, text.indexOf("{"));
      //end = text.substring(text.lastIndexOf("}") + 1, text.length);
      let val2 = text
        .substring(text.indexOf('{') + 2, text.indexOf('}'))
        .split('.')
      if (val2.length == 1) {
        return text
      }
      let rtn = ''
      let regVal = null
      let reg = /\{\{[\.\d\w]+\}\}/
      let check = new RegExp('[\u4e00-\u9fa5]')
      //从左到右遍历text，将匹配到的bo数据替换到返回值中
      while ((regVal = reg.exec(text)) != null) {
        rtn += text.substr(0, regVal.index)
        let val = regVal[0]
        if (
          check.test(val.replace(/(\{\{)|(\}\})/g, '')) ||
          !val.startsWith('{{data.')
        ) {
          rtn += val
          text = text.substr(regVal.index + val.length)
          continue
        }
        let length = val.length
        val = val.replace(/(\{\{)|(\}\})/g, '')
        let arr = val.split('.').splice(1)
        if (arr.length == 2) {
          //主表     ["mainEnt", "field"]
          if (t.data[arr[0]][arr[1]]) {
            rtn += t.data[arr[0]][arr[1]]
          }
          text = text.substr(regVal.index + length)
        } else if (arr.length == 3) {
          //子表     ["mainEnt", "sub_"+"subEnt", "field"]
          let subIndex = utils.getSomeAttributeFromParentElement(
            t.$el,
            'sub-index'
          ) //子表下标
          let curData = t.data[arr[0]][arr[1]][subIndex] //子表单行数据
          if (curData[arr[2]]) {
            rtn += curData[arr[2]]
          }
          text = text.substr(regVal.index + length)
        }
      }
      //添加剩下的数据到返回值中
      if (text) {
        rtn += text
      }
      return rtn
      // let check = new RegExp("[\u4e00-\u9fa5]");
      // val = val.filter(v =>{
      //   return v != "data";
      // })
      // if(check.test(val)){
      //   return text;
      // }
      // if(val.length==2){//主表
      //   if(t.data[val[0]][val[1]]){
      //     return start + t.data[val[0]][val[1]] + end;
      //   }else if(!start && !end){
      //     return "''";
      //   }
      //   return start + "" + end;
      // }else  if(val.length==3){//子表
      //   //获取子表的下标
      //   let subIndex = utils.getSomeAttributeFromParentElement(t.$el,"sub-index");
      //   let attrArr = t.atter.split(".");
      //   let attr = attrArr[attrArr.length -1];
      //   let data = t.data[val[0]][val[1]];
      //   data.forEach(v =>{
      //     if(v[val[2]] != v[attr]){
      //       v[attr] = start +v[val[2]] + end;
      //     }
      //   })
      //   if (start + data[subIndex][val[2]] + end) {
      //     return start + data[subIndex][val[2]] + end;
      //   }else if(!start && !end){
      //     return "''";
      //   }
      // }
    },
    getField(data, fieldArr) {
      if (!data || !fieldArr || fieldArr.length < 3 || fieldArr[0] != 'data') {
        return ''
      }
      if (fieldArr.length == 3) {
        //子表
      }
    }
  },
  computed: {
    inputVal: {
      get() {
        let _this = this
        _this.data = _this.$parent.$vnode.context.$vnode.context.data
        let text = ''
        if (this.textValue) {
          text = Base64.decode(this.textValue)
        }
        if (!this.value) {
          let moment = require('moment')
          if (text) {
            setTimeout(() => {
              let isJoin = false
              if (text.indexOf('{发起时间:startDate}') != -1) {
                text = text.replace(
                  /\{发起时间:startDate}/g,
                  '发起时间:' + moment().format('YYYY-MM-DD') + ' '
                )
                isJoin = true
              }
              if (text.indexOf('{发起人:startUser}') != -1) {
                let currentUser = this.$store.state.user.currentUserDetail.user
                text = text.replace(
                  /\{发起人:startUser}/g,
                  '发起人:' + currentUser.fullname + ' '
                )
                isJoin = true
              }
              if (text.indexOf('{所在部门:userOrg}') != -1) {
                let currentOrg = this.$store.state.user.currentOrgDetail
                var name = '无'
                if (currentOrg && currentOrg.name) {
                  name = currentOrg.name
                }
                text = text.replace(
                  /\{所在部门:userOrg}/g,
                  '所在部门:' + name + ' '
                )
                isJoin = true
              }
              if (!isJoin) {
                text = _this.getObjectValue(text, _this)
              }
              this.$emit('input', text)
              return text
            }, 900)
          }
        } else {
          return _this.getObjectValue(text, _this, this.value)
        }
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    text: function() {
      if (this.textValue) {
        return Base64.decode(this.text)
      }
    },
    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()
      }
    },
    inputValidate: function() {
      if (this.newValidate) {
        return this.newValidate
      }
      return this.validate
    },
    config: function() {
      let configTemp = {
        initialFrameHeight: 240,
        UEDITOR_HOME_URL:
          window.location.origin +
          '/' +
          window.location.pathname.split('/')[1] +
          '/static/ueditor/',
        toolbars: [
          [
            // 'source', //源代码
            'undo', //撤销
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'forecolor', //字体颜色
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'fontfamily', //字体
            'fontsize', //字号
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'lineheight', //行间距
            'inserttable', //插入表格
            'link', //超链接
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'attachment' //附件
          ]
        ],
        elementPathEnabled: false, //是否启用元素路径，默认是true显示
        wordCount: false, //是否开启字数统计
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 90,
        enableAutoSave: false,
        readonly: false
      }
      //是否显示工具栏
      if (this.noToolbar || this.permission_sub == 'r') {
        configTemp.toolbars = []
      }
      return configTemp
    }
  },
  async mounted() {
    const {subScopeEl, index} = hotentUiUtils.getSubScopeElAndIndex(this.$el)
    //如果是编辑或者必填的情况下。但是该行不允许编辑，则将权限修改为只读
    if (
      subScopeEl &&
      (subScopeEl.getAttribute('row_readonly') == 'true' ||
        subScopeEl.getAttribute('row_readonly') === true) &&
      (this.permission_sub == 'w' || this.permission_sub == 'b')
    ) {
      this.permission_sub = 'r'
    }

    if (this.initialFrameHeight) {
      this.config.initialFrameHeight = this.initialFrameHeight
    }
    if (this.initialFrameWidth) {
      this.config.initialFrameWidth = this.initialFrameWidth
    }
    if (this.isInputEdit || this.permission_sub == 'r') {
      this.config.readonly = true
    }
  },
  created() {
    this.$validator = this.$root.$validator
  }
}
</script>
<style lang="scss" scoped>
div[aria-invalid='true'] ::v-deep .el-input__inner,
div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
  border-color: #f56c6c;
}

div .property_text ::v-deep .edui-default ::v-deep .edui-editor {
  border: 0;
}
</style>
