<template>
  <div class="update-client-info" @click.stop="onClickCard">
    <CardTitle :data="data" @onClickUser="onClickUser" :need_user="true"></CardTitle>
    <div class="info-wrap" @click.stop="onClickInfo">
      <div
        v-for="(item, index) in data.lists"
        :key="index"
        class="info"
        @click.stop="onClickData(item)"
      >
        <span class="label">{{ item.label }}</span>
        <span class="text">{{ item.text }}</span>
      </div>
    </div>
    <CardFooter :show="false" />
  </div>
</template>

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

<style lang="scss" scoped>
.update-client-info {
  box-sizing: border-box;
  .header-text {
    font-size: j(15px);
    color: #000000;
    flex-shrink: 0;
    margin-right: j(5);
    font-weight: 500;
  }
  .info-wrap {
    background-color: var(--wl-primary-color-lightest, #f7fbfe);
    border-radius: j(8px);
    padding: j(13px) j(9px) j(0px) j(9px);
    @extend %flex-direction-column;
    .info {
      @extend %flex-middle;
      margin-bottom: j(14px);
      .label {
        flex-shrink: 0;
        font-size: j(12px);
        color: var(--wl-text-color-secondary-2, #919699);
        margin-right: j(24px);
        max-width: 30%;
        @include textEllipsis(1);
      }
      .text {
        flex: 1;
        font-size: j(12px);
        color: var(--wl-text-color-title-1, #0e0e0e);
        @include textEllipsis(1);
      }
    }
  }
}
</style>
