<template>
	<view>
		 <cu-custom :isBack="true" title="一键报课"></cu-custom>
		 <view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - '+topHeader+'px)'">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in attends" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{weekList[index]}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain padding-sm" scroll-y scroll-with-animation :style="'height:calc(100vh - 70px - '+topHeader+'px)'"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
       <radio-group @change="changeClass" style="width:100%;" v-for="(attend,i) in attends" :key="i">
         <view class="cu-item bg-white padding margin-bottom-sm" v-for="(item,index) in attend" v-show="i==mainCur" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom">
						<view>
							<label>
								<view class="flex justify-between align-center">
									<view><text>{{item.attend_name}}</text></view>
										<view>
											<radio :value="item.class_attend_id"
											:disabled="!item.enable"
											:class="{'disabled':!item.enable}"
											:checked="checked.includes(item.class_attend_id)"  class="cyan" style="transform:scale(0.7)"/>
										</view>
									</view>
							</label>
						</view>
					</view>
					<view v-if="item.prop.length>0">
							<checkbox-group  class="checkbox-group margin-top-xs" :data-id="item.class_attend_id" @change="propChange">
									<label v-for="prop in item.prop" :key="prop.id">
										<view>
											<checkbox :value="prop.id"
											:disabled="!item.enable"
											:class="{'disabled':!item.enable}"
											:checked="checked_props[mainCur].class_attend_id===item.class_attend_id&&checked_props[mainCur].prop.includes(prop.id+'')" class="cyan" style="transform:scale(0.7)"/>{{prop.name}}<text>￥{{prop.money}}</text>
										</view>
									</label>
							</checkbox-group>
					</view>
				 </view>
       </radio-group>
			</scroll-view>
		</view>
		<view class="static shadow">
			<view class="static-order flex">
				 <shop-cart :class_attend_id="attend_id"></shop-cart>
				 <button class="cu-btn round bg-student text-white margin-left-xs"  @tap="addCart">报课</button>
			</view>
		</view>
	</view>
</template>

<script>
import { _gift, _joinShops } from '@/api/course'
import { mapGetters } from 'vuex'
import shopCart from '@/components/shop-cart.vue'
export default {
  components: {
    shopCart
  },
  data() {
    return {
      topHeader: this.globalCustomBarHeight,
      package_id: 0,
      attends: [],
      weekList: [],
      attend_id: 0, // 添加成功课程
      checked: [], // 选中
      checked_props: [], // 选中工具
      tabCur: 1,
      mainCur: 1,
      verticalNavTop: 0
    }
  },
  computed: {
    ...mapGetters(['kid'])
  },
  onLoad(options) {
    const id = decodeURIComponent(options.package_id)
    this.package_id = id
    this.init()
  },
  methods: {
    init() {
      _gift({ class_package_id: this.package_id }).then(res => {
        this.attends = res.data.attends
        Object.keys(this.attends).forEach(item => {
          this.$set(this.checked_props, item, { prop: [] })
        })
        this.weekList = res.data.week_list
      })
    },
    addCart() {
      const _self = this
      const list = this.checked_props.filter(item => item.class_attend_id).map(item => {
        return {
          class_attend_id: item.class_attend_id,
          prop: item.prop.join(','),
          student_id: this.kid
        }
      })
      if (list.length < 1) {
        uni.showToast({ title: '请先选择课程', icon: 'none' })
        return false
      }
      _joinShops({ list }).then(res => {
        if (res.code === 1) {
          _self.globalNavigateTo('classCart')
        }
      })
    },
    TabSelect(e) {
      this.tabCur = e.currentTarget.dataset.id
      this.mainCur = e.currentTarget.dataset.id
      this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
    },
    changeClass(e) {
      const value = Number(e.detail.value)
      this.checked[this.mainCur] = value
      this.$set(this.checked, this.mainCur, value)
      this.$set(this.checked_props, this.mainCur, { class_attend_id: value, prop: [] })
    },
    propChange(e) {
      const parentId = e.target.dataset.id
      const values = e.detail.value
      if (!this.checked.includes(parentId)) {
        this.$set(this.checked, this.mainCur, parentId)
      }
      const item = { class_attend_id: parentId, prop: values }
      this.$set(this.checked_props, this.mainCur, item)
    },
    VerticalMain(e) {

    }
  }
}
</script>

<style lang="scss" scoped>
	::v-deep radio.disabled::before,::v-deep checkbox.disabled::before{
		color:#e1e1e1 !important;
	}
	.static{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			background: #fff;
			height: 70px;
			align-items: center;
			padding: 0 0.8rem;
			justify-content: flex-end;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
