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

<script>
export default {
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    data: null,
  }),
  methods: {
    init() {
      this.$http
        .get("/static/serviceInfo.json")
        .then((response) => {
          this.data = response.body[this.url].provider;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</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>
