<!--
 * @Author: yizhiyang
 * @Date: 2023-11-30 09:40:24
 * @Description:
-->
<template>
  <view>
    <view class="order">
      <view style="background-color: #fff; padding: 15rpx">
        <u-tabs
          :list="list1"
          lineWidth="30"
          lineColor="$uni-bg-color-primary"
          :activeStyle="{
            color: '#000',
            fontWeight: 'bold',
            fontSize: '32rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }"
          :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
          }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
          @click="handlerChangeItem"
        ></u-tabs>
      </view>

      <orderItem :typeStyle.sync='typeStyle'></orderItem>

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

<script>
  import orderItem from "@/pages/tabbar/order/components/orderItem.vue"
export default {
  data() {
    return {
      list1: [
        { id: '1', name: '全部' },
        { id: '2', name: '进行中' },
        { id: '3', name: '预约中' },
        { id: '4', name: '退款' },
        { id: '5', name: '已完成' },
      ],
      typeStyle:0
    };
  },
  components:{orderItem},
  methods:{
    // 点击切换顶部导航栏
    handlerChangeItem(item){
      this.typeStyle = item.index
    }
  }
};
</script>
<style lang="scss" scoped>
  .order {
    min-height: 100vh;
    background-color: $uni-bg-color-page;
  }
</style>
