<template>
  <scroll-view scroll-y class="viewport">
    <view class="preview">
      <swiper :circular="true" :autoplay="true" :interval="3000" indicator-dots>
        <swiper-item>
          <image
            mode="aspectFill"
            class="image"
            src="https://ts1.cn.mm.bing.net/th/id/R-C.8f2db93b542db8adf6c850762c1cce4d?rik=erpuvqVy64IJzQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50044%2f9286.jpg_wh860.jpg&ehk=dnizwrPBuCaHnaxfih%2fryK7p%2fXZMbmolNORKknXvL%2bI%3d&risl=&pid=ImgRaw&r=0"
          ></image>
        </swiper-item>
        <swiper-item>
          <image
            mode="aspectFill"
            class="image"
            src="https://img95.699pic.com/photo/50127/2949.jpg_wh860.jpg"
          ></image>
        </swiper-item>
        <swiper-item>
          <image
            mode="aspectFill"
            class="image"
            src="https://img95.699pic.com/photo/50070/9636.jpg_wh860.jpg"
          ></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="tab-menu">
      <view
        class="tab-item"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentIndex === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>
   <view class="content">
     <block v-if="currentIndex === 0">
        <sort></sort>
     </block>
     <block v-if="currentIndex === 1">
        <groupVue></groupVue>
     </block>
     <block v-if="currentIndex === 2">
        <addDishVue></addDishVue>
     </block>
   </view>
  </scroll-view>
</template>

<script>
	import { apiImageUrl } from '../../API/api';
	import sort from './sort.vue'
	import groupVue from './group.vue';
	import addDishVue from './addDish.vue';
	export default {
		 components: {
		    sort,
			groupVue,
			addDishVue
		  },
		data(){
		    return {
		        businessId: '1830063677349658625',
		        currentIndex: 0,
		        resultArray: [],
		        historyList: [],
		        tabs: [
		          { name: '总览' },
		          { name: '菜品组操作' },
		          { name: '新增菜品' },
		        ],
		      };
		},
		 methods: {
		    switchTab(index) {
		      this.currentIndex = index;
		    },
			leftGroup(){
				uni.request({
					url:apiImageUrl+'/api/dishesGroup/list/dishesGroup',
					method:'POST',
					data: '1830063677349658625',
					header: {
					  'cookie': uni.getStorageSync("cookie")
					},
					success(res) {
						if(res.data.code===0){
							console.log(res);
							console.log("5555555555");
						}
					},
					fail(res) {
						console.log("失败啦");
					}
				});
				
			},
			
	  }
	}

</script>

<style lang="scss">
.viewport {
  height: 100vh;
  overflow: hidden;
  image {
    width: 100%;
  }
}

.preview {
  image {
    width: 100%;
  }
}

.tab-menu {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
}

.tab-item {
  padding: 10px;
  cursor: pointer;

  &.active {
    color: #4095e5;
    font-weight: bold;
  }
}
</style>