<template>
  <div class="AppStore">
    <div class="header">
      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
      <div class="nav-bar" :style="{
        height: '44px',
        lineHeight: '44px'
      }">
        <h2>门店</h2>
      </div>
      <div class="tab">
        <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="change" inactive-color="#222" active-color="#222" 
        height="100" :bar-style="barStyle"></u-tabs>
      </div>
    </div>
    <Situation v-if="tabIndex != 1" @toStoreDetail="toStoreDetail"></Situation>
    <Evaluate v-else @toEvaluateForm="toEvaluateForm" @toStoreDetail="toStoreDetail" ref="Evaluate"></Evaluate>

  </div>
</template>

<script>
import {mapState} from 'vuex'
import Situation from './components/Situation'
import Evaluate from './components/Evaluate'
export default {
  name: 'AppStore',
  appName: '门店',
  components: {Situation, Evaluate},
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black',
  customNavigation: true,
  data() {
    return {
      tabList: [{name: '门店情况'}, {name: '我要评价'}],
      tabIndex: 0,
      barStyle: {
        'width': '20px',
        'height': '3px',
        'border-radius': '2px',
        'bottom': '-3px',
        'background': '#2D7DFF'
      },
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
    }
  },
  computed: {
    ...mapState(['user'])
  },
  onLoad(e) {
    if(e.tabIndex) {
      this.tabIndex = e.tabIndex
    }
  },
  methods: {
    change(e) {
      this.tabIndex = e
    },
    toEvaluateForm(e) {
      uni.navigateTo({url: `./EvaluateForm?shopId=${e.shopId}`})
    },
    toStoreDetail(e) {
      uni.navigateTo({url: `./StoreDetail?shopId=${e.shopId}`})
    },
  },
  onReachBottom() {
    if(this.tabIndex == 1) {
      this.$refs.Evaluate.getNextList()
    }
  }

}
</script>

<style lang="scss" scoped>
page{
  height: 100%;
}
.AppStore {
  background-color: #F4F5FA;
  height: 100vh;
  .header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 111;
    width: 100%;
    opacity: 1;
    transition: all 0.2s ease;
    .status-bar {
      background: #fff;
    }

    .nav-bar {
      position: relative;
      color: #000;
      font-size: 32px;
      font-weight: 600;
      background: #fff;
      text-align: center;
    }
  }
  .tab {
    position: fixed;
    left: 0;
    z-index: 9;
    width: 100%;
  }
}
</style>