<!-- @desc:提示信息  @auth:周兴  @time:2022/11/15 13:11 -->
<template>
  <div class="ivu-input-group" style="line-height: 0; ">
    <div ref="input-prepend" class="ivu-input-group-prepend" v-if="labelWidth != 0">
      <div :style="{width:labelWidth?labelWidth+'px':''}" style="text-align: left;display: flex">
        <div style="color: red" v-if="required">*</div>
        <Poptip trigger="hover" placement="top-start" :content="label" v-model="visible"
                :disabled="!visible">
          <div :ref="'label'+ label" @mouseenter="checkDisplayTip"
               @mouseleave="visible=false"
               :class="this.required?null:'label-left'">
            <!--链接-->
            <a v-if="linkFlag"
               style="text-decoration: underline;color: #2d8cf0;"
               @click="handleLink">{{
                label
              }}</a>
            <div v-else>{{ label }}</div>
          </div>
        </Poptip>
        <Poptip trigger="hover" transfer placement="top-start" :content="info" v-if="info">
          <Icon type="iconfont iconfont icon-question" style="cursor: pointer;font-size: 12px;" color="#909399" ref="info-icon"/>
        </Poptip>
      </div>
    </div>
    <slot></slot>

    <div v-if="!!errorMessage" class="error-class">
      <Poptip trigger="hover" transfer :content="errorMessage" placement="bottom" style="height: 10px">
        <div class="error-info"></div>
      </Poptip>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrependTransparent',
  props: {
    labelWidth: {
      type: Number,
      default: null
    },
    label: {
      type: String
    },
    required: {
      type: Boolean,
      default: false
    },
    // 错误信息
    errorMessage: {
      type: String,
      default: null
    },
    // 提示信息
    info: {
      type: String,
      default: null
    },
    // 是否是链接
    linkFlag: {
      type: Boolean,
      default: false
    }
  },
  watch: {},
  data() {
    return {
      visible: false
    }
  },
  methods: {
    /**
     * @desc   : 链接跳转
     * @author : 周兴
     * @date   : 2023/6/6 10:15
     */
    handleLink() {
      this.$emit('on-link');
    },
    /**
     * @desc   : 判断是否给出提示信息
     * @author : 周兴
     * @date   : 2022/12/14 14:18
     */
    checkDisplayTip() {
      let label = this.$refs['label' + this.label]
      let prepend = this.$refs['input-prepend']
      if (label && prepend && label.offsetWidth + 10 > prepend.offsetWidth) {
        this.visible = true;
        // 4秒后隐藏
        setTimeout(() => {
          this.visible = false;
        }, 2000)
      }
    },
  },
  created() {
  }
}
</script>

<style scoped>
/deep/ .ivu-select-selection {
  border-radius: 0 4px 4px 0;
}

/deep/ .ivu-input {
  border-radius: 0 4px 4px 0;
}

.ivu-btn {
  border-radius: 0 4px 4px 0;
}

/deep/ .ivu-input-group-prepend {
  background: transparent;
  /*border: none !important;*/
}

.top, .bottom {
  text-align: center;
}

.center {
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}

.center-left {
  float: left;
}

.center-right {
  float: right;
}

.label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.label-left {
  padding-left: 4px !important;
}

.error-info {
  border-style: solid;
  border-width: 6px;
  border-color: red red transparent transparent;
  cursor: pointer;
}

.pop-content {
  width: 255px;
  min-width: 200px;
  /*background: #e9edf1;*/
  padding: 10px;
  border: 1px #a5acb5;
  overflow-y: auto;
  overflow-x: hidden;
}

.error-class{
  position: absolute;
  right: 16px;
  top: 1px;
  z-index: 99;
  height: 10px
}


</style>
