<template>
  <div
    :class="address?'rt-have-address':'rt-no-address'"
    :style="{'background': (isBackgroundTransparent ? '' : '#fff')}"
  >
    <div class="rt-address">
      <div>
        <p :style="titleStyle">{{title}}</p>
      </div>
      <div class="rt-address-right" @click="handleClick">
        <rt-button v-if="address" icon="rt-cmm-Grouping" text slot="right"></rt-button>
        <rt-button v-else icon="rt-jcy-address" text slot="right"></rt-button>
      </div>
    </div>
    <div v-if="address">
      <p class="rt-input-address">{{address}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rtAddressInform',
  props: {
    click: Function,
    title: {
      type: String,
      default: ''
    },
    titleColor: {
      type: String,
      default: '#222'
    },
    address: {
      type: String,
      default: null
    },
    titleSize: {
      type: String || Number,
      default: '14'
    },
    isBackgroundTransparent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    titleStyle() {
      return { fontSize: `${this.titleSize}` + 'px', color: this.titleColor };
    }
  },
  methods: {
    async handleClick(event) {
      if (this.click && Object.prototype.toString.call(this.click) === '[object Function]') {
        try {
          this.isDisabled = true;
          this.isLoading = true;
          await this.click();
        } catch (error) {
        } finally {
          this.isDisabled = false;
          this.isLoading = false;
        }
      } else {
        this.$emit('click', event);
      }
    }
  }
};
</script>

<style scoped>
.rt-have-address {
  padding: 8px 10px;
  height: autoHeight;
}
.rt-no-address {
  padding: 8px 10px;
  height: 44px;
}
.rt-address {
  display: flex;
  position: relative;
  -webkit-box-align: center;
  align-items: center;
  height: 44px;
  line-height: 44px;
}
.rt-address-right {
  height: 44px;
  right: 10px;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  margin-left: 20px;
  padding-top: 5px;
}
.rt-input-address {
  touch-action: manipulation;
  position: relative;
  width: 100%;
  padding: 0 !important;
  font-size: 14px;
  color: #555;
}
</style>
