
<template>
  <div v-if="init" class="ibps-cell-wrapper">
    <van-field
      ref="input"
      v-model="inputValue"
      :label="label"
      :name="name"
      :size="size"
      :placeholder="placeholder"
      :border="false"
      :readonly="readonly"
      :disabled="disabled"
      :required="required"
      :clearable="clearable"
      :clickable="clickable"
      :is-link="isLink"
      :error="error"
      :error-message="errorMessage"

      :arrow-direction="arrowDirection"
      :label-class="labelClass"
      :label-width="labelWidth"
      :label-align="labelAlign"
      :input-align="inputAlign"
      :error-message-align="errorMessageAlign"
      :autosize="autosize"
      :left-icon="leftIcon"
      :right-icon="rightIcon"
      :icon-prefix="iconPrefix"
      :rules="editable?rules:null"
      class="ibps-editor"
    >
      <template #label>
        {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
      </template>
      <template #input>
        <vue-html5-editor
          v-if="editable"
          ref="editor"
          :content="inputValue"
          :height="height||150"
          :z-index="editorZIndex"
          :auto-height="autoHeight"
          :show-module-name="showModuleName"
          class="ibps-editor-content"
          @change="changeData"
        />
        <div
          v-else
          :class="havePadding?'editor-content':''"
          v-html="inputValue"
        />
      </template>
    </van-field>
    <ibps-field-desc :desc="desc" :desc-position="descPosition" />
  </div>
</template>
<script>
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
import options from './options'
import FieldMixin from '@/mixins/field'

export default {
  name: 'ibps-editor',
  mixins: [FieldMixin],
  props: {
    height: {
      type: Number,
      default: 150,
      validator(val) {
        return val >= 100
      }
    },
    zIndex: {
      type: Number,
      default: 0
    },
    autoHeight: {
      type: Boolean,
      default: true
    },
    showModuleName: {
      type: Boolean
    },
    havePadding: {
      type: Boolean,
      default: true
    },
    inputAlign: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      init: true,
      editorZIndex: 0
    }
  },
  watch: {
    value: {
      handler(val, oldVal) {
        this.inputValue = this.value
        setTimeout(() => {
          this.validate()
        }, 10)
      },
      immediate: true
    },
    zIndex: {
      handler(val, oldVal) {
        this.editorZIndex = val
      },
      immediate: true
    }
  },
  created() {
    this.init = true
    Object.assign(options, { language: this.$i18n.locale })
    Vue.use(VueHtml5Editor, options)
  },
  destroyed() {
    this.init = false
  },
  methods: {
    changeData(data) {
      this.$emit('input', data)
      this.$emit('change', data)
    }
  }
}
</script>
<style lang="scss">
  .ibps-editor{
    display: block;
    .van-field__label{
        margin-bottom: 10px;
    }
    .editor-content{
      background-color: #fff;
      padding: 5px 10px;
    }
    .vue-html5-editor{
      width: 100%;
    }
    img {
      width: 100%;
    }
  }
  .van-field--error{
    .vue-html5-editor{
      border: 1px solid #ee0a24;
    }
  }
 .vue-html5-editor{
   .toolbar>ul>li{
    line-height: 20px;
    padding-bottom:5px ;
  }
 }
</style>

