<template>
  <div>
    <co-cell
      class="co-field"
      :title="options.name"
      :icon="options.icon"
      :class="[{
        'is-required': options.required === true,
        'is-nolabel': !options.name
      }]">
      <co-switch v-model="options.value || false" @change="switchUpdate"></co-switch>
      <span class="co-field-state" v-if="options.state" :class="['is-' + options.state]">
        <i class="coicon" :class="getFieldCls(options.state)"></i>
      </span>
      <div class="co-field-other">
        <slot></slot>
      </div>
    </co-cell>
  </div>
</template>
<script>

export default {
  name: 'cus-form-switch',

  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 '';
    },
    switchUpdate(val) {
      this.$emit('input', !val);
    }
  }
};
</script>
