<template>
  <view class="train-item-container">
    <u-card :show-head="false" margin="0" :border="false">
      <template #body>
        <view class="body">
          <h3>{{ trainItem.className }}</h3>
          <text class="trainText"
            >培训日期：{{ dayjs(trainItem.startDate).format("YYYY-MM-DD") }} 至
            {{ dayjs(trainItem.endDate).format("YYYY-MM-DD") }}</text
          >
          <text class="trainText">培训地点：{{ trainItem.classArea }}</text>
          <view v-show="!current" class="train-progress">
            <text class="trainText" style="white-space: nowrap"
              >报名进度：</text
            >
            <u-line-progress
              active-color="#04a7ff"
              :percent="percent ? percent : 0"
              :show-percent="false"
              height="20"
              style="margin-top: 10rpx"
            />
            <view class="progress">
              {{ trainItem.subCount + "/" + trainItem.planCount }}
            </view>
          </view>
          <text class="trainText" v-show="!current"
            >截止时间：{{ dayjs(trainItem.endDate).format("YYYY-MM-DD") }}</text
          >
          <view style="display: flex; flex-direction: row">
            <text class="trainText" style="white-space: nowrap"
              >培训要求：</text
            >
            <view style="word-break: break-word">{{ trainItem.require }}</view>
          </view>
          <view
            class="train-button"
            v-show="trainItem.classType != 3 && trainItem.classType != 4"
          >
            <u-button
              :type="trainStatus.type"
              :style="{
                backgroundColor: !trainItem.classType ? '#05a8ff' : '',
              }"
              @tap="registerTrain"
              >{{ trainStatus.detail }}</u-button
            >
          </view>

          <view v-show="trainItem.classType == 3" class="body-right info">
            {{ trainStatus.detail }}
          </view>
          <view v-show="trainItem.classType == 4" class="body-right">
            {{ trainStatus.detail }}
          </view>
        </view>
      </template>
    </u-card>
  </view>

  <applicationPupop
    v-model="show"
    :selectList="selectList"
    :trainItem="trainItem"
    :current="current"
    @initTrain="initTrain"
  />
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import applicationPupop from "./applicationPopup.vue";
import { getInFormAtion, quit, signUp } from "@/api/trainRegistration";
import { toast, zconfirm } from "@/utils/util";
import { useStudentStore } from "@/stores/modules/studentStore";

const globalStore = useStudentStore();

const props = defineProps({
  trainItem: {
    type: Array,
    default: () => [],
  } as any,
  current: Number,
});
const emits = defineEmits(["initTrain"]);

const show = ref(false);
const selectList = ref();
const trainDetail = [
  "报名培训", // 0
  "培训名额已满", // 1
  "退出培训", // 2
  "培训结束", // 3
  "培训中", // 4
];

const percent = computed(
  () => (props.trainItem.subCount / props.trainItem.planCount) * 100
);

const trainStatus = computed(() => {
  const statusObj = {
    type: "",
    detail: "",
  };

  switch (props.trainItem.classType) {
    case 0:
    case 4:
      statusObj.type = "primary";
      break;
    case 1:
    case 3:
      statusObj.type = "info";
      break;
    case 2:
      statusObj.type = "error";
      break;
  }
  statusObj.detail = trainDetail[props.trainItem.classType];
  return statusObj;
});

const registerTrain = () => {
  switch (props.trainItem.classType) {
    case 0:
      zconfirm(
        "确认报名参加本期培训？",
        async (result: boolean) => {
          if (result) {
            if (
              props.trainItem.fisFillArrAngEroom !== "false" ||
              props.trainItem.fisFillCohabItant !== "false" ||
              props.trainItem.fisFillInfo !== "false" ||
              props.trainItem.fsFillRiding !== "false"
            ) {
              initInFormAtion();
              show.value = true;
            } else {
              const data: any = {
                classId: props.trainItem.classId,
                parmeters: {
                  IsDeleteEntry: "false",
                  Model: {
                    FID: 0,
                    FTrainingProgram: {
                      FNUMBER: props.trainItem.itemNumber, //项目
                    },
                    FClass: {
                      FNUMBER: props.trainItem.classNumber, //班级
                    },
                    F_LQKJ_Entity: [
                      {
                        FStudentId: {
                          FNUMBER: globalStore.infoData.FNUMBER,
                        },
                        FGroup: "1",
                        FSourceChannel: "",
                        FWorkUnit: globalStore.infoData.FWorkUnit1,
                        FDuties: globalStore.infoData.FDUTIES,
                        FType: "",
                        FStreet: {
                          FNumber: "",
                        },
                        FAffiliationDGW: {
                          FNumber: "",
                        },
                        FText: "",
                        FIsRiding: false,
                        FIsArrangeRoom: false,
                        FIsCohabit: false,
                        FCohabitName: "",
                        FStuClassId: {
                          FNUMBER: "",
                        },
                        FPhoneNmuber: globalStore.infoData.FMOBILE,
                      },
                    ],
                  },
                },
              };
              const { data: res }: any = await signUp(data);
              if (res.code == 200) {
                initTrain();
                toast("报名成功");
              }
            }
          }
        },
        "报名培训"
      );
      break;
    case 2:
      zconfirm(
        "确认退出本期培训？",
        async (result: boolean) => {
          if (result) {
            const data = {
              parmeters: {
                classId: props.trainItem.classId,
                Phone: globalStore.infoData.FMOBILE,
              },
            };
            const { data: res }: any = await quit(data);
            if (res.code == 200) {
              await initTrain();
              await toast("退出培训成功");
            }
          }
        },
        "退出培训"
      );
      break;
    default:
      break;
  }
};

const initInFormAtion = async () => {
  const { data: res }: any = await getInFormAtion();
  selectList.value = [
    { FDATAVALUE: "所属街道", FNUMBER: 0, children: [] },
    { FDATAVALUE: "所属党委", FNUMBER: 1, children: [] },
    { FDATAVALUE: "自定义内容", FNUMBER: 2, children: [] },
  ] as any;
  if (res.code == 200) {
    res.data.map((item: any) => {
      if (!item.Type) selectList.value[0].children.push(item);
      else selectList.value[1].children.push(item);
    });
    //  console.log(selectList.value)
  }
};

const initTrain = () => {
  emits("initTrain", props.current);
};
</script>

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

  .body {
    position: relative;

    .body-right {
      position: absolute;
      top: -30rpx;
      right: -30rpx;
      padding: 10rpx;
      text-align: center;
      line-height: 30rpx;
      font-size: 24rpx;
      color: #05a8ff;
      background: #ddf3ff;
      border-radius: 0rpx 24rpx 0rpx 24rpx;
    }

    .info {
      color: #82848a;
      background-color: #e4e4e4;
    }
  }

  h3 {
    height: 48rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #222222;
    line-height: 40rpx;
    margin-bottom: 32rpx;
  }

  .trainText {
    display: block;
    padding: 12rpx 0;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.9);
    line-height: 33rpx;
  }

  .train-progress {
    display: flex;
    align-items: center;

    .registered {
      margin-left: 30rpx;
      color: #3b99fc;
    }

    .progress {
      margin-left: 10px;
      margin-top: 8rpx;
    }
  }

  .train-button {
    //  padding: 0 50rpx;
    margin-top: 30rpx;
    .u-button {
      width: 622rpx;
      height: 100rpx;
      background: #bcbcbc;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
    }

    :deep(.u-hairline-border:after) {
      border: 0;
    }
  }
}
</style>
