<template>
  <div>
    <el-card class="mb-12px" body-class="pr-0px!">
      <template #header>
        <div class="flex items-center justify-between">
          <span>按钮组</span>
          <span class="flex gap-4px">
            <LuPlus class="cursor-pointer" @click="handleAdd" size="14px" />
            <LuTrash2 class="cursor-pointer" @click="handleClear" size="14px" />
          </span>
        </div>
      </template>
      <el-scrollbar height="120px">
        <div
          v-for="(item, index) in props.values?.value || []"
          :key="v4()"
          class="flex items-center pr-12px"
          @click="handleEdit(item)"
        >
          <span class="flex-1 truncate text-#00ff00 cursor-pointer">{{ item.text }}</span>
          <LuTrash2 class="cursor-pointer shrink-0" @click.stop="handleDelete(index)" size="14px" />
        </div>
      </el-scrollbar>
    </el-card>
    <el-dialog draggable append-to-body v-model="dialogVisible" title="编辑" width="440px">
      <el-form ref="formRef" :model="formData" label-position="left" label-width="60px">
        <el-form-item label="类型">
          <el-select v-model="formData.type">
            <el-option label="Symbol" value="symbol"></el-option>
            <el-option label="Image" value="img"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宽度">
          <input-number style="width: 100%" v-model="formData.width" :min="1" :max="1000" />
        </el-form-item>
        <el-form-item v-if="formData.type === 'symbol'" label="图标">
          <el-input spellcheck="false" readonly @click="handleShowSymbolModal">
            <template #prefix>
              <i class="lvgl-icon not-italic" v-html="getSymbol(formData.img_symbol)"></i>
            </template>
          </el-input>
        </el-form-item>
        <template v-if="formData.type === 'img'">
          <el-form-item label="图片">
            <ImageSelect v-model="formData.img_id" />
          </el-form-item>
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="尺寸">
                <input-number style="width: 100%" v-model="formData.img_width" :min="1" :max="100">
                  <template #prefix>宽度</template>
                </input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="0">
                <input-number style="width: 100%" v-model="formData.img_height" :min="1" :max="100">
                  <template #prefix>高度</template>
                </input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="图片遮罩" label-position="left" label-width="60px">
            <div class="w-full flex items-center justify-between">
              <div class="flex items-center">
                <ColorPicker
                  use-type="pure"
                  picker-type="chrome"
                  format="hex8"
                  v-model:pureColor="formData.img_recolor"
                />
                <span class="text-text-active">{{ formData.img_recolor }}</span>
              </div>
              <el-checkbox v-model="formData.enableCover" />
            </div>
          </el-form-item>
          <el-form-item label="透明度" label-position="left" label-width="60px">
            <div class="w-full flex gap-20px items-center">
              <el-slider
                v-model="formData.img_alpha"
                :max="255"
                :min="0"
                style="flex: 1"
              ></el-slider>
              <span class="text-text-active inline w-30px cursor-pointer">
                {{ formData.img_alpha }}
              </span>
              <el-checkbox v-model="formData.enableAlpha" />
            </div>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
    <SymbolSelectModal ref="symbolModalRef" @select="handleSelectSymbol" />
  </div>
</template>

<script setup lang="ts">
import type { ListItem } from './data'

import { type Ref, ref } from 'vue'
import { LuPlus, LuTrash2 } from 'vue-icons-plus/lu'
import { v4 } from 'uuid'
import { getSymbol } from '@/utils'

import ImageSelect from '@/views/designer/config/property/components/ImageSelect.vue'
import SymbolSelectModal from '@/views/designer/config/property/components/SymbolSelectModal.vue'

const props = defineProps<{
  values: Ref<ListItem[]>
}>()

const dialogVisible = ref(false)
const formData = ref<ListItem>({
  text: '',
  img_id: '',
  width: 40,
  type: 'symbol',
  img_width: 0,
  img_height: 0,
  img_alpha: 255,
  img_recolor: '#ffffff00',
  img_symbol: '',
  enableCover: true,
  enableAlpha: true
})
const symbolModalRef = ref<InstanceType<typeof SymbolSelectModal>>()

/**
 * 添加文本项
 */
const handleAdd = () => {
  const list =
    props.values?.value
      ?.map((item) => Number(item.text.split('_')?.[1]))
      ?.filter((n) => !Number.isNaN(n)) || []
  const index = list.length ? Math.max(...list) + 1 : 1

  props.values?.value?.push({
    text: `button_${index}`,
    type: 'symbol',
    width: 40,
    img_symbol: 'LV_SYMBOL_SAVE',
    img_id: '',
    img_width: 20,
    img_height: 20,
    img_alpha: 255,
    img_recolor: '#ffffff00',
    enableCover: true,
    enableAlpha: true
  })
}

/**
 * 删除文本项
 */
const handleDelete = (index: number) => {
  props.values?.value?.splice(index, 1)
}

/**
 * 清除文本项
 */
const handleClear = () => {
  props.values.value = []
}

const handleShowSymbolModal = () => {
  symbolModalRef.value?.open()
}

/**
 * 选择图标
 */
const handleSelectSymbol = (val: string) => {
  formData.value.img_symbol = val
}

const handleEdit = (record: ListItem) => {
  formData.value = record
  dialogVisible.value = true
}
</script>

<style scoped></style>
