<!-- wyf 2022-5-13 -->
<template>
  <z-form-item class="option-css">
    <z-row v-for="(item, index) in formForm.addOption" :key="index" style="margin-bottom: 10px">
      <z-col :span="10">
        <z-input v-model:value="item.value" placeholder="请输入value" />
      </z-col>
      <z-col :span="10" :offset="1">
        <z-input v-model:value="item.label" placeholder="请输入label" />
      </z-col>
      <z-col :span="4" :offset="1">
        <minus-outlined style="margin-top: 10px" @click="deleteOptions(index)" />
      </z-col>
    </z-row>
  </z-form-item>
</template>
<script>
import { defineComponent, toRef } from 'vue'
export default defineComponent({
  name: 'OptionsItem',
  props: {
    formProperty: {
      type: Array,
      default: undefined
    }
  },
  setup(props) {
    const formForm = toRef(props, 'formProperty')
    const deleteOptions = (index) => {
      formForm.value.addOption.splice(index, 1)
    }
    return {
      formForm,
      deleteOptions
    }
  }
})

</script>

<style lang="less">
.option-css {
  max-height: 200px;
  overflow: auto;
  overflow-x: hidden;
}
</style>
