<template>
  <div
    class="head"
    :class="{
      isSearch: isSearch
    }"
    @click="resetSearch"
  >
    <cr-search
      ref="searchInput"
      v-model.trim="keyWords"
      :class="{
        mr12: isSearch
      }"
      shape="round"
      :left-icon="leftIcon"
      :placeholder="placeholderStr"
      @search="searchEnterEvent"
      @clear="clearInputText"
    />
    <cr-tag
      v-if="isSearch && keyWords"
      size="medium"
      color="#fff"
      shape="round"
      closable
      @close="resetSearch"
    >
      <span>{{ keyWords }}</span>
    </cr-tag>
    <cr-image
      v-show="layoutType == 1 && isSearch"
      src="https://img.lkbang.net/cardType.2eeac122.png"
      width="20px"
      height="20px"
      @click.stop="toggleType(2)"
    />
    <cr-image
      v-show="layoutType == 2 && isSearch"
      src="https://img.lkbang.net/listType.2eeac122.png"
      width="20px"
      height="20px"
      @click.stop="toggleType(1)"
    />
  </div>
</template>
<script>
const SEARCH_EVENT = 'enter';
const CLEAR_EVENT = 'clear';
const CHANGE_LIST_TYPE = 'changeListType';
export default {
  props: {
    isSearch: {
      type: Boolean,
      default: false
    },
    placeholderText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      layoutType: 1,
      keyWords: '',
      placeholder: ''
    };
  },
  computed: {
    leftIcon() {
      return this.isSearch && !this.placeholderText ? '' : 'search';
    },
    placeholderStr() {
      return !this.isSearch ? '搜索品牌/商品名称' : this.placeholder;
    }
  },
  watch: {
    placeholderText: {
      immediate: true,
      handler(val) {
        console.log(val, 11);
        this.placeholder = val;
      }
    },
    keyWords(val) {
      if (val) this.$track.registeredEvents('H5_2B_CommodityListPageExposure');
    }
  },
  methods: {
    toggleType(type) {
      this.layoutType = type;
      this.$emit(CHANGE_LIST_TYPE, type);
    },
    clearInputText() {
      this.keyWords = '';
    },
    resetSearch() {
      this.clearInputText();
      this.$emit(CLEAR_EVENT);
    },
    searchEnterEvent() {
      if (!this.keyWords) {
        return this.$dialog({
          message: '请输入内容',
          showCancelButton: false
        });
      }
      this.$refs.searchInput.$el.querySelector('input').blur();
      this.$emit(SEARCH_EVENT, this.keyWords);
    }
  }
};
</script>

<style lang="less" scoped>
.mr12 {
  margin-right: @padding-sm;
}
.head {
  display: flex;
  align-items: center;
  background: @white;
  padding: @padding-sm @padding-sm + 4 @padding-unit + 1;
  &.isSearch {
    border-bottom: 0.5px solid #ececec;
  }
  @{deep} .cr-icon--cross {
    // line-height: 22px;
    color: #d8d8d8;
    margin-left: @padding-unit;
  }
  @{deep} .cr-search {
    flex: 1;
    padding: 0;
    .cr-icon--search {
      .text-size(16);
      color: #333;
    }
  }
  position: relative;
  .cr-tag {
    padding-left: 8px;
    position: absolute;
    top: @padding-sm + 4;
    height: 22px;
    display: flex;
    align-items: center;
    line-height: normal !important;
    left: 23px;
    max-width: calc(100% - 78px);
    color: #333;
    border: 1px solid #f2f3f5;
    box-sizing: border-box;
    span {
      display: block;
      overflow: hidden; //不允许内容超出盒子
      white-space: nowrap; //不允许文本跨行
      text-overflow: ellipsis;
    }
  }
}
</style>
