<template>
  <el-scrollbar height="calc(100vh - 130px)" class="config">
    <ViewTitle title="设置变量">
      <template #right>
        <el-button type="text" @click="addVariableGroup"
          ><el-icon class="cursor-pointer"> <Plus /> </el-icon
        ></el-button>
      </template>
    </ViewTitle>
    <el-form label-position="top">
      <el-collapse v-for="item in data" :key="item.id" v-model="activeNames">
        <el-collapse-item :name="item.name">
          <template #title>
            <div class="collapse-title">
              <el-icon class="arrow" :class="{ active: activeNames.includes(item.name) }">
                <ArrowRight />
              </el-icon>

              <span class="title-text mr-12px flex items-center">
                <el-input
                  v-model="item.name"
                  placeholder="请输入组名"
                  size="small"
                  class="mt-10px mb-10px"
                />
              </span>

              <el-icon class="mr-10px" @click.stop="addVariables(item.variables)">
                <Plus />
              </el-icon>
              <el-icon @click.stop="removeVariables(item)">
                <Delete />
              </el-icon>
            </div>
          </template>
          <div class="p-10px">
            <!-- 头部描述 -->
            <el-card v-for="(element, index) in item.variables" :key="element.id" class="mb-10px">
              <div class="flex justify-between items-center mb-10px">
                <span>变量: {{ element.name || index + 1 }}</span>
                <el-icon
                  class="cursor-pointer"
                  @click="handleVariablesRemove(item.variables, element)"
                >
                  <Delete />
                </el-icon>
              </div>
              <div class="flex gap-10px mb-10px">
                <el-input spellcheck="false" v-model="element.name" placeholder="变量名称" />
                <el-select v-model="element.type" placeholder="变量类型">
                  <el-option
                    v-for="type in variableType"
                    :key="type.value"
                    :label="type.label"
                    :value="type.value"
                  />
                </el-select>
              </div>
              <el-input
                spellcheck="false"
                v-model="element.value"
                type="textarea"
                :rows="3"
                placeholder="初始值"
              />
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { VariableGroup } from '@/types/variables'
import { ArrowRight, Plus, Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { variableType } from '@/constants'
import { v4 } from 'uuid'
interface Emits {
  (e: 'update:variables', val: VariableGroup[]): void
}
const emit = defineEmits<Emits>()
const props = defineProps<{
  variables?: VariableGroup[]
}>()
const data = ref<VariableGroup[]>(props.variables || ({} as VariableGroup[]))
watch(data, (val) => emit('update:variables', val))
const activeNames = ref<string[]>([])

watch(activeNames.value, (value) => console.log(value))

const addVariables = (variables) => {
  variables.push({
    id: v4(),
    name: `var_${variables.length + 1}`,
    value: '',
    type: ''
  })
}

const handleVariablesRemove = (variables, element) => {
  const index = variables.findIndex((item) => item.id === element.id)
  if (index !== -1) {
    variables.splice(index, 1)
  }
}

const removeVariables = (variables) => {
  ElMessageBox.confirm('确定删除？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = data.value.findIndex((item) => item.id === variables.id)
    if (index !== -1) {
      data.value.splice(index, 1)
    }
  })
}

const addVariableGroup = () => {
  const id = v4()
  data.value.push({
    id,
    name: `vargroup_${data.value.length + 1}`,
    variables: []
  })
  activeNames.value.push(id)
}
</script>

<style lang="less" scoped>
:deep(.el-form-item) {
  margin-bottom: 5px;
}
:deep(.el-collapse-item__header) {
  padding-right: 0px;
}
:deep(.el-collapse-item__arrow) {
  display: none;
}
.collapse-title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 12px;
}

.arrow {
  margin-right: 8px;
  transition: transform 0.2s;
}

.arrow.active {
  transform: rotate(90deg);
}

.title-text {
  flex: 1;
  font-weight: 500;
}
::v-deep(.el-collapse-item__content) {
  padding-bottom: 0;
}
</style>
