<template>
  <div class="ocean-engine" @click="onBrowseDetail">
    <div class="ocean-engine-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>
    <Media :data="media_data" />
    <!-- 浏览记录 -->
    <BrowseSteps :data="data" v-if="!isCreative" />
    <Device :data="device_info" :need_top_border="false" />
  </div>
</template>

<script>
/**
 * 搜索词广告
 */
import API from "@RecordCard/api";
import WlPic from "weiling-mobile-ui/lib/WlPic";
import Media from "./components/Media/index.vue";
import { ocean_engine_logo } from "@RecordCard/utils/cdn";
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: "OceanEngineAdv",
  components: {
    Media,
    WlPic,
    Device,
    BrowseSteps,
    StaffName,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isNeedUser: true,
      logo: ocean_engine_logo,
      keywords: "",
      media_data: {},
      user_info: {},
      device_info: {},
      isCreative: false,
    };
  },
  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 { advertiser_id, wl_creative_id, pics = [], title, video_flag } = creative;
      const pic = pics.length > 0 ? pics[0] : "";
      this.media_data = {
        photo_url: pic,
        video_url: "",
        creative_title: title,
        is_video: video_flag,
        AD_landing_url: url,
      };
      this.device_info = {
        ip_location,
        equipment_name: use_environment,
      }
      //只有巨量引擎并且advertiser_id和wl_creative_id有值的话才需要调用视频
      if (video_flag && advertiser_id && wl_creative_id) {
        this.getVideo(advertiser_id, wl_creative_id);
      }
    },
    getVideo(advertiser_id, wl_creative_id) {
      API.getByteVideoUrl({
        advertiser_id,
        wl_creative_id,
      }).then((res) => {
        this.media_data.video_url = res?.data?.url;
        if (res?.data?.poster_url) {
          this.media_data.photo_url = res?.data?.poster_url;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ocean-engine {
  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;
    }
  }
}
</style>
