<template>
  <div class="official-account" @click="onBrowseDetail">
    <div class="official-account-title">
      <div class="logo-wrap">
        <p class="logo">
          <WlPic :src="logo" />
        </p>
      </div>
      <span>在腾讯</span>
    </div>
    <AdvTitle :text="adv_title" />
    <media :data="media_data" v-if="media_data.photo_url" />
    <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 AdvTitle from "../../Common/AdvTitle/index.vue";
import { official_account_logo } from "@RecordCard/utils/cdn";
import BrowseSteps from "@RecordCard/components/Common/BrowseSteps/index.vue";
import Device from "@RecordCard/components/Common/Device/index.vue";
export default {
  name: "OfficialAccountAdv",
  components: {
    Media,
    WlPic,
    Device,
    BrowseSteps,
    AdvTitle,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    adv_title() {
      const title_dict = {
        AD_TENCENT_STREAM: "点击 广告",
        AD_TENCENT_WECHAT: "点击 公众号与小程序广告",
      };
      return title_dict[this.data.history_type]
    }
  },
  data() {
    return {
      logo: official_account_logo,
      isCreative: false,
      keywords: "",
      media_data: {},
      user_info: {},
      device_info: {},
      equipment: "",
    };
  },
  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.user_info = user_info;
      }
      this.keywords = keywords;
      this.isCreative = Object.keys(creative).length > 0;
      const { pics = [], button_text, description } = creative;
      const pic = pics.length > 0 ? pics[0] : "";
      this.media_data = {
        photo_url: pic,
        photo_href: url,
        button_text,
        description,
      };
      this.device_info = {
        ip_location,
        equipment_name: use_environment,
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.official-account {
  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>
