<template>
  <div>
    <el-card
      :body-class="!dataList.length ? 'hidden' : 'pr-0!'"
      :header-class="!dataList.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" />
          </span>
        </div>
      </template>

      <el-scrollbar height="120px" v-if="dataList.length > 0">
        <div
          v-for="(item, index) in dataList"
          :key="v4()"
          class="flex items-center pr-12px"
          @click="handleEdit(item, index)"
        >
          <span class="flex-1 truncate text-#00ff00 cursor-pointer" :style="{ color: item.color }">
            {{ item.name || `data_${index}` }}
          </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="'名称'">
          <el-input v-model="formData.name" spellcheck="false" disabled />
        </el-form-item>

        <el-form-item :label="'Y轴'">
          <el-select v-model="formData.chart_axis" :options="[]" />
        </el-form-item>

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

        <el-form-item :label="'数据'">
          <el-space wrap>
            <div v-for="(_p, index) in formData.points" :key="index" class="relative">
              <input-number v-model="formData.points[index]" class="flex-1" />

              <div
                class="absolute top--10px left--4px cursor-pointer z-10"
                @click="handleDeletePoint(index)"
              >
                <LuX size="14px" />
              </div>
            </div>
          </el-space>

          <div class="w-full mt-12px gap-4px">
            <el-button type="primary" class="w-full" @click="handleAddPoint">
              <LuPlus size="14px" />
              新增数据
            </el-button>
          </div>
        </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, LuX } from 'vue-icons-plus/lu'
import { v4 } from 'uuid'
import { getNextIndex } from '@/utils'

import { ColorPicker } from '@/components'
import { klona } from 'klona'

export type DataSection = {
  name: string
  chart_axis: 'y' | 'y2'
  color: string
  points: number[]
}

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

const dialogVisible = ref(false)
const formData = ref<DataSection>({
  name: '',
  chart_axis: 'y',
  color: '#000000ff',
  points: [10, 20, 30, 40, 50]
})

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

/**
 * 添加
 */
const handleAdd = () => {
  const newIndex = getNextIndex(dataList.value, 'name')
  dataList.value.push({
    name: `data_${newIndex}`,
    chart_axis: 'y',
    color: '#000000ff',
    points: [10, 20, 30, 40, 50]
  })
}

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

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

/**
 * 删除数据
 */
const handleDeletePoint = (index: number) => {
  formData.value.points.splice(index, 1)
}

/**
 * 新增数据
 */
const handleAddPoint = () => {
  formData.value.points.push(0)
}

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