<template>
  <div class="material-header">
    <WlPopOver
      overlay
      :offset="[0, 10]"
      v-model="popOverVisible"
      placement="bottom-start"
      :actions="popOverActions"
      @select="onPopOverSelect"
    >
      <template v-slot:reference>
        <div class="dropdown">
          <div class="text">{{ popOverValue }}</div>
          <div class="icon"></div>
        </div>
      </template>
    </WlPopOver>
    <div class="search-wrap">
      <WlSearch
        v-model="searchValue"
        :placeholder="placeholder"
        @onChange="onChange"
        @onClear="onClear"
      />
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:19:49
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-10-13 17:28:35
 */
import WlSearch from "@packages/components/Common/WlSearch/src/index.vue";
import WlPopOver from "@packages/components/Common/WlPopOver/src/index.vue";
export default {
  name: "MtSearch",
  components: { WlSearch, WlPopOver },
  props: {
    filterOptions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    groupBtnVisible: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      searchValue: "",
      popOverValue: "全部",
      popOverVisible: false,
      popOverActions: [],
    };
  },
  methods: {
    onChange() {
      this.$emit("onChange", this.searchValue);
    },
    onClear() {
      this.$emit("onClear");
    },
    onPopOverSelect(val) {
      this.popOverActions.forEach((res) => (res.className = ""));
      const idx = this.popOverActions.findIndex((res) => res.value === val.value);
      this.popOverActions[idx].className = "popover-active";
      this.popOverValue = val.text;
      this.$emit("onMaterialTypeChange", val);
    },
  },
  watch: {
    filterOptions: {
      handler(list) {
        //给第一个添加默认选中的样式
        this.popOverActions = list.reduce((acc, item, index) => {
          if (index === 0) {
            acc.push({ ...item, className: "popover-active" });
          } else {
            acc.push(item);
          }
          return acc;
        }, []);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.material-header {
  @extend %flex-middle;
  background-color: #f6f6f6;
  border-radius: j(10);
  overflow: hidden;
  .dropdown {
    cursor: pointer;
    padding-left: j(10);
    @extend %flex-middle;
    @include halfBorder("right", #e3e3e3);
    .text {
      font-weight: 500;
      font-size: 15px;
      color: #989898;
    }
    .icon {
      display: inline-block;
      margin: 0 j(12) 0 j(6);
      @include arrow("down", #989898);
    }
  }
  .search-wrap {
    flex: 1;
    width: 100%;
  }
}
</style>
