<template>
  <el-card
    class="mb-12px"
    :body-class="!options.length ? 'hidden' : 'pr-0!'"
    :header-class="!options.length ? 'border-b-none!' : ''"
  >
    <template #header>
      <div class="flex items-center justify-between">
        <span>文本框</span>
        <span class="flex gap-4px">
          <LuPlus class="cursor-pointer" size="16px" @click="handleAdd" />
          <LuTrash2 class="cursor-pointer" size="16px" @click="handleClear" />
        </span>
      </div>
    </template>
    <el-scrollbar max-height="160px">
      <div
        v-for="(_, index) in options"
        :key="index"
        class="w-full box-border mb-6px flex items-center gap-4px pr-12px"
      >
        <span
          class="flex-1 truncate"
          :title="allTextareaMap[options[index]]?.name || options[index]"
        >
          {{ allTextareaMap[options[index]]?.name || options[index] }}
        </span>
        <LuTrash2 class="cursor-pointer shrink-0" size="14px" @click.stop="handleDelete(index)" />
      </div>
    </el-scrollbar>
  </el-card>
  <el-dialog
    draggable
    append-to-body
    align-center
    v-model="showDialog"
    title="选择文本框"
    width="30%"
  >
    <el-form>
      <el-form-item label="文本框">
        <el-select
          v-model="selectedTextareas"
          multiple
          placeholder="选择文本框"
          style="width: 100%"
        >
          <el-option
            v-for="option in textareaOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="!selectedTextareas.length" @click="handleDialogConfirm"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, type Ref } from 'vue'
import { LuPlus, LuTrash2 } from 'vue-icons-plus/lu'
import { useProjectStore } from '@/store/modules/project'

type FormData = {
  props?: {
    textareaIds?: string[]
  }
}

const props = defineProps<{
  values: Ref<FormData | undefined>
}>()

const showDialog = ref(false)
const selectedTextareas = ref<string[]>([])
const projectStore = useProjectStore()

const textareaOptions = computed(() => {
  const currentPage = projectStore.activePage
  if (!currentPage) {
    return []
  }

  // 返回没有被选过的文本框列表
  return currentPage.children
    .filter((widget) => widget.type === 'lv_textarea')
    .filter((widget) => !options.value.includes(widget.id))
    .map((widget) => ({
      label: widget.name,
      value: widget.id
    }))
})

const allTextareaMap = computed(() => {
  const currentPage = projectStore.activePage
  if (!currentPage) {
    return {}
  }

  const list = currentPage.children.filter((widget) => widget.type === 'lv_textarea')
  return list.reduce(
    (acc, widget) => {
      acc[widget.id] = widget
      return acc
    },
    {} as Record<string, any>
  )
})

const ensureRollerProps = () => {
  const widget = props.values?.value
  if (!widget) {
    return undefined
  }

  if (!widget.props) {
    widget.props = {}
  }

  if (!Array.isArray(widget.props.textareaIds)) {
    widget.props.textareaIds = []
  }

  return widget.props
}

const options = computed<string[]>({
  get() {
    return ensureRollerProps()?.textareaIds ?? []
  },
  set(list: string[]) {
    const rollerProps = ensureRollerProps()
    if (rollerProps) {
      rollerProps.textareaIds = list
    }
  }
})

const handleAdd = () => {
  selectedTextareas.value = []
  showDialog.value = true
}

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

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

const handleDialogConfirm = () => {
  options.value = Array.from(new Set([...options.value, ...selectedTextareas.value]))
  showDialog.value = false
}
</script>

<style scoped></style>
