<template xmlns:v-bond="http://www.w3.org/1999/html">
  <div>
    <form align="center">
      <h3 align="center">通讯录</h3>
      <img class="touxiang" src="../image/touxiang.jpg"><br/>
      <h5 align="center">{{ model.data.name }}</h5>
      <p> &nbsp&nbsp手机:</p>
      <hr>
      <p> &nbsp&nbsp{{ model.data.phone }}<img src="../assets/phone.png" align="right"
                                            @click.stop.prevent='makeAPhoneCall(model.data.phone)'>&nbsp&nbsp</p>
      <hr>
      <p> &nbsp&nbsp紧急联系人:</p>
      <hr>
      <p> &nbsp&nbsp{{ model.data.accesstime }}<img src="../assets/phone.png" align="right">&nbsp&nbsp</p>
      <hr>
      <p> &nbsp&nbsp岗位服务:<span>{{ model.data.rolestr(1) }}&nbsp&nbsp</span></p><br/>
      <hr>
      <p> &nbsp&nbsp电子邮箱:<span align="right">{{ model.data.loginip }}&nbsp&nbsp</span></p><br/>
      <hr>
      <p> &nbsp&nbsp所属公司:<span align="right">{{ model.data.f_department_name }}&nbsp&nbsp</span></p><br/>
      <hr>
      <p> &nbsp&nbsp所属部门:<span al ign="right">{{ model.data.state }}&nbsp&nbsp</span></p><br/>
    </form>
  </div>
</template>

<script>
export default {
  name: 'PhoneUserDetil',
  title: '展示客户信息详情',
  data () {
    return {
      model: {
        data: [
          {
            name: '周杰伦', phone: '123', ectt: '123', JobSe: '待定', email: '1235@aqw.com', img: '../assets/安检导航竖屏.png'
            , office: '梁平区聚源有限公司', depment: '安全运营部'
          }
        ]
      }
    }
  },
  methods: {
    makeAPhoneCall (phoneNumber) {
      alert('将要拨通的号码为:'+phoneNumber)
      this.$androidUtil.makeAPhoneCall(phoneNumber)
    }
  },
  ready () {
    console.log(this.row)
    this.model.data = this.row
    this.model.data.phone=12345
  }
}
</script>

<style scoped>
.touxiang {
  width: 30%;
  height: 30%;
}

p {
  text-align: left;
}

span {
  float: right;
}
</style>
