<template>
  <view class="details-item-container">
    <u-card
      :show-head="false"
      :show-foot="
        state?.status == '缺勤' || state?.status == '未签退' ? true : false
      "
      :border="false"
      margin="0"
    >
      <template #body>
        <view class="details-item-header">
          <view class="details-item-header-left">
            <u-image
              width="92rpx"
              height="92rpx"
              shape="circle"
              :src="baseUrl + '/' + detailItem.ImagePath"
            ></u-image>
            <view
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <view class="details-item-header-left-title">{{
                detailItem.stuName
              }}</view>
              <view class="details-item-header-left-phone">{{
                detailItem.Phone
              }}</view>
            </view>
          </view>
          <view :style="{ color: state.color }">{{ state.status }}</view>
        </view>

        <view class="line">
          <view class="line-item">
            <view
              ><text>上课签到：</text>
              <text>{{
                signInStatus(detailItem.State[0]?.Value[0].SingIn)
              }}</text></view
            >
            <text
              v-show="state.SingInText != ' ' && state.SingInText"
              class="reason"
              >(请假原因:{{ state.SingInText }})</text
            >
          </view>
          <view class="line-item">
            <view
              ><text>下课签退：</text>
              <text>{{
                signOutStatus(detailItem.State[0]?.Value[0].SingOut)
              }}</text></view
            >
            <text
              v-show="state.SingOutText != ' ' && state.SingOutText"
              class="reason"
              >(请假原因: {{ state.SingOutText }})</text
            >
          </view>
        </view>
      </template>
      <template #foot>
        <view class="footer">
          <u-button class="leave" @tap="leave">请假</u-button>
          <u-button class="repair" @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 { signInAndOut } from "@/api/course";
import { toast } from "@/utils/util";
import { baseUrl } from "@/utils/request";
import fillPopup from "./fillPopup.vue";
import dayjs from "dayjs";

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: "#04A7FF", status: "正常出勤" },
  { color: "#FF0606", status: "缺勤" },
  { color: "#5363FF", status: "未签退" },
  { color: "#5363FF", status: "请假" },
  { color: "#5363FF", status: "请假" },
  { color: "#19be6b", status: "正常出勤" },
  { color: "#19be6b", status: "正常出勤" },
  // { color: "#5363FF", status: "未签到" },
] as any;

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

  const { SingIn, SingOut, SingInText, SingOutText } = State;

  const conditions = {
    "QD-QT": tagList[0],
    "QD-": tagList[2],
    "QDQJ-": tagList[3],
    "QD-QTQJ": tagList[4],
    "QDBQ-": tagList[1],
    "QD-QTBQ": tagList[6],
    // "-QT": tagList[7],
  } 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 === "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 === "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: 32rpx;

  :deep(.u-card__body) {
    padding: 40rpx 32rpx !important;
  }

  :deep(.u-card__foot) {
    padding: 32rpx 32rpx 40rpx !important;
  }

  .details-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32rpx;

    .details-item-header-left {
      display: flex;
      .u-image {
        margin-right: 24rpx;
      }
      .details-item-header-left-title {
        height: 40rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #000000;
        line-height: 33rpx;
      }
      .details-item-header-left-phone {
        height: 34rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.5);
        line-height: 28rpx;
      }
    }
  }
  .line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    .line-item {
      width: 50%;
      text {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.8);
      }
      .reason {
        width: 95%;
        display: block;
        word-wrap: break-word;
        font-size: 20rpx;
        font-weight: 400;
        color: #bcbcbc;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .leave {
      width: 296rpx;
      height: 72rpx;
      border-radius: 12rpx;
      border: 4rpx solid #05a8ff;
      color: #05a8ff;
    }
    .repair {
      width: 296rpx;
      height: 72rpx;
      background: #05a8ff;
      border-radius: 12rpx;
      color: #ffffff;
    }
    :deep(.u-hairline-border:after) {
      border: 0;
    }
  }
}
</style>
