<script lang="ts" name="rc-options" setup>
import { nextTick, onMounted, onUpdated, ref } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { type Option } from './createOptions'
import { debounce } from '@/utils/debouce'
import type { FormCreateProps, Rule } from '@form-create/element-ui'

// 传递弹窗过来的数据
window.__QIANKUN__EVENT__?.on('tagsChange', (tags: Option['tags']) => {
  optionList.value[currentIndex].tags = tags
})
let currentIndex = 0
const getId = window.__QIANKUN__GUID__ || (() => 'default-guid')

const props = defineProps<{
  formCreateInject: Omit<FormCreateProps, 'api'> & {
    api: {
      activeRule: Rule
    }
  }
  field: string
}>()
const optionList = ref<Option[]>([])

// 新增选项
const onAddClick = () => {
  optionList.value.push({
    key: getId(),
    label: '',
    value: '',
    validate: false,
    tags: [],
    default: '',
  })
}

// 删除选项
const onRemoveClick = (index: number) => {
  optionList.value.splice(index, 1)
}

// 打开标签弹窗
const onOpenTagsDialog = (index: number, tags: Option['tags']) => {
  currentIndex = index
  window.__QIANKUN__OPEN__TAG__?.(tags)
}

const validate = (value: string, currentItem: Option) => {
  if (value === '') {
    optionList.value.forEach((item) => {
      item.validate = false
    })
    return
  }
  // 将所有设置一次
  optionList.value.forEach((item) => {
    item.validate = item.label === value
  })
  const validateNum = optionList.value.filter((item) => item.validate).length
  if (validateNum > 1) {
    return
  }
  currentItem.validate = false
}

onUpdated(
  debounce(() => {
    window.__QIANKUN__EVENT__?.emit(
      (props.formCreateInject.rule?.props as Record<string, string>)?.field,
      optionList.value,
    )
  }),
)

onMounted(() => {
  nextTick(() => {
    if (props.formCreateInject?.api?.activeRule?.options === void 0) {
      return
    }
    optionList.value = props.formCreateInject.api.activeRule.options as Option[]
  })
})
</script>
<template>
  <div class="options-container">
    <template v-if="optionList.length > 0">
      <div
        v-for="(item, index) in optionList"
        style="display: flex; gap: 5px; flex-direction: column"
        :key="item.key"
      >
        <div class="options">
          <el-input
            v-model="item.label"
            style="width: 240px"
            autosize
            type="textarea"
            placeholder="请输入内容"
            @change="(e: string) => validate(e, item)"
          />
          <el-icon style="cursor: pointer" @click="onRemoveClick(index)"><Delete /></el-icon>
        </div>
        <span v-if="item.validate" style="color: red">不能出现重复的值</span>
        <div class="tags">
          <el-tag type="success" v-for="tag in item.tags" :key="tag.tag_id">{{
            tag.tag_name
          }}</el-tag>
        </div>
        <div style="width: 40%" @click="onOpenTagsDialog(index, item.tags)">
          <el-button :icon="Plus">添加标签</el-button>
        </div>
      </div>
    </template>
    <el-button @click="onAddClick" type="primary"> 添加选项 </el-button>
  </div>
</template>
<style>
.options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.options {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tags {
  display: flex;
  gap: 5px;
}
</style>
