<template>
  <div class="options">
    <Divider>选项</Divider>
    <div class="options-item" v-for="(item,index) in value" :key="item.id">
      <Input placeholder="选项名" v-model="item.label" :disabled="disabled" />
      <Input placeholder="选项值" v-model="item.value" :disabled="disabled" />
      <div class="options-close" @click="delOptions(index)" v-if="!disabled">
        <Icon type="md-remove-circle" :size="20" />
      </div>
    </div>
    <div class="options-add" @click="addOptions" v-if="!disabled">
      <Icon type="md-add-circle" :size="16" /> 添加选项
    </div>
  </div>
</template>
<script>
export default {
  name: 'Options',
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
    isNew: Boolean,
  },
  computed: {
    disabled() {
      return !this.isNew
    },
  },
  methods: {
    addOptions() {
      this.value.push({
        label: '',
        value: '',
        id: new Date().getTime(),
      })
    },
    delOptions(i) {
      this.value.splice(i, 1)
    },
  },
}
</script>
<style lang="scss" scoped>
.options{
  .ivu-divider{
    &::before,&::after{
      top:0%
    }
  }
  .options-item{
    display: flex;
    margin: 6px;
    >div{
      margin:  0 2px;
    }
    .options-close{
      cursor: pointer;
      color: #f56c6c;
      line-height: 34px;
    }
  }
  .options-add{
    cursor: pointer;
    color: #17b3a3;
    padding: 5px;
    &:hover{
      color: #45c2b5;
    }
  }
}
</style>