<template>
  <el-dialog
    v-model="show"
    title="编辑字体"
    width="880px"
    :close-on-click-modal="false"
    align-center
  >
    <!-- <div class="w-full text-10px text-text-secondary flex gap-20px my-12px">
      <div class="felx-1">
        <span>文件类型：</span>
        <span>{{ formData.fileType }}</span>
      </div>
    </div> -->
    <el-form
      ref="form"
      label-position="top"
      :model="formData"
      :rules="rules"
      hide-required-asterisk
    >
      <el-form-item label="文件名称" prop="fileName">
        <el-input spellcheck="false" v-model="formData.fileName" />
      </el-form-item>
      <el-form-item label="文件路径" prop="path">
        <el-input spellcheck="false" v-model="formData.path" disabled />
      </el-form-item>
      <el-form-item label="文本范围" prop="range">
        <div>
          <el-radio-group v-model="all" @change="handleChangeAll">
            <el-radio :value="true">字体全部</el-radio>
            <el-radio :value="false">自定义</el-radio>
          </el-radio-group>
          <el-checkbox-group v-if="!all" v-model="formData.range">
            <el-checkbox label="page">界面文本</el-checkbox>
            <el-checkbox label="custom">自定义文本</el-checkbox>
            <el-checkbox label="range">编码范围</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="编码范围" prop="codeRange" v-if="formData.range.includes('range')">
        <el-select-v2 v-model="formData.codeRange" :options="rangeOptions" multiple />
      </el-form-item>
      <el-form-item label="自定义文本" prop="extText" v-if="formData.range.includes('custom')">
        <el-input
          spellcheck="false"
          type="textarea"
          v-model="formData.extText"
          placeholder="请输入..."
        />
      </el-form-item>
      <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-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 { FontResource } from '@/types/resource'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import { useProjectStore } from '@/store/modules/project'
import { klona } from 'klona'
import { LuPencilLine } from 'vue-icons-plus/lu'
import EditBinModal from './EditBinModal.vue'

const rangeOptions = [
  { label: 'ASCII', value: '0x0000-0x007f' },
  { label: 'Latin-1补充字符', value: '0x0080-0x00FF' },
  { label: '常用汉字', value: '0x4E00-0x9FA5' },
  { label: '扩展汉字', value: '0x3400-0x4DBF' },
  { label: '平假名', value: '0x3040-0x309F' },
  { label: '片假名', value: '0x30A0-0x30FF' },
  { label: '韩文', value: '0xAC00-0xD7AF' },
  { label: '西里尔字母', value: '0x0400-0x04FF' },
  { label: '希腊字母', value: '0x0370-0x03FF' },
  { label: '阿拉伯语', value: '0x0600-0x06FF' },
  { label: '通用标点', value: '0x2000-0x206F' },
  { label: '货币符号', value: '0x20A0-0x20CF' },
  { label: '箭头符号', value: '0x2190-0x21FF' },
  { label: '图标字体', value: '0xF000-0xF8FF' }
]

const emit = defineEmits(['change'])
const projectStore = useProjectStore()
const show = ref(false)
const form = ref<FormInstance>()
const all = ref(false)
const editBinModalRef = ref<InstanceType<typeof EditBinModal>>()
const formData = ref<FontResource>({
  id: '',
  fileName: '',
  fileType: '',
  path: '',
  bin: '',
  extText: '',
  range: [],
  codeRange: []
})

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

// 切换全部
const handleChangeAll = (val: any) => {
  formData.value.range = val ? ['all'] : []
}

defineExpose({
  edit: async (resouce: FontResource) => {
    show.value = true
    formData.value = klona(resouce)
    all.value = formData.value.range.includes('all')
  }
})

// 编辑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>
