<template>
  <div>
    <el-card
      class="mb-12px"
      :body-class="needleList.length ? 'pr-0!' : 'hidden'"
      :header-class="needleList.length ? '' : 'border-b-none!'"
    >
      <template #header>
        <div class="flex items-center justify-between">
          <span>{{ TEXT.title }}</span>
          <span class="flex gap-4px">
            <LuPlus class="cursor-pointer" size="14px" @click="handleAdd" />
            <LuTrash2 class="cursor-pointer" size="14px" @click="handleClear" />
          </span>
        </div>
      </template>

      <el-scrollbar v-if="needleList.length" height="140px">
        <div
          v-for="(item, index) in needleList"
          :key="item.name"
          class="flex items-center pr-12px"
          @click="handleEdit(item, index)"
        >
          <span class="flex-1 truncate text-#00ff00 cursor-pointer">
            {{ item.name }} ({{ item.value }})
          </span>
          <LuTrash2 class="cursor-pointer shrink-0" size="14px" @click.stop="handleDelete(index)" />
        </div>
      </el-scrollbar>
    </el-card>

    <el-dialog
      draggable
      append-to-body
      v-model="dialogVisible"
      :title="TEXT.editTitle"
      width="520px"
    >
      <el-form v-if="formData" :model="formData" label-position="left" label-width="90px">
        <el-form-item :label="TEXT.name">
          <el-input v-model="formData.name" spellcheck="false" readonly />
        </el-form-item>

        <el-form-item :label="TEXT.type">
          <el-select v-model="formData.type">
            <el-option
              v-for="option in pointerTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="TEXT.value">
          <input-number
            v-model="formData.value"
            controls-position="right"
            style="width: 100%"
            :min="-100000"
            :max="100000"
          />
        </el-form-item>

        <template v-if="formData.type === 'image'">
          <el-form-item :label="TEXT.image">
            <ImageSelect v-model="formData.image.image" />
          </el-form-item>

          <el-form-item :label="TEXT.imageAlpha">
            <div class="w-full flex items-center gap-16px">
              <el-slider v-model="formData.image.alpha" :min="0" :max="255" style="flex: 1" />
              <span class="text-text-active w-40px text-right">{{ formData.image.alpha }}</span>
            </div>
          </el-form-item>

          <el-form-item :label="TEXT.imageMask">
            <ColorPicker
              v-model:pureColor="formData.image.recolor"
              format="hex8"
              picker-type="chrome"
              use-type="pure"
            />
            <span class="text-text-active">{{ formData.image.recolor }}</span>
          </el-form-item>

          <el-form-item :label="TEXT.size">
            <div class="w-full flex gap-8px">
              <input-number
                v-model="formData.image.size.width"
                controls-position="right"
                :min="1"
                :max="1000"
              >
                <template #prefix>W</template>
              </input-number>
              <input-number
                v-model="formData.image.size.height"
                controls-position="right"
                :min="1"
                :max="1000"
              >
                <template #prefix>H</template>
              </input-number>
            </div>
          </el-form-item>

          <el-form-item :label="TEXT.center">
            <div class="w-full flex gap-8px">
              <input-number
                v-model="formData.image.center.x"
                controls-position="right"
                :min="-1000"
                :max="1000"
              >
                <template #prefix>X</template>
              </input-number>
              <input-number
                v-model="formData.image.center.y"
                controls-position="right"
                :min="-1000"
                :max="1000"
              >
                <template #prefix>Y</template>
              </input-number>
            </div>
          </el-form-item>
        </template>

        <template v-else>
          <el-form-item :label="TEXT.lineColor">
            <ColorPicker
              v-model:pureColor="formData.line.color"
              format="hex8"
              picker-type="chrome"
              use-type="pure"
            />
            <span class="text-text-active">{{ formData.line.color }}</span>
          </el-form-item>

          <el-form-item :label="TEXT.round">
            <el-switch v-model="formData.line.round" />
          </el-form-item>

          <el-form-item :label="TEXT.size">
            <div class="w-full flex gap-8px">
              <input-number
                v-model="formData.line.size.width"
                controls-position="right"
                :min="1"
                :max="10000"
              >
                <template #prefix>W</template>
              </input-number>
              <input-number
                v-model="formData.line.size.height"
                controls-position="right"
                :min="0"
                :max="10000"
              >
                <template #prefix>H</template>
              </input-number>
            </div>
          </el-form-item>
        </template>
      </el-form>

      <template #footer>
        <el-button type="primary" @click="submit">{{ TEXT.confirm }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, type Ref } from 'vue'
import { LuPlus, LuTrash2 } from 'vue-icons-plus/lu'
import { klona } from 'klona'
import { ColorPicker } from '@/components'
import ImageSelect from '@/views/designer/config/property/components/ImageSelect.vue'
import { createNeedle, getNextNeedleIndex, type BaseMeterNeedle } from './types'

const TEXT = {
  title: '指针',
  editTitle: '编辑指针',
  name: '名称',
  type: '指针类型',
  value: '值',
  image: '图片',
  imageAlpha: '图片透明度',
  imageMask: '图片遮罩',
  size: '大小',
  center: '中心',
  lineColor: '指针颜色',
  round: '圆角开关',
  confirm: '确定'
} as const

const pointerTypeOptions = [
  { label: '图片指针', value: 'image' },
  { label: '线指针', value: 'line' }
] as const

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

const dialogVisible = ref(false)
const editingIndex = ref<number | null>(null)
const formData = ref<BaseMeterNeedle>()

const needleList = computed({
  get() {
    return props.values?.value || []
  },
  set(list: BaseMeterNeedle[]) {
    props.values.value = list
  }
})

const handleAdd = () => {
  const nextIndex = getNextNeedleIndex(needleList.value)
  needleList.value.push(createNeedle(`needles_${nextIndex}`))
}

const handleDelete = (index: number) => {
  needleList.value.splice(index, 1)
}

const handleClear = () => {
  needleList.value = []
}

const handleEdit = (needle: BaseMeterNeedle, index: number) => {
  editingIndex.value = index
  formData.value = klona(needle)
  dialogVisible.value = true
}

const submit = () => {
  if (editingIndex.value === null || !formData.value) return
  needleList.value[editingIndex.value] = klona(formData.value)
  dialogVisible.value = false
}
</script>
