/**
 * @Author: Sun Rising
 * @Date: 2019-11-22 09:36:48
 * @Last Modified by: Sun Rising
 * @Last Modified time: 2019-12-19 16:33:16
 * @Description: WsForm辅助组件
 */
<template>
  <el-tooltip class="item" effect="light" :content="tipContent" placement="top" v-if="showToopTip">
    <el-form-item :label="label" :rules="rules" :prop="prop" :required="rules?false:requireFlag" class="formItemCls">
      <slot></slot>
    </el-form-item>
  </el-tooltip>
  <el-form-item ref="theInput" :label="label" v-else :rules="rules" :prop="prop" :required="rules?false:requireFlag">
    <slot></slot>
  </el-form-item>
</template>
<script>
import { FormItem } from "element-ui";

export default {
  name: "WsFormItem",
  extends: FormItem,
  props: {
    // input的标题
    label: {
      type: String,
      default: null
    },
    // 检验索引key
    prop: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 是否显示tip
      showToopTip: false,
      // 国际化Lable字符串
      // labelIi18: "",
      // 是否必填
      requireFlag: false,
      // tip显示内容
      tipContent: ""
      //
      // dictArray: []
    };
  },
  // watch: {
  //   "$store.state.app.language": function(newVal, oldVal) {
  //     this.autoTip();
  //   }
  // },
  mounted() {
    // 获取全部的字典
    // const zh_array = localStorage.getItem("InterNational_zh_array");
    // if (zh_array) {
    //   const arrayObj = JSON.parse(zh_array);
    //   if (Array.isArray(arrayObj)) this.dictArray = arrayObj;
    // } else {
    //   // console.log("localStorage国际化信息丢失.");
    // }
    this.initTip();
  },
  updated() {
    this.initTip();
  },
  methods: {
    // 判断插槽中是否插入标签 如果未插入则认为使用该标签进行反显
    // 不推荐这么做 为了不影响对外API只能读取插槽内容来读取显示的文本
    // 缺点 开发时当插槽内容改变时，tip内容不会改变 需刷新页面
    initTip() {
      // const labelIi18 = this.dictArray.find((item, index) => {
      //   return item.value === this.label;
      // });
      // this.labelIi18 = labelIi18 ? labelIi18.key : this.label;
      // 如果传入检验索引key就必填？？？？
      if (this.prop && this.prop.length > 0) {
        this.requireFlag = true;
      } else {
        this.requireFlag = false;
      }

      if (
        this.$slots &&
        this.$slots.default &&
        this.$slots.default.length > 0
      ) {
        const text = this.$slots.default[0].elm;
        if (!(text instanceof HTMLElement)) {
          this.tipContent = this.$slots.default[0].text.trim();
          this.autoTip();
        }
      }
    },
    // tip自动开关
    autoTip() {
      const VDOM = this.$refs["theInput"];
      if (VDOM) {
        const v = VDOM.$el.querySelectorAll(".el-form-item__content");
        if (v.length > 0) {
          const clientWidth = v[0].clientWidth;
          const scrollWidth = v[0].scrollWidth;
          if (scrollWidth > clientWidth) {
            this.showToopTip = true;
          } else {
            this.showToopTip = false;
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.formItemCls {
  /deep/.el-form-item__content {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: block !important;
  }
}
/deep/.el-form-item__content {
  white-space: nowrap;
}
</style>
