<template>
  <div style="float: left;" class="inputs" ref="inputs">
    <div
        style="float: left;"
        v-if="
				permission_sub != 'n' &&
				type == 'number' &&
				bindPreAndSufFix &&
				bindPreAndSufFix.preFix &&
				bindPreAndSufFix.preFix.length > 4
			"
    >
      <el-tooltip
          class="item"
          effect="dark"
          :content="bindPreAndSufFix.preFix"
          placement="top-start"
      >
        <span>{{ bindPreAndSufFix.preFix.substring(0, 4) }}</span>
      </el-tooltip>
    </div>
    <span
        style="float: left;"
        v-else-if="
				permission_sub != 'n' &&
				type == 'number' &&
				bindPreAndSufFix &&
				bindPreAndSufFix.preFix &&
				permission_sub != 'r'
			"
    >
			{{ bindPreAndSufFix.preFix }}
		</span>
    <ht-input
        :class="[
				type == 'number' && permission_sub == 'r'
					? 'readonly_input'
					: 'ht_input',
			]"
        :width="width"
        :style="style_width"
        size="small"
        :validate="inputValidate"
        :placeholder="placeholder ? placeholder : '请输入内容'"
        clearable
        v-model="inputVal"
        :model-expression="modelExpression"
        :name="inputName"
        :ref="atter"
        :type="type"
        :show-password="configAttributes && configAttributes.isPassword"
        :math-exp="mathExp"
        :date-calc-exp="dateCalcExp"
        :min="min"
        :max="max"
        :step="step"
        :step-strictly="stepStrictly"
        :precision="precision"
        :disabled="!isEdit"
        :permission="permission_sub"
        v-if="isShow && permission_sub != 'n'"
        @blur="numberBlur"
        @change="numberChange"
        :format="format"
        :readonly-format="readonlyFormat"
        :readonly="readonly"
    >
      <template
          v-if="
					bindPreAndSufFix && bindPreAndSufFix.preFix && permission_sub != 'r'
				"
          v-slot:prepend
      >
        <span>{{ bindPreAndSufFix.preFix }}</span>
      </template>
      <template
          v-if="
					((bindPreAndSufFix && bindPreAndSufFix.sufSix) || company) &&
					permission_sub != 'r'
				"
          v-slot:append
      >
        <span v-if="company">{{ company }}</span>
        <span v-else>{{ bindPreAndSufFix.sufSix }}</span>
      </template>
    </ht-input>

    <div
        style="float: left;"
        v-if="
				type == 'number' &&
				bindPreAndSufFix &&
				bindPreAndSufFix.sufSix &&
				bindPreAndSufFix.sufSix.length > 4
			"
    >
      <el-tooltip
          class="item"
          effect="dark"
          :content="bindPreAndSufFix.sufSix"
          placement="top-start"
      >
        <span>{{ bindPreAndSufFix.sufSix.substring(0, 4) }}</span>
      </el-tooltip>
    </div>
    <span
        v-else-if="
				type == 'number' &&
				bindPreAndSufFix &&
				bindPreAndSufFix.sufSix &&
				permission_sub != 'r'
			"
    >
			{{ bindPreAndSufFix.sufSix }}
		</span>
    <el-input
        v-if="!isShow"
        v-model="showViewe"
        @focus="numberFocus"
        size="small"
    ></el-input>
    <ht-input
        v-if="
				filterthousandBit && (permission_sub == 'w' || permission_sub == 'b')
			"
        v-model="thousandBit"
        :disabled="true"
        size="small"
    ></ht-input>
    <span
        v-if="company && permission_sub != 'n'"
        :class="[type == 'number' && permission_sub == 'r' ? '' : 'unit']"
    >
			{{ company }}
		</span>
  </div>
</template>
<script>
import utils from '@/utils.js';
import FormMath from '@/math.js';
import sub_pio_mixin from '@/sub-permission-mixin.js';
import { Message } from 'element-ui';
import _ from "lodash";

export default {
  name: 'eip-input',
  props: [
    'readonly',
    'validate',
    'value',
    'name',
    'modelExpression',
    'permission',
    'mathExp',
    'atter',
    'type',
    'dateCalcExp',
    'configAttributes',
    'placeholder',
    'precision',
    'stepStrictly',
    'min',
    'max',
    'filterthousandBit',
    'filtercurrency',
    'step',
    'bindPreAndSufFixjson',
    'company',
  ],
  mixins: [sub_pio_mixin], //混入方式引入表单组件中公共属性，处理子表、孙表行内联动（切面修改permission）
  data() {
    return {
      style_width: 'width:100%',
      width: '100%',
      unwatchAry: [],
      isEdit: true,
      showViewe: '',
      thousandBit: '0',
      format: '',
      isShow: true,
      identityMap: {},
      newValidate: null,
      bindPreAndSufFix: null,
      numberPrefix: false,
    };
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    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;
    },
  },
  async mounted() {
    // const _me = this;
    this.permission_sub = _.cloneDeep(this.permission);
    // const pInst = utils.getOnlineFormInstance(_me);
    this.checkIdentity();
    // //检查流水号
    // if (this.configAttributes) {
    //   this.isEdit = !this.configAttributes.isInputEdit;
    //   //判断是否绑定流水号
    //   if (this.configAttributes.bindIdentityAlias) {
    //     this.isEdit = false;
    //     if (this.value) return;
    //     var alias = this.configAttributes.bindIdentityAlias;
    //     const res = await this.$store.dispatch("menu/getNextIdByAlias", alias);
    //     if (res.state) {
    //       this.$emit("input", res.value);
    //       if (res.value) {
    //         var match = /(\{(.*)\}).*$/.exec(res.value);
    //         //判断流水号中是否表达式如{kjbt.csfjsc}
    //         if (match) {
    //           this.$emit("input", res.value.replace(match[1], ""));

    //           let paramDom = document.querySelector(
    //             '[model-name="data.' + match[2] + '"]'
    //           );
    //           let _me = this;
    //           if (paramDom && paramDom.__vue__) {
    //             paramDom.__vue__.$watch(
    //               "value",
    //               function(newVal, oldVal) {
    //                 if (
    //                   _me.modelExpression == paramDom.__vue__.modelExpression
    //                 ) {
    //                   Message.error("流水号生成规则字段不能绑定流水号显示字段");
    //                   return;
    //                 }
    //                 if (newVal != oldVal) {
    //                   _me.$emit("input", res.value.replace(match[1], newVal));
    //                 }
    //               },
    //               { immediate: true }
    //             );
    //           }
    //         }
    //       }
    //     } else {
    //       //Message.error(res.message);
    //     }
    //   }
    // }
    // _me.$watch("inputVal", function(newVal, oldVal) {
    //   pInst.$watch(
    //     "identityMap",
    //     function(newVal, oldVal) {
    //       if (newVal && newVal !== oldVal) {
    //         for (const key in newVal) {
    //           if (_me.atter == key) {
    //             let item = newVal[key];
    //             utils.setValueByPath(
    //               pInst,
    //               item.key,
    //               item.value.replace(item.expression, _me.value)
    //             );
    //           }
    //         }
    //       }
    //     },
    //     { immediate: true }
    //   );
    // });
    if (this.filtercurrency && !isNaN(this.inputVal) && this.inputVal) {
      this.format = FormMath.convertCurrency(this.inputVal);
    }
    if (this.filterthousandBit && !isNaN(this.inputVal) && this.inputVal) {
      this.format = this.format + '   ' + utils.thousandBit(this.inputVal);
    }
    if (this.bindPreAndSufFixjson) {
      this.bindPreAndSufFix = JSON.parse(this.bindPreAndSufFixjson);
    }
    this.numberPrefix = false;
    if (
        (this.type == 'number' &&
            this.bindPreAndSufFix &&
            this.bindPreAndSufFix.preFix) ||
        this.bindPreAndSufFix.preFix
    ) {
      this.numberPrefix = true;
    }
  },
  methods: {
    readonlyFormat(val) {
			//暂无表达式 如有表达式使用  window.eval(val) 并且控件配置项要把表达式构建传递到eipInput
      if (this.bindPreAndSufFix) {
        if (!this.bindPreAndSufFix.preFix) {
          this.bindPreAndSufFix.preFix = '';
        }
        if (!this.bindPreAndSufFix.sufSix) {
          this.bindPreAndSufFix.sufSix = '';
        }
        if (this.value) {
          return (
              this.bindPreAndSufFix.preFix +
              this.value +
              this.bindPreAndSufFix.sufSix
          );
        }
      } else if (this.company) {
        return this.value + this.company;
      }
    },
    numberBlur() {
      if (this.filtercurrency && !isNaN(this.inputVal) && this.inputVal) {
        this.isShow = false;
        this.showViewe = FormMath.convertCurrency(this.inputVal);
      }
      if (this.filterthousandBit && !isNaN(this.inputVal) && this.inputVal) {
        this.thousandBit = utils.thousandBit(this.inputVal);
      }
    },
    numberFocus() {
      if (this.filtercurrency && !isNaN(this.inputVal) && this.inputVal) {
        this.isShow = true;
        this.showViewe = '';
      }
      if (this.filterthousandBit && !isNaN(this.inputVal) && this.inputVal) {
        this.thousandBit = '0';
      }
    },
    convertCurrency: _.debounce(function () {
      if (this.filtercurrency && !isNaN(this.inputVal) && this.inputVal) {
        this.isShow = false;
        this.showViewe = FormMath.convertCurrency(this.inputVal);
      }
    }, 1000),
    convertThousanBit: _.debounce(function () {
      if (this.filterthousandBit && !isNaN(this.inputVal) && this.inputVal) {
        this.thousandBit = utils.thousandBit(this.inputVal);
      }
    }, 1000),
    numberChange() {
      if (this.filtercurrency && !isNaN(this.inputVal) && this.inputVal) {
        this.convertCurrency();
      }
      if (this.filterthousandBit && !isNaN(this.inputVal) && this.inputVal) {
        this.convertThousanBit();
      }
    },
    //数据报表
    async checkIdentity() {
      //检查流水号
      if (this.configAttributes) {
        this.isEdit = !this.configAttributes.isInputEdit;
        //判断是否绑定流水号
        if (this.configAttributes.bindIdentityAlias) {
          this.isEdit = false;
          if (this.value) return;
          var alias = this.configAttributes.bindIdentityAlias;
          const res = await this.$store.dispatch(
              'menu/getNextIdByAlias',
              alias
          );
          if (res.state) {
            this.$emit('input', res.value);
            if (res.value) {
              var match = /(\{(.*)\}).*$/.exec(res.value);
              //判断流水号中是否表达式如{kjbt.csfjsc}
              if (match) {
                this.$emit('input', res.value.replace(match[1], ''));

                let paramDom = document.querySelector(
                    '[model-name="data.' + match[2] + '"]'
                );
                let _me = this;
                if (paramDom && paramDom.__vue__) {
                  paramDom.__vue__.$watch(
                      'value',
                      function (newVal, oldVal) {
                        if (
                            _me.modelExpression == paramDom.__vue__.modelExpression
                        ) {
                          Message.error(
                              '流水号生成规则字段不能绑定流水号显示字段'
                          );
                          return;
                        }
                        if (newVal != oldVal) {
                          _me.$emit('input', res.value.replace(match[1], newVal));
                        }
                      },
                      { immediate: true }
                  );
                }
              }
            }
          } else {
            //Message.error(res.message);
          }
        }
      }
    },
  },
  beforeDestroy() {},
  destroyed() {},
  created() {
    if (
        this.bindPreAndSufFixjson != '{}' &&
        (JSON.parse(this.bindPreAndSufFixjson).preFix != '' ||
            JSON.parse(this.bindPreAndSufFixjson).sufSix != '')
    ) {
      if (this.type == 'number') {
        this.style_width = 'width:57%';
      } else {
        this.style_width = 'width:87%';
      }
    }
    if (this.type == 'number' && this.permission_sub == 'r') {
      this.style_width = '';
    }
    this.$validator = this.$root.$validator;
  },
  watch: {
    value(newValue, oldValue) {
      this.checkIdentity();
    },
  },
};
</script>
<style lang="stylus" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.ht_input{
  float:left;
}
.readonly_input{
  float:none;
}
</style>
