import { Button, Icon, Search } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import iconSearch from '@common/images/icon_search.png'
import iconSearchTenant from '@/tenant/images/icon-search.png'
import iconFilter from '@common/images/icon_filter.png'

type inputBackground = 'default' | 'white' | 'transparent'

export default defineComponent({
  name: 'ColSearch',
  props: {
    type: {
      type: String as PropType<'person' | 'tenant'>,
      default: ''
    },
    modelValue: {
      type: String,
      default: ''
    },
    showAction: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入搜索关键词'
    },
    background: {
      type: String,
      default: '#fff'
    },
    inputBackground: {
      type: String as PropType<inputBackground>,
      default: 'default'
    },
    onSearch: {
      type: Function,
      default: (val: any) => {}
    },
    onFilter: {
      type: Function,
      default: () => {}
    },
    filterDot: {
      type: Boolean,
      default: false
    },
    leftIcon: {
      type: String,
      default: iconSearch
    }
  },
  emits: ['click', 'input'],
  watch: {
    modelValue() {
      this.search = this.modelValue
    }
  },
  data() {
    return {
      search: this.modelValue || ''
    }
  },
  render() {
    return (
      <div>
        <Search
          class={[
            styles['col-search'],
            this.type === 'tenant' && styles['col-tenant-search'],
            styles[this.inputBackground]
          ]}
          v-model={this.search}
          background={this.background}
          showAction={this.showAction}
          shape="round"
          placeholder={this.placeholder}
          disabled={this.disabled}
          autofocus={this.autofocus}
          onUpdate:modelValue={(val: any) => {
            this.$emit('input', val)
          }}
          onSearch={(val: string) => {
            this.onSearch(val)
          }}
          onClear={() => {
            this.search = ''
            this.onSearch()
          }}
          onClick={() => this.$emit('click')}
          v-slots={{
            left: () => this.$slots.left && this.$slots.left(),
            'left-icon': () => (
              <Icon
                name={this.type === 'tenant' ? iconSearchTenant : this.leftIcon}
                size={16}
              />
            ),
            'right-icon': () => (
              <Button
                class={[
                  styles.searchBtn,
                  this.type === 'tenant' && styles.searchTenantBtn
                ]}
                round
                type="primary"
                size="mini"
                onClick={() => {
                  this.onSearch(this.search)
                }}
              >
                搜索
              </Button>
            ),
            action: () =>
              (this.$slots.action && this.$slots.action()) || (
                <Icon
                  name={iconFilter}
                  size={28}
                  dot={this.filterDot}
                  onClick={() => {
                    this.onFilter()
                  }}
                />
              )
          }}
        />
      </div>
    )
  }
})
