<template>
    <div class="payment">
        <header>乐团注册</header>

        <div class="section">
            <h2 class="title line_bottom">课程</h2>
            <p class="indate line_bottom" v-if="!type">有效期至：2019年9月1号 <span>现价:￥580</span></p>
            <div class="options"  v-if="type" key="yuetuan">
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">乐团课（32次）</div>
                    <span class="o_ft">
                        <del>原价:990￥</del> 现价:900￥
                    </span>
                </div>
            </div>

            <div class="options"  v-else key="yuetuan">
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">乐团声部训练</div>
                </div>
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">乐团合奏训练</div>
                </div>
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">基础技能训练</div>
                </div>
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">假期集中训练</div>
                </div>
            </div>

            <div class="coutInfo" v-if="type" key="type">
                有效期至：2019年9月1号
            </div>

            <div class="coutInfo n" v-else key="type">
                <i class="trumpet_icon"></i>年度安排十个月训练，共计168课时，120元/课时，原价20160元，现仅支付560元/月（约合34.5元/课时）
            </div>
        </div>


        <div class="section">
            <div class="options">
                <div class="option">
                    <div class="0_hd"><i class="check_default check_active"></i></div>
                    <div class="o_bd">提高课（10次）</div>
                    <span class="o_ft">
                        <del>原价:￥23520</del> 现价:￥900
                    </span>
                </div>
            </div>

            <div class="classInfo">
                <div class="class">
                    <p>课程名称：{{ classInfo.className }} </p>
                    <p>学习科目：{{ classInfo.voicyPart }}</p>
                    <p>每课时长：{{ classInfo.duration }}分钟  </p>
                </div>
                <div class="class">

                    <p>指导老师：{{ classInfo.teaName }}</p>
                    <p>计划开课时间：{{ classInfo.planStartDate }}</p>
                    <p>计划开课周期：{{ classInfo.planCycle }}</p>
                </div>
            </div>
        </div>

        <div class="buy">
             <div class="price">
                 <p class="oldprice">
                     <del class="text">原价</del>
                     <del>{{ orderInfo.marketPrice }}￥</del>
                 </p>
                 <p class="now_price">
                     <span class="text">仅需支付</span>
                     <span>{{ orderInfo.referencePrice }}￥</span>
                 </p>
             </div>
             <a @click="buy">购买</a>
        </div>

    </div>
</template>

<script>
import { payment } from '../mockjs/payment.js'
export default {
    name: 'payment',
    data() {
        return {
            type: '',
            classInfo: {},
            // 金额列表，金额计算
            orderInfo: {
                marketPrice: 0, // 原价总金额
                referencePrice: 0, // 现价总金额
            }, // 信息列表
        }
    },
    mounted() {
        let result = payment

        if(result.poOrderInfo && result.poOrderInfo.payMethod < '3.0') {
            this.type = true

            // 小于3.0
            this.orderInfo = {
                marketPrice: 23520 + 900,
                referencePrice: 900 + 900,
                class: {
                    className: '乐团课',
                    marketPrice: 23520,
                    referencePrice: 900
                },
                dataList: [{
                    name: '提高课',
                    marketPrice: 900,
                    referencePrice: 900
                }]
            }

        } else {
            this.type = false

            // 大于3.0时
            this.orderInfo = {
                marketPrice: 20160 + 900,
                referencePrice: 580 + 900,
                class: {
                    classList: ['乐团声部训练', '乐团合奏训练', '基础技能训练', '假期集中训练'],
                    marketPrice: 20160,
                    referencePrice: 580
                },
                dataList: [{
                    name: '提高课',
                    marketPrice: 900,
                    referencePrice: 900
                }]
            }
        }
        this.classInfo = result.lessOrderInfo ? result.lessOrderInfo : {}
        this.classInfo.voicyPart = result.baseInfo.voicyPart

    },
    methods: {
        buy() {
            this.$router.push({
                path: '/alipay',
                query: {
                    orderInfo: JSON.stringify(this.orderInfo)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.payment {
    margin-bottom: .7rem;
}

header {
    height: .40rem;
    line-height: .40rem;
    color: #000;
    font-size: .17rem;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
    text-align: center;
    margin-bottom: .06rem;
}
.section {
    padding: .16rem .22rem .1rem;
    background: #fff;
    margin-bottom: .1rem;
    .line_bottom {
        border-bottom: 1px solid #ededed;
    }
    > .title {
        font-size: .2rem;
        line-height: .28rem;
        font-weight: bold;
    }
    .indate {
        font-size: .12rem;
        padding: .05rem 0;
        display: flex;
        justify-content: space-between;
        span {
            color: #FA101D;
        }
    }

    .coutInfo {
        font-size: .12rem;
        color: #ACACAC;
        border-top: 1px solid #ededed;
        padding: .12rem 0 0;
        margin-top: .1rem;

        &.n {
            font-size: .12rem;
            color: #F85043;
            text-align: left;
            border-top: 1px solid #ededed;
            padding: .12rem 0 0 .15rem;
            margin-top: .1rem;
            position: relative;
            .trumpet_icon {
                width: .14rem;
                height: .12rem;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC) no-repeat center;
                background-size: contain;
                position: absolute;
                left: 0;
                top: .14rem;
            }
        }
    }
}

.options {
    padding-top: .08rem;
    .option {
        line-height: .26rem;
        font-size: .15rem;
        display: flex;
        align-items: center;
        position: relative;
        .o_bd {
            flex: 1;
            .protocol {
                font-size: .1rem;
                line-height: .14rem;
            }
        }
        .o_ft {
            font-size: .12rem;
            color: #FA101D;
            del {
                color: #AAAAAA;
                font-size: .11rem;
            }
        }
        .check_default {
            margin-right: .08rem;
            display: block;
            width: .14rem;
            height: .14rem;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=) no-repeat center;
            background-size: contain;
            &.check_active {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==) no-repeat center;
                background-size: contain;
            }
        }
    }
}

.classInfo {
    color: #ACACAC;
    font-size: .12rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ededed;
    margin-top: .08rem;
    padding-top: .08rem;
    line-height: .22rem;
}

.buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: .6rem;
    display: flex;
    align-items: center;
    padding: 0 .2rem;
    border-top: 1px solid #FFE9E9E9;
    color: #000000;
    font-size: .12rem;
    background: #fff;
    .price {
        flex: 1;
        font-size: .16rem;
        
    }
    font-size: .16rem;
    span {
        color: #FA101D;
    }
    .text {
        font-size: .12rem;
        width: .55rem;
        display: inline-block;
        color: #000;
    }
    del {
        color: #B5B5B5;
        &.text {
            color: #B5B5B5;
        }
    }

    a {
        display: inline-block;
        font-size: .18rem;
        color: #fff;
        background: #F1111B;
        border-radius: .04rem;
        box-shadow:0px 2px 4px 0px rgba(0,0,0,0.19);
        padding: .08rem .28rem;
    }
}
</style>