<template>
  <div class="container">
    <div class="header">
      <van-search
        v-model="searChValue"
        @search="searchHandle"
        @clear="clearHandle"
        placeholder="请输入姓名…"/>
      <TabBar :navList="navList" @funChange="funChange" ref="myNav"/>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { Search } from 'vant'
import TabBar from './components/tabBar'
import { mapGetters } from 'vuex'

export default {
  name: 'business',
  components: {
    'van-search': Search,
    TabBar
  },
  data () {
    return {}
  },
  activated () {
    this.$refs.myNav.funInitTabIndex(this.$route.name === 'partnerAll' ? 1 : (this.$route.name === 'partnerSign' ? 2 : 3))
  },
  computed: {
    ...mapGetters({
      totalOf0: 'business/totalOf0',
      totalOf1: 'business/totalOf1',
      totalOf2: 'business/totalOf2'
    }),
    searChValue: {
      get () {
        return this.$store.getters['business/searchValue']
      },
      set (val) {
        this.$store.dispatch('business/setSearchValue', val)
      }
    },
    navList () {
      return [
        {
          id: 1,
          name: '全部',
          value: this.totalOf0
        },
        {
          id: 2,
          name: '已签约',
          value: this.totalOf1
        },
        {
          id: 3,
          name: '未签约',
          value: this.totalOf2
        }
      ]
    }
  },
  methods: {
    searchHandle () {},
    clearHandle () {},
    funChange (id) {
      const path = id === 1 ? '/partner/business' : (id === 2 ? '/partner/business/sign' : '/partner/business/unsigned')
      this.$nextTick(() => {
        this.$router.replace({ path: path })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  padding-top: 12px;
  background: #fff;
}

::v-deep .van-search {
  width: 341px;
  height: 40px;
  border-radius: 20px;
  margin: 0 auto;
  background: #F7F6F9;

  .van-search__content {
    padding-left: 0;
  }

  .van-cell {
    align-items: center;
  }

  .van-icon-search {
    font-size: 22px;
    color: #DDDDDD;
  }

  .van-field__control {
    line-height: 17px;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    background: transparent;
    -webkit-text-fill-color: #333;
    opacity: 1;

    &::-webkit-input-placeholder {
      color: #999;
      -webkit-text-fill-color: #999;
      opacity: 1;
    }
  }
}
</style>
