<template>
  <div class="add-client" @click.stop="onClickCard">
    <div class="title-wrap">
      <div class="title">
        <CardTitle :data="data" @onClickUser="onClickUser"></CardTitle>
      </div>
      <div class="user">
        <User :data="data.user_info" user_type="staff"/>
      </div>
    </div> 
    <div class="content-wrap">
      <div v-if="data.owner" class="content">
        <div class="line">
          <span class="content-desc">来自</span>
          <div class="content-user" @click.stop="onClickFromUser">
            <User :data="data.owner" size="small" />
          </div>
        </div>
        <div class="line">
          <span class="content-desc" @click.stop="onClickDesc">
            创建的智能码：{{ data.state }}
          </span>
        </div>
      </div>
      <div v-else class="content-desc" @click.stop="onClickDesc">
        <span>{{ data.desc }}</span>
        <span v-if="data.state">：{{data.state}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import User from "@RecordCard/components/Common/User/index.vue";
export default {
  name: "AddClient",
  components: { CardTitle, User },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    onClickUser() {
      this.$emit("onClickUser", this.data.user_info);
    },
    onClickFromUser() {
      this.$emit("onClickFromUser", this.data.from);
    },
    onClickDesc() {
      this.$emit("onClickDesc", this.data.from);
    },
  },
};
</script>

<style lang="scss" scoped>
.add-client {
  padding: j(5) 0 j(10px) 0;
  box-sizing: border-box;
  .title-wrap {
    @extend %flex-middle;
    .title {
      flex-shrink: 0;
      margin-right: j(8px);
    }
    .user {
      flex: 1;
    }
  }
  .content-wrap {
    margin-top: j(7px);
    .content {
      .line {
        margin-right: j(5px);
        @extend %flex-middle;
        display: inline-flex;
        &:not(:last-child) {
          margin-bottom: j(7px);
        }
      }
    }
    .content-desc {
      font-size: j(12px);
      color: var(--wl-text-color-placeholder, #c1c1c1);
      flex-shrink: 0;
      max-width: 100%;
      @include textEllipsis(1);
    }
  }
}
</style>
