<template>
  <div>
    <p class="form-appendix co-line-up">
      <i v-if="options.icon" class="coicon" :class="options.icon"></i>
      <span class="na" :class="{'not-icon': !options.icon, 'is-required': options.required === true}" v-text="options.name"></span>
      <span class="co-field-state" v-if="options.state" :class="['is-' + options.state]">
        <i class="coicon" :class="getFieldCls(options.state)"></i>
      </span>
    </p>
    <cus-appendix :datas="options.value" :params="options.uploadParam || {}" :isDelete="true" @appendixInput="appendixInput"></cus-appendix>
  </div>
</template>
<script>

export default {
  name: 'cus-form-appendix',
  data() {
    return {
      actions: [],
      sheetVisible: false
    };
  },
  props: {
    iconIndex: String, // 标识
    options: {
      'type': Object,
      'default': {}
    }
  },

  methods: {
    getFieldCls(state) {
      var iconNS = 'coicon';
      if (state === 'error') {
        return `${iconNS}-delete_fill`;
      } else if (state === 'warning') {
        return `${iconNS}-warning_fill`;
      } else if (state === 'success') {
        return `${iconNS}-success_fill`;
      }
      return '';
    },
    appendixInput(result) {
      this.$emit('input', result);
    }
  }
};
</script>
