<template>
    <div>
        <h2 style="font-size: 20px; text-align: center; padding: 10px 0;">VIP线下课</h2>

        <table border="1" style="width: 100%">
            <tr>
                <th colspan="2">
                    <span style="font-size: 16px;">签到&签退</span>
                    <br />
                    <span style="font-weight: 400;">以课程12:00:00-13:00:00为例</span>
                </th>
            </tr>
            <tr>
                <td rowspan="3">可签到时间范围</td>
                <td>课程开始前{{ list.enable_student_attendance_befor_course_start_time_range_vip }}分钟至课程结束后{{ list.enable_student_attendance_time_range_vip }}分钟</td>
            </tr>
            <tr>
                <td>时间段：11:40:00-13:19:59</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">正常签到签退</td>
                <td>操作了【点名】，GPS定位在教学点{{ list.attendance_range_vip }}米<span class="r">内</span></td>
            </tr>
            <tr>
                <td>时间段：--</td>
            </tr>
            <tr>
                <td>扣费规则: --</td>
            </tr>
            <!--  -->
            <tr>
                <td rowspan="3">异常签到签退</td>
                <td>操作了【点名】，GPS定位在教学点{{ list.attendance_range_vip }}米<span class="r">外</span></td>
            </tr>
            <tr>
                <td>时间段：--</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
             <!--  -->
            <tr>
                <td rowspan="3">未签到签退</td>
                <td>未进行【点名】</td>
            </tr>
            <tr>
                <td>时间段：--</td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
             <!--  -->
            <tr>
                <td rowspan="2"></td>
                <td>
                    <span class="r">签到签退时间都在正常范围内，但同时GPS定位在教学点{{ list.attendance_range_vip }}米外</span></td>
            </tr>
            <tr>
                <td>扣费规则: -100%</td>
            </tr>
        </table>
    </div>
</template>


<script>
export default {
    props: {
        dataList: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            list: {}
        }
    },
    mounted() {
        this.list = this.dataList
    },
    watch: {
        dataList(newValue) {
            this.list = newValue
        }
    }
}
</script>

<style lang="less" scoped>
table {
    border: 0;
    font-size: 12px;
    border-color: #cccccc;
    th {
        text-align: center;
    }
    th, td {
        padding: 5px;
    }
    tr:nth-child(even) {
        background-color: #f1f1f1;
    }
}
table + table {
    margin-top: .15rem;
}
.r {
    color: red;
}
</style>