<template>
  <div class="bt-input">
    <el-input v-bind="$attrs" v-on="$listeners" type="textarea">
      ></el-input>
    <el-tooltip effect="dark" placement="top" :disabled="!$attrs.value">
      <div slot="content" v-html="handleNewlines($attrs.value)"></div>
      <el-link icon="el-icon-question" @click="openDialog" :disabled="$attrs.disabled || $attrs.readonly" v-if="showIcon">
      </el-link>
    </el-tooltip>
    <el-dialog
      :title="title || $t1('内容')"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-if="showDialog"
      :visible.sync="showDialog"
      :modal="false"
      custom-class="dialog-style list-dialog dialog-checkbox pd_0"
      width="1200px"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont" style="height: 450px">
        <el-input
          type="textarea"
          v-model="content"
          :rows="25"
          :placeholder="$attrs.placeholder || $t1('请输入内容')"
          resize="none"
          :disabled="$attrs.disabled"
          :readonly="$attrs.readonly"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain class="button-sty" @click="close">
          <i class="el-icon-close el-icon"></i>
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="confirm"
          class="button-sty"
          v-if="!$attrs.disabled && !$attrs.readonly"
        >
          <i class="el-icon-check el-icon"></i>
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "BaseTextarea",
  components: {
  },
  props: {
    title: {
      type: String,
      default: null,
    },
    showIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      content: null,
      showDialog: false,
    };
  },
  methods: {
    openDialog() {
      this.content = this.$attrs.value;
      this.showDialog = true;
    },
    confirm() {
      this.$emit("input", this.content);
      this.showDialog = false;
    },

    close() {
      this.showDialog = false;
    },
    handleNewlines(text) {
      if (text && text.includes("\n")) {
        return text.replaceAll("\n", "<br/>");
      } else {
        return text;
      }
    },
  },
};
</script>
<style scoped>
  .el-link.el-link--default.is-disabled {
    color: #606266;
  }
  ::v-deep.el-textarea {
      width: calc(100% - 12px) !important;
  }
</style>
