<template>
  <section class="wx-text">
    <div class="wx-text__content">
      <el-input type="textarea" v-model="textarea" @change="changeTextArea" class="textarea" resize="none" />
    </div>
    <div class="wx-text__opt clearfix">
      <el-popover placement="top" trigger="hover" width="680" v-if="isSupportVar">
        <p>1.支持插入会员信息变量，如下表所示，{数字}为可插入变量，注意变量值长度，以免超过300字文本上限。aaaa</p>
        <p>2.支持换行；不支持富文本格式。</p>
        <p>会员信息变量表：</p>
        <div class="clearfix">
          <ul class="fl pr10" v-for="(item, index) in 4" :key="index">
            <li v-for="(v, i) in options.slice(index * 7, (index + 1) * 7)" :key="i">{{ v.number + v.name }}</li>
          </ul>
        </div>
        <a class="iconfont icon-17" title="变量" slot="reference"></a>
      </el-popover>
      <span class="fr gray fz13">最多可输入300字，按下回车键换行</span>
    </div>
  </section>
</template>

<script>
import strLength from '@/utils/strlen';
export default {
  name: 'dm-text',
  props: {
    value: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    jumpUrlInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    urlType: {
      type: Boolean | String,
      default: 0
    },
    isSupportVar: {
      type: Boolean,
      default: false
    },
    showWxApp: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          // debugger
          this.textarea = val;
          this.computedTextLength();
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      textarea: '',
      dialogShow: false,
      appid: '',
      // eslint-disable-next-line
      options: require('./options.js'),
      textLength: 0
    };
  },
  methods: {
    textInput(v, e) {
      // 控制微信文本的文字
      this.computedTextLength();
    },
    changeTextArea() {
      this.$emit('update:value', this.textarea);
    },
    // 获取内容
    getTextValue() {
      return this.textarea;
    },
    computedTextLength() {
      return new Promise((resolve, reject) => {
        let textContent = strLength.getByteVal2(this.textarea);
        let textNum = strLength.getZhLen(textContent);
        if (textNum >= 300) {
          this.$message.error('最多300个字符哦');
          resolve(false);
        } else {
          resolve(true);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.textarea {
  /deep/ .el-textarea__inner {
    border: none;
    box-shadow: none;
    outline: none;
    height: 100%;
  }
}
.wx-text {
  height: 200px;
  width: 600px;
  border: 1px solid #e7e7eb;
  border-radius: 4px;
  &__content {
    height: 160px;
    width: 600px;
    & > div {
      padding: 10px;
      height: 140px;
      width: 580px;
      overflow-x: hidden;
      outline: 0;
    }
  }
  &__opt {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-top: 1px solid #e7e7eb;
    & > a {
      padding-right: 10px;
      cursor: pointer;
    }
  }
}
</style>
