<template>
  <view class="details-item-container">
    <u-card :show-head="false" :show-foot="false" margin="0">
      <template #body>
        <view class="details-item-header">
          <h4>{{ detailItem.stuName }}</h4>
          <text :style="{ color: state.color }">{{ state.status }}</text>
        </view>
        <view style="margin-bottom: 20rpx">
          <text>{{ detailItem.Phone }}</text>
          <u-icon name="phone" style="margin-left: 10rpx" />
        </view>
        <u-time-line>
          <u-time-line-item>
            <template #content>
              <view class="line-content">
                <text>上课签到：</text>
                <view class="content">
                  <text>{{
                    signInStatus(detailItem.State[0]?.Value[0].SingIn)
                  }}</text>
                  <text
                    v-show="state.SingInText != ' ' && state.SingInText"
                    style="color: #c0c4cc"
                    >(请假原因: {{ state.SingInText }})</text
                  >
                </view>
              </view>
            </template>
          </u-time-line-item>
          <u-time-line-item>
            <template #content>
              <view class="line-content">
                <text>下课签退：</text>
                <view class="content">
                  <text>{{
                    signOutStatus(detailItem.State[0]?.Value[0].SingOut)
                  }}</text>
                  <text
                    v-show="state.SingOutText != ' ' && state.SingOutText"
                    style="color: #c0c4cc"
                    >(请假原因: {{ state.SingOutText }})</text
                  >
                </view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>

        <view
          class="footer"
          v-show="state?.status == '缺勤' || state?.status == '未签退'"
        >
          <u-button type="primary" size="mini" plain @tap="leave"
            >请假</u-button
          >
          <u-button type="primary" size="mini" @tap="repair">补签</u-button>
        </view>
      </template>
    </u-card>
  </view>
  <fillPopup
    ref="fillRef"
    v-model="fillState.show"
    :name="detailItem.stuName"
    :label="fillState.label"
    @submit="submit"
  />
</template>

<script setup lang="ts">
import fillPopup from "./fillPopup.vue"
import { signInAndOut } from "@/api/course"
import dayjs from "dayjs"
import { toast } from "@/utils/util"

const props = defineProps({
  detailItem: {
    type: Array,
    default: () => [],
  } as any,
})

const emits = defineEmits(["init"])

const fillState = reactive({
  show: false,
  title: "",
  label: "",
  radioList: [] as any,
})
const fillRef = ref()

const tagList = [
  { color: "#19be6b", status: "正常出勤" },
  { color: "#ff9900", status: "缺勤" },
  { color: "#ff9900", status: "未签退" },
  { color: "#303133", status: "签到请假" },
  { color: "#303133", status: "签退请假" },
  { color: "#19be6b", status: "已补签" },
  { color: "#19be6b", status: "签退补签" },
] as any
// 正常出勤： QD + QT
// 缺勤：'' + ''
// 未签退：QD + ''
// 签到请假：QDQJ + ''
// 签退请假: QD + QTQJ
// 已补签：QDBQ + ''
// 签退补签: QD + QTBQ

const state: any = computed(() => {
  let data = tagList[1] // 默认值
  const { SingIn, SingOut, SingInText, SingOutText } =
    props.detailItem.State[0].Value[0]

  const conditions = {
    "QD-QT": tagList[0],
    "QD-": tagList[2],
    "QDQJ-": tagList[3],
    "QD-QTQJ": tagList[4],
    "QDBQ-": tagList[5],
    "QD-QTBQ": tagList[6],
  } as any

  const key = `${SingIn || ""}-${SingOut || ""}`

  if (conditions.hasOwnProperty(key)) {
    data = conditions[key]
  }
  data = { ...data, SingInText, SingOutText }
  return data
})

const signInStatus = (status: string) => {
  if (status) {
    return status === "QDBQ"
      ? "已补签"
      : status === "QD"
      ? "已签到"
      : status === "QDQJ"
      ? "签到请假"
      : "未签到"
  } else {
    return "未签到"
  }
}

const signOutStatus = (status: string) => {
  if (props.detailItem?.State[0]?.Value[0].SingIn === "QDBQ") {
    return "已补签"
  } else if (status) {
    return status === "QTBQ"
      ? "签退补签"
      : status === "QT"
      ? "已签退"
      : status === "QTQJ"
      ? "签退请假"
      : "未签退"
  } else {
    return "未签退"
  }
}

const leave = () => {
  fillState.label = "请假"
  fillRef.value.init("签到请假")
  fillState.show = true
}
const repair = () => {
  fillState.label = "补签"
  fillRef.value.init("签到补签")
  fillState.show = true
}

const submit = async (reason: string) => {
  let obj = {
    parmeters: {
      NeedReturnFields: ["FID"],
      IsDeleteEntry: "false",
      Model: {
        FCourseId: {
          FNUMBER: props.detailItem.courseNum,
        },
        FClassId: {
          FNUMBER: props.detailItem.classNumber,
        },
        FStudentId: {
          FNUMBER: props.detailItem.studentNum,
        },
        FDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        FLocation: "",
        FLocationDetails: "",
        FCockinType: "",
        FReason: reason,
      },
    },
  }
  if (state.value.status == "缺勤") {
    // 请假
    if (fillState.label === "请假") obj.parmeters.Model.FCockinType = "QDQJ"
    // 补签
    else obj.parmeters.Model.FCockinType = "QDBQ"
  }
  if (state.value.status == "未签退") {
    // 请假
    if (fillState.label === "请假") obj.parmeters.Model.FCockinType = "QTQJ"
    else obj.parmeters.Model.FCockinType = "QTBQ"
  }
  const { data: res } = await signInAndOut(obj)
  if (res.code == 200) {
    fillState.show = false
    emits("init")
    toast("填报成功")
  }
}
</script>

<style lang="scss" scoped>
.details-item-container {
  margin-bottom: 10rpx;

  .details-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .line-content {
    display: flex;
  }

  .footer {
    display: flex;
    width: 100%;

    .u-btn {
      width: 47%;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
  }
}
</style>
