<template>
  <div class="order-list-header-con">
    <div class="header flex-default">
      <m-icon icon="icon-back" :size="18" @click="goBack" />
      <div class="search flex-default" @click="handleSearch">
        <m-icon icon="icon-search2" :size="15" />
        <input class="search-input" :placeholder="placeholderTxt" disabled />
      </div>
    </div>

    <!-- <m-tabs
      v-model="value.tab"
      :tabs="tabList"
      class="tab-list"
      @click="handleTabClick"
    /> -->
    <m-tabs
      v-model="value.sub"
      :tabs="subTabList[value.tab]"
      class="sub-tab-list"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default() {
        return {
          tab: 0,
          sub: 0,
        };
      },
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    tabList() {
      let arr = [];
      this.list.forEach((item) => {
        arr.push({ ...item });
      });
      return arr;
    },
    subTabList() {
      let arr1 = [];
      this.list.forEach((tab) => {
        let arr2 = [];
        tab.sub.forEach((sub) => {
          arr2.push({ ...sub });
        });
        arr1.push(arr2);
      });
      return arr1;
    },
    currentTab() {
      return this.list[this.value.tab];
    },
    placeholderTxt() {
      return `搜索我的${this.currentTab.name}`;
    },
  },
  data() {
    return {};
  },
  methods: {
    handleSearch() {
      let query = { type: this.currentTab.val };
      this.$router.push({ name: "order-search", query });
    },
    handleTabClick(index, title) {
      if (index != this.value.tab) {
        setTimeout(() => {
          this.value.sub = 0;
        }, 100);
      }
    },
  },
};
</script>

<style lang="less">
.order-list-header-con {
  background: #ffffff;
  > .header {
    padding: 8px 16px;
    align-items: center;

    .search {
      flex: 1;
      align-items: center;
      padding: 0 14px;
      height: 30px;
      margin-left: 18px;
      background: #f1f1f1;
      border-radius: 15px;
    }
    .search-input {
      flex: 1;
      font-size: 13px;
      margin-left: 10px;
    }
    .uni-input-placeholder {
      color: #aeaeae;
    }
  }

  .tab-list {
    padding: 0 50px;
    margin-bottom: 5px;
    .van-tab--active > .van-tab__text {
      color: #140603;
    }
  }
  .sub-tab-list {
    border-bottom: none;
  }
}
</style>