<template>
    <div style="padding-bottom: 20px;">
        <h2 class="title">VIP线下课</h2>

        <div class="sample">
            <i class="line"></i>签到&签退
            <span>（以课程12:00:00-13:00:00为例）</span>
        </div>

        <van-collapse v-model="activeNames" accordion>
            <van-collapse-item title="可签到时间范围" name="1">
                课程开始前{{ list.enable_student_attendance_time_range_vip }}分钟至课程结束后{{ list.enable_student_attendance_time_range_vip }}分钟 <br />
                时间段：{{ reduceFormMinute('12:00:00', list.enable_student_attendance_time_range_vip) }}-{{ addFormMinute('13:00:00', list.enable_student_attendance_time_range_vip) }} <br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="正常签到签退" name="2">
                操作了【点名】，GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span> <br />
                时间段：-- <br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="异常签到签退" name="3">
                操作了【点名】，GPS定位在教学点{{ list.attendance_range }}米<span class="r">外</span> <br />
                时间段：-- <br />
                扣费规则: -{{ list.vip_offline_gps_error_cut_salary }}{{ list.vip_offline_gps_error_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="未签到签退" name="4">
                未进行【点名】 <br />
                时间段：-- <br />
                扣费规则: -{{ list.vip_offline_no_gps_error_cut_salary }}{{ list.vip_offline_no_gps_error_cut_salary_unit | formatUnit }}
            </van-collapse-item>
        </van-collapse>
    </div>
</template>


<script>
import {
  addFormMinute,
  addFormMinuteAddS,
  reduceFormMinute,
  reduceFormMinuteAddS,
  addFormMinuteMS,
  reduceFormMinuteMS,
} from "@/utils/date";
export default {
    props: {
        dataList: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            list: {},
            activeNames: 1
        }
    },
    mounted() {
        this.list = this.dataList
    },
    methods: {
        addFormMinute(timerStr, time) {
            return addFormMinute(timerStr, time);
        },
        addFormMinuteAddS(timerStr, time) {
            return addFormMinuteAddS(timerStr, time);
        },
        reduceFormMinute(timerStr, time) {
            return reduceFormMinute(timerStr, time);
        },
        reduceFormMinuteAddS(timerStr, time) {
            return reduceFormMinuteAddS(timerStr, time);
        },
        addFormMinuteMS(timerStr, time) {
            return addFormMinuteMS(timerStr, time);
        },
        reduceFormMinuteMS(timerStr, time) {
            return reduceFormMinuteMS(timerStr, time);
        },
    },
    watch: {
        dataList(newValue) {
            this.list = newValue
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    background-color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 10px 0;
}
.sample {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 16px;
    background-color: #F8F9FC;
    .line {
        display: inline-block;
        margin-right: .06rem;
        height: .16rem;
        width: .04rem;
        border-radius: .04rem;
        background-color: #01C1B5;
    }
}
.r {
    color: red;
}
</style>