<template>
  <div class="roolcallDetail">
    <div class="header">
      <el-row>
        <el-col :span="18">
          <el-row>
            <el-col :span="6"
              ><el-text class="mx-1" type="primary" size="large">应到：{{ listData.length }}人</el-text></el-col
            >
            <el-col :span="6"
              ><el-text class="mx-1" type="success" size="large">实到：{{ listData.length - UnRollCallData.length }}人</el-text>
            </el-col>
            <el-col :span="6">
              <el-text class="mx-1" type="warning" size="large">趴桌子：{{ LieOnTable.length }}人</el-text></el-col
            >
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24"
        ><el-row class="rowbg">
          <el-col :xl="3" :lg="4" :md="6" :sm="8" :xs="12" v-for="(item, index) in listData" :key="index"
            ><div class="grid-content">
              <div class="imgBox" :class="{ active: item.alarmTypes?.includes('class_room_call') }">
                <el-image
                  v-if="item.faces && item.faces.length > 0"
                  style="width: 100px; height: 100px"
                  :src="item.faces[0].faceUrl"
                  :preview-src-list="[item.faces[0].faceUrl]"
                  :initial-index="4"
                  fit="cover"
                />
              </div>
              <div class="info">
                <div class="desc">
                  <span class="label">姓名:</span>
                  {{ item.name }}
                </div>
                <div class="desc">
                  <span class="label">所属分组:</span>
                  {{ item.personSetName }}
                </div>
              </div>
              <div v-if="!item.alarmTypes?.includes('class_room_call')" class="btn btns" style="justify-content: center; border-top: none">
                <el-button size="small" type="primary" @click="checkOut(item, index)">签到</el-button>
              </div>
            </div></el-col
          >
        </el-row></el-col
      >
    </el-row>
    <el-dialog v-model="visible" title="指派" width="830px" :before-close="handleClose">
      <el-row class="rowbg">
        <el-col :xl="6" :lg="6" :md="8" v-for="(item, index) in UnRollCallData" :key="index"
          ><div class="grid-content gridContentDialog" :class="{ active: checkIndex == index }" @click="checkOut(item, index)">
            <div class="imgBox" :class="{ active: item.status === 1 ? true : false }">
              <img
                v-if="item.faces && item.faces.length > 0"
                :src="item.faces[0].faceUrl"
                alt=""
                style="width: 100px; height: 100px; object-fit: cover"
              />
              <!-- <el-image
                style="width: 100px; height: 100px"
                :src="item.faces[0].faceUrl"
                :preview-src-list="[item.faces[0].faceUrl]"
                :initial-index="4"
                fit="cover"
              /> -->
            </div>
            <div class="info">
              <div class="desc">
                <span class="label">姓名:</span>
                {{ item.name }}
              </div>
              <div class="desc">
                <span class="label">所属分组:</span>
                {{ item.personSetName }}
              </div>
            </div>
          </div></el-col
        >
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="submitFn">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="AttendanceRoolcallDetail">
import { userManagePersonnelApi, attendanceRoolcallApi } from "@/api";
const route = useRoute();
const listData = ref<any>([]); //班级人员列表
const HighlightData = ref<any>([]); //已到人员列表
const UnRollCallData = ref<any>([]); //未点名人员列表
const UnrecognizedD = ref<any>([]); //未识别数据
const LieOnTable = ref<any>([]); //趴桌子数据
const visible = ref(false); //指派是否显示人员
const assignId = ref<any>(); //指派人员id
const checkIndex = ref<any>(); //选择把指派人员id指派给对应的人员
const checkData = ref<any>({});

const getList = () => {
  userManagePersonnelApi
    .page({
      pageNum: 1,
      pageSize: 1000,
      personSetId: route.query.personSetId
    })
    .then((res: any) => {
      listData.value = res.data.list;
      Highlight();
    });
};
const Highlight = () => {
  attendanceRoolcallApi
    .page({
      pageNum: 1,
      pageSize: 1000,
      taskId: route.query.taskId
    })
    .then((res: any) => {
      HighlightData.value = res.data.list;
      listData.value = listData.value.map((e: any) => {
        e.alarmTypes = [];
        // alarmType：lie_on_table 趴桌子    class_room_call 点名(实到)
        let arr = HighlightData.value.filter((e1: any) => {
          return e1.personId == e.personId;
        });
        e.alarmTypes = arr.map((e: any) => e.alarmType);
        return e;
      });
      // 未点名人员摘取
      UnRollCallData.value = JSON.parse(JSON.stringify(listData.value)).filter((item: any) => !item.alarmTypes.includes("class_room_call"));
      // 未识别人员摘取
      UnrecognizedD.value = JSON.parse(JSON.stringify(HighlightData.value)).filter((item: any) => !item.personId);
      // 趴桌子人员摘取
      LieOnTable.value = JSON.parse(JSON.stringify(listData.value)).filter((item: any) => item.alarmTypes.includes("lie_on_table"));

      console.log("未识别人员摘取:", UnrecognizedD.value, ",趴桌子人员摘取:", LieOnTable.value, ",未点名人员摘取:", UnRollCallData.value);
    });
};
const assignFn = (item: any) => {
  assignId.value = item.id;
  visible.value = true;
};
const checkOut = (item: any, index: number) => {
  checkIndex.value = index;
  checkData.value = JSON.parse(JSON.stringify(item));

  attendanceRoolcallApi.manualRoll([{ personId: item.personId, personSetId: item.personSetId, taskId: route.query.taskId }]).then(() => {
    ElMessage({
      message: "点名成功",
      type: "success"
    });
    UnrecognizedD.value = UnrecognizedD.value.filter((item1: any) => item1.id !== item.id);
    listData.value.map((item2: any) => {
      if (item2.personId === item.personId) {
        item2.alarmTypes.push("class_room_call");
        UnRollCallData.value = JSON.parse(JSON.stringify(listData.value)).filter((item: any) => !item.alarmTypes.includes("class_room_call"));
      }
    });
  });
};
const submitFn = () => {
  if (!checkIndex.value && checkIndex.value !== 0) {
    ElMessage({
      message: "请选择要指派的人员",
      type: "warning"
    });
    return false;
  }
  visible.value = false;

  attendanceRoolcallApi.update({ taskId: assignId.value, personId: checkData.value.personId, personSetId: checkData.value.personSetId }).then(() => {
    ElMessage({
      message: "指派成功",
      type: "success"
    });
    UnrecognizedD.value = UnrecognizedD.value.filter((item: any) => item.id !== assignId.value);
    listData.value.map((item: any) => {
      if (item.personId === checkData.value.personId) {
        item.status = 1;
      }
    });
  });
};
const handleClose = () => {
  visible.value = false;
  checkIndex.value = null;
  assignId.value = null;
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.roolcallDetail {
  .el-row {
    width: 100%;
  }
  .header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 0 20px;
    background: #ffffff;
    .el-col {
      text-align: center;
    }
  }
  .rowbg {
    width: 100%;
    .el-col {
      box-sizing: border-box;
      height: 190px;
      margin-bottom: 20px;
      .grid-content {
        position: relative;
        box-sizing: border-box;

        // height: 100%;
        padding: 15px;
        margin: 10px;
        background: #ffffff;
        .btns {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          background: rgb(0 0 0 / 80%);
          opacity: 0;
        }
        &:hover {
          .btns {
            opacity: 1;
          }
        }
        .imgBox {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100px;
          background: #f2f2f2;
          &.active {
            background: #79bbff45;
            :deep(.el-image__preview) {
              opacity: 1;
            }
          }
          :deep(.el-image__preview) {
            max-height: 100%;
            opacity: 0.5;
          }
        }
        .info {
          .label {
            margin-right: 8px;
            font-size: 14px;
            color: #41465f;
            opacity: 0.6;
          }
          .desc {
            max-width: 100%;
            margin-top: 10px;
            overflow: hidden;
            font-size: 14px;
            color: #41465f;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          font-size: 14px;
          color: #41465f;
          border-top: 1px solid #f3f3f3;
        }
      }
      .gridContentDialog {
        cursor: pointer;
        background: #f2f3f5;
        .imgBox {
          :deep(.el-image__preview) {
            opacity: 1;
          }
        }
        &.active {
          border: 2px solid red;
        }
      }
    }
  }
  .unrecognized {
    .title {
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;
      color: #41465f;
      text-align: center;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      list-style: none;
      li {
        box-sizing: border-box;
        width: 80px;
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: center;
        background: #f2f2f2;
        :deep(.el-image__preview) {
          width: 80px;
        }
      }
    }
  }
}
</style>
