<template>
  <div class="bs-card-wrapper">
    <div class="card-title-wrapper">
      <div class="avatar-wrap">
        <WlPic :src="data.card_logo" />
      </div>
      <div class="name">{{data.card_name}}</div>
      <div :class="arrowClass">
        <WlPic :src="arrowsUrl" @click.native="onClick" />
      </div>
    </div>
    <div class="desc" v-if="data.interest_title">
      最感兴趣的内容为【{{data.interest_title}}】
    </div>
  </div>

</template>

<script>
import { WlPic } from "weiling-mobile-ui";
export default {
  name: "BusinessCard",
  components: {
    WlPic
  },
  props: {
    rotateFalg: {
      style: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      avatarUrl: require('@RecordCard/assets/images/Rectangle158.png'),
      arrowsUrl: require('@RecordCard/assets/images/ico_gengduo.png')
    };
  },
  computed: {
    arrowClass() {
      return {
        'arrow-class': true,
        'img-rotate': !this.rotateFalg
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  },
};
</script>

<style lang="scss" scoped>
.bs-card-wrapper {
  box-sizing: border-box;
  padding: j(12) j(13);
  border-radius: j(10);
  background: $background-color;

  .card-title-wrapper {
    position: relative;
    @extend %flex-middle;

    .avatar-wrap {
      width: j(26);
      height: j(26);
    }

    .arrow-class {
      position: absolute;
      right: 0;
      cursor: pointer;
      width: j(22);
      height: j(22);
    }

    .img-rotate {
      transform: rotate(180deg)
    }

    .name {
      flex: 1;
      margin-left: j(6);
      color: var(--wl-text-color-title-1, #0e0e0e);
      font-weight: 500;
      padding-right: j(22);
      @include textEllipsis(1);
    }
  }

  .desc {
    margin-top: j(20);
    font-weight: 400;
    font-size: $normal-font-size;
    line-height: j(19);
    color: var(--wl-warning-color, #ff9444);
  }

}
</style>