<template>
  <NavBar />
  <view class="container">
    <view class="title">
      <PageTitle :title="$t('home.customer.title')" />
    </view>
    <view style="margin-top: 33px">
      <Segmented
          styleType="text"
          fontSize="16px"
          gap="22px"
          :current="current"
          :values="items"
          @clickItem="onClickItem"
          inActiveColor="#999999"
          activeColor="#000"
      ></Segmented>
    </view>
    <view style="margin-top: 20px">
      <view v-show="current === 0">
        <Sell :visible="current === 0" />
      </view>
      <view v-show="current === 2">
        <customer :visible="current === 2" />
      </view>

    </view>
  </view>
</template>

<script>
import Segmented from '@/pages/components/segmented/index.vue';
import Sell from './sell/index.vue';
import customer from './customer/index.vue';
export default {
  data() {
    return{
      current: 0,
      items: [this.$t('home.customer.sell'), this.$t('home.customer.ib'), this.$t('home.customer.customer'), this.$t('home.customer.mt')]
    }
  },
  methods:{
    async onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    }
  },
  components: {
    Segmented,
    Sell
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
.is-input-border {
  border: none;
}
</style>
