<template>
  <div>
    <el-card
      :body-class="!areaList.length ? 'hidden' : 'pr-0!'"
      :header-class="!areaList.length ? 'border-b-none!' : ''"
      class="mb-12px"
    >
      <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" v-if="areaList.length > 0">
        <div
          v-for="(item, index) in areaList"
          :key="v4()"
          class="flex items-center pr-12px"
          @click="handleEdit(item, index)"
        >
          <span class="flex-1 truncate text-#00ff00 cursor-pointer">
            {{ item.name || `area_${index}` }} ({{ item.start }}-{{ item.end }})
          </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 :model="formData" label-position="left" label-width="80px">
        <el-form-item :label="'名称'">
          <LanguageInput v-model="formData.name" placeholder="area_x" />
        </el-form-item>

        <el-form-item :label="'起始值'">
          <input-number
            v-model="formData.start"
            controls-position="right"
            :min="0"
            :max="10000"
            :step="1"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item :label="'结束值'">
          <input-number
            v-model="formData.end"
            controls-position="right"
            :min="1"
            :max="10000"
            :step="1"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item :label="'文本颜色'">
          <ColorPicker
            v-model:pureColor="formData.textColor"
            format="hex8"
            picker-type="chrome"
            use-type="pure"
          />
          <span class="text-text-active">{{ formData.textColor }}</span>
        </el-form-item>

        <el-form-item :label="'直线颜色'">
          <ColorPicker
            v-model:pureColor="formData.lineColor"
            format="hex8"
            picker-type="chrome"
            use-type="pure"
          />
          <span class="text-text-active">{{ formData.lineColor }}</span>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" @click="submit">
          {{ '确定' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, type Ref, ref } from 'vue'
import { LuPlus, LuTrash2 } from 'vue-icons-plus/lu'
import { v4 } from 'uuid'
import { getNextIndex } from '@/utils'

import { ColorPicker } from '@/components'
import { klona } from 'klona'
import LanguageInput from '../components/LanguageInput.vue'

export type AreaSection = {
  name: string
  start: number
  end: number
  textColor: string
  lineColor: string
}

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

const dialogVisible = ref(false)
const formData = ref<AreaSection>({
  name: '',
  start: 0,
  end: 20,
  textColor: '#000000ff',
  lineColor: '#000000ff'
})

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

/**
 * 添加区域
 */
const handleAdd = () => {
  const newIndex = getNextIndex(areaList.value, 'name')
  areaList.value.push({
    name: `area_${newIndex}`,
    start: 0,
    end: 20,
    textColor: '#000000ff',
    lineColor: '#000000ff'
  })
}

/**
 * 删除区域
 */
const handleDelete = (index: number) => {
  areaList.value.splice(index, 1)
}

/**
 * 清空区域
 */
const handleClear = () => {
  areaList.value = []
}

let tempIndex
/**
 * 编辑区域（直接引用修改）
 */
const handleEdit = (record: AreaSection, index: number) => {
  formData.value = klona(record)
  dialogVisible.value = true
  tempIndex = index
}

/**
 * 提交
 */
const submit = () => {
  areaList.value[tempIndex] = klona(formData.value)
  dialogVisible.value = false
}
</script>
