<template>
  <div class="article-or-file">
    <div class="card-item-header">
      <CardTitle :data="data" />
      <p class="card-item-header-duration" v-if="!is_web_302">{{ data.duration_desc }}</p>
      <p v-if="data.percent_desc">{{ data.percent_desc }}</p>
    </div>
    <div class="material-content" @click="onClickMaterial">
      <template v-if="is_show_article">
        <Article :data="material_data" />
      </template>
      <template v-else>
        <Word :data="material_data" />
      </template>
    </div>
    <div class="share-wrap">
      <div class="share-way" v-if="data.user_info">
        <p>来自</p>
        <div class="share-user">
          <User :data="data.user_info" size="small" />
        </div>
        <p>{{ share_way_desc }}</p>
      </div>
      <div class="share-path" v-if="data.share_path && data.share_path.length > 1 && !is_web_302"
        @click="onClickSharePath">
        <SharePath :data="data" />
      </div>
    </div>
    <div class="actions-wrap" v-if="action_wrap_visible">
      <Division class="division" />
      <div class="action" @click.stop="onClickAction" v-if="visitor_data.count > 0">
        <div class="text">
          <span class="title">并分享到{{ visitor_data.post_share_type }}</span>
          <span class="subtitle">触达{{ visitor_data.count }}人</span>
        </div>
        <i class="iconfont icon-card-jiantou"></i>
      </div>
      <div class="action" @click.stop="onClickDownfile" v-if="is_download">
        <div class="download">
          <div class="pic">
            <WlPic :src="require('@RecordCard/assets/images/arrow-down.png')" />
          </div>
          <p class="text">并下载了文件</p>
        </div>
      </div>
    </div>
    <ActionDetailPopUp v-model="popup_visible" :data="data" />
  </div>
</template>

<script>
import Word from "./components/Word.vue";
import Article from "./components/Article.vue";
import WlPic from "weiling-mobile-ui/lib/WlPic";
import Division from "./components/Division.vue";
import { isMobile, turnPageByCreateA } from "@RecordCard/utils/utils";
import User from "@RecordCard/components/Common/User/index.vue";
import ActionDetailPopUp from "./components/ActionDetailPopUp.vue";
import useGetTrack from "@RecordCard/hooks/useGetTrack";
import useGetMaterialUrl from "@RecordCard/hooks/useGetMaterialUrl";
import SharePath from "@RecordCard/components/Common/SharePath/index.vue";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
export default {
  name: "ArticleOrFile",
  components: { Article, Word, SharePath, CardTitle, ActionDetailPopUp, Division, User, WlPic },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      popup_visible: false,
    };
  },
  computed: {
    visitor_data() {
      const { reach_visitor_data = {} } = this.data;
      const { count = 0, post_share_type } = reach_visitor_data;
      return { count, post_share_type };
    },
    material_data() {
      const { materials = [] } = this.data;
      return materials.length > 0 ? materials[0] : {};
    },
    is_show_article() {
      const { materials = [] } = this.data;
      return materials.length > 0 && materials[0].material_logo;
    },
    is_web_302() {
      let bool = false;
      const { materials = [] } = this.data;
      if (materials.length > 0) {
        const { web_type } = materials[0];
        bool = web_type === 3;
      }
      return bool;
    },
    share_way_desc() {
      const { desc } = this.data;
      const dict = {
        微信: "的微信分享",
        朋友圈: "的朋友圈分享",
        欢迎语: "发送的欢迎语",
      };
      return dict[desc];
    },
    is_download() {
      const { download_material = false } = this.data;
      return download_material;
    },
    action_wrap_visible() {
      return this.is_download || this.visitor_data.count > 0;
    },
  },
  methods: {
    onClickSharePath() {
      this.$emit("onClickSharePath", this.data);
    },
    onClickAction() {
      this.popup_visible = true;
    },
    onClickDownfile() {
      this.$emit("onClickDownfile", this.data);
    },
    onClickMaterial() {
      const target_way = isMobile() ? "_top" : "_blank";
      const { materials = [] } = this.data;
      if (materials.length === 0) return "";
      const { material_scope, id, material_url } = materials[0];
      if (this.is_web_302) return material_url;
      const source_type = material_scope === 1 ? "user" : "corp";
      const { getTrack } = useGetTrack();
      getTrack(id).then(event_id => {
        const link = useGetMaterialUrl({
          event_id,
          material_id: id,
          source_type,
        });
        turnPageByCreateA(link, target_way);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.article-or-file {
  width: 100%;
}

.card-item-header {
  color: #000;
  font-size: $title-font-size;
  padding-left: j(5);
  font-weight: 500;
  @extend %flex-middle;

  &-duration {
    margin: 0 $left-right-spacing;
  }
}

.material-content {
  cursor: pointer;
}

.share-wrap {
  font-size: j(12);
  min-height: $min-height;

  .share-way {
    margin: $up-down-spacing 0;
    @extend %flex-middle;

    .share-user {
      @include textEllipsis(1);
      padding: 0 $left-right-spacing;
    }

    p {
      flex-shrink: 0;
    }
  }

  .share-path {
    margin: $up-down-spacing 0;
    cursor: pointer;
  }
}

.actions-wrap {
  padding-bottom: j(12px);

  .division {
    margin-bottom: j(14px);
  }

  .action {
    width: 100%;
    cursor: pointer;
    @extend %flex-middle;

    &:not(:last-child) {
      margin-bottom: j(14px);
    }

    .text {
      flex: 1;

      .title {
        color: var(--wl-text-color-title-1, #0e0e0e);
        margin-right: $left-right-spacing;
      }

      .subtitle {
        font-weight: 500;
        color: var(--wl-warning-color, #ff9444);
      }
    }

    .iconfont {
      color: var(--wl-line-color, #e4e9ed);
      @extend %iconfont-min;
    }
  }
}

.download {
  @extend %flex-middle;

  .pic {
    width: j(15px);
    height: j(15px);
    margin-right: j(5px);
  }

  .text {
    font-weight: 400;
    font-size: j(12px);
    color: var(--wl-text-color-title-1, #0e0e0e);
  }
}
</style>
