<script setup lang="ts" name="wordManage_wordDetail">
import type { FormInstance, UploadProps } from 'element-plus'

import { SYS_INFO } from '@vben/preferences'
import { useAccessStore } from '@vben/stores'

import { Plus, Search } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'

import {
  addSentence,
  getOriginList,
  moveImage,
  picSearchByKeyWord,
  updateMeaning,
  updateSentence,
  uploadUrl,
} from '#/api'
import hud from '#/utils/hud'
import { downloadFile } from '#/utils/tool'

interface formType {
  acceptType: number
  enDesc: string
  id?: string
  image: string[]
  levelFlag?: number
  meaningId: string
  // checkFlag:number;
  znDesc: string
}

interface tableDataType {
  children: tableDataType[]
  label: string
  value: string
}

interface imgType {
  disabled?: boolean
  picUrl: string
  resultType: number
  sentenceEn: string
  sentenceZn: string
  typeAbbr: string
  wordEnDesc: string
  wordFrequency: number
  wordId: string
  wordSimpleZnDesc: string
  wordSpell: string
  wordZnDesc: string
}

const props = defineProps<{
  diaData: formType
  isEdit: boolean
  isParent: boolean
  showDia: boolean
  tableData?: tableDataType[]
  title: string
}>()

const emits = defineEmits(['update:showDia', 'onRefresh'])
const show = computed({
  get() {
    return props.showDia
  },
  set(val) {
    emits('update:showDia', val)
  },
})
watch(
  () => show.value,
  (nv) => {
    if (nv) {
      activeTab.value = 'edit'
      searchImage.value = ''
      imageList.value = []
    }
  },
)
const rules = computed(() => {
  return isAcceptanceCheck
    ? {
        enDesc: [{ required: true, message: '英文不能为空', trigger: 'blur' }],
        znDesc: [{ required: true, message: '中文不能为空', trigger: 'blur' }],
        targetMeaningId: [
          { required: true, message: '请选择转移释义', trigger: 'change' },
        ],
      }
    : {
        enDesc: [{ required: true, message: '英文不能为空', trigger: 'blur' }],
        znDesc: [{ required: true, message: '中文不能为空', trigger: 'blur' }],
        originCode: [
          { required: true, message: '请选择例句来源', trigger: 'change' },
        ],
        simpleDesc: [
          { required: true, message: '中文简易描述不能为空', trigger: 'blur' },
        ],
      }
})

const _form = {
  // checkFlag:0,
  id: '',
  znDesc: '',
  enDesc: '',
  image: [],
  meaningId: '',
  simpleDesc: '',
  levelFlag: 0,
  originCode: '',
  targetMeaningId: '',
}
const form = reactive({
  ..._form,
})
const ruleFormRef = ref<FormInstance>()
const { accessToken } = storeToRefs(useAccessStore())
const fileList = ref([] as any)
// watch(
//   () => fileList.value,
//   (nv) => {
//     console.log('nv', nv)
//   },
// )
const isSentence = ref(false) // 是否例句
const isAdd = computed(() => props.title === '新增')
const isAcceptanceCheck = computed(() => props.title === '例句验收')
const dialogMoveVisible = ref(false) // 移动图片弹窗
const moveValue = ref({
  sourceImg: '',
  sourceId: '',
  sourceType: 2,
  targetId: '',
  targetType: 2,
})
const options = ref<tableDataType[]>([])
const cascaderProps = {
  checkStrictly: true,
}
// const switchTap = ref([
//   { value: '编辑', index: 1 },
//   { value: '图片搜索', index: 2 },
// ])
const activeTab = ref('edit')
const searchImage = ref('')
const imageList = ref<imgType[]>([])
const imgLoading = ref(false) // 图片搜索loading

const imgPageData = ref({
  size: 20,
  current: 1,
  total: 0,
})

const loading = ref(false)
const urlValue = ref()
const imgdialogVisible = ref(false)
const dialogImageUrl = ref('')
const copyValue = ref()
const originList = ref<Array<{ code: string; name: string }>>([])

function getAssetsFile(iconName: string) {
  return new URL(`/src/assets/image/${iconName}.png`, import.meta.url).href
}

function onOpen() {
  Object.assign(form, _form)
  // form = {
  //     ...form,
  //     ...props.diaData,
  // }
  for (const i in form) {
    ;(form as any)[i] = (props.diaData as any)[i]
  }
  form.targetMeaningId = props.diaData.meaningId
  urlValue.value = ''
  copyValue.value = ''

  fileList.value = (form.image || []).map((item: string) => {
    const url = item.includes('mp4') ? getAssetsFile('video') : item
    return {
      url,
      // eslint-disable-next-line unicorn/prefer-string-slice
      name: item.substring(item.lastIndexOf('/') + 1, item.length),
      response: {
        data: {
          filePath: url,
          url: item,
          video: item.includes('mp4'),
        },
      },
    }
  })

  // 移动图片选项
  const arr = props.tableData

  if (!isAdd.value) {
    options.value = (arr || []).map((item: any) => {
      let ichild = null
      if (item.children && item.children.length > 0) {
        ichild = item.children.map((child: any) => {
          return {
            label: child.znDesc,
            value: child.id,
          }
        })
      }
      return {
        label: item.znDesc,
        value: item.id,
        children: ichild,
      }
    })
  }
  // eslint-disable-next-line no-prototype-builtins
  isSentence.value = !props.diaData.hasOwnProperty('children')
  moveValue.value = {
    ...moveValue.value,
    sourceType: isSentence.value ? 3 : 2,
    sourceId: props.diaData.id!,
  }
}

async function handleUpload() {
  if (!urlValue.value) {
    ElMessage.error('请输入地址！')
    return
  }
  if (urlValue.value.includes('1313840333')) {
    return handleCopy()
  }
  // 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1717517817881608194.jpg'

  const data = await uploadUrl({
    url: urlValue.value,
  })
  const currurl = data.filePath.includes('mp4')
    ? getAssetsFile('video')
    : data.filePath
  fileList.value.push({
    url: currurl,
    name: data.fileOriginName,
    response: {
      data: {
        filePath: currurl,
        url: currurl,
        video: data.filePath.includes('mp4'),
      },
    },
  })
}

async function initOriginList() {
  originList.value = await getOriginList()
}

function handleCopy() {
  if (!urlValue.value) {
    ElMessage.error('请输入地址！')
    return
  }
  // eslint-disable-next-line regexp/no-unused-capturing-group
  const reg = /^(http|https):\/\/[a-zA-Z0-9\-.]+\.[a-zA-Z]{2,}(\/\S*)?$/
  if (!reg.test(urlValue.value)) {
    ElMessage.error('请输入正确的地址！')
    return
  }
  const currurl = urlValue.value.includes('mp4')
    ? getAssetsFile('video')
    : urlValue.value
  fileList.value.push({
    url: currurl,
    // name: data.fileOriginName,
    response: {
      data: {
        filePath: currurl,
        url: currurl,
        video: urlValue.value.includes('mp4'),
      },
    },
  })
}

const handleRemove = (uploadFile: any) => {
  const index = fileList.value.findIndex((item: any) => {
    return JSON.stringify(item).indexOf(uploadFile.response.data.url) > 1
  })
  fileList.value.splice(index, 1)
  if (uploadFile.response.data.addImg) {
    const obj = imageList.value[uploadFile.response.data.name]
    if (obj) {
      obj.disabled = false
    }
  }
}

const handlePreview = (uploadFile: any) => {
  imgdialogVisible.value = true
  dialogImageUrl.value = uploadFile.response.data.url!
}

const handlePictureCardPreview = (uploadFile: any) => {
  if (uploadFile.response.data.video) {
    downloadFile(uploadFile.response.data.url, uploadFile.name)
  } else {
    moveValue.value.sourceImg = uploadFile.response.data.filePath
    dialogMoveVisible.value = true
  }
}
// 搜索图片
function handleSearch() {
  if (!searchImage.value.trim()) return
  imgLoading.value = true
  imageList.value = []
  picSearchByKeyWord({
    current: imgPageData.value.current,
    keyWord: searchImage.value.trim(),
    size: imgPageData.value.size,
  })
    .then((res: any) => {
      if (res.rows.length === 0) return
      // const regex = new RegExp(
      //     `(?<=^|[^${searchImage.value.trim()}])(${searchImage.value.trim()})(?=[^${searchImage.value.trim()}]|$)`,
      //     'g'
      // );
      const regex = new RegExp(searchImage.value.trim(), 'g')
      imgPageData.value.total = res.totalRows
      res.rows.forEach((item: imgType) => {
        for (const key in item) {
          const value = (item as any)[key]
          if (
            value &&
            key !== 'picUrl' &&
            key !== 'typeAbbr' &&
            typeof value === 'string'
          ) {
            ;(item as any)[key] = value.replace(
              regex,
              `<span style="color:red">$&</span>`,
            )
          }
        }
        item.picUrl.split(',').forEach((i: string) => {
          imageList.value.push({
            ...item,
            picUrl: i,
          })
        })
      })
    })
    .finally(() => {
      nextTick(() => {
        imgLoading.value = false
      })
    })
}

// 预览图片
function showBigImg(url: string) {
  imgdialogVisible.value = true
  dialogImageUrl.value = url
}

function onImgCurrentChange(number: number) {
  imgPageData.value.current = number
  handleSearch()
}

function onImgSizeChange(number: number) {
  imgPageData.value.size = number
  handleSearch()
}

// 引用图片
function addDia(item: imgType, index: number) {
  fileList.value.push({
    url: item.picUrl,
    response: {
      data: {
        url: item.picUrl,
        filePath: item.picUrl,
        name: index,
        addImg: true,
        video: false,
      },
    },
  })
  const obj = imageList.value[index]
  if (obj) {
    obj.disabled = true
  }
}

// 移动到第一个
const handleMoveFirst = (uploadFile: any) => {
  const index = fileList.value.findIndex((item: any) => {
    return JSON.stringify(item).indexOf(uploadFile.response.data.url) > 1
  })
  if (index !== -1) {
    const first = {}
    Object.assign(first, fileList.value[index])
    fileList.value.splice(index, 1)
    fileList.value.unshift(first as { url: string })
  }
}

const beforeIconUrlUpload = (_: { size: number; type: string }) => {
  loading.value = true

  // const fileType = ['image/jpeg', 'image/png'];
  // const maxSize = 1024 * 1024 * 10;
  // if (!fileType.includes(file.type)) {
  //     ElMessage.error('上传格式不正确，只支持JPG/PNG');
  //     return false;
  // } else if (file.size > maxSize) {
  //     ElMessage.error('上传大小不正确，不能超过10MB');
  //     return false;
  // }
  // fileList.value = URL.createObjectURL(file as any);
}

const successUrlUpload: UploadProps['onSuccess'] = (
  response,
  _: any,
  _2: any,
) => {
  if (response.code === 200) {
    fileList.value = fileList.value.map((item: any) => {
      const tempUrl = item.response.data.filePath.includes('mp4')
        ? item.response?.data.filePath
        : getAssetsFile('video')
      // eslint-disable-next-line no-prototype-builtins
      const url = item.response.data.hasOwnProperty('url')
        ? item.response.data.filePath
        : tempUrl

      return {
        ...item,
        url,
        name: item.response?.data.fileOriginName,
        response: {
          // ...item.response,
          data: {
            filePath: url,
            // eslint-disable-next-line no-prototype-builtins
            url: item.response.data.hasOwnProperty('url')
              ? item.response.data.url
              : item.response.data.filePath,
            // eslint-disable-next-line no-prototype-builtins
            video: item.response.data.hasOwnProperty('video')
              ? item.response.data.video
              : item.response?.data.filePath.indexOf('mp4') !== -1,
          },
        },
      }
    })
    loading.value = false
  } else {
    // console.log('上传失败')
  }
}

const handleChange = (value: any) => {
  const targetId = value.length > 0 ? value[0] : ''
  moveValue.value = {
    ...moveValue.value,
    targetType: value.length > 1 ? 3 : 2,
    targetId: value.length > 1 ? value[1] : targetId,
  }
}

// 移动图片
async function handleMove() {
  await moveImage(moveValue.value).then(() => {
    emits('onRefresh')
    show.value = false
    dialogMoveVisible.value = false
  })
}
function onRefresh() {
  emits('onRefresh')
  show.value = false
}

const handleSave = debounce(
  async () => {
    if (loading.value || !ruleFormRef.value) return
    await ruleFormRef.value.validate(async (valid, _) => {
      if (valid) {
        // 添加

        const postData = {
          ...form,
          image: fileList.value
            .map((item: any) => {
              return item.response.data.url
            })
            .join(','),
        } as any

        if (isAcceptanceCheck) {
          postData.acceptType = 2
        }
        // 先隐藏对话框
        show.value = false

        // 再发请求
        hud.toastLoad({
          task: async () => {
            if (isAdd.value) {
              await addSentence({
                ...postData,
                content: form.enDesc,
              })
            } else if (isSentence.value) {
              await updateSentence({
                // 修改例句
                ...postData,
                id: props.diaData.id,
                content: form.enDesc,
              })
            } else {
              updateMeaning({
                // 修改意思
                ...postData,
                id: props.diaData.id,
              })
            }
            onRefresh()
          },
          option: '保存',
          hideSuccess: false,
        })
        // try {

        // } catch (error) {
        //   return false
        // }
      }
    })
  },
  1500,
  {
    leading: true,
  },
)
function handleError(index: number) {
  // 图片加载失败  不显示
  imageList.value.splice(index, 1)
}

onMounted(() => {
  initOriginList()
})
</script>

<template>
  <el-dialog
    v-model="show"
    :title="title"
    width="930px"
    top="10vh"
    class="box"
    destroy-on-close
    @open="onOpen"
  >
    <!-- <div v-if="isEdit" class="title-box">
            <el-button
                v-for="item in switchTap"
                :key="item.index"
                class="title_item"
                :type="activeTab === item.index ? 'primary' : 'default'"
                @click="activeTab = item.index"
                >{{ item.value }}</el-button
            >
        </div> -->
    <el-tabs v-model="activeTab" class="demo-tabs">
      <el-tab-pane label="编辑" name="edit">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          label-width="125px"
          :validate-on-rule-change="false"
        >
          <!-- <el-form-item label="审查标志" prop="checkFlag">
                <Switch v-model="form.checkFlag" :inactive-value="0" :active-value="1" />
            </el-form-item> -->
          <el-form-item label="英文描述" prop="enDesc">
            <el-input
              v-model="form.enDesc"
              :rows="3"
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="中文描述" prop="znDesc">
            <el-input
              v-model="form.znDesc"
              :rows="3"
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            v-if="!isAcceptanceCheck"
            label="例句来源"
            prop="originCode"
          >
            <el-select
              v-model="form.originCode"
              placeholder="请选择"
              :disabled="!isAdd"
            >
              <el-option
                v-for="item in originList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="isAcceptanceCheck"
            label="转移释义"
            prop="targetMeaningId"
          >
            <el-select v-model="form.targetMeaningId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              ((props.isParent && isAdd) || !props.isParent) &&
              !isAcceptanceCheck
            "
            label="是否允许放入关卡"
            prop="levelFlag"
          >
            <Switch
              v-model="form.levelFlag"
              :inactive-value="0"
              :active-value="1"
            />
          </el-form-item>
          <el-form-item
            v-if="props.isParent && !isAdd && !isAcceptanceCheck"
            label="中文简易描述"
            prop="simpleDesc"
          >
            <el-input
              v-model="form.simpleDesc"
              :rows="3"
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item v-if="!isAcceptanceCheck" label="图片" prop="image">
            <el-icon>
              <Delete />
            </el-icon>
            <el-upload
              v-model:file-list="fileList"
              action="/api/main/sysFileInfo/tenUploadAll"
              list-type="picture-card"
              multiple
              :class="[{ hideMove: isAdd }]"
              :on-remove="handleRemove"
              :headers="{
                Authorization: `Bearer ${accessToken}`,
                'X-Tenant-Id': SYS_INFO.tenantId,
              }"
              :data="{
                type: 1,
              }"
              accept=".jpg,.jpeg,.png,.gif,.mp4,.JPG,.JPEG,.PNG,.GIF"
              :disabed="loading"
              :before-upload="beforeIconUrlUpload"
              :on-success="successUrlUpload"
              :on-preview="handlePictureCardPreview"
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file: UploadFile }">
                <li class="el-upload-list__item">
                  <span class="icon-loading">
                    <el-icon class="icon-box is-loading">
                      <Icon name="el-icon-Loading" />
                    </el-icon>
                    <div>loading...</div>
                  </span>
                  <img
                    v-if="!UploadFile.url?.includes('svg')"
                    class="el-upload-list__item-thumbnail"
                    :src="UploadFile.url"
                  />
                  <img
                    v-else
                    class="el-upload-list__item-thumbnail"
                    :src="'UploadFile.url'.replace('on', 'off')"
                  />
                  <label class="el-upload-list__item-status-label">
                    <i
                      class="el-icon el-icon--upload-success el-icon--check"
                    ></i>
                  </label>
                  <span
                    :class="[
                      (UploadFile.response as any)?.data.video
                        ? 'r-icon'
                        : 'o-icon',
                    ]"
                    @click="handlePictureCardPreview(UploadFile)"
                  >
                    <Icon
                      v-if="(UploadFile.response as any)?.data.video"
                      name="el-icon-Download"
                    />
                    <Icon v-else name="el-icon-Switch" />
                  </span>
                  <span class="l-icon" @click="handleRemove(UploadFile)">
                    <Icon name="el-icon-Delete" />
                  </span>
                  <span
                    :class="{
                      'p-icon': !(UploadFile.response as any)?.data.video,
                    }"
                    @click="handlePreview(UploadFile)"
                  >
                    <Icon name="el-icon-ZoomIn" />
                  </span>
                  <span class="m-icon" @click="handleMoveFirst(UploadFile)">
                    <Icon name="el-icon-DArrowLeft" />
                  </span>
                </li>
              </template>
            </el-upload>
          </el-form-item>
          <div v-if="!isAcceptanceCheck" class="input-box">
            <el-input
              v-model="urlValue"
              placeholder="请输入"
              class="el-input-item"
              style="width: 60%; margin: 0 10px 0 80px"
            />
            <el-button type="primary" @click="handleUpload"> 上传 </el-button>
            <!-- <el-button type="warning" @click="handleCopy"> 引用 </el-button> -->
          </div>
          <!-- <div class="input-box-2">
                <el-input
                    v-model="copyValue"
                    placeholder="请输入"
                    class="el-input-item"
                    style="width: 60%; margin: 0 10px 0 80px"
                />
                <el-button type="primary" @click="handleCopy"> 引用 </el-button>
            </div> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="图片搜索" name="search" class="search-content">
        <div class="search-box">
          <el-input
            v-model="searchImage"
            style="width: 400px"
            placeholder="请输入"
            clearable
            @change="handleSearch"
          >
            <template #prefix>
              <el-icon class="el-input__icon search-icon">
                <search></search>
              </el-icon>
            </template>
          </el-input>
        </div>
        <div v-if="imgLoading" class="loading">
          <span class="icon-loading">
            <el-icon class="icon-box is-loading">
              <Icon name="el-icon-Loading" />
            </el-icon>
            <div>搜索中...</div>
          </span>
        </div>
        <div v-else class="magei-box">
          <el-scrollbar
            v-if="imageList.length > 0"
            class="scrollbar"
            max-height="480px"
          >
            <div class="image-list">
              <div
                v-for="(item, index) in imageList"
                :key="index"
                class="image-item"
              >
                <div class="img-content">
                  <el-image
                    class="image"
                    fit="contain"
                    :src="item.picUrl"
                    alt=""
                    @click="showBigImg(item.picUrl)"
                    @error="handleError(index)"
                  />
                  <div class="message">
                    <div class="word-data">
                      <div
                        class="word-item wordSpell"
                        v-html="item.wordSpell"
                      ></div>
                      <div class="word-item wordSimpleZnDesc">
                        <span>{{ item.typeAbbr }}</span>
                        <span v-html="item.wordSimpleZnDesc"></span>
                      </div>
                      <div
                        class="word-item wordSpell"
                        v-html="item.wordEnDesc"
                      ></div>
                      <div
                        class="word-item wordZnDesc"
                        v-html="item.wordSimpleZnDesc"
                      ></div>
                      <div
                        v-if="item.resultType === 2"
                        class="word-item sentenceEn"
                        v-html="item.sentenceEn"
                      ></div>
                      <div
                        v-if="item.resultType === 2"
                        class="word-item sentenceZn"
                        v-html="item.sentenceZn"
                      ></div>
                    </div>
                  </div>
                </div>

                <div class="button">
                  <el-button
                    :disabled="item.disabled"
                    type="primary"
                    @click="addDia(item, index)"
                  >
                    {{ item.disabled ? '已引用' : '引用' }}
                  </el-button>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <div v-else class="empty-img">暂无图片</div>
          <div class="table-pagination">
            <el-pagination
              :current-page="imgPageData.current"
              :page-size="imgPageData.size"
              :page-sizes="[10, 20, 50, 100]"
              background
              layout="prev, pager, next, jumper"
              :total="imgPageData.total"
              @size-change="onImgSizeChange"
              @current-change="onImgCurrentChange"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template v-if="activeTab === 'edit'" #footer>
      <span name="edit" class="dialog-footer">
        <el-button @click="show = false">关闭</el-button>
        <el-button type="primary" @click="handleSave"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="imgdialogVisible" class="img-box">
    <img :src="dialogImageUrl" alt="Preview Image" class="preview-view" />
  </el-dialog>
  <el-dialog
    v-model="dialogMoveVisible"
    top="20vh"
    width="600px"
    title="移动图片"
  >
    <div>请选择：</div>
    <el-cascader
      :options="options"
      :props="cascaderProps"
      clearable
      @change="handleChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogMoveVisible = false">取消</el-button>
        <el-button type="primary" @click="handleMove"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.hideMove {
  :deep(.el-upload-list--picture-card .el-upload-list__item-actions:hover) {
    .el-upload-list__item-preview {
      display: none;
    }

    .el-upload-list__item-delete {
      margin-left: 0;
    }
  }
}

.download {
  :deep(.el-upload-list--picture-card .el-upload-list__item-actions:hover) {
    .el-upload-list__item-preview {
      background-image: url('#/assets/image/video.png');
      background-repeat: no-repeat;
      background-size: 20px 20px;

      .el-icon {
        opacity: 0;
      }
    }

    .el-upload-list__item-delete {
      margin-left: 0;
    }
  }
}

:deep(.el-upload) {
  &.el-upload--picture-card {
    width: 100px;
    height: 100px;
  }
}

.img-box {
  .preview-view {
    width: 100%;
  }
}

.title-box {
  display: flex;
  justify-content: space-evenly;
  width: 600px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.demo-tabs {
  // width: 600px;
  :deep(.el-tabs__header) {
    // width: 550px;
    // margin: 0 auto 20px;
    .el-tabs__nav {
      float: none;
      justify-content: space-evenly;
      width: 540px;
      margin: 0 auto;

      .el-tabs__item {
        width: 100%;
      }
    }
  }

  :deep(.el-tabs__content) {
    overflow: visible;
  }
}

.search-content {
  width: 100%;

  .search-box {
    display: flex;
    justify-content: center;

    .search-icon {
      cursor: pointer;
    }
  }

  .magei-box {
    position: relative;
    min-height: 450px;
    margin-bottom: 20px;

    .table-pagination {
      position: absolute;
      bottom: -40px;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .scrollbar {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      min-height: 450px;
      padding: 0 20px;
      padding-top: 20px;
      margin: 20px 0 40px;
      border: 1px solid #ebeef5;
    }

    .empty-img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .image-list {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      width: 780px;
      margin: 0 auto;

      .image-item {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        height: 160px;
        margin-bottom: 40px;
        border: 1px solid #ebeef5;

        .button {
          position: absolute;
          bottom: -40px;
        }

        .img-content {
          display: flex;
          align-items: center;
          justify-content: center;

          .image {
            width: 178px;
            height: 158px;
            padding: 0;
            margin: 0;
            cursor: pointer;
          }

          .message {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            box-sizing: border-box;
            display: none;
            width: 240px;
            max-height: 200px;
            padding: 5px;
            overflow-y: scroll;
            font-size: 14px;
            color: rgb(0 4 7);
            background-color: rgba($color: #ebeef5, $alpha: 90%);
            border-radius: 10px;
            transform: translateX(-50%);

            &::-webkit-scrollbar {
              display: none;
              width: 0;
              height: 0;
            }

            .word-data {
              text-align: center;

              .word-item {
                &:nth-child(2n) {
                  margin-bottom: 10px;
                }
              }
            }
          }

          &:hover .message {
            // height: fit-content;
            // font-size: 14px;
            // opacity: 1;
            display: block;
          }
        }
      }
    }
  }

  .loading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    margin-bottom: 20px;

    .icon-loading {
      text-align: center;
    }
  }
}

:deep(.el-upload-list) {
  .el-upload-list__item {
    position: relative;
    background: white;

    .icon-loading {
      display: none;
    }

    &.is-uploading {
      .icon-loading {
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: white;
        opacity: 1;
      }
    }

    .o-icon {
      position: absolute;
      top: 30%;
      left: 26%;
      // border: 1px solid red;
      z-index: 998;
      display: none;
      width: 20px;
      height: 20px;
      line-height: 24px;
      text-align: center;
      background-color: white;
      border-radius: 4px;
    }

    .r-icon {
      position: absolute;
      top: 30%;
      left: 26%;
      // border: 1px solid red;
      z-index: 998;
      display: none;
      width: 20px;
      height: 20px;
      line-height: 24px;
      text-align: center;
      background-color: white;
      border-radius: 4px;
    }

    .l-icon {
      position: absolute;
      top: 30%;
      left: 60%;
      // border: 1px solid red;
      z-index: 998;
      display: none;
      width: 20px;
      height: 20px;
      line-height: 24px;
      text-align: center;
      background-color: white;
      border-radius: 4px;
    }

    .p-icon {
      position: absolute;
      top: 60%;
      left: 26%;
      z-index: 998;
      display: none;
      width: 20px;
      height: 20px;
      line-height: 24px;
      text-align: center;
      background-color: white;
      border-radius: 4px;
    }

    .m-icon {
      position: absolute;
      top: 60%;
      left: 60%;
      // border: 1px solid red;
      z-index: 998;
      display: none;
      width: 20px;
      height: 20px;
      line-height: 24px;
      text-align: center;
      background-color: white;
      border-radius: 4px;
    }

    &:hover {
      .o-icon,
      .l-icon,
      .r-icon,
      .p-icon,
      .m-icon {
        display: inline-block;
      }
    }
  }
}

:deep(.el-upload-list--picture-card) {
  .el-upload-list__item {
    display: inline-block;
    width: 100px;
    height: 100px;
  }

  :deep(.input-box) {
    display: flex;
    flex-direction: row;
  }
}

.input-box-2 {
  margin-top: 20px;
}
</style>
