<template>
  <view class="header">
    <view class="location-info" @click="onLocationClick">
      <image class="location" :src="locationIcon"></image>
      <text class="company-name">{{ companyName }}</text>
      <text class="arrow">></text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    companyName: {
      type: String,
      default: '福鼎创特物联科技有限公司',
    },
    locationIcon: {
      type: String,
      required: true,
    },
  },
  methods: {
    onLocationClick() {
      this.$emit('location-click')
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  padding: 106rpx 30rpx 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffddca;
  z-index: 999;

  .location-info {
    display: flex;
    align-items: center;
    gap: 10rpx;
    flex: 1;

    .location {
      width: 27rpx;
      height: 31rpx;
    }

    .company-name {
      color: #3d3d3d;
      font-size: 16px;
      font-weight: 500;
    }

    .arrow {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style>
