<template>
  <div>
    <div
      :class="['dof-search-bar', 'dof-search-bar-' + theme]"
      :style="barStyle"
      v-if="mod === 'default' && !backArrow"
    >
      <input
        @blur="onBlur"
        @focus="onFocus"
        @input="onInput"
        @return="onSubmit"
        :return-key-type="returnKeyType"
        :autofocus="autofocus"
        :disabled="disabled"
        :value="value"
        ref="search-input"
        :type="inputType"
        :placeholder="placeholder"
        :style="{ width: inputWidth ? inputWidth + 'px' : showRightContent ? themeStyle.inputWidth : '686px' }"
        :class="['search-bar-input', 'search-bar-input-' + theme]"
      />
      <div v-if="disabled" @click="inputDisabledClicked" class="disabled-input"></div>
      <image class="search-bar-icon" :aria-hidden="true" :src="inputIcon" v-if="_theme != 'colmo'"></image>
      <div class="search-bar-icon" v-else-if="_theme == 'colmo'">
        <dof-iconfont size="64" :code="'\u4785'" color="#71717A"></dof-iconfont>
      </div>

      <image
        class="search-bar-close"
        :style="{ right: showRightContent ? '144px' : '48px' }"
        v-if="showClose && _theme != 'colmo'"
        :aria-hidden="true"
        @click="closeClicked"
        :src="closeIcon"
      ></image>
      <dof-iconfont
        v-else-if="showClose && _theme == 'colmo'"
        class="search-bar-close"
        :style="{ right: showRightContent ? '144px' : '48px' }"
        @dofIconFontClicked="closeClicked"
        size="48"
        :code="'\u4725'"
        color="#71717A"
      ></dof-iconfont>
      <slot class="right-content" name="rightContent">
        <text
          :class="['search-bar-button', 'search-bar-button-' + theme]"
          :style="buttonStyle"
          v-if="showRightContent"
          @click="rightClicked"
          >{{ rightLabel }}</text
        >
      </slot>
    </div>
    <!-- backArrow && rightLabel -->
    <div :class="['dof-search-bar', 'dof-search-bar-' + theme]" :style="barStyle" v-if="mod === 'default' && backArrow">
      <image
        v-if="_theme != 'colmo'"
        class="search-bar-arrow-base"
        @click="backArrowClicked"
        :src="(theme == 'black' || _isDiablo) ? W_backArrowIcon : B_backArrowIcon"
      ></image>
      <dof-iconfont
        v-else-if="_theme == 'colmo'"
        class="search-bar-arrow"
        @dofIconFontClicked="backArrowClicked"
        size="64"
        :code="'\u4717'"
        color="rgba(255,255,255,0.80)"
      ></dof-iconfont>
      <input
        @blur="onBlur"
        @focus="onFocus"
        @input="onInput"
        @return="onSubmit"
        :return-key-type="returnKeyType"
        :autofocus="autofocus"
        :disabled="disabled"
        :value="value"
        ref="search-input"
        :type="inputType"
        :placeholder="placeholder"
        :style="{
          width: inputWidth
            ? inputWidth + 'px'
            : showRightContent && backArrow
            ? themeStyle.inputwithBackArrow
            : '610px',
          marginLeft: themeStyle.inputwithBackArrowLeft
        }"
        :class="['search-bar-input', 'search-bar-input-' + theme, 'search-bar-input-arrow-colmo']"
      />
      <div v-if="disabled" @click="inputDisabledClicked" class="disabled-input"></div>
      <image
        :class="['search-bar-icon', backArrow && 'search-bar-icon-hasArrow']"
        :aria-hidden="true"
        :src="inputIcon"
        v-if="_theme != 'colmo'"
      ></image>
      <image
        class="search-bar-close"
        v-if="showClose && _theme != 'colmo'"
        :style="{ right: showRightContent && backArrow ? '136px' : '48px' }"
        :aria-hidden="true"
        @click="closeClicked"
        :src="closeIcon"
      ></image>
      <dof-iconfont
        v-else-if="showClose && _theme == 'colmo'"
        class="search-bar-close"
        :style="{ right: showRightContent ? '136px' : '48px' }"
        @dofIconFontClicked="closeClicked"
        size="48"
        :code="'\u4725'"
        color="#71717A"
      ></dof-iconfont>
      <slot class="right-content" name="rightContent">
        <text
          :class="['search-bar-button', 'search-bar-button-' + theme]"
          :style="buttonStyle"
          v-if="showRightContent"
          @click="rightClicked"
          >{{ rightLabel }}</text
        >
      </slot>
    </div>

    <!-- has select item -->
    <div :class="['dof-search-bar', 'dof-search-bar-' + theme]" :style="barStyle" v-if="mod === 'hasSelect'">
      <input
        @blur="onBlur"
        @focus="onFocus"
        @input="onInput"
        @return="onSubmit"
        :disabled="disabled"
        :autofocus="autofocus"
        :return-key-type="returnKeyType"
        :value="value"
        :type="inputType"
        :placeholder="placeholder"
        :class="['search-bar-input', 'search-bar-input-' + theme]"
        :style="{ width: inputWidth ? inputWidth + 'px' : showRightContent ? '590px' : '590px', paddingRight: '150px' }"
      />
      <div v-if="disabled" @click="inputDisabledClicked" class="disabled-input has-dep-disabled"></div>

      <div :class="['bar-dep', '.bar-dep-' + theme]">
        <text :class="['selected-text', 'selected-text-' + theme]" ref="selectedText" @click="showSelectList">{{
          selectedText
        }}</text>
        <div v-if="selectList" :class="['selectBlock', 'selectBlock-' + theme]" :style="selectBlockStyle">
          <text
            v-for="item in list"
            :key="item"
            @click="selectItem(item)"
            :class="['select-text', 'select-text-' + theme]"
            >{{ item }}</text
          >
        </div>
        <image :src="arrowIcon" :aria-hidden="true" @click="showSelectList" class="dep-arrow"></image>
      </div>
      <image class="search-bar-icon" :aria-hidden="true" :src="inputIcon"></image>
      <slot class="right-content" name="rightContent">
        <text
          :class="['search-bar-button', 'search-bar-button-' + theme]"
          :style="buttonStyle"
          v-if="showRightContent"
          @click="rightClicked"
          >{{ rightLabel }}</text
        >
      </slot>
    </div>
  </div>
</template>
<style scoped>
.dof-search-bar {
  padding-left: 32px;
  padding-right: 32px;
  background-color: #ffffff;
  /* width: 750px; */
  height: 88px;
  flex-direction: row;
  align-items: center;
}

.dof-search-bar-gray {
  background-color: #f6f7f9;
}
.dof-search-bar-black {
  background-color: #1e2e37;
}

.search-bar-input {
  position: absolute;
  top: 8px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
  padding-left: 60px;
  font-size: 28px;
  width: 624px;
  height: 72px;
  line-height: 72px;
  background-color: #f6f7f9;
  border-radius: 36px;
  color: #1e2e37;
  placeholder-color: #8e969b;
}

.search-bar-input-gray {
  background-color: #ffffff;
  /* color: #8E969B; */
  color: #1e2e37;
  placeholder-color: #8e969b;
}
.search-bar-input-black {
  background-color: rgba(249, 249, 249, 0.2);
  /* color: #c7c7cc; */
  color: #1e2e37;
  placeholder-color: #c7c7cc;
}

.search-bar-arrow {
  position: absolute;
  width: 36px;
  height: 36px;
  left: 32px;
  top: 28px;
}
.search-bar-arrow-base {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 26px;
  top: 22px;
}

.search-bar-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 48px;
  top: 28px;
}

.search-bar-icon-hasArrow {
  left: 120px;
}

.search-bar-close {
  position: absolute;
  width: 34px;
  height: 32px;
  right: 48px;
  top: 28px;
}

.right-content {
  position: absolute;
  right: 8px;
}

.search-bar-button {
  width: 72px;
  font-size: 32px;
  text-align: center;
  line-height: 88px;
  margin-right: 0;
  color: #616c73;
  position: absolute;
  right: 32px;
}

.search-bar-button-gray {
  background-color: #f6f7f9;
}
.search-bar-button-black {
  background-color: #1e2e37;
  color: #c7c7cc;
}

.bar-dep {
  position: absolute;
  flex-direction: row;
  align-items: center;
  width: 130px;
  padding-right: 12px;
  padding-left: 12px;
  height: 42px;
  right: 144px;
  top: 22px;
}

.bar-dep-black {
  border-right-color: #c7c7c7;
}

.selected-text {
  flex: 1;
  line-height: 32px;
  text-align: center;
  font-size: 24px;
  color: #1e2e37;
  margin-right: 6px;
  margin-top: 2px;
  lines: 1;
  text-overflow: ellipsis;
}

.selected-text-black {
  color: #c7c7cc;
}

.select-text {
  flex: 1;
  line-height: 40px;
  text-align: center;
  font-size: 24px;
  color: #1e2e37;
  margin-right: 2px;
  lines: 1;
  text-overflow: ellipsis;
}
.select-text-black {
  color: #c7c7cc;
}
.dep-arrow {
  width: 24px;
  height: 24px;
}
.disabled-input {
  /* width: 750px; */
  height: 72px;
  position: absolute;
  left: 0;
  /* background-color: transparent; */
  background-color: rgba(255, 255, 255, 0.7);
}

.has-dep-disabled {
  width: 640px;
}

.selectBlock {
  position: fixed;
  width: 132px;
  top: 0;
  margin-left: -28px;
  padding-bottom: 10px;
  border-radius: 4px;
  background-color: #f6f6f6;
}
.selectBlock-gray {
  background-color: #ffffff;
}

.selectBlock-black {
  background-color: #323232;
}
</style>
<style src="./colmo.css" scoped></style>
<style src="./diablo.css" scoped></style>

<script>
import { INPUT_ICON, INPUT_ICON_WHITE, ARROW_ICON, BACK_ARROW_ICON, WHITE_ARROW_ICON, CLOSE_ICON } from './type'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
import DofIconfont from '../dof-iconfont'
import { STYLE_MAP } from './style'
const modal = weex.requireModule('modal')
const dom = weex.requireModule('dom')
export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    inputType: {
      type: String,
      default: 'text'
    },
    returnKeyType: {
      type: String,
      default: 'search'
    },
    mod: {
      type: String,
      default: 'default'
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'white'
    },
    barStyle: {
      type: Object,
      default: () => ({})
    },
    defaultValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '搜索'
    },
    // 是否显示右侧按钮区域
    showRightContent: {
      type: Boolean,
      default: false
    },

    rightLabel: {
      type: String,
      default: '搜索 '
    },

    backArrow: {
      type: Boolean,
      default: false
    },

    list: {
      type: Array,
      default: () => []
    },

    selectedText: {
      type: String,
      default: ''
    },
    inputWidth: {
      type: Number,
      default: 0
    }
  },
  computed: {
    themeStyle() {
      const _theme = this._isColmo ? 'colmo' : 'default'
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    buttonStyle() {
      const { barStyle } = this
      if (barStyle.backgroundColor) {
        return { backgroundColor: barStyle.backgroundColor }
      }
      return {}
    },
    inputIcon() {
      if (this.theme == 'black') {
        return this.inputIconWhite
      }
      return this.inputIconBlack
    }
  },
  data: () => ({
    test: '\u4785',
    inputIconBlack: INPUT_ICON,
    inputIconWhite: INPUT_ICON_WHITE,
    closeIcon: CLOSE_ICON,
    arrowIcon: ARROW_ICON,
    B_backArrowIcon: BACK_ARROW_ICON,
    W_backArrowIcon: WHITE_ARROW_ICON,
    showClose: false,
    value: '',
    selectList: false,
    selectBlockStyle: {}
  }),
  created() {
    this.defaultValue && (this.value = this.defaultValue)
    if (this.disabled) {
      this.showClose = false
    }
  },
  methods: {
    onBlur() {
      const self = this
      setTimeout(() => {
        self.detectShowClose()
        self.$emit('dofSearchbarInputOnBlur', { value: self.value })
      }, 10)
    },
    autoBlur() {
      this.$refs['search-input'].blur()
    },
    onFocus() {
      if (this.isDisabled) {
        return
      }
      this.detectShowClose()
      this.$emit('dofSearchbarInputOnFocus', { value: this.value })
    },
    closeClicked() {
      this.value = ''
      this.showClose && (this.showClose = false)
      this.$emit('dofSearchbarClearClicked', { value: this.value })
      // this.$emit('dofSearchbarInputOnInput', { value: this.value });
    },
    onInput(e) {
      this.value = e.value
      this.detectShowClose()
      this.$emit('dofSearchbarInputOnInput', { value: this.value })
    },
    onSubmit(e) {
      this.onBlur()
      this.value = e.value
      this.detectShowClose()
      this.$emit('dofSearchbarInputReturned', { value: this.value })
    },
    rightClicked() {
      this.showClose && (this.showClose = false)
      this.$emit('dofSearchbarRightClicked', { value: this.value })
    },
    detectShowClose() {
      // this.showClose = (this.value.length > 0) && this.showRightContent;
      this.showClose = this.value.length > 0
    },

    inputDisabledClicked() {
      this.$emit('dofSearchbarInputDisabledClicked', {})
    },

    setValue(value) {
      this.value = value
    },

    backArrowClicked() {
      this.$emit('dofBackArrowClicked', {})
    },

    // 显示下拉列表
    showSelectList() {
      dom.getComponentRect(this.$refs.selectedText, rect => {
        this.selectBlockStyle = {
          top: rect.size.top,
          left: rect.size.left
        }
      })
      this.selectList = !this.selectList
    },

    selectItem(item) {
      this.selectedText = item
      this.selectList = false
      this.$emit('dofSelectItemClicked', { item })
    }
  }
}
</script>
