<template>
  <div class="baidu-info" @click="onBrowseDetail">
    <div class="baidu-info-title">
      <div class="logo-wrap">
        <p class="logo">
          <WlPic :src="search_engine_icon" />
        </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="baidu-info-action">
      <LogoOrDot point="dot" :need_arrow="false"></LogoOrDot>
      <p class="baidu-info-action-desc">点击 信息流广告</p>
    </div>
    <Media :data="media_data" />
    <!-- 浏览记录 -->
    <div class="baidu-info-action-steps">
      <BrowseSteps :data="data"></BrowseSteps>
    </div>
    <Device :data="device_info" />
  </div>
</template>

<script>
/**
 * 搜索词广告
 */
import { baidu_logo } from "@RecordCard/utils/cdn";
// import API from '@RecordCard/api'
import WlPic from "weiling-mobile-ui/lib/WlPic";
import LogoOrDot from "../../Common/LogoOrDot/index.vue";
import BrowseSteps from "@RecordCard/components/Common/BrowseSteps/index.vue";
import Media from "./components/Media/index.vue";
import StaffName from "@RecordCard/components/Common/StaffName/index.vue";
import Device from "@RecordCard/components/Common/Device/index.vue";
export default {
  name: "BaiduAdv",
  components: {
    LogoOrDot,
    BrowseSteps,
    Media,
    WlPic,
    Device,
    StaffName,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isNeedUser: true,
      keywords: "",
      media_data: {},
      user_info: {},
      device_info: {},
      search_engine_icon: baidu_logo,
    };
  },
  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 = {},
        history_type,
      } = val;
      const {
        creative = {},
        keywords,
        url,
        use_environment,
        logo,
        ip_location
      } = web_site_his;
      if (root_user.type === 4) {
        this.isNeedUser = true;
        this.user_info = user_info;
      }
      this.keywords = keywords;
      this.device_info = {
        ip_location,
        equipment_name: use_environment,
      }
      const {
        pics = [],
        title,
        video_flag,
        brand: { brand_name, brand_img },
        video_url,
      } = creative;
      const pic = pics.length > 0 ? pics : "";
      this.media_data = {
        photo_url: pic,
        video_url,
        creative_title: title,
        is_video: video_flag,
        AD_landing_url: url,
        history_type: history_type,
        logo: logo,
        brand_name,
        brand_logo: brand_img
      };
    },
  },
};
</script>

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

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

    .logo-wrap {
      margin: 0 j(11) 0 j(2);
      @extend %logo-wrap;
    }
  }

  // 点击广告样式
  &-action {
    @extend %flex-middle;
    margin-left: j(2);

    &-desc {
      color: rgba(0, 0, 0, 0.7);
      font-size: j(13);
    }

    &-steps {
      margin-left: j(2);
    }
  }

  // 去除点击竖线
  :deep(.progress .line.solid:after) {
    display: none;
  }
}
</style>
