<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  name: string
  description: string
  index: number
}>()

const emit = defineEmits<{
  (e: 'update:name', value: string): void
  (e: 'update:description', value: string): void
  (e: 'del', value: number): void
}>()



const name = computed({
  get () {
    return props.name
  },
  set (val) {
    emit('update:name', val)
  }
})


const description = computed({
  get () {
    return props.description
  },
  set (val) {
    emit('update:description', val)
  }
})
</script>

<template>
  <div class="rule-item">
    <div class="rule-item-title">
      <span>规则 {{ props.index + 1 }}</span>
      <el-icon class="pointer" @click="emit('del', props.index)"><RemoveFilled /></el-icon>
    </div>
    <el-input placeholder="请输入标题" style="margin-bottom: 10px;" v-model="name" />
    <el-input type="textarea" placeholder="请输入规则描述" v-model="description" :rows="3" />
  </div>
</template>

<style scoped lang="scss">
.rule-item {
  width: 100%;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0,0,0,0.1);
  padding: 12px;
  margin-bottom: 6px;
  &-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
