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

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

const role = inject('role') as string

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

const { userAttrList } = useUserAttr()

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

function removeRule(index: number) {
  form.rules.splice(index, 1)
}

function getAttr(attrId: string) {
  return userAttrList.value.find(item => item.id === attrId)
}
</script>

<template>
  <ConfigTemplate :model="form" :node="node">
    <el-form-item v-for="(rule, index) in form.rules" :key="index">
      <el-row justify="center" align="middle">
        <el-select v-model="rule.attr_id" placeholder="请选择属性" style="width: 130px">
          <el-option :key="item.id" v-for="item in userAttrList" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-button style="margin: 0 10px">=</el-button>
        <el-input
          v-model="rule.value"
          placeholder="请输入"
          :maxlength="getAttr(rule.attr_id)?.format"
          style="width: 200px"></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>
