new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  mounted() {
    if (
      location.href.indexOf("plugin.browse-footprint.admin.index.detail") !== -1
    ) {
      this.currentPage = "details";
      this.search.timeType = timeType;
      this.search.pageType = pageType;
      this.search.portType = pagePort;
      if (startTime && endTime) {
        this.search["time"] = [new Date(startTime), new Date(endTime)];
      }
      this.getDetails();
    } else {
      this.currentPage = "list";
      this.getFootprint();
    }
  },
  data() {
    return {
      currentPage: "list", //* 当前所在的页面 list=浏览轨迹页面 details=详情页
      indexConcept: {}, //* 指数概念
      pageType: [], //* 页面类型
      portType: [], //* 端口类型
      footprintData: [], //* 访问轨迹列表数据
      footprintPagination: {
        page: 1, //* 访问轨迹列表页数
        loading: false, //* 访问轨迹列表是否加载中
        finished: false, //* 访问轨迹列表数据是否加载完成
        total: 0, //* 访问轨迹数据总数
        per_page: 0, //*访问轨迹每页数量
      },
      detailInfo: null, //* 详情信息
      detailMemberList: [], //* 详情访问的会员数据
      detailPagination: {
        page: 1, //* 访问轨迹列表页数
        loading: false, //* 访问轨迹列表是否加载中
        finished: false, //* 访问轨迹列表数据是否加载完成
        total: 0, //* 访问轨迹数据总数
        per_page: 0, //*访问轨迹每页数量
      },
      isChangeConditions: false, //* 是否修改了搜索条件
      search: {
        //* 搜索相关
        time: null,
        timeType: 1,
        pageType: "all",
        portType: 0,
        pageUrl: "",
        sharer_info: null,
      },
      nowTime: null,
    };
  },
  methods: {
    //* 根据search对象生成请求参数
    generateRequestParams() {
      const conditions = this.search;
      const requestData = {
        search: {
          s_div_time: "",
          e_div_time: "",
          port_type: conditions.portType == 0 ? "" : conditions.portType,
          sharer_info: conditions.sharer_info,
        },
      };
      if (conditions.timeType !== null) {
        requestData.search["time_type"] = conditions.timeType;
        if (conditions.timeType == 5) {
          requestData.search.s_div_time = conditions.time[0];
          requestData.search.e_div_time = conditions.time[1];
        }
      }
      if (conditions.pageType === "all") {
        requestData.search.page_type = "";
      } else {
        requestData.search.page_type = conditions.pageType;
      }
      if (conditions.pageUrl) {
        requestData.search.url = conditions.pageUrl;
      }
      return requestData;
    },
    async fetchData(URL, requestParams) {
      return await this.$http
        .post(URL, requestParams)
        .then(function (response) {
          return response.json();
        })
        .then(({ result, data, msg }) => {
          if (result == 0) {
            this.$message({
              message: msg,
              type: "error",
            });
          }
          return data;
        })
        .catch((err) => {
          return err;
        });
    },
    getFootprint(page = null) {
      if (this.isChangeConditions) {
        this.detailPagination.page = 1;
        this.footprintPagination.page = 1;
      }
      if (typeof page != "number") {
        page = this.footprintPagination.page;
      }
      const loading = this.$loading({
        target: ".data-list",
      });
      const requestData = this.generateRequestParams();
      requestData["page"] = page;
      this.fetchData(listApi, requestData).then((res) => {
        if (!this.nowTime) {
          this.nowTime = res.now_time;
        }
        //* 分页处理
        this.footprintPagination.total = res.page_data.total;
        this.footprintPagination.per_page = res.page_data.per_page;
        this.footprintPagination.page = res.page_data.current_page;

        this.indexConcept = res.index_overview;
        this.pageType = res.page_type_arr;
        this.portType = res.port_type_arr;
        let footprint = res.list;
        let start = res.page_data.from;

        for (let i = 0; i < footprint.length; i++) {
          footprint[i]["serialNumer"] = start++;
        }
        this.footprintData = footprint;
        loading.close();
        this.footprintPagination.loading = false;
        this.isChangeConditions = false;
      });
    },
    getDetails(page = null) {
      if (this.isChangeConditions) {
        this.detailPagination.page = 1;
        this.footprintPagination.page = 1;
      }
      if (typeof page != "number") {
        page = this.detailPagination.page;
      }
      const loading = this.$loading({
        target: ".visit-member",
      });
      const requestParams = this.generateRequestParams();
      requestParams["page_type"] = pageType;
      requestParams["page_type_id"] = pageTypeId;
      delete requestParams["search"]["page_type"];
      requestParams["page"] = page;
      this.fetchData(detailsApi, requestParams).then((res) => {
        if (this.nowTime === null) {
          this.nowTime = res.nowTime;
        }
        //* 分页处理
        this.detailPagination.total = res.page_data.total;
        this.detailPagination.per_page = res.page_data.per_page;
        this.detailPagination.page = res.page_data.current_page;

        this.indexConcept = res.index_overview;
        this.portType = res.port_type_arr;
        this.detailInfo = [res.info];
        this.detailMemberList = res.list;
        this.isChangeConditions = false;
        loading.close();
      });
    },
    switchSearchTime(timeType) {
      this.search.timeType = timeType;
      this.search.time = null;
      this.isChangeConditions = true;
    },
    changeSearchTime(time) {
      if (time === null) {
        this.search.timeType = null;
        return;
      }
      this.search.timeType = 5;
      this.isChangeConditions = true;
    },
    switchPort(portType) {
      this.search.portType = portType;
      this.isChangeConditions = true;
    },
    copyLink(url) {
      const copyInputEl = document.querySelector(".copy-link input");
      copyInputEl.setAttribute("value", url);
      copyInputEl.select();
      document.execCommand("copy");
      copyInputEl.blur();
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
    exportData() {
      let url = exportUrl;
      let params = this.generateRequestParams()["search"];
      if (this.currentPage === "list") {
        params["export_type"] = "index";
      } else {
        params["export_type"] = "detail";
        params["page_type"] = pageType;
        params["page_type_id"] = pageTypeId;
      }

      for (let i in params) {
        if (params[i] || params[i] === 0) {
          url += "&" + i + "=" + params[i];
        }
      }
      if (this.currentPage === "list" && this.search.pageType == "all") {
        url += "&page_type";
      }

      window.location.href = url;
    },
    routerToDetails(itemIndex) {
      let item = this.footprintData[itemIndex];
      let params = this.generateRequestParams();
      params["search"]["page_type_id"] = item["page_type_id"];
      params["search"]["page_type"] = item["en_page_type"];
      params = params["search"];
      delete params["url"];
      let uri = [];
      for (const key in params) {
        if (params[key]) {
          uri.push(`${key}=${params[key]}`);
        } else {
          uri.push(`${key}=`);
        }
      }
      uri = uri.join("&");
      window.location.href = detailsUrl + `&${uri}`;
    },
  },
  watch: {
    "search.pageType"() {
      this.isChangeConditions = true;
    },
    "search.time"() {
      this.isChangeConditions = true;
    },
    "search.pageType"() {
      this.isChangeConditions = true;
    },
  },
});