<template>
  <div class="moments" @click="onBrowseDetail">
    <div class="moments-title">
      <div class="logo-wrap">
        <p class="logo">
          <WlPic :src="logo" />
        </p>
      </div>
      <span v-if="isNeedUser">
        <StaffName :name="user_info.user_name" :openid="user_info.userid_third" type="userName" />
      </span>
      <span>在腾讯</span>
    </div>
    <div class="adv-title">
      <AdvTitle text="点击 朋友圈广告" />
    </div>
    <media :data="media_data" v-if="isCreative" />
    <BrowseSteps :data="data" />
    <Device :data="device_info" />
  </div>
</template>

<script>
/**
 * 搜索词广告
 */
import WlPic from "weiling-mobile-ui/lib/WlPic";
import Media from "./components/Media/index.vue";
import { official_account_logo } from "@RecordCard/utils/cdn";
import AdvTitle from "../../Common/AdvTitle/index.vue";
import BrowseSteps from "@RecordCard/components/Common/BrowseSteps/index.vue";
import Device from "@RecordCard/components/Common/Device/index.vue";
import StaffName from "@RecordCard/components/Common/StaffName/index.vue";
export default {
  name: "MomentsAdv",
  components: {
    Media,
    WlPic,
    Device,
    AdvTitle,
    BrowseSteps,
    StaffName,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isNeedUser: true,
      logo: official_account_logo,
      isCreative: false,
      keywords: "",
      media_data: {},
      user_info: {},
      device_info: {},
    };
  },
  watch: {
    data: {
      handler(val) {
        this.handleData(val);
      },
      immediate: true,
    },
  },
  methods: {
    onBrowseDetail() {
      this.$emit("onBrowseDetail", this.data);
    },
    handleData(val) {
      const { web_site_his = {}, root_user = {}, user_info = {} } = val;
      const { creative = {}, keywords, url, use_environment, ip_location } = web_site_his;
      if (root_user.type === 4) {
        this.isNeedUser = true;
        this.user_info = user_info;
      }
      this.keywords = keywords;
      this.isCreative = Object.keys(creative).length > 0;
      const { pics = [], description, video_flag, video_url, brand = {} } = creative;
      const { brand_img, brand_name } = brand;
      const pic = pics.length > 0 ? pics[0] : "";
      this.media_data = {
        photo_url: pic,
        photo_href: url,
        video_url,
        description,
        is_video: video_flag,
        moments_user_info: null,
      };
      this.device_info = {
        ip_location,
        equipment_name: use_environment,
      }
      if (brand_img || brand_img) {
        this.media_data.moments_user_info = {
          head_img_url: brand_img,
          nick_name: brand_name,
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.moments {
  width: 100%;
  color: var(--wl-text-color-title-1, #0e0e0e);
  cursor: pointer;

  &-title {
    font-size: j(15);
    line-height: j(24);
    padding: $up-down-spacing 0;
    @extend %flex-middle;

    .logo-wrap {
      margin-right: $left-right-spacing;
      @extend %logo-wrap;
    }
  }

  .adv-title {
    padding-bottom: j(5);
  }
}
</style>
