<script setup lang="ts">
import { userStore } from '@/stores'
import sass from '@/utils/sass'

const props = withDefaults(
  defineProps<{
    submitAnswerPic?: string
    reportFlag: 0 | 1
    markAnswerPic?: string
    markAnswer?: string
    uploadLoading?: boolean
    uploadFile: any
    beforeUpload: any
    isDeadline?: boolean
  }>(),
  { isDeadline: true },
)

const emit = defineEmits(['submit', 'showPic'])

const OSS_URL = import.meta.env.VITE_OSS_URL

const { token } = userStore()

function onUpload(options: any) {
  return typeof uploadFile === 'function'
    ? uploadFile({
        ...options,
        isAndroid: 0,
      })
    : undefined
}

const picList = computed(() => {
  if (props.submitAnswerPic) {
    return props.submitAnswerPic
      ?.split(',')
      .map(i =>
        (i || '')
          .replace(/[`]/g, '')
          .replace(/http:\/\//gi, 'https://')
          .trim(),
      )
      .filter(Boolean)
  } else {
    return []
  }
})

function handleDelImage(i: string) {
  if (props.reportFlag) return
  emit('submit', { delUrl: i })
}

function handleShow(url: string, isTeacher = false) {
  emit('showPic', url, isTeacher)
}
</script>
<template>
  <div>
    <div class="other">
      <div v-if="picList.length" class="pic-box box">
        <el-upload
          v-if="picList.length < 10 && !reportFlag"
          class="add-image-btn pointer"
          :style="{
            'background-image': `url(${OSS_URL}/urm/homeWork/add-image-btn.png)`,
          }"
          action="/api/main/sysFileInfo/tenUploadAll"
          :data="{ type: 1 }"
          :headers="{
            Authorization: token,
            'X-Tenant-Id': sass.platform.tenantId,
          }"
          accept="image/*"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :disabled="uploadLoading"
          :http-request="onUpload"
        >
        </el-upload>
        <div class="pic-list hidden_scroll">
          <div v-for="i in picList" :key="i" class="pic pointer">
            <Icon
              v-if="!reportFlag && i"
              name="del_btn"
              width="32"
              class="del-btn pointer"
              @click.stop="handleDelImage(i)"
            ></Icon>
            <img v-if="i" :src="i" @click.stop="handleShow(i)" />
            <!-- <div v-else>上传中</div> -->
          </div>
        </div>
        <div v-show="uploadLoading" class="pic-mask">
          <Icon name="global_loading" loading size="96" />
        </div>
      </div>
      <div v-else-if="!reportFlag" class="upload-box box hidden_scroll">
        <!-- 答题 -->
        <el-upload
          class="upload-demo"
          action="/api/main/sysFileInfo/tenUploadAll"
          :data="{ type: 1 }"
          :headers="{
            Authorization: token,
            'X-Tenant-Id': sass.platform.tenantId,
          }"
          accept="image/*"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :disabled="uploadLoading"
          :http-request="uploadFile"
        >
          <Btn :disabled="uploadLoading" width="386" height="108" size="48" class="btn pointer"
            >{{ uploadLoading ? '上传中' : '点击拍照' }}
          </Btn>
        </el-upload>
        <div class="tip">（请将试卷答案拍照上传）</div>
      </div>
      <div v-else class="pic-box box empty">没有作答哦～</div>
    </div>
    <slot name="markAnswer"></slot>
    <div v-if="isDeadline && markAnswerPic && reportFlag" class="other markAnswerPic">
      <div class="answer-box">
        <div class="answer-box-title">批改结果</div>
      </div>
      <div class="pic-box box">
        <div class="pic-list hidden_scroll">
          <div
            v-for="i in markAnswerPic?.split(',')"
            :key="i"
            class="pic pointer"
            @click="handleShow(i, true)"
          >
            <img :src="i" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.other {
  &.markAnswerPic {
    .answer-box {
      margin-top: 4vh;
      &-title {
        padding: 0 20px 0 32px;
        position: relative;
        color: $font-color;
        font-family: $font-special;
        font-size: 2.67vh;
        font-style: normal;
        font-weight: 400;
        line-height: 4vh; /* 150% */
        border-radius: 0.33vh;
        margin-bottom: 2vh;
        &::before {
          content: '';
          width: 12px;
          height: 100%;
          flex-shrink: 0;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #669cfe;
          border-radius: 0 1vh 1vh 0;
        }
      }
    }
  }
  .box {
    border-radius: 1.67vh;
    border: 0.33vh solid #bed5fe;
    background: #f7faf9;
  }
  .upload-box {
    height: 22.67vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .btn {
      box-shadow: 0 0.5vh 0.17vh 0 rgba(0, 0, 0, 0.25);
      margin-bottom: 1.33vh;
    }
    .tip {
      color: #99d609;
      text-align: center;
      font-family: 'OPPO Sans';
      font-size: 2vh;
      font-style: normal;
      font-weight: 400;
      line-height: 3vh; /* 150% */
    }
  }

  .pic-box {
    box-sizing: border-box;
    position: relative;
    // max-height: 700px;
    // overflow-y: auto;
    .pic-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 1.67vh;
      z-index: 10;
    }
    &.empty {
      height: 22.67vh;
      color: #999;
      font-family: $font-special;
      font-size: 2.67vh;
      font-style: normal;
      font-weight: 400;
      line-height: 4vh; /* 150% */
      box-sizing: border-box;
      text-align: center;
      line-height: 22vh;
    }

    .add-image-btn {
      border-radius: 0 0 1.33vh 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 120px;
      height: 10vh;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: right bottom;
      :deep(.el-upload) {
        width: 100%;
        height: 100%;
      }
    }
    .pic-list {
      display: flex;
      flex-wrap: wrap;
      max-height: 49.33vh;
      overflow-y: auto;
      margin-top: 3.83vh;
      margin-left: 58px;
      margin-right: 60px;
      margin-bottom: 1.25vh;
      transform: translateY(-8px);
    }
    .pic {
      transform: translateY(8px);
      position: relative;
      width: 164px;
      height: 13.67vh;
      flex-shrink: 0;
      margin-right: 40px;
      margin-bottom: 2.5vh;
      img {
        width: 164px;
        height: 13.67vh;
        object-fit: cover;
      }
      div {
        width: 164px;
        height: 13.67vh;
      }
    }
    .del-btn {
      width: 32px;
      height: 2.67vh;
      // background: url('~@/static/unity/schoolJob/del-btn.svg') no-repeat right bottom;
      position: absolute;
      top: -0.67vh;
      right: -8px;
    }
  }
}
</style>
