<template>
  <bxs-input
    v-model.trim="currentValue"
    :label="label"
    :placeholder="placeholder"
    :clearable="clearable"
    right-icon="contact"
    :error="error"
    :error-message="errorMessage"
    :icon-size="iconSize"
    :icon-color="iconColor"
    @click-icon="clickIcon"
    @focu="onFocus"
    @blur="onBlur"
    />
</template>
<script>
import { create, assert, updateApp } from '../utils'
import Input from '../input'

const { appBridge } = window
export default create({
  name: 'crm-input',
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    iconColor: {
      type: String,
      default: '#FF6722',
    },
    iconSize: {
      type: String,
      default: '24px',
    },
    label: {
      type: String,
      default: '姓名',
    },
    placeholder: {
      type: String,
      default: '请输入姓名',
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    error: {
      type: Boolean,
      default: false,
    },
    errorMessage: {
      type: String,
      default: '',
    },
  },
  computed: {
    currentValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  methods: {
    clickIcon() {
      const self = this
      assert(appBridge, 'crm-input requires appBridge')
      if (appBridge && appBridge.checkAppFeature('CRM_IMPORT')) {
        appBridge.importContact('recipient')
        appBridge.onContactImport(contactInfo => {
          self.$emit('crmInfo', contactInfo)
        })
      } else {
        updateApp()
      }
    },
    onFocus(event) {
      this.$emit('focus', event)
    },
    onBlur(event) {
      this.$emit('blur', event)
    },
  },
  components: {
    [Input.name]: Input,
  },
})
</script>
<style>
@import './index.css';
</style>
