<template>
  <div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="实时数据" name="real">
          <el-table :data="realData" border style="width: 100%">
            <el-table-column
              prop=""
              label="用户">
              <template slot-scope="scope">
          <span class="lblue point">
            <a target="_blank" :href="scope.row.host+'/rooter/user/'+scope.row.uid">{{
                scope.row.nickname + '(' + scope.row.uid + ')'
              }}</a>
          </span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="搜索词">
              <template slot-scope="scope">
                <span>{{ scope.row.keyword }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="设备来源">
              <template slot-scope="scope">
                <span>{{ scope.row.app_type }}-{{ scope.row.version }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="搜索时间">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.created_at, 'Y-m-d H:i') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="排名数据" name="sort">
          <div style="margin-bottom: 10px">
            <el-radio-group v-model="timeType" size="small" @change="getSortList()">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">最近7天</el-radio-button>
              <el-radio-button label="2">最近30天</el-radio-button>
              <el-radio-button label="3">最近3个月</el-radio-button>
              <el-radio-button label="4">最近6个月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="sortData" border style="width: 100%">
            <el-table-column
              prop=""
              type="index"
              width="50px"
              label="排名">
            </el-table-column>
            <el-table-column prop="create_time" label="搜索词">
              <template slot-scope="scope">
                <span>{{ scope.row.keyword }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="搜索次数">
              <template slot-scope="scope">
                <span>{{ scope.row.num }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div class="page" v-show="activeName === 'real'">
      <el-pagination
        class="order-footer"
        background
        layout="total, prev, pager, next"
        :page-size="20"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "user_search",
  data() {
    return {
      page: 1,
      total: 0,
      loading: false,
      activeName: "real",
      timeType: "0",
      realData: [],
      sortData: [],
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if (this.activeName === 'real') {
        this.getRealList();
      } else if (this.activeName === 'sort') {
        this.getSortList();
      }
    },
    async getRealList() {
      const page = this.page;
      const data = {
        page
      };
      let res = await this.$post("/api/admin/search/getSearchLog", data);
      if (res && res.status === 1) {
        this.realData = res.data.list || [];
        this.total = res.data.total * 1;
      }
    },
    async getSortList() {
      let data = {
        type: this.timeType
      }
      let res = await this.$post("/api/admin/search/getSortSearchLog", data);
      if (res && res.status === 1) {
        this.sortData = res.data || [];
        // this.total = res.data.total * 1;
      }
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    formatDate(time, format = '') {
      if (time === "0") {
        return "--";
      }
      let now = new Date(time * 1000);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (format == '' ?
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute +
          ":" +
          second
          :
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          minute
      );
    },
  }
}
</script>

<style scoped>

</style>
