<template>
  <view class="agent-wrapper" :style="{ padding: pd }">
    <view class="agent-left">
      <image :src="userImg" mode="scaleToFill" />
      <view class="agent-info single-text-beyond" :style="{ color: nameColor, fontWeight: nameWeight }">
        {{ name }}
        <view :style="{ color: textColor }">{{ agentNo }}</view>
      </view>
    </view>
    <image :src="arrowImg" mode="scaleToFill" />
  </view>
</template>

<script setup>
const props = defineProps({
  userImg: {
    type: String,
    default: "/static/iconImg/user-white.svg",
  },
  arrowImg: {
    type: String,
    default: "/static/iconImg/right-arrow.svg",
  },
  name: {
    type: String,
  },
  agentNo: {
    type: String,
  },
  pd: {
    type: String,
  },
  textColor: {
    type: String,
  },
  nameColor: {
    type: String,
  },
  nameWeight: {
    type: String,
  },
})
</script>

<style lang="scss" scoped>
.agent-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  .agent-left {
    display: flex;
    align-items: center;
    image {
      width: 82rpx;
      height: 82rpx;
      margin-right: 20rpx;
    }
    .agent-info {
      width: 400rpx;
      font-size: 28rpx;
      color: #fff;
      view {
        margin-top: 10rpx;
        font-size: 23rpx;
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
