<template>
  <view class="customlist-banner-action">
    <view
      v-if="showButton"
      @click="$emit('join')"
      class="customlist-banner-action-btn line-yellow text-sm"
      style="border: currentColor 1px solid"
    >
      <l-icon :type="icontype" />
      {{ buttonText }}
    </view>
    <view
      v-if="showDelete"
      @click="$emit('delete')"
      class="customlist-banner-action-btn line-red text-sm"
      style="border: currentColor 1px solid"
    >
      <l-icon type="delete" />
      删除
    </view>

    <view
      v-if="showEdit"
      @click="$emit('edit')"
      class="customlist-banner-action-btn line-blue text-sm"
      style="border: currentColor 1px solid"
    >
      <l-icon type="edit" />
      编辑
    </view>
    <view
      @click="$emit('view')"
      class="customlist-banner-action-btn line-blue text-sm"
      style="border: currentColor 1px solid; min-width: 160rpx"
    >
      查看
      <l-icon type="right" />
    </view>
  </view>
</template>

<script>
export default {
  name: "l-customlist-banner",

  props: {
    showDelete: {},
    showEdit: {},
    showButton: {},
    buttonText: "",
    icontype: "",
  },
};
</script>

<style lang="less" scoped>
.customlist-banner-action {
  margin-top: 20rpx;
  text-align: right;

  .customlist-banner-action-btn {
    display: inline-block;
    padding: 4px 6px;
    margin: 0 3px;
    border-radius: 3px;
    text-align: center;
  }
}
</style>

<style lang="less">
:host {
  display: block;
}
</style>