dy-admin-manager/src/views/resetTeaming/modals/subject-preview.vue

<template>
    <div style="background: #F3F4F8;">
        <h2 class="title">注册说明</h2>
        <div class="noticeInfo">
            1、您注册时所选择的乐团声部，即为乐团录取最终确认的声部，请您务必仔细填写；<br />
			2、为避免因部分已注册家长放弃名额导致乐团声部失衡，系统设定各声部限额放大20%比例开放注册，系统自动按照完全完成注册的先后顺序确认录取名单，因此，超员后有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，在您孩子的身体条件适合该乐器的前提下，我们将优先予以调配。
		</div>

        <template v-if="courseViewType == 2">
			<h2 class="title" >学习工具包</h2>
			<div class="yunTrain">
				<img :src="trainBg" />
				<div class="toolText">
					<p class="toolTitle">乐器练习云教练
						<i class="icon_video" @click="videoStatus = true"></i>
					</p>
					<p class="toolDate">有效期说明：自开课之日起6个月内有效</p>
				</div>
			</div>
		</template>

        <template v-if="courseViewType == 1 && courseShowInfo.length > 0">
			<div class="yunTrain" style="margin-top: 12px;">
				<img :src="trainBg" />
				<div class="toolText">
					<p class="toolTitle">服务</p>
					<p class="toolDate" v-if="serviceValidDate">服务有效期:{{ serviceValidDate }}</p>
				</div>
			</div>
		</template>

		<h2 class="titles" style="margin-top: 12px;" v-if="courseViewType == 0">
			<img :src="trainSmallBg" />
			<span>乐团课程</span>
		</h2>
		<template class="section">
            <!-- 所有不可选的课程合集 -->
			<div class="section" v-if="courseShowStatus && courseViewType == 1">
				<el-row class="option-row"  v-for="(item, index) in courseShowInfo" :class="[!item.isStudentOptional ? 'disabled' : '']" :key="index" @click.native="onCourseChange(item)">
					<el-col :span="16">
						<i class="check_default" :class="[item.isStatus ? 'check_active' : '']"></i>
						<span style="display: flex; align-items: center;">
							<template v-if="item.courseType == 'PROJECT'">{{ chargeTypeName }} </template><template v-else>{{ item.courseType | coursesType }}</template>
						</span>
						<el-icon v-if="item.courseType == 'PROJECT'" class="el-icon-question" @click.native="onQuestions('amr')" />
					</el-col>
					<el-col :span="8">
						<span style="color: #1A1A1A">￥{{ item.courseCurrentPrice | moneyFormat }}</span>
					</el-col>
				</el-row>
			</div>

            <div class="section" v-if="courseViewType == 2">
				<div v-for="(item, index) in toolsPackage" :key="index">
					<el-row class="option-row" style="padding-top: 0;" @click.native="onTrainChange(item)">
						<el-col :span="18">
							<i class="check_default"  :class="[item.isStatus ? 'check_active' : '']"></i>
							<span style="display: flex; align-items: center;">
								<template>{{ item.name }}</template>
							</span>
						</el-col>
						<el-col :span="6">
							<span style="color: #1A1A1A" v-if="courseViewType == 2">￥{{ cloudTeacherFee | moneyFormat }}</span>
						</el-col>
					</el-row>
					<el-row style="padding-left: .24rem;" v-if="item.childGoodsList && courseViewType == 2">
						<el-col v-for="(child, index) in item.childGoodsList" :key="child.name">
							<span style="font-size: 12px; color: #808080;">{{ child.name }} {{item.childGoodsList.length - 1 == index ? '' : '、'}}</span>
						</el-col>
					</el-row>
				</div>
			</div>

			<!-- 可选课程信息集合 -->
			<div class="section" v-if="courseViewType == 0">
                <el-row class="title-row" v-if="courseViewType == 0">
                    <el-col :span="12">课程类型</el-col>
                    <!-- <el-col :span="5" :offset="1" style="text-align: right;">原价</el-col> -->
                    <el-col :span="11" :offset="1" style="text-align: right;">现价</el-col>
                </el-row>
				<el-row class="option-row" v-for="(item, index) in courseInfo" :key="index" @click.native="onCourseChange(item)">
					<el-col :span="12">
						<i class="check_default" :class="[item.isStatus ? 'check_active' : '', !item.isStudentOptional ? 'disabled' : '']"></i><template v-if="item.courseType == 'PROJECT'">{{ item.name }}</template><template v-else>{{ item.courseType | coursesType }}</template>
					</el-col>
					<!-- <el-col :span="6">
						<del style="color: #AAA; font-size: 12px;">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
					</el-col> -->
					<el-col :span="11" :offset="1">
						<span style="color: #1A1A1A">￥{{ item.courseCurrentPrice | moneyFormat }}</span>
					</el-col>
				</el-row>
			</div>
		</template>

        <div class="section" v-if="courseInfo && courseInfo.length > 0 && isClickStatus && courseViewType == 1">
			<h2 class="title">{{ '乐团课程' }}</h2>
			<el-row class="title-row">
				<el-col :span="12">课程类型</el-col>
				<!-- <el-col :span="5" :offset="1" style="text-align: right;">原价</el-col> -->
				<el-col :span="11" :offset="1" style="text-align: right;">现价</el-col>
			</el-row>
			<!-- 可选课程信息集合 -->
			<template v-for="(item, index) in courseInfo">
				<el-row class="option-row" :key="index"  @click.native="onCourseChange(item)" v-if="item.isStudentOptional">
					<el-col :span="12">
						<i class="check_default" :class="[item.isStatus ? 'check_active' : '', !item.isStudentOptional ? 'disabled' : '']"></i><template v-if="item.courseType == 'PROJECT'">{{ item.name }}</template><template v-else>{{ item.courseType | coursesType }}</template>
					</el-col>
					<!-- <el-col :span="6">
						<del style="color: #AAA; font-size: .12rem;">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
					</el-col> -->
					<el-col :span="11" :offset="1">
						<span style="color: #1A1A1A">￥{{ item.courseCurrentPrice | moneyFormat }}</span>
					</el-col>
				</el-row>
			</template>
		</div>

        <h2 class="titles" v-if="instrumentResultList && instrumentResultList.length > 0">
			<img :src="trainSmallBg" />
			<span>乐器</span>
		</h2>
		<div class="section" v-if="instrumentResultList && instrumentResult.length > 0">
            <div v-for="(i, index) in instrumentResultList" :key="index">
                <template v-if="leBaoStatus && i[0].kitType == 'owned'">
                    <!-- <el-row class="title-row">
                        <el-col :span="12" :offset="1">服务项目</el-col>
                        <el-col :span="11" style="text-align: right;">现价</el-col>
                    </el-row> -->
                    <el-row class="option-row" style="padding-bottom: 10px; margin-top: 8px; border-top: 1px solid #F0F0F0;" @click.native="onLeBao">
                        <el-col :span="12">
                            <i class="check_default" :class="[ buyMaintenance ? 'check_active' : '' ]"></i>乐器保养（一年）<el-icon style="padding-left: 0;" name="question" @click.stop.native="onQuestions('instrument')" />
                        </el-col>
                        <!-- <el-col :span="6">
                            <del style="color: #AAA; font-size: .12rem;">￥{{ 500 | moneyFormat }}</del>
                        </el-col> -->
                        <el-col :span="11" :offset="1">
                            <span style="color: #1A1A1A">￥{{ 300 | moneyFormat }}</span>
                        </el-col>
                    </el-row>
                </template>
				<el-row class="title-row">
					<el-col :span="12">
						<template v-if="i[0]['kitType'] == 'GROUP'">
							团购乐器{{ courseViewType == 2 ? '(赠送辅件一套)' : null }}
						</template>
						<template v-if="i[0]['kitType'] == 'LEASE'">
							乐器租赁{{ courseViewType == 2 ? '(请自行购买辅件)' : null }}
						</template>
						<template v-if="i[0]['kitType'] == 'FREE'">
							免费乐器{{ courseViewType == 2 ? '(请自行购买辅件)' : null }}
						</template>
						<template v-if="i[0]['kitType'] == 'owned'">
							自备乐器{{ courseViewType == 2 ? '(请自行购买辅件)' : null }}
						</template>
					</el-col>
					<el-col :span="5" :offset="1" style="text-align: right;">
						<template v-if="['GROUP', 'LEASE', 'FREE'].includes(i[0]['kitType'])">原价</template>
					</el-col>
					<el-col :span="5" :offset="1" style="text-align: right;">
						<template v-if="['GROUP', 'FREE'].includes(i[0]['kitType'])">现价</template>
						<template v-if="i[0]['kitType'] == 'LEASE'">租赁押金</template>
					</el-col>
				</el-row>

                <div v-for="(con, index) in i" :key="index" @click="instrumentF(con)">
                    <el-row class="option-row">
                        <el-col :span="12">
                            <i class="check_default" :class="[ con.checked ? 'check_active' : '' ]"></i>
                            <div>
                                {{ con.name }}
                                <div v-if="con.goodsList" style="font-size: 12px; color: #808080">
                                    {{ con.goodsList[0].specification }}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <del style="color: #808080; font-size: 12px;" v-if="con.kitType != 'owned'">￥{{ con.marketPrice | moneyFormat }}</del>
                        </el-col>
                        <el-col :span="6">
                            <span style="color: #1A1A1A" v-if="(con.kitType == 'LEASE')">￥{{ Number((con.depositFee  - con.coupon).toFixed(2)) | moneyFormat }}</span>
                            <span style="color: #1A1A1A" v-if="con.kitType == 'FREE'">￥{{ 0 | moneyFormat }}</span>
                            <span style="color: #1A1A1A" v-if="con.kitType == 'GROUP'">￥{{ Number((con.price  - con.coupon).toFixed(2)) | moneyFormat }}</span>
                        </el-col>
                    </el-row>
                    <el-row style="padding: 8px 0px 8px 24px; border-top: 1px solid rgb(240, 240, 240);" v-if="con.childGoodsList && con.kitType == 'GROUP'">
						<el-col :span="24" style="font-size: 14px; color: #1A1A1A; padding-bottom: 3px">赠送辅件</el-col>
						<el-col>
							<span style="font-size: 12px; color: #808080;">
                                {{ con.childGoodsNames }}
                            </span>
						</el-col>
					</el-row>
                </div>
			</div>
		</div>

        <h2 class="titles" v-if="accessOries.length > 0 && accessIsShowStatus">
			<img :src="trainSmallBg" />
			<span>辅件</span>
		</h2>
		<div class="section" v-if="accessOries.length > 0 && accessIsShowStatus" key="accessOries">
            <el-row class="title-row">
				<el-col :span="12">服务项目</el-col>
				<el-col :span="5" :offset="1" style="text-align: right;">原价</el-col>
				<el-col :span="5" :offset="1" style="text-align: right;">现价</el-col>
			</el-row>

			<div v-for="(instr, index) in accessOries" :key="index">
                <el-row class="option-row" @click.native="onAuxiliarie(instr)">
                    <el-col :span="12">
                        <i class="check_default" :class="[ instr.checked ? 'check_active' : '' ]"></i>{{ instr.name }}
                    </el-col>
                    <el-col :span="6">
                        <del style="color: #808080; font-size: 12px;">￥{{ instr.goodsList[0] ? instr.goodsList[0].marketPrice : 0 | moneyFormat }}</del>
                    </el-col>
                    <el-col :span="6">
                        <span style="color: #1A1A1A" v-if="instr.price == 0">免费</span>
                        <span style="color: #1A1A1A" v-else>￥{{ instr.price | moneyFormat }}</span>
                    </el-col>
                </el-row>
                <el-row style="padding-left: 24px;" v-if="instr.childGoodsList">
					<el-col>
						<span v-for="(child, index) in instr.childGoodsList" :key="child.id" style="font-size: 12px; color: #808080;">{{ child.name }} {{instr.childGoodsList.length - 1 == index ? '' : '，'}}</span>
					</el-col>
				</el-row>
            </div>
		</div>

		<div class="buy">
			<div class="price">
                <p class="oldprice">
                    <del class="text">原价</del>
                    <del style=" font-size: 13px;">￥{{ orderInfo.marketPrice | moneyFormat }}</del>
                </p>
                <p class="now_price">
                    <span class="text">仅需支付</span>
                    <span style="font-weight: bold">￥{{ needPrice | moneyFormat }}</span>
                </p>
			</div>

			<a class="btn-submit">购买</a>
		</div>

        <el-dialog
            title="视屏"
            :visible.sync="videoStatus"
            :modal-append-to-body="false"
            :append-to-body="true"
            class="videoDialog"
            width="30%">
            <video style="width: 100%;" v-if="videoStatus" controls="controls" class="ql-video" :src="'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'" :poster="require('../../../assets/images/musicGroup/video_bg.png')" />
        </el-dialog>
    </div>
</template>
<script>
import { permission } from '@/utils/directivePage'
import { getSubjectGoodsAndInfoPreview, getType } from '@/api/buildTeam'
import dayjs from 'dayjs'
const paymentPatternType = {
    0: '按月',
    1: '按学期',
    2: '一次性'
}
export default {
    props: ["subjectId", "calenderId"],
    data() {
        const query = this.$route.query
        return {
            videoStatus: false,
            trainBg: require('../../../assets/images/musicGroup/yunTrain_bg.png'),
            trainSmallBg: require('../../../assets/images/musicGroup/yunTrain_small_bg.png'),
            musicGroupId: query.id,
            result: {}, // 返回结果
            instrument: {}, // 乐器类型
            baseInfo: {}, // 其它类
            money: 580,
            balance: 0, // 余额
            needPrice: 0, // 还需支付
            payType: false, // 是否余额支付
            cloudTeacherFee: 0, // 云教练费用
            cloudTeacherPlusFee: 0, // 云教练+
            orderInfo: {
                marketPrice: 0,
                amount: 0, // 现价总金额
                groupPurchasePrice: 0, // 现价
                goodsGroupIds: null,
                goodsIds: null,
                contractGoodsIds: null, // 选中所有商品ID
                couponPrice: 0, //
                musicClassFee: 0, // 课程现价
                musicMarketClassFee: 0, // 课程原价
                accessPrice: 0, // 辅件现价
                accessMarketPrice: 0, // 辅件原价
                goodsPrice: 0, // 乐器现价
                goodsMarketPrice: 0, // 乐器原价
            }, // 金额列表，金额计算
            toolsPackage: [{
                isStatus: true,
                name: '练习系统（六个月）',
                childGoodsList: [{ name: '' }],
            }], // 学习工具包
            courseInfo: [], // 课程信息
            courseShowInfo: [], // 课程信息显示用
            musicGroupSubject: null, // 基本信息
            instrumentResult: [], //乐器
            accessOries: [], // 辅件(打包)
            agreeStatus: true,
            authStatus: false,
            buyList: [], // 信息列表
            ids: [],
            instrumentResultList: [],
            chargeTypeId: null,
            paymentStatus: null,
            paymentPattern: null,
            serviceValidDate: null, // 服务时间
            courseShowStatus: false,
            chargeTypeList: [],
            chargeTypeName: null,
            courseViewType: 0, // 收费模式，0 课程显示，1 AMR系统 2会员
            leBaoStatus: false,
			buyMaintenance: false, // 是否开启乐保
            isClickStatus: false,
            accessStatus: false, // 是否有辅件乐保
            accessIsShowStatus: false, // 是否显示辅件 true 显示， false 不显示
        };
    },
    mounted() {
        this.__init()
    },
    methods: {
        async __init() {
            // 获取数据
            let params = {
                musicGroupId: this.musicGroupId,
                subjectId: this.subjectId,
                calenderId: this.calenderId
            }
            await getType().then(res => {
                let result = res.data
                if(res.code == 200) {
                    this.chargeTypeList = result.rows || []
                }
            })

            await getSubjectGoodsAndInfoPreview(params).then(res => {
                let result = res
                if (result.code == 200) {
                    let tempResult = result.data
                    this.courseViewType = tempResult.musicGroup.courseViewType || 0
                    this.cloudTeacherFee = tempResult.cloudTeacherFee || 0
                    this.cloudTeacherPlusFee = tempResult.cloudTeacherPlusFee || 0
                    this.paymentPattern = 2
                    if(tempResult.musicGroupPaymentCalender) {
                        this.paymentPattern = tempResult.musicGroupPaymentCalender.paymentPattern
                        this.serviceValidDate = dayjs(tempResult.musicGroupPaymentCalender.paymentValidStartDate).format('YYYY/MM/DD') + '~' + dayjs(tempResult.musicGroupPaymentCalender.paymentValidEndDate).format('YYYY/MM/DD')
                    }
                    let tempInfo = tempResult.musicGroupPaymentCalender? tempResult.musicGroupPaymentCalender.musicGroupPaymentCalenderCourseSettingsList : null

                    let memberPrivilegesItemList = tempResult.memberPrivilegesItemList ? tempResult.memberPrivilegesItemList : []
						let tempMember = []
						memberPrivilegesItemList.forEach(member => {
							if(member.memberPrivilegesItems && member.memberPrivilegesItems.length > 0) {
								member.memberPrivilegesItems.forEach(item => {
									tempMember.push(item.name)
								})
							}
						})
						this.toolsPackage = [{
							isStatus: true,
							name: '练习系统（六个月）',
							childGoodsList: [{ name: tempMember.join('、') }]
						}]
                    // 判断是否有课程
                    if (tempInfo && tempInfo.length > 0) {
                        let tempCourse = {
                            courseCurrentPrice: 0,
                            courseOriginalPrice: 0,
                            courseType: null,
                            name: '器乐练习系统'
                        }
                        tempInfo.forEach(info => {
                            if(!info.isStudentOptional) {
                                this.courseShowStatus = true
                                tempCourse = {
                                    courseCurrentPrice: (info.courseCurrentPrice + tempCourse.courseCurrentPrice),
                                    courseOriginalPrice: (info.courseCurrentPrice + tempCourse.courseCurrentPrice),
                                    courseType: 'PROJECT',
                                    isStatus: true,
                                    name: '器乐练习系统'
                                }
                            }
                        })
                        this.courseShowInfo = [tempCourse]
                        // 默认课程都选中
                        this.courseInfo = tempInfo
                    } else {
                        // 判断是否有课程，如果没有课程则默认显示0
                        this.courseInfo = [{
                            id: -1,
                            courseCurrentPrice: 0,
                            courseOriginalPrice: 0,
                            isStudentOptional: false,
                            courseType: 'MUSIC'
                        }]
                    }
                    this.isClickStatus = false
                    this.courseInfo.forEach(item => {
                        if(item.isStudentOptional) {
                            item.isStatus = false

                            this.isClickStatus = true
                        } else {
                            item.isStatus = true
                        }
                    })

                    // console.log(this.isClickStatus)

                    this.musicGroupSubject = tempResult.musicGroupSubjectPlan
                    let instrumentInfo = {}
                    let tempInstrument = []
                    tempResult.musicGroupSubjectGoodsGroupList.forEach((item) => {
                        if (item.type == "INSTRUMENT") {
                            // 获取乐器所有提供方式
                            let KGPTJ = item.kitGroupPurchaseTypeJson ? JSON.parse(item.kitGroupPurchaseTypeJson) : {}
                            for (let single in KGPTJ) {
                                let tempItem = Object.assign({}, item) // 深拷贝
                                tempItem.marketPrice = tempItem.goodsList[0].marketPrice
                                tempItem.kitType = single // 优惠模式
                                tempItem.coupon = KGPTJ[single] // 优惠金额
                                if (instrumentInfo.id) {
                                    tempItem.checked = false
                                    if (single == 'GROUP') { // 团购
                                        if ((instrumentInfo.kitType == 'GROUP' && instrumentInfo.price < tempItem.price) || instrumentInfo.kitType ==
                                            'LEASE' || instrumentInfo.kitType == 'FREE') {
                                            this.instrumentResult.forEach(instrRes => {
                                                instrRes.checked = false
                                            })
                                            tempItem.checked = true
                                            instrumentInfo = {
                                                id: tempItem.id,
                                                price: tempItem.price,
                                                kitType: single
                                            }
                                        }
                                    } else if (single == 'LEASE') { // 租赁
                                        if (instrumentInfo.kitType == 'LEASE' && instrumentInfo.price < tempItem.price) {
                                            this.instrumentResult.forEach(instrRes => {
                                                instrRes.checked = false
                                            })
                                            tempItem.checked = true
                                            instrumentInfo = {
                                                id: tempItem.id,
                                                price: tempItem.price,
                                                kitType: single
                                            }
                                        }
                                    } else if (single == 'FREE') { // 免费
                                        if (instrumentInfo.kitType == 'FREE' && instrumentInfo.price < tempItem.price) {
                                            this.instrumentResult.forEach(instrRes => {
                                                instrRes.checked = false
                                            })
                                            tempItem.checked = true
                                            instrumentInfo = {
                                                id: tempItem.id,
                                                price: tempItem.price,
                                                kitType: single
                                            }
                                        }
                                    }
                                } else {
                                    tempItem.checked = true
                                    instrumentInfo = {
                                        id: tempItem.id,
                                        price: tempItem.price,
                                        kitType: single
                                    }
                                }
                                let childGoodsNameList = []
                                if(tempItem.childGoodsList && tempItem.childGoodsList.length > 0) {
                                    tempItem.childGoodsList.forEach(child => {
                                        if(child.type != "INSTRUMENT" && child.type != "OTHER") {
                                            childGoodsNameList.push(child.name)
                                        }
                                    })

                                    tempItem.childGoodsNames = childGoodsNameList.join('、')
                                }
                                this.instrumentResult.push(tempItem)
                                tempInstrument.push(tempItem)
                            }
                        } else if (item.type == "ACCESSORIES") {
                            item.checked = true
                            this.accessOries.push(item)
                        }
                    })
                    // 添加自备选项
                    if (this.instrumentResult.length > 0) {
                        // this.instrumentResult.push({
                        //     id: -1,
                        //     kitType: 'owned',
                        //     name: '自备',
                        //     price: 0,
                        //     marketPrice: 0,
                        //     checked: false
                        // })
                        let owned = {
                            id: -1,
                            kitType: 'owned',
                            name: '自备乐器',
                            price: 0,
                            marketPrice: 0,
                            checked: false
                        }
                        tempInstrument.push(owned)
                        this.instrumentResult.push(owned)
                        let sorted = this.groupBy(tempInstrument, (item) => {
                            return [item.kitType];
                        });
                        console.log(sorted)
                        this.instrumentResultList = sorted
                        this.chargeTypeList.forEach(item => {
                            if(item.id == tempResult.musicGroup.chargeTypeId) {
                                this.chargeTypeName = item.description
                            }
                        })

                        // 判断辅件是否有乐器维护（编号固定76）
                        let accessStatus = false // 是否有乐保
                        this.accessOries.forEach(item => {
                            // 判断子商品是否有乐保
                            if(item.childGoodsList && item.childGoodsList.length > 0) {
                                item.childGoodsList.forEach(child => {
                                    if(child.id == 76) {
                                        accessStatus = true
                                    }
                                })
                            }
                            if(item.goodsIdList == 76) {
                                accessStatus = true
                            }
                        })
                        this.accessStatus = accessStatus

                        // 所有打击乐声部没有乐保【23】
                        if(this.subjectId == 23) {
                            this.accessStatus = true
                            accessStatus = true
                        }

                        // 乐保服务初始化
                        this.instrumentResult.forEach(item => {
                            if(item.checked && item.kitType != "owned" && !accessStatus) {
                                this.leBaoStatus = true
                                this.buyMaintenance = true
                            }

                            if(item.checked && item.kitType != "GROUP" && (this.courseViewType == 2)) {
                                this.accessIsShowStatus = true
                            }
                            if(this.courseViewType != 2) {
                                this.accessIsShowStatus = true
                            }
                        })
                    }
                }
                // 初始化计算金额
                this.calcPrice()
            })
        },
        onLeBao() {
            this.buyMaintenance = !this.buyMaintenance
            this.calcPrice()
        },
        groupBy(array, f) {
            var groups = {};
            array.forEach(function (o) {
                var group = JSON.stringify(f(o));
                groups[group] = groups[group] || [];
                groups[group].push(o);
            });
            return Object.keys(groups).map(function (group) {
                return groups[group];
            });
        },
        onQuestions(type) {
            if(type == 'amr') {
                this.$alert(`<b>革命性的“AMR器乐练习系统”</b><br />它的诞生是基于世界上最优秀的华人管乐指导专家唐嘉宏先生的教育理念，创新开发的一种新型“音乐感官植入程序”，这个程序抛弃了传统的“数线式识谱、机械式节奏、死记式乐理”，它营造出沉浸式可变速演奏过程，采用画面与音乐刺激序列组合而成的特定场景，在趣味性挑战的反复刺激中逐步促进器乐演奏的三核心：“音质→音准→音型”，从而达成演奏各环节水准的均匀提高，产生永久性条件反射式大脑记忆，将多板块知识融会贯通，让抽象的音乐知识刻入脑海里！<br /><br /><b>本练习系统的特点：</b><br /> 1.轻松快速掌握要点，让练习者沉浸其中，远离枯燥！<br /> 2.不假思索就能瞬间唤起反射式记忆，演奏识谱不再慢吞吞！<br /> 3.真正的实践记忆，摆脱纸上谈兵，与实际演奏紧密结合！<br />4.思维+肌肉的双重强化！无缝整合复习系统！<br /> 5.每条练习都经过严谨的编曲，你以为你只是在练习旋律线？其实是整个乐团在为你伴奏！`, 'AMR器乐练习系统', {
                    confirmButtonText: '确定',
                    dangerouslyUseHTMLString: true,
                    callback: action => {
                    }
                });
            } else if(type == 'instrument') {
                this.$alert(`<p style="text-align: justify">1.乐器保养是管乐迷针对乐团学员提供的乐器检查、保养及维修优惠特权；<br />2.该特权为包年制，从开通特权之日起365天内有效；<br />3.特权用户可享受管乐迷提供专业的高级乐器维修技师一年不低于两次下校检查乐器使用情况；<br />4.特权有效期内凭该特权绑定的乐器编号可享受保养人工费减免、非返厂维修人工费优惠等特权;<br />感谢您的信任和支持！</p>`, '乐器保养特权', {
                    confirmButtonText: '确定',
                    dangerouslyUseHTMLString: true,
                    callback: action => {
                    }
                });
            }
        },
        onCourseChange(item) {
            // 判断用户是否可以选择
            if (item.isStudentOptional) {
                item.isStatus = !item.isStatus
                this.calcPrice()
            }
        },
        onTrainChange(item) {
            // 练习系统可选
            // console.log(item)
            item.isStatus = !item.isStatus
            let courseShowInfo = this.courseShowInfo
            courseShowInfo.forEach(course => {
                course.isStatus = item.isStatus
            })
            let cif = this.courseInfo
            cif.forEach(c => {
                if(!c.isStudentOptional) {
                    c.isStatus = item.isStatus
                }
            })
            this.calcPrice()
        },
        onClickCheckbox() { //是否使用余额支付
            if (!this.payType) {
                if (this.orderInfo.amount >= this.balance) {
                    this.needPrice = Number((this.orderInfo.amount - this.balance).toFixed(2))
                } else {
                    this.needPrice = 0
                }
            } else {
                this.needPrice = this.orderInfo.amount
            }
            this.payType = !this.payType
        },
        onAuxiliarie(item) {
            // 辅件切换状态
            item.checked = !item.checked
            // 重新计算金额
            this.calcPrice()
        },
        instrumentF(item) {
            // 乐器切换状态
            this.instrumentResult.forEach(item => {
                item.checked = false
            })
            item.checked = true
            if(!this.accessStatus) {
                if(item.kitType != "owned") {
                    this.leBaoStatus = true
                    this.buyMaintenance = true
                } else {
                    this.leBaoStatus = false
                    this.buyMaintenance = false
                }
            }
            // 云教练且选择自备则不显示辅件
            if(this.courseViewType == 2) {
                if(item.kitType != "GROUP") {
                    this.accessIsShowStatus = true
                } else {
                    this.accessIsShowStatus = false
                }
            }

            // 重新计算金额
            this.calcPrice()
        },
        calcPrice() {
            let buyList = [],
                ids = []
            let amount = 0,
                marketPrice = 0,
                goodsPrice = 0, // 乐器两现价
                goodsMarketPrice = 0, // 乐器原价
                goodsGroupIds = {},
                courseKeys = [],
                couponPrice = 0, // 优惠金额
                goodsIds = [],
                tempCourseFee = 0,
                musicClassFee = 0,
                musicMarketClassFee = 0,
                tempAccessPrice = 0,
                tempAccessMarketPrice = 0,
                tempGroupRemissionCourseFee = 0, // 乐团减免费用
                contractGoodsIds = '' // 合同所需要的商品Id （只需要乐器编号）
            // 课程
            let mgs = this.musicGroupSubject
            let csi = this.courseInfo
            // 加上判断是否有课程信息
            // 如果为云教练系统则，没有课程费用
            if((this.courseViewType == 2) && this.toolsPackage[0].isStatus) {
                let tempFee = this.cloudTeacherFee
                musicClassFee += parseFloat(tempFee)
                marketPrice += parseFloat(tempFee)
            }
            if (mgs) {
                let tempCourse = this.courseShowInfo
                if (tempCourse.length > 0 && this.courseViewType == 1) {
                    let m = 0
                    tempCourse.forEach(item => {
                        m += parseFloat(item.courseCurrentPrice)
                        // 不可选的课程才会减免课程费用
                        // if (!item.isStudentOptional) {
                        //     tempGroupRemissionCourseFee += parseFloat(item.courseCurrentPrice)
                        // }
                    });
                    marketPrice += parseFloat(m)
                    buyList.unshift({
                        name: this.chargeTypeName,
                        type: paymentPatternType[this.paymentPattern],
                        price: Number((m).toFixed(2))
                    })
                }
                    csi.forEach(item => {
                        if (item.isStatus) {
                            if(this.courseViewType != 2) {
                                musicClassFee += parseFloat(item.courseCurrentPrice)
                            }
                            // marketPrice += parseFloat(item.courseOriginalPrice)
                            if (item.id > 0) {
                                courseKeys.push(item.id)
                            }
                            // 不可选的课程才会减免课程费用
                            if (!item.isStudentOptional) {
                                tempGroupRemissionCourseFee += parseFloat(item.courseCurrentPrice)
                            } else {
                                marketPrice += parseFloat(item.courseCurrentPrice)
                            }

                            if(this.courseViewType == 0 && !item.isStudentOptional) {
                                marketPrice += parseFloat(item.courseCurrentPrice)
                            }
                        }
                    })
                // }
            }

            // 乐器
            let ir = this.instrumentResult
            if (ir.length > 0) {
                ir.forEach(item => {
                    if (item.checked) {
                        if (item.name != '自备乐器') {
                            contractGoodsIds += item.goodsIdList
                        }
                        if (item.kitType == 'FREE') {
                            amount += 0
                            couponPrice = 0 // 优惠金额
                        } else if (item.kitType == 'LEASE') {
                            couponPrice = item.coupon // 优惠金额
                            if (item.name != '自备乐器') {
                                amount += item.depositFee
                                goodsPrice += item.depositFee
                            } else {
                                amount += 0
                            }
                        } else {
                            amount += parseFloat(item.price)
                            goodsPrice += parseFloat(item.price)
                            couponPrice = item.coupon ? item.coupon : 0
                        }
                        if (item.kitType == 'LEASE') {
                            if (item.name != '自备乐器') {
                                marketPrice += parseFloat(item.marketPrice)
                                goodsMarketPrice += item.depositFee
                            }
                        } else {
                            marketPrice += parseFloat(item.marketPrice)
                            goodsMarketPrice += parseFloat(item.marketPrice)
                        }
                        // item.id ? goodsGroupIds[item.id] : null
                        if (item.id) {
                            goodsGroupIds[item.id] = item.kitType
                        }
                        if (item.kitType == 'LEASE') {
                            buyList.push({
                                name: item.name,
                                type: '租赁',
                                price: item.depositFee
                            })
                        } else if (item.kitType == 'GROUP') {
                            //  && parseFloat(item.price - couponPrice) > 0
                            buyList.push({
                                name: item.name,
                                type: '团购',
                                price: parseFloat(item.price - couponPrice)
                            })
                        } else if(item.kitType == 'FREE') {
                            buyList.push({
                                name: item.name,
                                type: '免费',
                                price: 0
                            })
                        }

                        // 是否减免课程费用，必须团购，并且开启了减免课程费用
                        if(item.kitType == 'GROUP' && item.groupRemissionCourseFee == 1) {
                            musicClassFee = parseFloat(musicClassFee - tempGroupRemissionCourseFee)
                        }
                    }
                })
            }

            if(this.leBaoStatus && this.buyMaintenance) {
                // 判断是否使用乐保
                // marketPrice += 500
                marketPrice += 300
                amount += 300
                buyList.push({
                    name: '乐器保养',
                    time: dayjs().format('YYYY/MM/DD') + '~' + dayjs().add(365, 'day').format('YYYY/MM/DD'),
                    type: '包年',
                    price: 300
                })
            }

            amount += parseFloat(tempCourseFee + musicClassFee)
            if (parseFloat(tempCourseFee + musicClassFee) > 0 && this.courseViewType == 0) {
                buyList.unshift({
                    name: '乐团课',
                    type: paymentPatternType[this.paymentPattern],
                    price: Number((tempCourseFee + musicClassFee).toFixed(2))
                })
            }
            // 辅件
            if (this.accessOries.length > 0) {
                this.accessOries.forEach(item => {
                    if (item.checked && this.accessIsShowStatus) {
                        tempAccessPrice += parseFloat(item.price)
                        amount += parseFloat(item.price)
                        if (item.goodsList && item.goodsList.length > 0) {
                            item.goodsList.forEach(childGoods => {
                                tempAccessMarketPrice += parseFloat(childGoods.marketPrice)
                                marketPrice += parseFloat(childGoods.marketPrice)
                            })
                        }
                        goodsGroupIds[item.id] = 'ACCESSORIES'

                        buyList.push({
                            name: item.name,
                            type: '团购',
                            price: item.price
                        })
                    }
                })
                // if (tempAccessPrice > 0) {
                    // buyList.push({
                    //     name: '辅件',
                    //     type: '团购',
                    //     price: tempAccessPrice
                    // })
                // }
            }
            let tempGroupPurchasePrice = amount
            // 判断减去优惠金额，是否大于0(这里有可能出现负数)
            if (amount - couponPrice >= 0) {
                amount = Number((amount - couponPrice).toFixed(2))
                this.errorPrice = false
            } else {
                amount = 0
                this.errorPrice = true // 订单金额是否异常
            }

            // if (amount - tempCourseFee - musicClassFee > 0) {
            //     ids.push(1, 2)
            // }
            // if (parseFloat(tempCourseFee + musicClassFee) > 0) {
            //     ids.push(3, 4, 5)
            // }
            this.ids = ids
            // 计算是否使用过余额
            if (this.payType) {
                let tempPrice = Number((amount - this.balance).toFixed(2))
                if (tempPrice > 0) {
                    this.needPrice = tempPrice
                } else {
                    this.needPrice = 0
                }
            } else {
                this.needPrice = Number(amount.toFixed(2))
            }
            this.buyList = buyList

            this.orderInfo = {
                amount: Number(amount.toFixed(2)),
                marketPrice: Number(marketPrice.toFixed(2)),
                groupPurchasePrice: tempGroupPurchasePrice,
                couponPrice: couponPrice,
                goodsGroupIds: goodsGroupIds,
                goodsIds: goodsIds.join(','),
                contractGoodsIds: contractGoodsIds,
                courseKeys: courseKeys,
                musicClassFee: musicClassFee,
                musicMarketClassFee: musicMarketClassFee,
                accessMarketPrice: tempAccessMarketPrice,
                accessPrice: tempAccessPrice,
                goodsPrice: goodsPrice,
                goodsMarketPrice: goodsMarketPrice
            }
        },
        permission(str){
            return permission(str)
        }
    },
};
</script>
<style lang="less" scoped>

.noticeInfo {
    margin: 0 12px;
    position: relative;
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    color: #808080;
    border-radius: 10px;
    line-height: 1.5;
}

.yunTrain {
    position: relative;
    font-size: 0;
    margin: 0 12px;
    img {
        width: 100%;
    }
    .toolText {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;
    }
    .toolTitle {
        font-size: 16px;
        color: #C1735D;
        display: flex;
        align-items: center;
        padding-top: 2px;
        padding-bottom: 2px;
        .icon_video {
            margin-left: 5px;
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('../../../assets/images/musicGroup/video_btn.png');
            background-size: contain;
        }
    }
    .toolDate {
        font-size: 12px;
        color: #808080;
    }
}

.title {
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
    padding-bottom: 5px;
    padding: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    &::before {
        content: " ";
        width: 4px;
        height: 15px;
        background: #01C1B5;
        display: inline-block;
        margin-right: 7px;
        border-radius: 8px;
    }
}

.titles {
    position: relative;
    font-size: 0;
    margin: 0 12px;
    img {
        width: 100%;
    }
    & > span {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;
        font-size: 16px;
        color: #C1735D;
        font-weight: 500;
    }
}
.section {
    margin: 0 12px;
    padding: 12px 12px 10px;
    background: #fff;
    margin-bottom: 12px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


.disabled {
    opacity: 0.5;
    .check_active {
        opacity: .5;
    }
}

.buy {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-top: 1px solid #ffe9e9e9;
    color: #000000;
    font-size: 12px;
    background: #fff;

    .price {
        flex: 1;
        font-size: 16px;
    }

    font-size: 16px;

    span {
        color: #fa101d;
    }

    .text {
        font-size: 12px;
        width: 60px;
        display: inline-block;
        color: #000;
    }

    del {
        color: #b5b5b5;

        &.text {
            color: #b5b5b5;
        }
    }

    .btn-submit {
        display: inline-block;
        font-size: 18px;
        color: #fff;
        background: #01C1B5;
        border-radius: 100px;
        padding: 8px 36px;
    }
}

.iframe {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    border-top: none !important;
    min-height: calc(100vh - 41px);
}

.countDownContent {
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #ccc;

    .van-count-down {
        display: inline;
        color: #f00;
    }
}

.loadingOrder {
    width: 90%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-loading__text {
        color: #444;
    }
}

.pay-section {
    margin-bottom: 10px;
    padding: 10px 8px;
}

.pay-name {
    padding-left: 10px;
    flex: 1 auto;
    font-weight: bold;
}

.logo {
    width: 24px;
    height: 24px;
}

.van-checkbox {
    float: right;

    /deep/.van-checkbox__icon .van-icon {
        border-color: #e9eaef;
        background-color: #e9eaef;
    }

    /deep/.van-checkbox__icon--checked .van-icon {
        background-color: #2dc7aa;
        border-color: #2dc7aa;
    }
}

.needprice {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;

    del {
        font-size: 14px;
        color: #808080;
        font-weight: bold;
    }

    span {
        font-size: 18px;
        color: #f85043;
        font-weight: bold;
    }
}

.couponprice {
    display: flex;
    justify-content: space-between;
}

.use_price {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;

    img {
        padding-right: 8px;
    }

    span {
        font-size: 16px;
    }
}

.check_default {
    margin-right: 8px;
    display: flex;
    align-items: center;
    height: 26px;
    &::before {
        display: block;
        content: ' ';
        width: 18px;
        height: 18px;
        background-color: #fff;
		border: 1px solid #e9eaef;
        border-radius: 50%;
    }
    &.check_active {
        &::before {
            display: block;
            content: ' ';
            background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
            border: 1px solid transparent;
            background-size: contain;
        }
    }
    &.radio_active {
        &::before {
            display: block;
            content: ' ';
            background: url("../../../assets/images/icon_radio.png") no-repeat center;
            border: 1px solid transparent;
            background-size: contain;
        }
    }
}

// .check_default {
//             margin-right: 8px;
//             display: block;
//             width: 18px;
//             height: 18px;
//             background-color: #e9eaef;
//             border-radius: 50%;

//             &.check_active {
//                 background: url("../../../assets/images/icon_checkbox.png") no-repeat center;
//                 background-size: contain;
//             }
//         }
.title-row {
    background: #F3F4F8;
    color: #1a1a1a;
    padding:5px 5px 3px;
    border-radius:5px;
    font-size: 14px;
}
.option-row {
    line-height: 26px;
    font-size: 14px;
    display: flex;
    // align-items: center;
    position: relative;
    padding: 10px 0 5px;
    box-sizing: border-box;
    cursor: pointer;
    .el-col {
        display: flex;
        // align-items: center;
    }
    .el-col-6, .el-col-8, .el-col-11{
        display: flex;
        justify-content: flex-end;
    }
    &.lines {
        margin-top: 5px;
        border-top: 1px solid #ededed;
    }
}

.el-icon-question {
    font-size: 16px;
    color: #4d4d4d;
    padding-left: 5px;
    padding-top: 5px;
}

.fontBold {
    font-weight: bold;
}
.videoDialog {
    /deep/.el-dialog__body {
        padding: 0;
        font-size: 0;
    }
}
</style>