<template>
  <doc-alert title="【MES】生产执行情况" url="https://doc.iocoder.cn/mes/plan/" />

  <ContentWrap>
    <div
      class="production-board"
      :style="{
        backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        minHeight: '600px',
        position: 'relative',
        border: backgroundImage ? 'none' : '2px dashed #dcdfe6',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }"
    >
      <div v-if="!backgroundImage" class="upload-tip text-gray-400"> 请上传背景图片 </div>

      
    </div>

    <!-- 底部上传按钮 -->
    <div class="upload-container">
      <el-upload
        class="upload-demo"
        action="#"
        :auto-upload="false"
        :show-file-list="false"
        accept="image/*"
        :on-change="handleFileChange"
      >
        <template #trigger>
          <el-button type="primary">
            <Icon icon="ep:upload" class="mr-5px" />
            {{ backgroundImage ? '更换背景图片' : '上传背景图片' }}
          </el-button>
        </template>
      </el-upload>
      <el-button v-if="backgroundImage" type="danger" @click="removeBackground">
        <Icon icon="ep:delete" class="mr-5px" />
        移除背景图片
      </el-button>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const backgroundImage = ref('')

// 从localStorage加载背景图片
onMounted(() => {
  const savedBackground = localStorage.getItem('productionBackground')
  if (savedBackground) {
    backgroundImage.value = savedBackground
  }
})

// 处理文件选择
const handleFileChange = (file: any) => {
  const isImage = file.raw.type.startsWith('image/')
  const isLt2M = file.raw.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！')
    return
  }

  // 读取文件为 base64
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = (e) => {
    const base64 = e.target?.result as string
    backgroundImage.value = base64
    // 保存到localStorage
    localStorage.setItem('productionBackground', base64)
    ElMessage.success('背景图片设置成功')
  }
}

// 移除背景图片
const removeBackground = () => {
  backgroundImage.value = ''
  localStorage.removeItem('productionBackground')
  ElMessage.success('背景图片已移除')
}
</script>

<style scoped>
.production-board {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.upload-tip {
  font-size: 16px;
}

.upload-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.production-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.data-card {
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-width: 200px;
}

.data-card h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.data-item span {
  color: #606266;
}
</style>
