<ion-view title="联系人详情" hide-nav-bar="true" class="crm-bg">
  
  <!-- <ion-nav-bar class="bar-crm">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-buttons side="right">
    <button class="button button-clear header-item button-icon ion-ios-more" ng-click="moreOperation()">
    </button>
  </ion-nav-buttons> -->

  <ion-content class="contact-view">
    <div class="padding"></div>

    <div class="item padding-vertical">
      <h2>
        {{ contact.name }}
        <i class="icon-men" ng-if="contact.gender == '0'"></i>
        <i class="icon-women" ng-if="contact.gender == '1'"></i>
      </h2>
      <p class="fss inspid">
        <span>{{ contact.department || '暂无部门' }} </span> • <span>{{ contact.position || '暂无岗位' }}</span>
      </p>
    </div>

    <div class="item item-divider crm-view-item-divider">基本信息</div>
    <div class="list">
      <div class="item item-indent item-input" ng-switch>
        <span class="input-label">性别</span>
        <div class="input-content text-right" ng-switch="contact.gender">
          <span ng-switch-when="0">男</span>
          <span ng-switch-when="1">女</span>
          <span ng-switch-default>未知</span>
        </div>
      </div>
      
      <!-- 联系方式 -->
      <div class="item item-indent item-input"
        ng-repeat="extend in contact.extends"
        ng-if="extend.value"
        ng-class="{ 'item-icon-right': extend.key === 'mobile' || extend.key === 'phone' }">
        <span class="input-label">{{ extend.key | crmContactExtendText }}</span>

        <div class="input-content text-right">
          <!-- 手机、电话 -->
          <span ng-if="extend.key === 'mobile' || extend.key === 'phone'" style="padding-right: 24px;">{{ extend.value }}</span>
          <!-- 邮箱 -->
          <a ng-if="extend.key === email" class="anchor" href="mailto:{{  extend.value }}">{{  extend.value }}</a>
          <span ng-if="extend.key !== 'mobile' && extend.key !== 'phone' && extend.key !== 'email'">{{ extend.value }}</span>
        </div>

        <div class="icon" ng-if="extend.key === 'mobile' || extend.key === 'phone'">
          <a class="ion-ios-telephone contact-telephone" href="tel:{{ extend.value }}"></a>
        </div>
      </div>

      <!-- @Todo: 归属人 -->
      <div class="item item-indent item-input" ng-if="contact.client && contact.client.fullname">
        <span class="input-label">关联客户</span>
        <div class="input-content text-right">{{ contact.client.fullname }}</div>
      </div>

      <!-- 标签组 -->
      <div class="item item-indent item-input" ng-repeat="tagGroup in contact.tags">
        <span class="input-label">{{ tagGroup.name }}</span>
        <div class="input-content text-right">{{ tagGroup.tag.name }}</div>
      </div>

      <div class="item item-divider crm-view-item-divider" ng-if="
      (contact.birthday && contact.birthday != 0) ||
      contact.department ||
      contact.position ||
      contact.remark
      ">详细信息</div>

      <div class="item item-indent item-input" ng-if="contact.birthday && contact.birthday != 0">
        <span class="input-label">生日</span>
        <div class="input-content text-right">{{ contact.birthday * 1000 | date: 'yyyy-MM-dd' }}</div>
      </div>

      <div class="item item-indent item-input" ng-if="contact.department">
        <span class="input-label">部门</span>
        <div class="input-content text-right">{{ contact.department }}</div>
      </div>

      <div class="item item-indent item-input" ng-if="contact.position">
        <span class="input-label">职务</span>
        <div class="input-content text-right">{{ contact.position }}</div>
      </div>

      <div class="item item-indent item-text-wrap" ng-if="contact.remark">
        <span class="common-black">备注</span>
        <div class="padding-vertical">{{ contact.remark }}</div>
      </div>
    </div>

    <div class="padding-horizontal15" ng-if="contact.canEdit" ui-sref="crm.editContact({ contactid: contact.contactid })">
      <button class="button button-block button-positive">编辑</button>
    </div>

    <div class="padding"></div>
  </ion-content>

</ion-view>