<template>
  <div class="m-container">
    <div class="m-core">
      <el-form :inline="true" :model="form" size="mini">
        <el-alert
          style="margin: 20px 0"
          title="线下课考勤定位范围"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">线下课考勤定位范围:</p>
        <el-row>
          GPS定位距离教学点<el-input
            v-model="form.num"
            placeholder="请输入距离"
            size="mini"
          >
            <template slot="append">米</template>
          </el-input>
          以内
        </el-row>
        <p class="subtitle">签到签退定位异常:</p>
        <el-row>
          乐团线下课签到签退地点、VIP线下课点名地点未在定位范围内，扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>

        <el-alert
          style="margin: 20px 0"
          title="乐团课签到规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">最早可签到时间:</p>
        <el-row>
          课程开始前
          <el-form-item>
            <el-input v-model="form.num" placeholder="请输入时间" size="mini">
              <template slot="append">分钟</template> </el-input
            >可进行签到
          </el-form-item>
        </el-row>
        <p class="subtitle">正常签到:</p>
        <el-row>
          课程开始
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >前，且在定位范围内签到
        </el-row>
        <p class="subtitle">异常签到:</p>
        <el-row>
          未在课程开始
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >前签到，扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">迟到</p>
        <el-row>
          课程开始
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >内签到，扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">旷课：</p>
        <el-row>
          课程开始
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template>
          </el-input>
          后签到，扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">未签到：</p>
        <el-row>
          扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <el-alert
          style="margin: 10px 0"
          title="乐团课签退规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">正常签退:</p>
        <el-row>
          课程结束后
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >内签退，且在定位范围内签退
        </el-row>
        <p class="subtitle">异常签退:</p>
        <el-row>
          课程结束时间
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >内签退，扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">早退</p>
        <el-row>
          课程结束
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template>
          </el-input>
          前签退，扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">未签退：</p>
        <el-row>
          课程未签退扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">签退提醒：</p>
        <el-row>
          课程结束
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template>
          </el-input>
          后，对未签退老师发送短信提醒
        </el-row>
        <el-alert
          style="margin: 10px 0"
          title="乐团线下连堂课"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">
          乐团线下连堂课：
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">
              <p style="color: #fff">
                1.同一天同一个老师，同一个教学点，上一节课的结束时间与下一节课的开始时间在N分钟内视为连堂课，老师第一节有签到记录，第二节课只要在考勤范围内，课程结束之前签到就是正常签到，签退按照正常考勤规则签退
              </p>
              <p style="color: #fff">
                2.同一天同一个老师不同教学点，有两节以上的课程，第一节课有签到记录，后面的课程只要在考勤范围内，课程结束之前签到都是正常签到，退按照正常考勤规则签退。
              </p>
            </div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
            ></i>
          </el-tooltip>
        </p>
        <el-row>
          乐团线下课程间隔
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template>
          </el-input>
          以内视为连堂课
        </el-row>
        <el-alert
          style="margin: 10px 0"
          title="VIP课点名规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">未点名：</p>
        <el-row>
          未点名扣减课酬
          <el-input v-model="form.num" placeholder="请输入金额" size="mini">
            <template slot="append">
              <el-select class="append" v-model.trim="form.organId" size="mini">
                <el-option label="元" value="yuan"> </el-option>
                <el-option label="%" value="bi"> </el-option>
              </el-select>
            </template>
          </el-input>
        </el-row>
        <p class="subtitle">点名时间范围：</p>
        <el-row>
          VIP课可点名时间范围为课程开始前
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template>
          </el-input>
          至课程结束后
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template>
          </el-input>
        </el-row>
        <el-alert
          style="margin: 10px 0"
          title="试用期课酬"
          :closable="false"
          type="info"
        />
        <p class="subtitle">试用期课酬规则：</p>
        <el-row>
          试用期老师课酬按默认课酬的
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">%</template> 发放
          </el-input>
        </el-row>
        <el-alert
          style="margin: 10px 0"
          title="考勤申诉规则"
          :closable="false"
          type="info"
        />

        <p class="subtitle">考勤申诉：</p>
        <el-row>
          全职老师
          <el-select v-model.trim="form.organId" size="mini">
            <el-option label="按时间" value="hour"> </el-option>
            <el-option label="按日期" value="day"> </el-option>
          </el-select>
          在课程结束后
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >内可以提交考勤申诉
        </el-row>
        <el-row>
          兼职老师
          <el-select v-model.trim="form.organId" size="mini">
            <el-option label="按时间" value="hour"> </el-option>
            <el-option label="按日期" value="day"> </el-option>
          </el-select>
          在课程结束后
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >内可以提交考勤申诉
        </el-row>
        <el-row>
          劳务老师
          <el-select v-model.trim="form.organId" size="mini">
            <el-option label="按时间" value="hour"> </el-option>
            <el-option label="按日期" value="day"> </el-option>
          </el-select>
          在课程结束后
          <el-input v-model="form.num" placeholder="请输入时间" size="mini">
            <template slot="append">分钟</template> </el-input
          >内可以提交考勤申诉
        </el-row>
      </el-form>
      <el-button size="mini" type="primary"> 保存 </el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      roleList: [],
      value1: null,
    };
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-form-item--mini.el-form-item {
  margin-bottom: 0px;
}
.mTooltip {
  width: 300px;
}
/deep/.el-input-group {
  width: 180px;
  margin: 0 5px;
}
.el-row {
  align-items: center;
}
/deep/.el-input-group {
  width: 180px;
}
p,
.el-row {
  font-size: 14px;
  line-height: 32px;
  color: #000;
  margin-bottom: 10px;
  padding: 0 24px;
}
p {
  font-weight: bold;
  margin-bottom: 0;
}
.subtitle {
  font-size: 14px;
  line-height: 32px;
}
.append {
  width: 80px !important;
}
</style>
