<template>
  <div :class="cellClasses" @click="_clicked">
    <div class="bml-cell__hd">
      <image class="bml-cell-image" :src="icon" v-if="icon"/>
      <bml-icon class="bml-cell-icon" :name="iconClass" v-if="iconClass"></bml-icon>
      <div class="bml-label" v-if="title"><text class="bml-label-text">{{title}}</text></div>
    </div>
    <slot name="title"/>
    <div class="bml-cell__bd bml-cell_input">
      <text class="bml-label-text" v-if="value">{{value}}</text>
      <slot/>
    </div>
    <div class="bml-cell__ft">
      <text class="bml-cell-ft-text" :class="footerClass" v-if="footer">{{footer}}</text>
      <slot name="footer"/>
      <bml-icon class="bml-cell-ft-icon" :name="footerIcon" v-if="footerIcon"></bml-icon>
      <slot name="action"/>
    </div>
  </div>
</template>

<script>
import bmlIcon from './bml-icon.vue';

const prefixCls = 'bml-cell-option';
export default {
  name: 'bml-cell-option',
  components: {bmlIcon},
  props: {
    link: {
      type: Boolean,
      default: false,
    },
    extClass: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    iconColor: {
      type: String,
      default: ''
    },
    iconClass: {
      type: String,
      default: null
    },
    title: { // 和icon二选一，都是放在cell_hd里面
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: '',
    },
    showError: {
      type: Boolean,
      default: false
    },
    footerClass: {
      type: String,
      default: ''
    },
    footer: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      outerClass:'',
      error:''
    }
  },
  methods: {
    setError(error) {
      this.error = error || false
    },
    _clicked(event) {
      this.$emit('click', event)
    }
  },
  computed: {
    footerIcon(){

      if(this.footerClass){
        return this.footerClass;
      }

      if(this.link){
        return 'ion-ios-arrow-right';
      }
      
      return undefined;
    },
    cellClasses(){
      return [
        `${prefixCls}`, this.link ? `${prefixCls}-link`: ''
      ]
    }
  }
}
</script>
<style lang="scss" src="../css/option.scss"/>

