<view class="tutorial-container">
  <view class="tutorial-title animated {{ selectedTab === 0 ? 'fadeInRight' : 'fadeInLeft' }}">
    {{ selectedTab === 0 ? emergencyTitle : studayTitle }}
  </view>
  <view class="tabs-container" >
    <view class="tabs">
      <view
        bindtap="bindSelectedTab"
        class="{{selectedTab === 0 ? 'selected-tab' : 'tab' }}"
        data-tab="0"
      >
        应急
      </view>
      <view
        bindtap="bindSelectedTab"
        class="{{selectedTab === 1 ? 'selected-tab' : 'tab' }}"
        data-tab="1"
      >
        学习
      </view>
    </view>
    <view
      class="bar"
      style="margin-left: {{selectedTab === 0 ? '5%' : '55%'}}"
    />
  </view>
  <swiper class="swiper" current="{{selectedTab}}" bindchange="change">
    <swiper-item class="swiper-item">
      <template
        is="tutorial"
        data="{{title: '意识丧失', type: '应急', tap: tap, src: '../../assets/images/unconsciousness.svg' }}"
      />
    <template is="tutorial" data="{{ title: '烧烫伤', type: '应急', tap: tap, src: '../../assets/images/Scald.svg' }}" />
    </swiper-item>
    <swiper-item class="swiper-item">
      <template is="tutorial" data="{{ title: '意识丧失', type: '学习', tap: tap, src: '../../assets/images/unconsciousness.svg' }}" />
    </swiper-item>
  </swiper>
</view>

<template name="tutorial">
  <view bindtap="tap" class="tutorial-item" data-title="{{title}}" data-type="{{type}}" >
    <text> {{title}} </text>
    <image src="{{src}}" style="height: 50rpx; width: 50rpx" />
  </view>
</template>

@import "../../libs/animate.wxss"
.tutorial-container {
  font-family: PingFangSC-Regular, sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.tutorial-title {
  color: #FA5834;
  height: 100rpx;
  width: 100%;
  font-size: 50rpx;
  margin-left: 50rpx;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
  /*vertical-align: middle;*/
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  flex-shrink: 0;
}

.tabs-container {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(178,190,193, 0.4);
  position: relative;
  left: 0;
  flex-shrink: 0;
}

.tabs {
  display: flex;
}

.tab {
  display: flex;
  flex: 1;
  height: 80rpx;
  align-items: center;
  justify-content: center;
  color: #7B9397;
}

.selected-tab {
  display: flex;
  flex: 1;
  height: 80rpx;
  align-items: center;
  justify-content: center;
  color: #FA5834;
  font-weight: 550;
}

.bar {
  width: 40%;
  background-color: #FA5834;
  height: 3px;
  position: absolute;
  bottom: -2px;
  margin-left: 5%;
  border-radius: 3px;
}

.swiper {
  /*flex: 100;*/
  height:100%;
  /*background-color: grey;*/
}
.swiper-item {
  display: flex;
  flex-direction: column;
}

.tutorial-list {
  height: 100%;
  flex: 1;
}
.tutorial-item {
  font-size: 50rpx;
  color: #23454D;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0rpx 50rpx;
  vertical-align: middle;
  height: 150rpx;
  border-bottom: 1px solid rgba(178,190,193, 0.4);
}

Page({
  data: {
    selectedTab: 0,
    emergencyTitle: '应急，事不容迟。',
    studayTitle: '学习，未雨绸缪。',
    emergencyList: [

    ],
    studayList: [

    ],
  },
  bindSelectedTab(e) {
    this.setData({
      selectedTab: Number(e.target.dataset.tab),
    });
  },
  tap(e) {
    if (e.target.dataset.title === '意识丧失' && e.target.dataset.type === '应急'){
      wx.navigateTo({
        url: '../isBreath/isBreath',
      });
    }
    if (e.target.dataset.title === '烧烫伤' && e.target.dataset.type === '应急'){
      wx.navigateTo({
        url: '../burning/burning',
      });
    }
    if (e.target.dataset.title === '意识丧失' && e.target.dataset.type === '学习'){
      wx.navigateTo({
        url: '../unconsciousnessStudy/unconsciousnessStudy',
      });
    }

  },
  change(e) {
    this.setData({
      selectedTab: Number(e.detail.current),
    });
  },
});