<template>
  <div class="service_tab-provider" v-if="data">
    <div class="provider-left">
      <el-avatar
        shape="square"
        :size="156"
        fit="cover"
        :src="data.picture_path"
      />
    </div>
    <div class="provider-right">
      <p class="provider_name" v-text="data.organization_name"></p>
      <div class="provider_info">
        <p>
          <span>联系人：</span>
          <span v-text="data.user_name"></span>
        </p>
        <p>
          <span>联系电话：</span>
          <span v-text="data.phone"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
.service_tab-provider {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.provider-left {
  flex-shrink: 0;
  padding: 3px;
  background-color: #f6f7fb;
  border-radius: 9px;
  font-size: 0;
}
.provider-left > .el-avatar--square {
  border-radius: 7px;
}
.provider-right {
  flex-grow: 1;
  margin-left: 20px;
}
.provider-right > .provider_name {
  font-size: 20px;
  font-weight: bold;
  color: #0d1847;
  line-height: 36px;
}
.provider-right > .provider_info {
  padding: 20px;
  background-color: #f6f7fb;
  border-radius: 6px;
  margin-top: 20px;
}
.provider-right > .provider_info > p {
  font-size: 14px;
  color: #242c43;
  line-height: 25px;
}
.provider-right > .provider_info > p:not(:first-child) {
  margin-top: 16px;
}
.provider-right > .provider_info > p > span:first-child {
  color: #8890a7;
}
</style>
