<template>
  <div class="mtext-box">
    <span v-show="text_max != ''" class="text-max-tip">{{ text.length }}/{{ text_max }}</span>
    <div class="diy_text_box">
      <div v-if="label" class="van-cell van-field" :class="{ 'van-cell--required': required }">
        <div class="van-cell__title van-field__label">
          <span>{{ label }}</span>
        </div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <div v-html="s_text"></div>
            <textarea id="isdfjdfdkfdfa" ref="diy_textarea" :placeholder="placeholder" v-model="text" class="diy_text"></textarea>
          </div>
        </div>
      </div>
      <div v-else>
        <div v-html="s_text"></div>
        <textarea id="isdfjdfdkfdfa" ref="diy_textarea" :placeholder="placeholder" v-model="text" class="diy_text"></textarea>
      </div>
    </div>
    <div v-show="imgs.length > 0" style="padding:0.24rem;" class="upload_box"><Uploader ref="uploader" class="needsclick" v-model="s_imgs" :multiple="true" :max-count="3" /></div>

    <div style="text-align: left; min-height: 0.5rem;">
      <label for="isdfjdfdkfdfa" href="javascript:void(0)" v-show="false && speech && isapp && !speech_start" @click="startRecognize" class="speech_btn">
        <icon name="speech" class="speech_icon"></icon>
      </label>
      <a href="javascript:void(0)" v-show="speech && isapp && speech_start" @click="stopRecognize" class="speech_btn"><icon name="speech_end" class="speech_icon"></icon></a>
      <a href="javascript:void(0)" class="images_btn" @click="imgs_max_tip">
        <Uploader ref="uploader" style="position: absolute; opacity: 0;" v-model="s_imgs" :multiple="true" :max-count="imgs_max"></Uploader>
        <icon v-show="images" name="image_upload" class="images_icon"></icon>
      </a>
    </div>
  </div>
</template>

<script>
import Uploader from '@/components/common/OssUploader'

export default {
  name: 'Mtextarea',
  model: {
    prop: 'value',
    event: 'value'
  },
  components: {
    Uploader
  },
  props: {
    label: { type: String, default: null },
    required: { type: Boolean, default: false },
    value: {
      type: String,
      default: ''
    },
    speech: {
      type: Boolean,
      default: false
    },
    imgs: {
      type: Array,
      default: () => {
        return []
      }
    },
    images: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    text_max: {
      type: Number,
      default: 0
    },
    imgs_max: {
      type: Number,
      default: 0
    }
  },
  data () {
    let imgs_max = this.imgs_max != '' ? this.imgs_max * 1 : 3
    return {
      images_length: imgs_max,
      s_imgs: [],
      isapp: window.plus,
      speech_start: false,
      text: '',
      s_text: '',
      textarea_show: false,
      position: 0
    }
  },
  watch: {
    imgs (val, old) {
      this.s_imgs = val
      this.$emit('update:imgs', val)
    },
    s_imgs (val, old) {
      this.$emit('update:imgs', val)
    },
    text (val, old) {
      if (this.text_max * 1 > 0 && val.length > this.text_max * 1) {
        this.text = old
        return false
      }
      if (Math.abs(val.length - old.length) > 20) {
        setTimeout(() => {
          this.s_text = val.replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, '<br>')
          this.$emit('value', val)
        }, 100)
      } else {
        this.s_text = val.replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, '<br>')
        this.$emit('value', val)
      }
    },
    value (val) {
      this.text = val
      this.$emit('value', val)
    }
  },
  created () {
    this.text = this.value
    this.s_imgs = this.imgs
  },
  methods: {
    imgs_max_tip () {
      if (this.images_length == this.s_imgs.length) {
        this.$toast('最多只能上传' + this.images_length + '张图片')
        return false
      }
    },
    images_upload () {
      let uploader = this.$refs['uploader'].$el
      let inputs = document.querySelectorAll('.van-uploader__input')
      let input = null
      for (let i in inputs) {
        if (uploader.contains(inputs.item(i))) {
          input = inputs.item(i)
        }
      }
      if (input != null) {
        input.classList.add('needsclick')
        input.click()
        input.click()
      }
    },
    getCursortPosition (ctrl) {
      var CaretPos = 0
      if (document.selection) {
        ctrl.focus()
        var Sel = document.selection.createRange()
        Sel.moveStart('character', -ctrl.value.length)
        CaretPos = Sel.text.length
      } else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
        CaretPos = ctrl.selectionStart
      }
      return CaretPos
    },
    startRecognize () {
      let self = this
      var options = {}
      options.engine = 'baidu'
      this.speech_start = true
      if (window.plus) {
        plus.speech.startRecognize(
          options,
          function (s) {
            self.speech_start = false
          },
          function (e) {
            self.speech_start = false
            alert('语音识别失败：' + e.message)
          }
        )
      }
    },
    stopRecognize () {
      this.speech_start = false
      if (window.plus) {
        plus.speech.stopRecognize()
      }
    },
    focus () {
      setTimeout(() => {
        this.position = this.getCursortPosition(this.$refs['diy_textarea'])
      }, 100)
    }
  }
}
</script>

<style scoped>
.diy_text_box {
  position: relative;
  min-height: 80px;
  font-size: 0.32rem;
  color: #666;
  line-height: 1.5;
  margin: 0rem;
  overflow: hidden;
  word-break: break-all;
}

.diy_text {
  width: 100%;
  top: 0;
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  height: 100%;
  outline: none;
  border: none;
  font-size: 0.32rem;
  color: #000;
  line-height: 1.5;
  resize: none;
}

.focus_hidden_input.diy_text {
  top: 5000000px !important;
}

.speech_btn {
  padding: 0 0.16rem;
}

.speech_icon {
  width: 0.4rem;
}

.images_icon {
  width: 0.45rem;
}

.images_btn {
  overflow: hidden;
}

/deep/ .upload_box .van-uploader__upload {
  display: none;
}

/deep/ .images_btn .van-uploader__preview {
  display: none;
}

.text-max-tip {
  position: absolute;
  bottom: 0rem;
  right: 0;
  font-size: 0.24rem;
  color: #ccc;
  z-index: 1;
}
.mtext-box {
  position: relative;
}
</style>
