<template>
  <el-dialog v-model="show" title="选择图标" width="600px">
    <!-- <el-button type="primary">上传本地图片</el-button> -->
    <div v-loading="loading">
      <el-upload action="#" :auto-upload="false" :show-file-list="false" :on-change="handleFileChange"
        accept="image/*">
        <el-button type="primary">上传本地图片</el-button>
      </el-upload>
      <div class="icon-container">
        <div :class="{active: icon === selectedItem}" class="icon-item" v-for="(icon, index) in icons" :key="index" @click="selectIcon(icon)">
          <el-image style="width: 48px; height: 48px" :src="icon" fit="contain" />
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="!selectedItem">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import analysisAroundIcon from '@/assets/icons/example/analysis_around.png'
import analysisCoordinationLocationIcon from '@/assets/icons/example/analysis_coordination_location.png'
import analysisMapLocationIcon from '@/assets/icons/example/analysis_map_location.png'
import analysisSandboxIcon from '@/assets/icons/example/analysis_sandbox.png'
import analysisSpreadIcon from '@/assets/icons/example/analysis_spread.png'
import checkPointIcon from '@/assets/icons/example/check_point.png'
import sandboxExplosiveIcon from '@/assets/icons/example/sandbox_explosive.png'
import sandboxFireIcon from '@/assets/icons/example/sandbox_fire.png'
import sandboxFirefighterIcon from '@/assets/icons/example/sandbox_firefighter.png'
import sandboxFirepointIcon from '@/assets/icons/example/sandbox_firepoint.png'
import sandboxFlameIcon from '@/assets/icons/example/sandbox_flame.png'
import sandboxTrappedIcon from '@/assets/icons/example/sandbox_trapped.png'
import sandboxWaterIcon from '@/assets/icons/example/sandbox_water.png'

const show = defineModel()
const props = defineProps({
  current: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:current'])

// const icons = ref([
//   { url: analysisAroundIcon },
//   { url: analysisCoordinationLocationIcon },
//   { url: analysisMapLocationIcon },
//   { url: analysisSandboxIcon },
//   { url: analysisSpreadIcon },
//   { url: checkPointIcon },
//   { url: sandboxExplosiveIcon },
//   { url: sandboxFireIcon },
//   { url: sandboxFirefighterIcon },
//   { url: sandboxFirepointIcon },
//   { url: sandboxFlameIcon },
//   { url: sandboxTrappedIcon },
//   { url: sandboxWaterIcon }
// ])
const icons = ref([
  analysisAroundIcon,
  analysisCoordinationLocationIcon,
  analysisMapLocationIcon,
  analysisSandboxIcon,
  analysisSpreadIcon,
  checkPointIcon,
  sandboxExplosiveIcon,
  sandboxFireIcon,
  sandboxFirefighterIcon,
  sandboxFirepointIcon,
  sandboxFlameIcon,
  sandboxTrappedIcon,
  sandboxWaterIcon
])
const loading = ref(false)
const selectedItem = ref(props.current)

/* 上传图片 */
const handleFileChange = (uploadFile) => {
  loading.value = true;
  const file = uploadFile.raw;
  if (!file) return;

  // 检查文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件!');
    return;
  }

  // 检查文件大小 (可选)
  // const isLt2M = file.size / 1024 / 1024 < 2;
  // if (!isLt2M) {
  //   ElMessage.error('图片文件大小不能超过 2MB!');
  //   return;
  // }

  const reader = new FileReader();
  reader.onloadend = () => {
    const base64String = reader.result;
    if(icons.value.includes(base64String)) {
      ElMessage.error('该图片已存在，请选择其他图片!');
      loading.value = false;
      return;
    }
    icons.value.push(base64String);
    loading.value = false;
  };
  reader.onerror = () => {
    ElMessage.error('读取图片时出错！');
    loading.value = false;
  };
  reader.readAsDataURL(file);
}

/* 图片点击 */
const selectIcon = (icon) => {
  selectedItem.value = icon
}

/* 确认 */
const handleConfirm = () => {
  emits('update:current', selectedItem.value)
  show.value = false
}

/* 取消 */
const handleCancel = () => {
  selectedItem.value = props.current
  show.value = false
}

</script>

<style lang="scss" scoped>
.icon-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid var(--el-border-color);

  .icon-item {
    width: 60px;
    height: 60px;
    // background-color: #f0f0f0;
    border-right: 1px solid var(--el-border-color);
    border-bottom: 1px solid var(--el-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:nth-child(-n+10) {
      border-top: 1px solid var(--el-border-color);
    }
    &:hover {
      // background-color: #e0e0e0;
      background-color: var(--el-border-color-extra-light);
      color: var(--brand-color-light);
    }
    &.active {
      background-color: var(--el-color-primary-light-6);
    }
  }
}
</style>