<template>
  <div class="add-user">
    <div class="header">
      <div class="user">
        <WlPic :src="data.user_info.head_img_url || default_avatar"></WlPic>
      </div>
      <p
        class="user-name"
        v-if="data.user_info.nick_name || (is_trial && data.user_info.userid_third)"
      >
        <StaffName
          :name="data.user_info.nick_name"
          type="userName"
          :openid="data.user_info.userid_third"
        />
      </p>
      <p class="title">将{{ data.settle_user_info.length }}位&nbsp;客户&nbsp;</p>
      <p class="title" v-html="data.title"></p>
    </div>
    <div class="users-wrap">
      <div class="users" v-for="(item, index) in settle_user_info" v-show="item" :key="index">
        <a :href="item.href" :target="item.target" v-if="item">
          <div :class="`user ${corp_name(item) ? 'align-top' : ''}`">
            <div class="avatar-wrap">
              <p class="avatar">
                <WlPic :src="item.head_img_url || default_avatar" />
              </p>
              <div :class="`user-icon ${user_type(item)}`" v-if="user_type(item)">
                <i :class="`icon-card-${user_type(item)} iconfont icon`"></i>
              </div>
            </div>
            <div class="info">
              <p class="name">{{ item.remark_name || item.nick_name }}</p>
              <p :class="`company ${user_type(item)}`" v-if="corp_name(item)">
                @{{ item.corp_name }}
              </p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import StaffName from "@RecordCard/components/Common/StaffName/index.vue";
import WlPic from "weiling-mobile-ui/lib/WlPic";
import { wx_work_type } from "@RecordCard/utils/dict";
import useGetExternalUserUrl from "@RecordCard/hooks/useGetExternalUserUrl";
import { default_avatar } from "@RecordCard/utils/cdn";
export default {
  name: "CompanyAddPeopleSettle",
  components: { WlPic, StaffName },
  inject: ["scene"],
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      default_avatar,
    };
  },
  computed: {
    user_type() {
      return (item) => {
        const { type = "" } = item;
        return wx_work_type[parseInt(type)] || "";
      };
    },
    corp_name() {
      return (item) => {
        const { corp_name = "" } = item;
        return corp_name;
      };
    },
    settle_user_info() {
      const { settle_user_info = [] } = this.data;
      return settle_user_info.map((ele) => {
        if (!ele) return ele;
        const { external_userid = "" } = ele;
        return {
          ...ele,
          href: external_userid ? useGetExternalUserUrl(external_userid) : "javascript:void(0)",
          target: external_userid ? "_blank" : "_self",
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-user {
  width: 100%;
  .header {
    padding-top: j(7);
    font-size: j(15px);
    color: black;
    .title {
      display: inline;
    }
    .user {
      width: j(16);
      height: j(16);
      border-radius: 50%;
      overflow: hidden;
      display: inline-block;
    }
    .user-name {
      display: inline;
      font-size: j(15);
      color: $disabled-color;
      font-weight: 500;
      padding-left: 5px;
      color: rgba(41, 80, 184, 1);
    }
  }
  .users-wrap {
    margin: j(10px) 0;
    width: 100%;
    overflow-x: auto;
    // 滚动条位置
    padding-bottom: 1px;
    @extend %flex-middle;
    .users:not(:last-child) {
      margin-right: j(6px);
    }
    .align-top {
      align-items: flex-start;
    }
    .user {
      width: j(125px);
      height: j(59px);
      background: #ffffff;
      border: 1px solid #eeeeee;
      border-radius: j(6px);
      padding: j(10px);
      box-sizing: border-box;
      @extend %flex-middle;
      .avatar-wrap {
        position: relative;
        margin-right: j(7px);
        .avatar {
          width: j(24px);
          height: j(24px);
          border-radius: 50%;
          overflow: hidden;
        }
        .user-icon {
          position: absolute;
          width: j(12px);
          height: j(12px);
          border-radius: 50%;
          border: j(2px) solid white;
          bottom: 0;
          right: 0;
          transform: translate(0.03rem, 0.03rem);
          color: white;
          @extend %flex-middle-center;
          .icon {
            font-size: j(12px);
            transform: scale(0.5);
          }
        }
        .weixin {
          background-color: var(--wl-success-color-hover, #74d178);
        }
        .wxwork {
          background-color: var(--wl-primary-color-hover, #5bbaff);
        }
      }
      .info {
        text-align: left;
        align-items: stretch;
        @extend %flex-direction-column;
        .name {
          font-weight: 500;
          font-size: j(12px);
          color: var(--wl-text-color-title-2, #303233);
          width: 100%;
          @include textEllipsis(1);
        }
        .company {
          font-weight: 400;
          font-size: j(12px);
          width: 100%;
          transform: scale(0.8) translateX(-10%);
          @include textEllipsis(2);
        }
        .weixin {
          color: var(--wl-success-color-hover, #74d178);
        }
        .wxwork {
          color: var(--wl-warning-color, #ff9444);
        }
      }
    }
  }
}
</style>
