<script setup lang="ts">
// import { CirclePlusFilled, RemoveFilled } from '@element-plus/icons-vue'
import ConfigTemplate from '../../ConfigTemplate.vue'
// import { stringOperatorList } from '@/utils/dictionary'
import { useTag } from '../../../composables/useAllData'

const props = defineProps<{ node: any }>()

const role = inject('role') as string

const form = reactive({
  tag_ids: [],
  tag_names: ''
  // rules: [{ tag_id: '', operate: '', value: '' }]
})
watchEffect(() => {
  Object.assign(form, props.node.data[role])
})

const { tagList } = useTag()

watchEffect(() => {
  form.tag_names = form.tag_ids
    .map((id: string) => {
      return tagList.value.find(item => item.id === id)?.name
    })
    .join('、')
})

// function addRule() {
//   form.rules.push({ tag_id: '', operate: '=', value: '' })
// }

// function removeRule(index: number) {
//   form.rules.splice(index, 1)
// }
</script>

<template>
  <ConfigTemplate :model="form" :node="node">
    <el-form-item>
      标签&nbsp;等于&nbsp;
      <el-select v-model="form.tag_ids" placeholder="请选择标签" multiple style="width: 400px">
        <el-option :key="item.id" v-for="item in tagList" :value="item.id" :label="item.name"></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item v-for="(rule, index) in form.rules" :key="index" >
      <el-row align="middle">
        <el-select v-model="rule.tag_id" placeholder="请选择标签" style="width: 120px">
          <el-option :key="item.id" v-for="item in tagList" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-select v-model="rule.operate" style="margin: 0 10px; width: 120px">
          <el-option
            v-for="item in stringOperatorList"
            :key="item.value"
            :value="item.value"
            :label="item.label"></el-option>
        </el-select>
        <el-input v-model="rule.value" placeholder="请输入标签值" style="width: 180px"></el-input>
        <el-icon style="margin-left: 10px" size="20" color="#cf5b78" @click="removeRule(index)" v-if="index !== 0">
          <RemoveFilled />
        </el-icon>
        <el-icon
          style="margin-left: 10px"
          size="20"
          color="#cf5b78"
          @click="addRule"
          v-if="index === form.rules.length - 1">
          <CirclePlusFilled />
        </el-icon>
      </el-row>
    </el-form-item> -->
  </ConfigTemplate>
</template>
