<template>
    <div style="padding-bottom: 20px;">
        <h2 class="title">乐团线下课</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">
                课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">结束前</span> <br />
                时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-13:00:00 <br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="正常签到" name="2">
                课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">开始前</span>{{ list.offline_advance_sign_in_minutes }}分钟签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">内</span> <br />
                时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_minutes) }} <br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="异常签到" name="3">
                课程<span class="r">开始前</span>{{ list.offline_advance_sign_in_minutes }}分钟后至课程<span class="r">开始前</span>签到，GPS定位点在教学点{{ list.attendance_range }}米<span class="r">外</span> <br />
                时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_minutes) }}-12:00:00 <br />
                扣费规则: -{{ list.offline_error_sign_in_cut_salary }}{{ list.offline_error_sign_in_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="迟到" name="4">
                课程<span class="r">开始后</span>{{ list.offline_advance_sign_in_late_minutes }}分钟内签到 <br />
                时间段：12:00:00-{{ addFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }} <br />
                扣费规则: -{{ list.offline_late_cut_salary }}{{ list.offline_late_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="旷课" name="5">
                课程<span class="r">开始后</span>{{ list.offline_advance_sign_in_late_minutes }}分钟至课程<span class="r">结束前</span>签到 <br />
                时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}后签到（包括{{ reduceFormMinute('12:00:00', list.offline_advance_sign_in_late_minutes) }}） <br />
                扣费规则: -{{ list.offline_level_sign_in_cut_salary }}{{ list.offline_level_sign_in_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="未签到" name="6">
                未进行【签到】操作 <br />
                时间段：12:30:00-12:59:59 <br />
                扣费规则: -{{ list.offline_no_sign_in_cut_salary }}{{ list.offline_no_sign_in_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="GPS定位" name="7">
                <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span> <br />
                扣费规则: -{{ list.offline_sign_in_gps_error_cut_salary }}{{ list.offline_sign_in_gps_error_cut_salary_unit | formatUnit }}
            </van-collapse-item>
        </van-collapse>


        <div class="sample">
            <i class="line"></i>点名
            <span>（以课程12:00:00-13:00:00为例）</span>
        </div>

        <van-collapse v-model="activeNames1" accordion>
            <van-collapse-item title="可点名时间范围" name="1">
                课程<span class="r">开始前</span>{{ list.offline_sign_in_early_forward_time }}分钟至课程<span class="r">结束后</span>{{ list.advance_sign_out_minutes }}分钟<br />
                时间段：{{ reduceFormMinute('12:00:00', list.offline_sign_in_early_forward_time) }}-{{ addFormMinute("13:00:00", list.advance_sign_out_minutes) }}<br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="正常点名" name="2">
                进行了【点名】操作，完成<span class="r">【点名】后才可签退</span><br />
                时间段：--<br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="未点名" name="3">
                未进行【点名】操作<br />
                时间段：--<br />
                扣费规则: --
            </van-collapse-item>
        </van-collapse>


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

        <van-collapse v-model="activeNames2" accordion>
            <van-collapse-item title="可签退时间范围" name="1">
                课程<span class="r">结束后</span>到课程<span class="r">当天24点前</span><br />
                时间段：13:00:00-23:59:59<br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="正常签退" name="2">
                课程<span class="r">结束后</span>至课程<span class="r">结束后</span>{{ list.advance_sign_out_minutes }}分钟，且GPS定位在教学点{{ list.attendance_range }}米<span class="r">内</span><br />
                时间段：13:00:00-{{ addFormMinute('13:00:00', list.advance_sign_out_minutes) }}<br />
                扣费规则: --
            </van-collapse-item>
            <van-collapse-item title="早退" name="3">
                课程<span class="r">结束前</span>{{ list.offline_advance_sign_out_minutes }}分钟签退至课程<span class="r">结束前</span>签退<br />
                时间段：{{ reduceFormMinute('13:00:00', list.offline_advance_sign_out_minutes) }}前签退（包括{{ reduceFormMinute('13:00:00', list.offline_advance_sign_out_minutes) }}）<br />
                扣费规则: -{{ list.offline_early_sign_out_cut_salary }}{{ list.offline_early_sign_out_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="异常签退" name="4">
                课程<span class="r">结束前{{ list.offline_advance_sign_out_minutes }}分钟</span>至<span class="r">课程结束前</span> 或GPS定位点在教学点范围之外<br />
                时间段：{{ reduceFormMinute('12:00:00', list.offline_advance_sign_out_minutes) }}-12:59:59
                扣费规则: -{{ list.offline_error_sign_out_cut_salary }}{{ list.offline_error_sign_out_cut_salary_unit | formatUnit }}<br />
            </van-collapse-item>
            <van-collapse-item title="未签退" name="5">
                未进行【签退】操作<br />
                时间段：--<br />
                扣费规则: -{{ list.offline_no_sign_out_cut_salary }}{{ list.offline_no_sign_out_cut_salary_unit | formatUnit }}
            </van-collapse-item>
            <van-collapse-item title="GPS定位" name="6">
                <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range }}米外</span><br />
                扣费规则: -{{ list.offline_sign_out_gps_error_cut_salary }}{{ list.offline_sign_out_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,
            activeNames1: 1,
            activeNames2: 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>