<template>
  <view class="px32rpx py20rpx" v-if="data">
    <view class="text-28rpx">未核销<text class="text-#0074FF">{{ data.length }}</text>人</view>

    <view class="bg-white rounded-32rpx flex items-center justify-between p24rpx box-border mt20rpx"
      v-for="(item, idx) in data" :key="item.id">
      <view class="font-semibold text-32rpx">{{ item.useUserName }}</view>
      <upload :disabled="false" @click="handleGoCamera(item)" :imgUrl="item.verifyImage" :key="item.id" :id="item.id">
      </upload>
    </view>
    <view class="h-180rpx"></view>
  </view>
  <fixdbtn block size="large" @click="handleSubmit" :loading="loading">提交</fixdbtn>
</template>

<script setup lang="ts">
import type { AppCoursesVerificationRecord } from "@/api/globals";
import router from "@/router";
import upload from "@/subPack/EmployeeListAdd/components/CustomUpload/index.vue";
const { dataId, img } = storeToRefs(useCameraStore());
const { data, send: getList } = useRequest(
  (data) =>
    Apis.app.courseQueryUsers({
      data,
    }),
  { immediate: false },
);
const { send: setFormData, loading } = useRequest(
  (data) =>
    Apis.app.courseUploadImage({
      data,
    }),
  { immediate: false },
);
const coursePriceRulesId = ref();
onLoad(async (query: any) => {
  coursePriceRulesId.value = query.id;
  await getList({ coursePriceRulesId: query.id, verifyStatus: 0 });
});
async function handleSubmit() {
  const form = data.value
    .map((it) => {
      return {
        id: it.useUserId,
        verifyImage: it.verifyImage,
      };
    })
    .filter((it) => it.verifyImage);
  if (!form.length)
    return uni.showToast({ title: "最少核销一个人", icon: "none" });
  const formData = {
    coursePriceRulesId: coursePriceRulesId.value,
    formList: form,
  };
  await setFormData(formData);
  uni.showToast({
    title: "拍照核销成功",
    icon: "success",
    duration: 2000,
    mask: true,
  });
  setTimeout(() => {
    router.back();
  }, 2000);
}
function handleGoCamera(item: AppCoursesVerificationRecord) {
  dataId.value = String(item.id);
  router.push({ name: "Camera" });
}
watch(
  () => img.value,
  () => {
    data.value = data.value.map((its) => {
      return {
        ...its,
        verifyImage: dataId.value == its.id ? img.value : its.verifyImage,
      };
    });
  },
);
</script>

<style scoped></style>
<route lang="json">{
  "name": "selectClass",
  "style": {
    "navigationBarTitleText": ""
  }
}</route>
