<template>
  <div class="market-search">
    <div class="card">
      <LogoOrDot
        point="icon"
        :icon_url="`https://wlmvp-cos.weiling.cn/ico/${search_engine}.png`"
        :need_arrow="true"
        line_style="solid"
      />
      <div class="content">
        <p class="title">{{ name }}</p>
      </div>
    </div>
    <div class="card" v-for="(item, index) in child_list" :key="index">
      <LogoOrDot
        point="dot"
        :need_arrow="true"
        line_style="dotted"
        :is_last="child_list.length - 1 === index"
      />
      <div class="record">
        <p class="title">
          <span>浏览{{ browse }}</span>
          <a :href="item.url" target="_blank" class="duration">{{ item.title }}</a>
          <span>{{ item.duration }}</span>
        </p>
        <p class="time">{{ item.create_time }}</p>
      </div>
    </div>
    <div class="equipment" v-if="equipment">{{ equipment }}</div>
  </div>
</template>

<script>
/**
 * 信息流广告
 */
import LogoOrDot from "@RecordCard/components/Common/LogoOrDot/index.vue";
import { formatMoment, formatSeconds } from "@RecordCard/utils/utils";
export default {
  name: "MarketFormSearch",
  components: { LogoOrDot },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      name: "",
      browse: "",
      equipment: "",
      child_list: [],
      search_engine: "",
    };
  },
  watch: {
    data: {
      handler(val) {
        const { web_site_his = {} } = val;
        const {
          child = [],
          name,
          browse = "",
          platform_id = "",
          use_environment: equipment = "",
        } = web_site_his;
        this.name = name;
        this.browse = browse;
        const search_engine_dict = {
          1: "baidu",
          2: "sougou",
          3: "360",
          4: "toutiao",
          5: "tencent",
          6: "kuaishou",
          7: "shenma",
        };
        this.equipment = equipment;
        this.search_engine = search_engine_dict[platform_id];
        this.child_list = child.map((res) => {
          const { web_site_his_child = {} } = res;
          const { duration = 0, create_time = 0 } = web_site_his_child;
          return {
            ...web_site_his_child,
            duration: formatSeconds(duration),
            create_time: formatMoment(create_time, "MM月DD日 HH:mm:ss"),
          };
        });
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.market-search {
  width: 100%;
  padding: j(10) 0 j(8);
  .card {
    display: flex;
    .content {
      flex: 1;
      color: var(--wl-text-color-title-1, #0e0e0e);
      padding-bottom: j(12);
      .title {
        font-size: j(15);
        line-height: j(24);
        @include textEllipsis(1);
      }
    }
    .record {
      .title {
        font-size: j(13);
        color: rgba(0, 0, 0, 0.7);
        .duration {
          padding: 0 j(5);
        }
      }
      .time {
        font-size: j(12);
        color: var(--wl-text-color-placeholder, #c1c1c1);
      }
    }
  }
  .equipment {
    position: relative;
    margin-top: j(8);
    padding-top: j(8);
    padding-left: j(34);
    font-size: j(12);
    @include halfBorder("top", #dcdcdc);
  }
}
</style>
