<template>
  <div class="agent-wrap">
    <nav-bar title="我的经纪人" v-if="!flag"/>
    <div class="wrap">
      <div class="info">
        <img v-if="data.avatar" :src='data.avatar' alt="">
        <img v-else src="../assets/imgs/avatar.png" alt="">
        <h4>{{data.userName}}</h4>
        <p>{{data.introduction}}</p>
      </div>
      <div class="line flex_sb align-c" v-if="data.email">
        <div class="flex align-c">
          <i class="icon icon-jingjirenyouxiang"></i>
          <span class="lineHidden">{{data.email || '无'}}</span>
        </div>
        <p
          v-clipboard:copy="data.email"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          >复制</p>
      </div>
      <div class="line flex_sb align-c" v-if="data.mobile">
        <div class="flex align-c">
          <i class="icon icon-jingjirenshouji"></i>
          <span class="lineHidden">{{data.mobile}}</span>
        </div>
        <p>
          <a :href="'tel:' + data.mobile">拨打</a>
        </p>
      </div>
      <div class="line flex_sb align-c" v-if="data.wechat">
        <div class="flex align-c">
          <i class="icon icon-jingjirenweixin"></i>
          <span class="lineHidden">{{data.wechat}}</span>
        </div>
        <p
          v-clipboard:copy="data.wechat"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >复制</p>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Agent",
  components: {
    NavBar
  },
  data() {
    return {
      flag: false,
      data: {}
    };
  },
  created() {
    if (this.$util.checkIsHooliAndroid() || this.$util.checkIsHooliIos())
      this.flag = true;
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_agent_info;
      params.data = {
        agentId: this.$route.params.id
      };
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 复制
    onCopy: function() {
      this.$Toast("复制成功");
    },
    onError: function() {
      this.$Toast("复制失败，请手动选择复制。");
    }
  }
};
</script>

<style scoped lang='less'>
.agent-wrap {
  background: #fff;
  min-height: 100vh;
  .wrap {
    padding: 30px 20px 0;
    .info {
      img {
        width: 70px;
        height: 70px;
        border-radius: 70px;
        background: #f9f9f9;
        margin: 0 auto;
        display: flex;
      }
      h4 {
        margin: 15px 0 10px;
        font-size: 18px;
        color: #222;
        line-height: 25px;
        font-weight: 600;
        text-align: center;
      }
      p {
        font-size: 13px;
        color: #999;
        line-height: 19px;
        font-weight: 400;
        margin-bottom: 30px;
      }
    }
    .line {
      border: 1px solid #ddd;
      height: 54px;
      padding: 0 15px 0 12px;
      margin-bottom: 15px;
      > div {
        width: 86%;
      }
      p {
        font-size: 15px;
        color: #ccc;
        flex-shrink: 0;
      }
      a {
        font-size: 15px;
        color: #ccc;
      }
      span {
        margin-left: 14px;
        color: #333;
        font-size: 15px;
      }
      i {
        color: #bbb;
        font-size: 16px;
      }
    }
  }
}
</style>
