<template>
  <view class="content">
    <view class="content-view">
    <view class="top-view">
      <text>共{{ classList.length }}个课程</text>
      <view class="top-btn">
        <u-button :custom-style="btnStyle" size="mini" :plain="true" :hair-line="false" @click="handleManage(!isEditMode)">
			<view v-if="!isEditMode">
				<u-icon name="edit-pen" size="28" style="margin-right: 10rpx;"></u-icon>
				管理
			</view>
			<view v-else>完成</view>
        </u-button>
      </view>
    </view>

    <view>
      <children-list :items="items" :current="current" />
    </view>

    <view class="class-list-view">
      <no-content-tips
        class="empty-tip"
        :src="'/static/table_empty.png'"
        :isShow="(!isLoading && classList.length === 0)"
        :tips="'您的选课单空空如也哦~'"
      >
        <template v-slot:btn>
          <button class="btn" type="primary" size="mini">去看一下</button>
        </template>
      </no-content-tips>
      <view class="class-list">
        <u-checkbox-group @change="checkboxChange" >
          <view v-for="item in classList" :key="item.id" class="card class-card">
            <view class="cart-item-content class-content">
              <u-checkbox class="class-list-cb"
                v-model="item.selected" :key="item.id" shape="circle"></u-checkbox>
              <view class="item-content-view">
                <image class="class-item-pic" src="@/static/logo.png" />
                <view class="class-info-view">
                  <view class="class-info-title">
                    {{ item.title }}
                  </view>
                  <view class="class-info-leftover">
                    剩余{{ item.leftover }}个名额
                  </view>
                  <view class="class-info-bottom">
                    <text class="red-price">￥{{ item.price }}/人</text> 
                    <u-number-box class="number-box" input-width="30" input-height="35" size="20" :min="1" v-model="item.count" @change="countChange"></u-number-box>
                  </view>
                </view>
              </view>
            </view>
          </view>
		    </u-checkbox-group>
        
      </view>
    </view>

    <view class="recommend-view">
      <view class="recommend-title-view">
        <view class="line" />
        <text>精选推荐</text>
        <view class="line" />
      </view>

      <view class="recommend-list">
        <view class="card recommend-card">
          <view class="cart-item-content">
            <img class="card-item-pic" src="@/static/logo.png" />
            <view class="recommend-text-view">
              <view>
                <text class="r-text text-title">花样跳绳（B）</text>
                <text class="r-text text-cost">$800/人</text>
              </view>
              <text class="text-info">掌握跳绳技术，通过跳绳技术的学习...</text>
              <text style="font-size: 20rpx;font-weight: 400;color: #A3ABBF;">每周星期三17:10~18:10</text>
              <view class="recommend-text-bottom">
                <view class="teacher-avater-div">
                  <img style="width:30rpx; height:30rpx;" src="../../static/avater.png" />
                </view>
                <text class="teacher-name-text">乐小小</text>
                <button type="primary" class="sign-up-btn">立即报名</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>
  

    <view class="navigation">
			<view class="left">
				<view class="item">
					<u-checkbox-group>
						<u-checkbox v-model="isSelectedAllRow" :disabled="!classList.length" shape="circle" @change="selectedAllRow">
							全选
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="right">
				<!-- #ifndef  MP-WEIXIN-->
				<view v-show="!isEditMode" class="total-cost u-line-1">
					合计
					<text class="red-price">￥{{ sumPrice.toFixed(2) }}</text>
				</view>
				<u-button v-if="!isEditMode" class="btn u-line-1" >结算</u-button>
				<u-button v-else class="btn-del u-line-1" @click="handleDel">删除</u-button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<view v-show="!isEditMode" class="total-cost u-line-1">
						合计
						<text class="red-price">￥{{ sumPrice.toFixed(2) }}</text>
					</view>
					<button v-if="!isEditMode" class="btn u-line-1" >结算</button>
					<button v-else class="btn-del u-line-1" @click="handleDel">删除</button>
				<!-- #endif -->
			</view>
		</view>
  </view>
</template>

<script>
import childrenList from "@/components/common/childrenList"
import noContentTips from "../../components/common/noContentTips.vue"

export default {
  components: {
    "no-content-tips": noContentTips,
    "children-list": childrenList
  },
  data: () => ({
    isLoading: false,
    classList: [
      {
        id: "1",
        title: "花样跳绳（B）",
        price: 800,
        leftover: 20,
        time: "每周星期三17:10~18:10",
        selected: false,
        count: 1
      },
      {
        id: "2",
        title: "花样跳绳（B）",
        price: 800,
        leftover: 20,
        time: "每周星期三17:10~18:10",
        selected: false,
        count: 1
      },
      {
        id: "3",
        title: "花样跳绳（B）",
        price: 800,
        leftover: 20,
        time: "每周星期三17:10~18:10",
        selected: false,
        count: 1
      },
      {
        id: "4",
        title: "花样跳绳（B）",
        price: 800,
        leftover: 20,
        time: "每周星期三17:10~18:10",
        selected: false,
        count: 1
      }
    ],
    items: [
      {
        value: "123",
        name: "乐大棒",
        class: "六年级-1班",
        imgUrl: "../../static/avater.png"
      },
      {
        value: "12",
        name: "乐小棒",
        class: "四年级-1班",
        imgUrl: "../../static/avater.png"
      },
    ],
    current: "123",
    btnStyle: {
      border: "none"
    },
    isSelectedAllRow: false,
    sumPrice: 0,
    isEditMode: false

  }),
  computed: {},
  methods: {
    // 全选/全不选
			selectedAllRow() {
				this.isSelectedAllRow = this.classList.length ? !this.isSelectedAllRow : false
				let len = this.classList.length
				for (let i = 0; i < len; i++) {
					this.classList[i].selected = this.isSelectedAllRow
				}
				this.sumTotalPrice()
			},

			// 合计总价格
			sumTotalPrice() {
				// 获取选择信息
				this.sumPrice = 0
				this.selectedAllRowLength = 0
				for (let i = 0; i < this.classList.length; i++) {
          if(this.classList[i].selected){
            this.sumPrice +=  this.classList[i].price * this.classList[i].count
          }
				}
      },
      handleManage(mode){
        this.isEditMode = mode
        if(mode === false){
          // 清空已选择
          let len = this.classList.length
          for (let i = 0; i < len; i++) {
            this.classList[i].selected = false
          }
          this.selectedAllRow = false
          this.sumTotalPrice()
        }
      },
      checkboxChange(arr){
        if(arr.length === this.classList.length){
          this.isSelectedAllRow = true
        }else{
          this.isSelectedAllRow = false
        }
        this.sumTotalPrice()
      },
      countChange(){
        this.sumTotalPrice()
      },
      // 删除
      handleDel(){
        let delArr = []
        for(let i=0;i<this.classList.length;i++){
          if(this.classList[i].selected){
            delArr.push(this.classList[i].id)
          }
        }
        for(let i=0;i<delArr.length;i++){
          this.classList.splice(this.classList.findIndex(e => e.id === delArr[i]),1)
        }
        this.isSelectedAllRow = false
        this.sumTotalPrice()
        this.isEditMode = false
      }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {
    uni.stopPullDownRefresh()
  }
}
</script>

<style>
.content-view {
  margin-bottom: 100rpx;
}
.top-view {
  margin: 20rpx;
}
.top-btn {
  display: inline-block;
  position: absolute;
  right: 20rpx;
}
.btn {
  margin-top: 50rpx;
}
.recommend-view {
  margin-top: 50rpx;
  text-align: center;
}
.line {
  display: inline-block;
  width: 57rpx;
  height: 1rpx;
  background: #a3abbf;
  vertical-align: middle;
  margin: 0 20rpx;
}
.recommend-title-view {
  height: 25rpx;
}
.recommend-list {
  margin-top: 20rpx;
  text-align: center;
  display: inline-block;
}
.class-list {
  margin-top: 20rpx;
}
.recommend-text-view {
  /* padding: 10rpx; */
  padding-left: 18rpx;
  /* height: 30rpx; */
  display: inline-block;
  /* new */
  /* width: 67%; */
  width: 410rpx;
  text-align: left;
  vertical-align: bottom;
}
.card {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 15px 1px #f0f0f0;
  border-radius: 10px;
}
.recommend-card {
  margin: 10rpx auto;
  width: 677rpx;
  height: 272rpx;
}
.class-card {
  margin: 10rpx auto;
  width: 677rpx;
  height: 220rpx;
}
.r-text {
  /* padding-right: 60rpx; */
}
.text-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
.text-cost {
  font-size: 28rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #eb564f;
  /* new */
  float: right;
}
.text-info {
  font-size: 20rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.card-item-pic {
  /* height: 30%; */
  /* new */
  width: 200rpx;
	height: 160rpx;
	vertical-align: top;
}
.cart-item-content {
  margin: 30rpx;
  /* new */
  position: relative;
}
.teacher-avater-div {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #3267f5;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
}
.recommend-text-bottom {
  margin-top: 40rpx;
}
.teacher-name-text {
  display: inline-block;
  font-size: 20rpx;
  line-height: 20rpx;
  margin-left: 30rpx;
  font-weight: 400;
  color: #333333;
}
.sign-up-btn {
  float: right;
  font-size: 20rpx;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx;
  height: 100rpx;
  position: fixed;
  bottom: calc(var(--status-bar-height) + 90rpx);
  /* new 仅在微信小程序适用*/
  /*  #ifdef  MP-WEIXIN */
  bottom: 0; 
  /*  #endif  */
  z-index: 100;
  width: 100%;
}

.left {
  display: flex;
  font-size: 20rpx;
}

.item {
  margin: 0 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.right {
  display: flex;
  font-size: 28rpx;
  align-items: center;
}

.btn {
  height: 46rpx;
  line-height: 46rpx;
  background: linear-gradient(0deg, #0251FF 0%, #2794F6 100%);
  border-radius: 21rpx;
  margin: 0;
  color: #fff;
  font-weight: 400;
  font-size: 30rpx;
}

.btn-del {
  width: 120rpx;
  height: 46rpx;
  font-size: 30rpx;
  line-height: 46rpx;
  background: #FFFFFF;
  border-radius: 21rpx;
  color: #0251FF;
  border: 1px solid #0251FF;
}

.total-cost {
  margin-right: 30rpx;
}

.red-price {
  color: red;
}

.item-content-view {
  display: inline-block;
  margin-left: 60rpx;
}
.class-item-pic {
  width: 200rpx;
  height: 160rpx;
}
.class-list-cb {
 /* position: relative;
  top: -80rpx; */
  display: inline-flex;
  /* new */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.class-info-view {
  position: relative;
  top: -20rpx;
  display: inline-block;
  margin-left: 20rpx;
}
.class-info-title {
  margin-bottom: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  width: 300rpx;
  overflow: hidden;  /*超出宽度部分隐藏*/
  text-overflow: ellipsis;  /*超出部分以点号代替*/
}
.class-info-leftover {
  margin-bottom: 10rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #A3ABBF;
}
.number-box {
  margin-left: 50rpx;
}

</style>
