<template>
  <el-dialog draggable append-to-body v-model="show" title="编辑图片" width="880px" align-center>
    <div
      class="w-full h-160px border-solid border-1 border-border flex items-center justify-center"
    >
      <img :src="imageInfo?.url" style="max-width: 80%; max-height: 80%" />
    </div>
    <div class="w-full text-10px text-text-secondary flex gap-20px my-12px">
      <div class="felx-1">
        <span>文件类型：</span>
        <span>{{ imageInfo?.type }}</span>
      </div>
      <div class="felx-1">
        <span>分辨率：</span>
        <span>{{ imageInfo?.width ? `${imageInfo.width}x${imageInfo.height}` : '' }}</span>
      </div>
    </div>
    <el-form
      ref="form"
      label-position="top"
      :model="formData"
      :rules="rules"
      hide-required-asterisk
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="文件名称" prop="fileName">
            <el-input spellcheck="false" v-model="formData.fileName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件路径" prop="path">
            <el-input spellcheck="false" v-model="formData.path" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="压缩格式" prop="compressFormat">
            <el-select v-model="formData.compressFormat">
              <el-option label="无压缩" value="none"></el-option>
              <el-option
                v-for="item in projectStore.imageCompressFormat || []"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="颜色格式" prop="colorFormat">
            <el-select v-model="formData.colorFormat">
              <el-option
                v-for="item in colorFormatOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抖动算法" prop="ditheringAlgorithm">
            <el-select v-model="formData.ditheringAlgorithm">
              <el-option
                v-for="item in ditheringAlgorithmOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <!-- <el-col :span="12">
          <el-form-item label="颜色" prop="alphaColor">
            <ColorPicker
              v-model:pureColor="formData.alphaColor"
              format="hex8"
              picker-type="chrome"
              use-type="pure"
              disableHistory
            />
            <span class="ml-8px">{{ formData.alphaColor }}</span>
          </el-form-item></el-col
        > -->
        <!-- <el-col :span="12">
          <el-form-item label="透明度" prop="alpha">
            <el-slider v-model="formData.alpha" :max="255" :min="0"></el-slider> </el-form-item
        ></el-col> -->
        <el-col :span="12">
          <el-form-item label="存储方式" prop="storageMode">
            <el-select v-model="formData.storageMode">
              <el-option label="BIN" value="BIN"></el-option>
              <el-option label="C源码" value="C"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="BIN配置" prop="bin" v-if="projectStore.project?.bins?.length">
            <div class="w-full flex gap-12px">
              <el-select-v2
                class="w-1"
                v-model="formData.bin"
                :options="projectStore.project.bins"
                :props="{ label: 'name', value: 'id' }"
              />
              <el-button type="text" :disabled="!formData.bin" @click="editBin">
                <LuPencilLine size="18" />
              </el-button>
            </div> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
    <EditBinModal ref="editBinModalRef" />
  </el-dialog>
</template>

<script setup lang="ts">
import type { ImageResource } from '@/types/resource'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import { useProjectStore } from '@/store/modules/project'
import { klona } from 'klona'
import { getImageByPath } from '@/utils'
import { LuPencilLine } from 'vue-icons-plus/lu'
import EditBinModal from './EditBinModal.vue'
// import ColorPicker from '@/components/ColorPicker/index.vue'

const emit = defineEmits(['change'])
const projectStore = useProjectStore()
const show = ref(false)
const form = ref<FormInstance>()
const editBinModalRef = ref<InstanceType<typeof EditBinModal>>()
const colorFormatOptions = [
  {
    label: 'RGB565',
    value: 'RGB565'
  },
  {
    label: 'RGB8565A8',
    value: 'RGB8565A8'
  },
  {
    label: 'ARGB4444',
    value: 'ARGB4444'
  },
  {
    label: 'RGB888',
    value: 'RGB888'
  },
  {
    label: 'XRGB8888',
    value: 'XRGB8888'
  },
  {
    label: 'ARGB8888',
    value: 'ARGB8888'
  }
]

const ditheringAlgorithmOptions = [
  {
    label: 'None',
    value: 'None'
  },
  {
    label: 'Floyd Steinberg',
    value: 'Floyd-Steinberg'
  },
  {
    label: 'Thresh',
    value: 'Thresh'
  }
]

const formData = ref<ImageResource>({
  id: '',
  fileName: '',
  fileType: '',
  path: '',
  compressFormat: 'none',
  colorFormat: '',
  // alpha: 255,
  bin: '',
  // alphaColor: '#FFFFFF00',
  ditheringAlgorithm: 'None',
  storageMode: 'BIN'
})

const imageInfo = ref<{
  url?: string
  width?: number
  height?: number
  type?: string
}>()

const rules = {
  fileName: [
    {
      required: true,
      message: '请输入文件名称',
      trigger: 'blur'
    }
  ],
  alpha: [{ required: true, message: '请输入透明度', trigger: 'blur' }]
}

defineExpose({
  edit: async (resouce: ImageResource) => {
    show.value = true
    formData.value = klona(resouce)

    // 获取图片信息
    const res = await getImageByPath(projectStore.projectPath + resouce.path)
    imageInfo.value = {
      url: res?.src,
      width: res?.dimensions.width,
      height: res?.dimensions.height,
      type: res?.dimensions.type
    }
  }
})

// 编辑BIN
const editBin = () => {
  editBinModalRef.value?.edit(formData.value.bin)
}

// 提交
const submit = () => {
  form.value?.validate((valid) => {
    if (valid) {
      show.value = false
      emit('change', formData.value)
    }
  })
}
</script>

<style scoped></style>
