<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">
        课程<span class="r">开始前</span>{{ list.course_before_buffer_time }}分钟至课程<span class="r">结束前</span>进入教室 <br />
        时间段：{{ reduceFormMinute("12:00:00", list.course_before_buffer_time) }}-12:59:59 <br />
        扣费规则: --
      </van-collapse-item>
      <van-collapse-item title="正常签到" name="2">
        课程<span class="r">开始前</span>{{ list.course_before_buffer_time }}分钟至课程<span class="r">开始前</span>{{ list.course_before_buffer_time - list.online_advance_sign_in_minutes }}分钟进入教室<br />
        时间段：{{ reduceFormMinute("12:00:00", list.course_before_buffer_time) }}-{{ reduceFormMinute("12:00:00", list.course_before_buffer_time - list.online_advance_sign_in_minutes) }}<br />
        扣费规则: --
      </van-collapse-item>
      <van-collapse-item title="迟到" name="3">
        课程<span class="r">开始前</span>{{ list.online_advance_sign_in_minutes }}分钟至课程<span class="r">开始后</span>{{ list.online_advance_sign_in_late_minutes }}分钟进入教室<br />
        时间段：{{ reduceFormMinute("12:00:00", list.online_advance_sign_in_minutes) }}-{{ addFormMinute("12:00:00", list.online_advance_sign_in_late_minutes) }}<br />
        扣费规则: -{{ list.online_late_cut_salary }}{{ list.online_late_cut_salary_unit | formatUnit }}
      </van-collapse-item>
      <van-collapse-item title="旷课" name="4">
        课程<span class="r">开始后</span>{{ list.online_advance_sign_in_late_minutes }}分钟至课程<span class="r">结束前</span>进入教室<br />
        时间段：{{ addFormMinuteAddS("12:00:00", list.online_advance_sign_in_late_minutes) }}后签到（包括{{ addFormMinuteAddS("12:00:00", list.online_advance_sign_in_late_minutes) }}）<br />
        扣费规则: -{{ list.online_level_sign_in_cut_salary }}{{ list.online_level_sign_in_cut_salary_unit | formatUnit }}
      </van-collapse-item>
      <van-collapse-item title="未签到" name="5">
        未进入网络教室<br />
        时间段：--<br />
        扣费规则: -{{ list.online_no_sign_in_cut_salary }}{{ list.online_no_sign_in_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.course_before_buffer_time }}分钟至课程<span class="r">结束后</span>{{ list.course_after_buffer_time }}分钟（课程结束后{{ list.course_after_buffer_time }}分钟网络教室自动关闭）<br />
        时间段：{{ reduceFormMinute("12:00:00", list.course_before_buffer_time) }}-{{ addFormMinute("12:00:00", list.course_after_buffer_time) }}<br />
        扣费规则: --
      </van-collapse-item>
      <van-collapse-item title="正常签退" name="2">
        课程<span class="r">结束后</span>退出教室<br />
        时间段：13:00:00-{{ addFormMinute("13:00:00", list.course_after_buffer_time) }}<br />
        扣费规则: --
      </van-collapse-item>
      <van-collapse-item title="早退" name="3">
        早于课程<span class="r">结束前</span>{{ list.online_early_sign_out_minutes }}分钟前退出云教室<br />
        时间段：12:00:00-{{ reduceFormMinuteMS("13:00:00", list.online_early_sign_out_minutes) }}<br />
        扣费规则: -{{ list.online_early_sign_out_cut_salary }}{{ list.online_early_sign_out_cut_salary_unit | formatUnit }}
      </van-collapse-item>
      <van-collapse-item title="异常签退" name="4">
        课程<span class="r">结束前</span>{{ list.online_early_sign_out_minutes }}分钟至课程<span class="r">结束前</span>退出教室<br />
        时间段：{{ reduceFormMinute("13:00:00", list.online_early_sign_out_minutes) }}-12:59:59<br />
        扣费规则: -{{ list.online_error_sign_out_cut_salary }}{{ list.online_error_sign_out_cut_salary_unit | formatUnit }}
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import { addFormMinute, addFormMinuteAddS, reduceFormMinute, reduceFormMinuteAddS, addFormMinuteMS, reduceFormMinuteMS } from "@/utils/date";
export default {
  name: "onLine",
  props: {
    dataList: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      list: {},
      activeNames: 1,
      activeNames1: 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: 0.06rem;
    height: 0.16rem;
    width: 0.04rem;
    border-radius: 0.04rem;
    background-color: #01c1b5;
  }
}
.r {
  color: red;
}
</style>
