<!--
  带有删除图标的，两个button的
  两个button连在一起的
  只有一个的
-->
<template>
  <div class="bottom-button mui-flex aic"
       :class="{del:!del}">
    <div class="bottom-button__del"
         :style="confSty.btnDel"
         @click="tapDel"
         v-if="del">
      <div class="icon icon--del"></div>
      {{delText}}
    </div>
    <div class="bottom-button__btn-item mui-flex__cell mui-flex aic">
      <div v-if="!single"
           class="btn btn--cancel mui-flex__cell"
           :style="confSty.btnCancel"
           @click="tapCancel">{{cancelText}}</div>
      <div class="btn btn--confirm  mui-flex__cell"
           :style="confSty.btnConfirm"
           @click="tapConfirm">{{confirmText}}</div>
    </div>
  </div>

</template>

<script>
import config from './config.js';
export default {
  name: 'BottomButton',
  props: {
    styles: {
      type: Object,
      default() {
        return {};
      }
    },
    del: {
      type: Boolean,
      default: false
    },
    single: {
      type: Boolean,
      default: false
    },
    delText: {
      type: String,
      default: '删除'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '保存'
    }
  },
  data() {
    return {
    };
  },
  created() {
  },
  computed: {
    confSty() {
      return Object.assign({}, config.BOTTOM_BUTTON_STYLES, this.styles);
    }
  },
  methods: {
    tapDel() {
      this.$emit('on-del');
    },
    tapCancel() {
      this.$emit('on-cancel');
    },
    tapConfirm() {
      this.$emit('on-confirm');
    }
  }
};
</script>
