<template>
  <div
      class="entity-explorer"
      :class="{'entity-explorer--show-list': showList}">
    <!-- 顶部工具栏，在列表页显示 -->
<!--    <div class="explorer-top-tools explorer-top-tools-new" v-show="showList">-->
<!--      <div class="explorer-detection-top-tools">-->
<!--        <div class="explorer-top-tools-title">{{$t('network.entity')}}</div>-->
<!--      </div>-->
<!--      <div class="explorer-top-tools">-->
<!--        <DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>-->
<!--        <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>-->
<!--        <el-button-group size="mini">-->
<!--          <el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>-->
<!--          <el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>-->
<!--        </el-button-group>-->
      <div class="explorer-top-tools" v-show="showList">
        <DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
        <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
        <el-button-group size="mini">
          <el-button size="mini" @click="setListMode('list')" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
          <el-button size="mini" @click="setListMode('block')" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
        </el-button-group>
      </div>
<!--    </div>-->
    <!-- 搜索组件 -->
    <explorer-search
        ref="search"
        :class="{'explorer-search--show-list': showList}"
        :show-list="showList"
        @search="search"
    ></explorer-search>

    <!--todo静态数据，之后记得修改-->
<!--    <div class="explorer-result" v-if="showList">-->
<!--      8,866 results，IP 2666，Domain 3200，APP 3000-->
<!--    </div>-->
    <!-- 内容区 -->
    <div class="explorer-container" v-if="showList"  style="height: calc(100% - 20px); flex-direction: column">
      <div style="display: flex; height: auto;">
        <entity-filter
            :filter-data="filterData"
            :loading-left="loadingLeft"
            :q="q"
            :time-filter="timeFilter"
            @filter="filter"
        ></entity-filter>
        <entity-list
            :list-data="listData"
            :list-mode="listMode"
            :pageObj="pageObj"
            :time-filter="timeFilter"
            @pageSize="pageSize"
            @pageNo="pageNo"
            :loading="listLoading"
        ></entity-list>
      </div>
    </div>
    <div class="explorer-foot" v-else>
      <div>
        <el-divider direction="vertical"></el-divider>
        <div class="entity-overview">
          <div class="overview-left">
            <span class="overview-left-loading">
              <loading :loading="loadingApp"></loading>
              <span class="overview-left-loading-span">{{entityAppTotal}}</span>
            </span>
            <span class="overview-left-span">APP</span>
          </div>
          <div class="overview-right">
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
              <div class="right-label-loading">
                <loading :loading="loadingAppNew" size="small"></loading>
                <div class="right-value">{{entityAppNew}}</div>
              </div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
              <div class="right-label-loading">
                <loading :loading="loadingAppActive" size="small"></loading>
                <div class="right-value">{{entityAppActive}}</div>
              </div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="entity-overview">
          <div class="overview-left">
            <span class="overview-left-loading">
              <loading :loading="loadingDomain"></loading>
              <span class="overview-left-loading-span">{{entityDomainTotal}}</span>
            </span>
            <span class="overview-left-span">DOMAIN</span>
          </div>
          <div class="overview-right">
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
              <div class="right-label-loading">
                <loading :loading="loadingDomainNew" size="small"></loading>
                <div class="right-value">{{entityDomainNew}}</div>
              </div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
              <div class="right-label-loading">
                <loading :loading="loadingDomainActive" size="small"></loading>
                <div class="right-value">{{entityDomainActive}}</div>
              </div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="entity-overview">
          <div class="overview-left">
            <span class="overview-left-loading">
              <loading :loading="loadingIp"></loading>
              <span class="overview-left-loading-span">{{entityIpTotal}}</span>
            </span>
            <span class="overview-left-span">IP</span>
          </div>
          <div class="overview-right">
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
              <div class="right-label-loading">
                <loading :loading="loadingIpNew" size="small"></loading>
                <div class="right-value">{{entityIpNew}}</div>
              </div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
              <div class="right-label-loading">
                <loading :loading="loadingIpActive" size="small"></loading>
                <div class="right-value">{{entityIpActive}}</div>
              </div>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import ExplorerSearch from '@/views/entityExplorer/search/ExplorerSearch'
import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
import EntityFilter from '@/views/entityExplorer/EntityFilter'
import EntityList from '@/views/entityExplorer/entityList/EntityList'
import { entityType, defaultPageSize, riskLevelMapping } from '@/utils/constants'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getNowTime, getSecond } from '@/utils/date-util'
import { ref } from 'vue'
import _ from 'lodash'
import Loading from '@/components/common/Loading'
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
import Parser from '@/components/advancedSearch/meta/parser'
import { handleErrorTip } from '@/components/advancedSearch/meta/error'
import { columnList } from '@/utils/static-data'
import { useRoute } from 'vue-router'

export default {
  name: 'entity-explorer',
  components: {
    Loading,
    ExplorerSearch,
    DateTimeRange,
    TimeRefresh,
    EntityFilter,
    EntityList
  },
  data () {
    return {
      showList: false,
      listMode: 'list', // entity列表的模式，list|block

      entityAppTotal: '-',
      entityAppNew: '-',
      entityAppActive: '-',

      entityDomainTotal: '-',
      entityDomainNew: '-',
      entityDomainActive: '-',

      entityIpTotal: '-',
      entityIpNew: '-',
      entityIpActive: '-',

      pageObj: {
        pageNo: 1,
        // 是否重置pageNo，在执行新搜索时是true
        resetPageNo: true,
        pageSize: defaultPageSize,
        total: 0
      },
      filterData: [
        {
          type: 'ip',
          title: entityType.ip,
          totalCount: 0,
          data: [
            {
              label: this.$t('overall.country'),
              column: 'countryDistinctCount',
              topColumn: 'ip_location_country', // top弹框查询字段
              icon: 'cn-icon cn-icon-country',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('overall.province'),
              column: 'provinceDistinctCount',
              topColumn: 'ip_location_province', // top弹框查询字段
              icon: 'cn-icon cn-icon-position',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('overall.city'),
              column: 'cityDistinctCount',
              topColumn: 'ip_location_city', // top弹框查询字段
              icon: 'cn-icon cn-icon-city',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('entities.asn'),
              column: 'asnDistinctCount',
              topColumn: 'ip_asn', // top弹框查询字段
              icon: 'cn-icon cn-icon-cloud',
              showTopTen: false,
              value: 0
            }
          ]
        },
        {
          type: 'app',
          title: entityType.app,
          totalCount: 0,
          data: [
            {
              label: this.$t('entities.category'),
              column: 'categoryDistinctCount',
              topColumn: 'app_category', // top弹框查询字段
              icon: 'cn-icon cn-icon-category',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('entities.subcategory'),
              column: 'subcategoryDistinctCount',
              topColumn: 'app_subcategory', // top弹框查询字段
              icon: 'cn-icon cn-icon-sub-category',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('entities.risk'),
              column: 'riskDistinctCount',
              topColumn: 'app_risk', // top弹框查询字段
              icon: 'cn-icon cn-icon-risk',
              showTopTen: false,
              value: 0
            }
          ]
        },
        {
          type: 'domain',
          title: entityType.domain,
          totalCount: 0,
          data: [
            {
              label: this.$t('entities.domainDetail.categoryGroup'),
              column: 'categoryGroupDistinctCount',
              topColumn: 'domain_category_group', // top弹框查询字段
              icon: 'cn-icon cn-icon-category',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('entities.category'),
              column: 'categoryDistinctCount',
              topColumn: 'domain_category', // top弹框查询字段
              icon: 'cn-icon cn-icon-sub-category',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('entities.reputationLevel'),
              column: 'reputationLevelDistinctCount',
              topColumn: 'domain_reputation_level', // top弹框查询字段
              icon: 'cn-icon cn-icon-credit',
              showTopTen: false,
              value: 0
            }
          ]
        },
        {
          type: 'dns',
          title: this.$t('dns.dnsServer'),
          totalCount: 0,
          osTotalCount: 0,
          orgTotalCount: 0,
          softwareTotalCount: 0,
          data: [
            {
              label: this.$t('overall.dnsServerInfo.role'),
              column: 'dnsServerRoleCount',
              topColumn: 'dns_server_role',
              icon: 'cn-icon cn-icon-role',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('dns.managementOrganization'),
              column: 'dnsServerOrgCount',
              topColumn: 'dns_server_org',
              icon: 'cn-icon cn-icon-org',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('overall.dnsServerInfo.software'),
              column: 'dnsServerSoftwareCount',
              topColumn: 'dns_server_software',
              icon: 'cn-icon cn-icon-software',
              showTopTen: false,
              value: 0
            },
            {
              label: this.$t('overall.dnsServerInfo.system'),
              column: 'dnsServerOsCount',
              topColumn: 'dns_server_os',
              icon: 'cn-icon cn-icon-os',
              showTopTen: false,
              value: 0
            }
          ]
        }
      ],
      listData: [],
      q: '',
      metaList: [],
      limitFilterType: true, // 是否限定了filter的类型
      listLoading: false,
      // 实体详情搜索页面 底部列表
      loadingApp: false,
      loadingDomain: false,
      loadingIp: false,
      // New
      loadingAppNew: false,
      loadingDomainNew: false,
      loadingIpNew: false,
      // Active
      loadingAppActive: false,
      loadingDomainActive: false,
      loadingIpActive: false,

      // 实体详情列表页面 左侧筛选条件
      loadingLeft: false,
      initFlag: false, // 初始化标志，避免初始化时pageSize和pageNo会调用搜索
      timer: null // 初始化标志的延时器，需要销毁
    }
  },
  methods: {
    timeRefreshChange () {
      if (!this.$refs.dateTimeRange.isCustom) {
        const value = this.timeFilter.dateRangeValue
        this.$refs.dateTimeRange.quickChange(value)
      }
    },
    reload (s, e, v) {
      this.dateTimeRangeChange(s, e, v)
    },
    // methods
    dateTimeRangeChange (s, e, v) {
      this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
    },
    // sql特殊字段转换
    specialColumnHandle (sql) {
      const columns = [
        {
          target: "app_risk='1'",
          original: `app_risk='${riskLevelMapping[0].name.toLowerCase()}'`
        },
        {
          target: "app_risk='2'",
          original: `app_risk='${riskLevelMapping[1].name.toLowerCase()}'`
        },
        {
          target: "app_risk='3'",
          original: `app_risk='${riskLevelMapping[2].name.toLowerCase()}'`
        },
        {
          target: "app_risk='4'",
          original: `app_risk='${riskLevelMapping[3].name.toLowerCase()}'`
        },
        {
          target: "app_risk='5'",
          original: `app_risk='${riskLevelMapping[4].name.toLowerCase()}'`
        },
        {
          target: "=''",
          original: "='unknown'"
        }
      ]
      let result = sql
      columns.forEach(c => {
        result = _.replace(result, c.original, c.target)
      })
      return result
    },
    search (param) {
      let q
      let metaList
      if (param) {
        q = param.q
        metaList = param.metaList
      }
      if (q) {
        this.q = this.specialColumnHandle(q)
        this.metaList = metaList
      } else {
        this.q = ''
        this.metaList = []
      }

      // 在非列表模式下选择tag模式，在地址栏输入内容时将mode添加到地址栏
      const mode = this.$route.query.mode || 'text'

      this.reloadUrl({
        listMode: this.listMode,
        q: q,
        mode: mode,
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime)
      })

      if (!this.showList) {
        // 首页进入搜索时重载页面，视觉上进入列表页面
        this.$router.push({
          path: '/entityExplorer',
          query: {
            listMode: this.listMode,
            q: q,
            mode: mode,
            startTime: getSecond(this.timeFilter.startTime),
            endTime: getSecond(this.timeFilter.endTime)
          }
        })
        this.showList = true
        // 跳转页面，则不执行搜索功能
        return true
      }
      if (this.pageObj.resetPageNo) {
        this.pageObj.pageNo = 1
      } else {
        this.pageObj.resetPageNo = true
      }
      // 带参数时，只查询对应类型的entity；不带参数时，3种entity都查
      if (q) {
        // entity_type处理，不查其他两种entity_type对应的左侧筛选
        const entityTypeMeta = metaList.find(meta => {
          return meta.column && meta.column.name === 'entity_type'
        })
        if (entityTypeMeta && entityTypeMeta.operator.value === '=') {
          let entityType = ''
          this.limitFilterType = false
          if (entityTypeMeta.value.value.toLowerCase() === 'ip') {
            this.limitFilterType = true
            entityType = 'ip'
          } else if (entityTypeMeta.value.value.toLowerCase() === 'domain') {
            this.limitFilterType = true
            entityType = 'domain'
          } else if (entityTypeMeta.value.value.toLowerCase() === 'app') {
            this.limitFilterType = true
            entityType = 'app'
          } else {
            this.limitFilterType = false
          }
          this.queryFilter({ entityType: entityType, q: this.q, ...this.timeFilter })
          if (entityType === 'ip') {
            this.queryFilter({ entityType: 'dns', q: this.q, ...this.timeFilter })
          }
          this.queryList({ q: this.q, ...this.pageObj, ...this.timeFilter })
          this.queryListTotal({ q: this.q, ...this.timeFilter })
        } else {
          this.limitFilterType = false
          this.queryFilter({ entityType: 'ip', q: this.q, ...this.timeFilter })
          this.queryFilter({ entityType: 'domain', q: this.q, ...this.timeFilter })
          this.queryFilter({ entityType: 'app', q: this.q, ...this.timeFilter })
          this.queryFilter({ entityType: 'dns', q: this.q, ...this.timeFilter })
          this.queryList({ q: this.q, ...this.pageObj, ...this.timeFilter })
          this.queryListTotal({ q: this.q, ...this.timeFilter })
        }
      } else {
        this.limitFilterType = false
        this.queryFilter({ entityType: 'ip', ...this.timeFilter })
        this.queryFilter({ entityType: 'app', ...this.timeFilter })
        this.queryFilter({ entityType: 'domain', ...this.timeFilter })
        this.queryFilter({ entityType: 'dns', ...this.timeFilter })
        this.queryList({ ...this.pageObj, ...this.timeFilter })
        this.queryListTotal({ ...this.timeFilter })

        // 延时一秒，避免初始化时pageSize为20，pageNo为1也会调用“搜索”的情况
        if (!this.initFlag) {
          this.timer = setTimeout(() => {
            this.initFlag = true
          }, 1000)
        }
      }
    },
    pageSize (val) {
      this.pageObj.pageSize = val
      if (this.initFlag) {
        this.search({ metaList: this.metaList, q: this.q })
      } else {
        if (val !== 20) {
          this.search({ metaList: this.metaList, q: this.q })
        }
      }
    },
    pageNo (val) {
      this.pageObj.pageNo = val
      this.pageObj.resetPageNo = false
      if (this.initFlag) {
        this.search({ metaList: this.metaList, q: this.q })
      } else {
        if (val !== 1) {
          this.search({ metaList: this.metaList, q: this.q })
        }
      }
    },
    // 点击上一页箭头
    prev () {
      this.scrollbarToTop()
    },
    // 点击下一页箭头
    next () {
      this.scrollbarToTop()
    },
    // currentPage 改变时会触发
    current (val) {
      this.$emit('pageNo', val)
      this.scrollbarToTop()
    },
    scrollbarToTop () {
      this.$nextTick(() => {
        const wraps = document.querySelector('#entityList')
        wraps.scrollTop = 0
      })
    },
    /* filter组件内点击后查询 */
    filter (name, topData) {
      const params = {
        column: topData.topColumn,
        operator: '=',
        value: name
      }
      this.$refs.search.addParams([params])
      this.$nextTick(() => {
        this.emitter.emit('advanced-search')
      })
    },
    /* 查询filter数据 */
    queryFilter (params) {
      const queryParams = {
        ...params,
        startTime: getSecond(params.startTime),
        endTime: getSecond(params.endTime)
      }
      this.loadingLeft = true
      get(api.entityFilter, queryParams).then(response => {
        if (response.code === 200 && response.data && response.data.result) {
          switch (params.entityType) {
            case 'ip': {
              this.filterData[0].data.forEach(d => {
                d.value = response.data.result[d.column] || 0
              })
              this.filterData[0].totalCount = response.data.result.count
              if (this.limitFilterType) {
                this.cleanFilterData(1)
                this.cleanFilterData(2)
              }
              break
            }
            case 'app': {
              this.filterData[1].data.forEach(d => {
                d.value = response.data.result[d.column] || 0
              })
              this.filterData[1].totalCount = response.data.result.count
              if (this.limitFilterType) {
                this.cleanFilterData(0)
                this.cleanFilterData(2)
                this.cleanFilterData(3)
              }
              break
            }
            case 'domain': {
              this.filterData[2].data.forEach(d => {
                d.value = response.data.result[d.column] || 0
              })
              this.filterData[2].totalCount = response.data.result.count
              if (this.limitFilterType) {
                this.cleanFilterData(0)
                this.cleanFilterData(1)
                this.cleanFilterData(3)
              }
              break
            }
            case 'dns': {
              this.filterData[3].data.forEach(d => {
                d.value = response.data.result[d.column] || 0
              })
              this.filterData[3].totalCount = response.data.result.count
              this.filterData[3].osTotalCount = response.data.result.osTotalCount
              this.filterData[3].orgTotalCount = response.data.result.orgTotalCount
              this.filterData[3].softwareTotalCount = response.data.result.softwareTotalCount
              break
            }
          }
          this.loadingLeft = false
        } else {
          this.loadingLeft = false
        }
      })
    },
    queryList (params) {
      this.listLoading = true
      const queryParams = {
        ...params,
        startTime: getSecond(params.startTime),
        endTime: getSecond(params.endTime)
      }
      get(api.entityList, queryParams).then(response => {
        if (response.code === 200) {
          this.listData = []
          this.$nextTick(() => {
            this.listData = response.data.result
          })
        } else {
          console.error(response.message)
          this.$message.error(response.message)
        }
      }).finally(() => {
        this.listLoading = false
      })
    },

    queryListTotal (params) {
      const queryParams = {
        ...params,
        startTime: getSecond(params.startTime),
        endTime: getSecond(params.endTime)
      }
      get(api.entityListTotal, queryParams).then(response => {
        if (response.code === 200) {
          this.pageObj.total = response.data.result
        }
      })
    },
    handleQ (params) {
      return Object.keys(params).map(param => {
        return `${param}='${params[param]}'`
      }).join(' AND ')
    },

    getEntityIndexData () {
      const now = window.$dayJs.tz().valueOf()
      const timeFilter = {
        startTime: parseInt(now / 1000 - 3600),
        endTime: parseInt(now / 1000)
      }
      // Total
      this.loadingApp = true
      this.loadingDomain = true
      this.loadingIp = true
      // New
      this.loadingAppNew = true
      this.loadingDomainNew = true
      this.loadingIpNew = true
      // Active
      this.loadingAppActive = true
      this.loadingDomainActive = true
      this.loadingIpActive = true

      get(api.entityTotal, { entityType: 'app' }).then(response => {
        if (response.code === 200) {
          this.entityAppTotal = response.data.result
        }
        this.loadingApp = false
      })
      get(api.entityTotal, { entityType: 'domain' }).then(response => {
        if (response.code === 200) {
          this.entityDomainTotal = response.data.result
        }
        this.loadingDomain = false
      })
      get(api.entityTotal, { entityType: 'ip' }).then(response => {
        if (response.code === 200) {
          this.entityIpTotal = response.data.result
        }
        this.loadingIp = false
      })
      // New
      get(api.entityNew, { entityType: 'app', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityAppNew = response.data.result
        }
        this.loadingAppNew = false
      })
      get(api.entityNew, { entityType: 'domain', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityDomainNew = response.data.result
        }
        this.loadingDomainNew = false
      })
      get(api.entityNew, { entityType: 'ip', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityIpNew = response.data.result
        }
        this.loadingIpNew = false
      })
      // Active
      get(api.entityActive, { entityType: 'app', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityAppActive = response.data.result
        }
        this.loadingAppActive = false
      })
      get(api.entityActive, { entityType: 'domain', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityDomainActive = response.data.result
        }
        this.loadingDomainActive = false
      })
      get(api.entityActive, { entityType: 'ip', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityIpActive = response.data.result
        }
        this.loadingIpActive = false
      })
    },
    cleanFilterData (index) {
      this.filterData[index].data.forEach(d => {
        d.value = 0
      })
      this.filterData[index].totalCount = 0
    },
    setListMode (mode) {
      this.listMode = mode
      const newParam = {
        listMode: mode
      }
      this.reloadUrl(newParam)
    },
    /**
     * 向地址栏添加/删除参数
     */
    reloadUrl (newParam, clean) {
      const { query } = this.$route
      let newUrl = urlParamsHandler(window.location.href, query, newParam)
      if (clean) {
        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
      }
      overwriteUrl(newUrl)
    },
    /**
     * 初始化搜索，分享url或者刷新界面，保留本次搜索结果
     * @param q
     */
    initSearch (q) {
      const str = q
      // 此处的mode不做text和tag区分，是因为text和tag构造搜索参数过程不一样，但结果的参数一致
      // 故采用text的参数形式进行搜索，tag形式在tagMode.vue的mounted里根据地址栏的参数q构造metaList
      if (str) {
        const parser = new Parser(columnList)
        const errorList = parser.validateStr(str)
        if (_.isEmpty(errorList)) {
          this.search(parser.parseStr(str))
        } else {
          this.$message.error(handleErrorTip(errorList[0]))
        }
      } else {
        this.search({ q: '', str: '', metaList: [] })
      }
    }
  },
  mounted () {
    this.getEntityIndexData()
    const { q, listMode } = this.$route.query

    // 如果地址栏有listMode，即列表页，并非首页，则开始搜索
    if (listMode) {
      this.showList = true
      this.initSearch(q)
      this.listMode = listMode
    }
  },
  watch: {
    timeFilter () {
      this.search({ metaList: this.metaList, q: this.q })
    }
  },
  setup () {
    const { query } = useRoute()
    // 获取url携带的range、startTime、endTime
    const rangeParam = query.range
    const startTimeParam = query.startTime
    const endTimeParam = query.endTime
    // 若url携带了，使用携带的值，否则使用默认值。
    const dateRangeValue = rangeParam ? parseInt(query.range) : 60
    const timeFilter = ref({ dateRangeValue })
    if (!startTimeParam || !endTimeParam) {
      const { startTime, endTime } = getNowTime(60)
      timeFilter.value.startTime = startTime
      timeFilter.value.endTime = endTime
    } else {
      timeFilter.value.startTime = parseInt(startTimeParam)
      timeFilter.value.endTime = parseInt(endTimeParam)
    }
    timeFilter.value.dateRangeValue = 60
    return {
      timeFilter
    }
  },
  beforeUnmount () {
    clearTimeout(this.timer)
  }
}
</script>
