<template>
  <div>
    <el-card
      class="mb-12px"
      :body-class="sectionList.length ? 'pr-0!' : 'hidden'"
      :header-class="sectionList.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="sectionList.length" height="140px">
        <div
          v-for="(item, index) in sectionList"
          :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.start }} - {{ item.end }})
          </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.start">
          <input-number
            v-model="formData.start"
            controls-position="right"
            style="width: 100%"
            :min="-100000"
            :max="100000"
          />
        </el-form-item>

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

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

        <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.lineWidth">
          <input-number
            v-model="formData.line.width"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </el-form-item>

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

        <el-form-item :label="TEXT.curveWidth">
          <input-number
            v-model="formData.curve.width"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </el-form-item>
      </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 { createSection, getNextSectionIndex, type BaseMeterSection } from './types'

const TEXT = {
  title: '区域',
  editTitle: '编辑区域',
  name: '名称',
  start: '开始值',
  end: '结束值',
  text: '文本',
  lineColor: '直线颜色',
  lineWidth: '直线宽度',
  curveColor: '曲线颜色',
  curveWidth: '曲线宽度',
  confirm: '确定'
} as const

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

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

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

const handleAdd = () => {
  const nextIndex = getNextSectionIndex(sectionList.value)
  sectionList.value.push(createSection(`section_${nextIndex || 1}`))
}

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

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

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

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