<template>
  <!-- <van-field
    ref="input"
    v-model="inputValue"
    :label="label"
    :name="name"
    :size="size"
    :border="border"
    :disabled="disabled"
    :readonly="readonly"
    :required="required"
    :clearable="clearable"
    :clickable="clickable"
    :is-link="isLink"
    :error="error"
    :error-message="errorMessage"
    :placeholder="placeholder"

    :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"
    :maxlength="editable?maxlength:null"
    :type="editable?'textarea':'text'"
    show-word-limit
  >
    <template #label>
      {{ label }}
      <div>
        <van-button v-if="hasCommonStatment &&editable" size="mini" plain type="primary" @click="onCommonStatment">常用语</van-button>
      </div>
      <common-statment
        v-if="hasCommonStatment &&editable"
        v-model="commonStatmentPopup"
        :action="action"
        @confirm="onInput"
      />
    </template>
  </van-field> -->
  <div>
    <div class="approval-opinion_label" :class="labelClass">
      <div>
        {{ label }}<van-icon v-if="desc && descPosition==='lableIcon'" name="warning" class="ibps-dialog-icon" @click="$action.descDialog({ title:label, message:desc })" />
      </div>
      <div>
        <van-button v-if="hasCommonStatment &&editable" size="mini" plain type="primary" @click="onCommonStatment">常用语</van-button>
      </div>
      <common-statment
        v-if="hasCommonStatment &&editable"
        v-model="commonStatmentPopup"
        :action="action"
        @confirm="onInput"
      />
    </div>
    <van-field
      v-if="!readonly"
      ref="input"
      v-model="inputValue"
      :name="name"
      :size="size"
      :border="border"
      :disabled="disabled"
      :readonly="readonly"
      :required="required"
      :clearable="clearable"
      :clickable="clickable"
      :is-link="isLink"
      :error="error"
      :error-message="errorMessage"
      :placeholder="placeholder"

      :arrow-direction="arrowDirection"

      :input-align="inputAlign"
      :error-message-align="errorMessageAlign"
      :autosize="autosize"
      :left-icon="leftIcon"
      :right-icon="rightIcon"
      :icon-prefix="iconPrefix"
      :rules="editable?rules:null"
      :maxlength="editable?maxlength:null"
      :type="editable?'textarea':'text'"
      show-word-limit
    />
  </div>
</template>
<script>
import FieldMixin from '@/mixins/field'

import CommonStatment from '../common-statment'

export default {
  name: 'bpmn-approval-opinion',
  components: {
    CommonStatment
  },
  mixins: [FieldMixin],
  props: {
    action: String,
    placeholder: {
      type: String,
      default: '请输入审批意见'
    },
    maxlength: {
      type: Number,
      default: 5000
    },
    hasCommonStatment: {
      type: Boolean,
      default: true
    },
    inputAlign: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      commonStatmentPopup: false
    }
  },
  watch: {
    value: {
      handler(val, oldVal) {
        this._setInputValue()
      },
      immediate: true
    },
    inputValue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    onCommonStatment() {
      this.commonStatmentPopup = true
    },
    onInput(data) {
      this.$emit('input', data)
    }
  }
}
</script>
<style lang="scss" scoped>
  .approval-opinion_label{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
    color: #646566;
    font-size: 14px;
  }
</style>

