<template>
  <div :class="[`${clsfixed}`]">
    <Input type="textarea"
           :border="false"
           :readonly="!editable"
           v-model="tmpValue" />
    <div v-show="editable"
         style="padding:15px 30px;text-align:right;">
      <Button type="primary"
              style="margin-right:16px;"
              @click="handleChange">确定</Button>
      <Button @click="handleCancel">取消</Button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VucTextarea',
  props: {
    value: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      clsfixed: 'vuc-textarea',
      tmpValue: this.value
    }
  },
  computed: {

  },
  methods: {
    handleChange () {
      this.$emit('input', this.tmpValue)
      this.$emit('on-change', { value: this.tmpValue })
      this.$emit('close')
    },
    handleCancel () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="less">
.vuc-textarea {
  height: calc(~'100% - 70px');
  .ivu-input-wrapper,
  textarea {
    height: 100% !important;
  }
}
</style>

