<template>
  <div class="browse-steps">
    <div class="card" v-if="!is_clue_transport">
      <div class="card-content">
        <div class="statistics">
          <LogoOrDot point="dot" :need_arrow="false" line_style="solid" :need_line="false" />
          <p class="statistics-title">
            <template v-if="browser_state !== 1">
              <span class="total-page">共{{ page_count }}个页面</span>
              <span v-if="accum_duration && !is_clue_transport">
                累积
                <template v-if="is_over">超过</template>
                {{ accum_duration }}
              </span>
            </template>
            <template v-else> 浏览详情统计中 </template>
          </p>
        </div>
      </div>
    </div>
    <div class="card" v-if="is_clue_transport && landing_url">
      <LogoOrDot point="dot" :need_arrow="false" line_style="solid" :need_line="false" />
      <div class="card-content">
        <p class="title">
          浏览
          <a :href="landing_url" target="_blank" class="duration">{{ web_name }}</a>
        </p>
      </div>
    </div>
    <template v-if="child_list.length > 0 && !is_clue_transport">
      <div class="card" v-for="(item, index) in child_list" :key="index">
        <div class="record">
          <p class="title">
            <span>浏览</span>
            <a :href="item.url" target="_blank" class="duration">{{ item.title }}</a>
            <span v-if="!is_clue_transport">{{ item.duration }}</span>
          </p>
          <p class="time" v-if="!is_clue_transport">{{ item.create_time }}</p>
        </div>
      </div>
    </template>
    <MoreDetail v-if="child_list.length >= 3" />
  </div>
</template>

<script>
/**
 * 浏览网页的步骤
 */
import LogoOrDot from "../LogoOrDot/index.vue";
import MoreDetail from "./components/MoreDetail/index.vue";
import { formatMoment, formatSeconds } from "@RecordCard/utils/utils";
export default {
  name: "BrowseSteps",
  components: {
    LogoOrDot,
    MoreDetail,
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      is_over: false,
      is_clue_transport: false, //是否是线索转发
      company_logo: "",
      browser_state: "",
      page_count: "",
      accum_duration: "",
      landing_url: "", //广告落地页
      child_list: [],
    };
  },
  watch: {
    data: {
      handler(val) {
        const { web_site_his = {}, duration: total_duration } = val;
        const {
          name = "",
          url = "",
          child = [],
          over,
          count = 0,
          state,
          logo = "",
          display_type,
        } = web_site_his;
        const accum_duration = formatSeconds(total_duration, false);
        const 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"),
          };
        });
        this.is_clue_transport = display_type === 3;
        this.is_over = over === 1 ? true : false;
        this.company_logo = logo;
        this.browser_state = state;
        this.page_count = count;
        this.accum_duration = accum_duration;
        this.landing_url = url; //广告落地页
        this.child_list = child_list;
        this.web_name = name || "广告落地页";
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.browse-steps {


  .card {
    @extend %flex-middle;
    padding-bottom: $up-down-spacing;

    &:not(:first-child) {
      padding-top: $left-right-spacing;
    }

    .card-content {
      flex: 1;
      color: var(--wl-text-color-title-1, #0e0e0e);

      .title {
        font-size: j(15);
        line-height: j(24);
        @include textEllipsis(1);
      }

      .statistics {
        font-size: j(13);
        font-weight: 500;
        color: var(--wl-warning-color, #ff9444);
        line-height: j(24);
        @extend %flex-middle;

        &-title {
          @include textEllipsis(1);

        }

        .total-page {
          margin-right: j(5);
        }
      }

      .search-box {
        padding: j(8) 0;
      }
    }

    &:not(:last-child) {
      .record {
        padding-bottom: j(8);
      }
    }

    .record {
      .title {
        color: var(--wl-text-color-title-2, #303233);
        font-size: j(13);
        margin-bottom: j(5);

        .duration {
          padding: 0 j(5);
        }
      }

      .link {
        color: var(--wl-primary-color, #1c9fff);
        word-break: break-all;
        @include textEllipsis(1);
        margin: j(5) 0 j(3) 0;
        cursor: pointer;
      }

      .time {
        font-size: j(12);
        color: var(--wl-text-color-placeholder, #c1c1c1);
      }
    }
  }
}
</style>
