<template>
<div class="header">
  <div class="avatar-wrapper">
    <img class="avatar" :src="avatar">
    <span class="name">{{name}}</span>
  </div>

  <div class="close" @click="close">
    <i class="iconfont icon-close icon"></i>
  </div>
</div>
</template>

<script>
export default {
  name: 'ShowOrderHeader',
  props: {
    avatar: {
      type: String,
      default: '//tvax2.sinaimg.cn/crop.0.0.828.828.50/006IPkwKly8fyhr791kkxj30n00n0q3u.jpg'
    },
    name: {
      type: String,
      default: 'huangtao'
    }
  },
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit('close');
      this.$yoho.finishPage({});
    }
  }
};
</script>

<style lang="scss" scoped>

.header {
  display: flex;
  justify-content: space-between;
  padding: 18px 32px 54px;
  height: 128px;
  background-color: rgba(0, 0, 0, 0.8);
}

.avatar-wrapper {
  display: flex;
  align-items: center;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 56px;
  border: 1px solid white;
  box-sizing: border-box;
}

.name {
  color: white;
  font-size: 24px;
  margin-left: 12px;
}

.close {
  color: white;
}

.icon {
  font-size: 55px;
}

</style>