<template>
  <div class="user-action">
    <div class="card-item-header">
      <p class="card-item-title">
        <CardTitle :data="data" />
        <span>{{ data.duration_desc }}</span>
      </p>
      <div class="share-way" v-if="data.share_type_desc">
        <p class="share-icon">
          <WlPic :src="require('@RecordCard/assets/images/share.png')" />
        </p>
        {{ data.share_type_desc }}
      </div>
    </div>
    <CardFooter :data="data">
      <!-- 分享链路 -->
      <template slot="footerRight">
        <div class="share-path" @click="onClickSharePath">
          <Share-path :data="data" v-if="data.share_path && data.share_path.length > 1" />
        </div>
      </template>
    </CardFooter>
  </div>
</template>

<script>
import WlPic from "weiling-mobile-ui/lib/WlPic";
import SharePath from "@RecordCard/components/Common/SharePath/index.vue";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
export default {
  name: "UserAction",
  components: { SharePath, WlPic, CardFooter, CardTitle },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    onClickSharePath() {
      this.$emit("onClickSharePath", this.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.user-action {
  width: 100%;
  .card-item-header {
    @extend %flex-between;
    .card-item-title {
      flex: 1;
      color: #000;
      font-size: $title-font-size;
      font-weight: 500;
      @include textEllipsis(1);
    }
    .share-way {
      @extend %flex-middle-center;
      color: var(--wl-warning-color, #ff9444);
      background-color: rgba(255, 148, 68, 0.1);
      border-radius: j(30);
      padding: j(3) j(10) j(3) j(3);
      .share-icon {
        background-color: var(--wl-warning-color, #ff9444);
        width: j(18);
        height: j(18);
        padding: j(3);
        box-sizing: border-box;
        border-radius: 50%;
        margin-right: j(3);
      }
    }
  }
  .share-path {
    cursor: pointer;
  }
}
</style>
