<template>
  <view class="con">
    <van-toast id="van-toast" />
    <view class="cell cell-1 flex flex_between_center mb-30" @click="show">
      <view class="flex flex_between_center label">
        <view class="dot"></view> 请假类型
      </view>
      <view class="label-next">{{ data.type }}</view>
    </view>

    <van-action-sheet
      description="请假类型"
      cancel-text="取消"
      :close-on-click-action="false"
      :show="showType"
      :actions="actions"
      @cancel="onClose"
      @select="onSelect"
    />

    <view class="cell mb-30">
      <view class="cell-2 flex flex_between_center" @click="ShowTimeChoose(1)">
        <view class="flex flex_between_center label">
          <view class="dot"></view> 开始时间
        </view>
        <view class="label-next"
          >{{ data.startTime }}
          <van-icon name="arrow" style="margin-left: 30rpx" />
        </view>
      </view>
      <!-- 时间选择 -->
      <van-popup
        :show="TimeChoose"
        round
        position="bottom"
        custom-style="height: 50%"
        @close="closeTimeChoose"
      >
        <van-datetime-picker
          type="date"
          :value="curDate"
          :min-date="minDate"
          @cancel="closeTimeChoose"
          @confirm="ConfirmTimeChoose"
        />
      </van-popup>
      <view class="cell-2 flex flex_between_center" @click="ShowTimeChoose(2)">
        <view class="flex flex_between_center label">
          <view class="dot"></view> 结束时间
        </view>
        <view class="label-next"
          >{{ data.endTime }}
          <van-icon name="arrow" style="margin-left: 30rpx" />
        </view>
      </view>
      <view class="course-time-box">
        <view v-if="checkboxList.length === 0" class="no-course">暂无课程</view>
        <van-checkbox-group :value="checkboxVal" v-if="checkboxList.length > 0">
          <view class="flex flex_wrap">
            <view
              v-for="(item, index) in checkboxList"
              :key="index"
              class="flex flex_wrap flex_start_center"
            >
              <view
                v-for="(_item, _index) in item.PlanTimeList"
                :key="_index"
                class="checkbox-item flex flex_wrap flex_between_center"
                @click="checkChange(_item.ClassTimeId)"
              >
                <van-checkbox
                  :name="_item.ClassTimeId"
                  checked-color="#00ACF9"
                  use-icon-slot
                >
                  <view class="checkbox-text"
                    >{{ item.DateMonth }}-{{ item.DateDay }}
                    {{ _item.StartTime }}-{{ _item.EndTime }}</view
                  >
                  <i
                    slot="icon"
                    class="iconfont"
                    :class="
                      checkboxVal.find((e) => e == _item.ClassTimeId)
                        ? 'icon-radio1 fontcolor'
                        : 'icon-radio'
                    "
                  ></i>
                </van-checkbox>
              </view>
            </view>
          </view>
        </van-checkbox-group>
        <view
          class="more-checkbox"
          v-if="checkboxListAll.length > 2"
          @click="showAllCheck"
        >
          <van-divider
            contentPosition="center"
            style="width: 90%"
            v-if="isShowAllCheck"
          >
            <van-icon name="arrow-up" color="#00ACF9" />
          </van-divider>
          <van-divider
            contentPosition="center"
            style="width: 90%"
            v-if="!isShowAllCheck"
          >
            <van-icon name="arrow-down" color="#00ACF9" />
          </van-divider>
        </view>
      </view>
      <view class="cell-2 flex flex_between_center">
        <view class="flex flex_between_center label">
          <view class="dot"></view> 课时
        </view>
        <view class="label-next"
          >{{ totalLeaveTimes }}课时
          <van-icon name="arrow" style="margin-left: 30rpx" />
        </view>
      </view>
    </view>
    <view class="cell cell-3 mb-30">
      <view class="flex flex_start_center label" style="margin-bottom: 20rpx">
        <view class="dot"></view> 请假事由
      </view>
      <van-field
        :value="leaveMsg.Remarks"
        placeholder="请输入请假事由"
        :border="false"
        type="textarea"
        @input="reason"
        :autosize="{ minHeight: '100rpx' }"
        input-class="textareaClass"
      />
    </view>
    <view class="cell cell-4 mb-30">
      <view class="flex flex_start_center label" style="margin-bottom: 25rpx">
        <view class="dot"></view> 图片
      </view>
      <view style="padding-left: 10rpx">
        <van-uploader
          multiple
          accept="media"
          :file-list="fileList"
          image-fit="aspectFill"
          preview-size="120rpx"
          @after-read="customUpload"
          @delete="deleteFile"
        />
      </view>
    </view>
    <van-button block custom-class="submit-btn" @click="submitLeave"
      >提交</van-button
    >
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
  inject,
} from "vue";
import { getdate } from "../../utils/date";
import { uploadFile } from "../../utils/index";
import { getStundentPlanStatistical, setStudentLeave } from "../../api/index";
export default {
  setup() {
    let Toast = inject("$toast");
    const indexData=uni.getStorageSync('indexData')
    let data = reactive({
      showType: false,
      TimeChoose: false,
      curDate: new Date().getTime() + 24 * 60 * 60 * 1000,
      minDate: new Date().getTime() + 24 * 60 * 60 * 1000,
      timeType: 1, //1开始时间，2结束时间
      checkboxVal: [],
      actions: [
        {
          name: "事假",
          id: 1,
        },
        {
          name: "病假",
          id: 2,
        },
      ],

      data: {
        type: "事假",
        startTime: getdate(new Date(), 1),
        endTime: getdate(new Date(), 1),
      },
      isShowAllCheck: false,
      checkboxList: [],
      checkboxListAll: [],
      fileList: [
        // {
        //   url: "https://img.yzcdn.cn/vant/leaf.jpg",
        // },
      ],
      totalLeaveTimes: 0, //总课时
      leaveMsg: {
        Id: 0,
        ClassId: 0,
        CourseId: 0,
        OrderGuestId: 0,
        Remarks: "",
        LeaveType: 1, //请假类型
        LeaveInfoList: [],
        ReceiptFileList: [],
      },
    });
    let methods = {
      jumpPage() {
        uni.navigateTo({
          url: "/pages/course/askForLeaveList",
        });
      },
      //显示请假类型弹出层
      show() {
        data.showType = true;
      },
      //关闭请假类型弹出层
      onClose() {
        data.showType = false;
      },
      //选择请假类型
      onSelect(val) {
        data.data.type = val.detail.name;
        data.showType = false;
        data.leaveMsg.LeaveType = val.detail.id;
      },
      // 显示日期选择弹出层
      ShowTimeChoose(type) {
        data.TimeChoose = true;
        data.timeType = type;
      },
      // 关闭日期选择弹出层
      closeTimeChoose() {
        data.TimeChoose = false;
      },
      // 选择开始/结束日期
      ConfirmTimeChoose(val) {
        let date = getdate(val.detail);
        if (data.timeType === 1) {
          if (val.detail > Date.parse(data.data.endTime)) {
            Toast("开始时间不能大于结束时间");
            return;
          }
          data.data.startTime = date;
        } else if (data.timeType === 2) {
          if (val.detail < Date.parse(data.data.startTime)) {
            Toast("结束时间不能小于开始时间");
            return;
          }
          data.data.endTime = date;
        }
        data.TimeChoose = false;
        that.getCourseTime();
      },
      // 请假理由
      reason(val) {
        data.leaveMsg.Remarks = val.detail;
      },
      //课程多选
      checkChange(val) {
        let res = data.checkboxVal.indexOf(val);
        if (res != -1) {
          data.checkboxVal.splice(res, 1);
        } else {
          data.checkboxVal.push(val);
        }
      },
      //显示课时
      showAllCheck() {
        data.isShowAllCheck = !data.isShowAllCheck;
        if (data.isShowAllCheck) {
          data.checkboxList = JSON.parse(JSON.stringify(data.checkboxListAll));
        } else {
          data.checkboxList = data.checkboxListAll.slice(0, 2);
        }
        console.log(249, data.checkboxList);
      },
      //获取课程时间表
      async getCourseTime() {
        let msg = {
          StartTime: data.data.startTime,
          EndTime: data.data.endTime,
          ClassId: data.leaveMsg.ClassId,
          CouseId:indexData.CourseId,
					ClassScrollType:indexData.ClassScrollType

        };
        let res = await getStundentPlanStatistical(msg);
        data.isShowAllCheck = true;
        data.checkboxListAll = res.Data;
        data.checkboxList = res.Data;
        if (res.Data.length > 0) {
          data.leaveMsg.ClassId = res.Data[0].ClassId;
          data.leaveMsg.CourseId = res.Data[0].CourseId;
          data.leaveMsg.OrderGuestId = res.Data[0].PlanTimeList[0].OrderGuestId;
        }
      },
      customUpload(event) {
        const { file } = event.detail;
        uploadFile("stuLeave", file, (res) => {
          data.fileList.push(res);
        });
      },
      deleteFile(event) {
        let index = event.detail.index;
        data.fileList.splice(index, 1);
      },
      async submitLeave() {
        if (data.leaveMsg.LeaveInfoList.length === 0) {
          Toast("至少选择一节课程");
          return;
        }
        data.leaveMsg.ReceiptFileList = [];
        data.fileList.map((item) => {
          data.leaveMsg.ReceiptFileList.push(item.url);
        });
        let res = await setStudentLeave(data.leaveMsg);
        if (res) {
          Toast.success(res.Message);
          that.jumpPage();
        }
      },
    };
    watch(data.checkboxVal, (newVal) => {
      data.totalLeaveTimes = 0;
      data.leaveMsg.LeaveInfoList = [];
      data.checkboxListAll.map((item) => {
        item.PlanTimeList.map((_item) => {
          newVal.map((e) => {
            let res = e === _item.ClassTimeId;
            if (res) {
              data.totalLeaveTimes += _item.TimeHour;
              let obj = {
                ClassPlanId: _item.ClassPlanId,
                ClassTimeId: _item.ClassTimeId,
                ClassDate:
                  item.DateYear + "-" + item.DateMonth + "-" + item.DateDay,
                StartTime: _item.StartTime,
                EndTime: _item.EndTime,
                TimeHour: _item.TimeHour,
              };
              data.leaveMsg.LeaveInfoList.push(obj);
            }
          });
        });
      });
    });
    onMounted(() => {
      that.getCourseTime();
    });
    const that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: "请假",
    });
    this.leaveMsg.ClassId = parseInt(options.classId);
  },
};
</script>
<style scoped>
.con {
  box-sizing: border-box;
  font-family: PingFang SC;
  padding: 30rpx;
}
.mb-30 {
  margin-bottom: 30rpx;
}
.cell {
  padding: 0 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
}
.cell-1 {
  height: 90rpx;
}
.dot {
  width: 6rpx;
  height: 6rpx;
  background-color: #00acf9;
  border-radius: 50%;
  margin-right: 10rpx;
}
.label {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.label-next {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.cell-2 {
  height: 80rpx;
}
.cell-3 {
  padding: 30rpx;
}
/deep/.van-cell {
  padding: 0;
}
/deep/.textareaClass {
  font-size: 24rpx;
  padding-left: 10rpx;
}
.cell-4 {
  padding: 30rpx;
  margin-bottom: 40rpx;
}
/deep/.submit-btn {
  width: 600rpx;
  height: 90rpx;
  background-color: #00acf9;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin: auto;
}
/deep/.van-action-sheet__item {
  font-size: 28rpx !important;
}
.course-time-box {
  width: 630rpx;
  /* height: 280rpx; */
  background-color: #f7f8fc;
  border-radius: 6rpx;
  box-sizing: border-box;
  padding: 20rpx;
}
.checkbox-item {
  width: 290rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 6rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
}
.course-time-box .checkbox-item:nth-child(odd) {
  margin-right: 10rpx;
  /* background-color: #00acf9; */
}
.more-checkbox {
  text-align: center;
  color: #00acf9;
}
.checkbox-text {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.fontcolor {
  color: #00acf9;
}
.no-course {
  text-align: center;
  font-size: 20rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666;
}
/deep/.van-divider {
  margin: 0 auto;
}
</style>
