<template>
  <div class="root_container">
    <div class="header">
      <div class="header_tips">
        用户ID是区分APP的，请选择正确的APP后进行用户ID的搜索
      </div>
      <div class="search_container">
        <div>
          <el-input
            placeholder="请输入用户ID"
            v-model="searchContent"
            @change="onDoSearch"
            class="input-with-select"
          >
            <el-select
              v-model="appValue"
              slot="prepend"
              placeholder="请选择APP"
            >
              <el-option
                v-for="item in appList"
                :key="item.app_id"
                :label="item.app_name"
                :value="item.app_id"
              ></el-option>

            </el-select>
            <el-button
              slot="append"
              @click="onDoSearch"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
        <div style="margin-top:20px">
          <el-tag
            @click="onTagClick(tag.name)"
            @close="onTagClose(tag.name)"
            closable
            v-for="tag in tags"
            :key="tag.name"
            :type="tag.type"
          >
            {{tag.name}}
          </el-tag>
        </div>
      </div>
    </div>
    <div class="table_container">
      <ul
        class="table_content"
        v-if="searchResult"
      >
        <li
          class="table_item"
          v-for="(value,key) in searchResult"
          :key="key"
        >
          <div class="item_content">
            <span class="item_title">
              {{key}}
            </span>
            <span class="item_content">
              {{value || "未上报"}}
              <template v-if="key == 'IP地址' && value">
                <el-popover
                  placement="bottom"
                  title="该IP来自"
                  width="200"
                  @show="doSearchIpInfo(value)"
                  trigger="click"
                  :content="ipInfo"
                >
                  <span
                    slot="reference"
                    class="clickable"
                  >查看</span>
                </el-popover>
              </template>

              <template v-if="key == '唯一ID' && value">
                  <span
                    v-clipboard:copy="unique_id"  v-clipboard:success="onCopy"
                    slot="reference"
                    class="clickable"
                  >复制</span>
              </template>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { searchDeviceInfo, searchIpInfo } from "../../api/log/user";
import { getAppList } from "./../../api/log/app";
import localStore from "./../../utils/localstorage";
import { Message } from "element-ui";
export default {
  data() {
    return {
      //搜索的内容
      searchContent: "",
      //选择的app
      appValue: "",

      //app列表
      appList: [],

      //搜索结果
      searchResult: "",

      tags: [],

      //存储ip信息
      ipInfo: "",

      //本地存储唯一id
      unique_id: ""
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50 + "px";
    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50 + "px";

    //获取app列表
    this.onObtainAppList();

    //获取一下搜索记录
    this.showHistory();
  },
  methods: {
    //复制成功
    onCopy(){
      Message.success("复制成功")
    },
    //保存记录到列表中
    addToHistory(val) {
      if (!val) return;
      var history = localStore.getStorage("device_search_history");
      if (!history) {
        history = [];
      }
      //看下history里面有没有
      if (history.indexOf(val) == -1) {
        //没有找到
        history.push(val);
        localStore.saveStorage("device_search_history", history);
        this.showHistory();
      }
    },
    //删除历史记录
    deleteHistory(val) {
      var history = localStore.getStorage("device_search_history");
      if (history) {
        history.splice(history.indexOf(val), 1);
        localStore.saveStorage("device_search_history", history);
        this.showHistory();
      }
    },
    //获取ip信息
    doSearchIpInfo(ip) {
      this.ipInfo = "获取中...";
      searchIpInfo(ip)
        .then((result) => {
          this.ipInfo = result.data.data.desc;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除tag
    onTagClose(val) {
      this.deleteHistory(val);
    },
    //点击tag
    onTagClick(val) {
      this.searchContent = val;
      this.onDoSearch();
    },
    //显示历史消息信息
    showHistory() {
      var history = localStore.getStorage("device_search_history");
      this.tags = [];
      if (history) {
        history.forEach((element) => {
          this.tags.push({
            name: element,
            type: "info",
          });
        });
      }
    },
    //获取app列表
    onObtainAppList() {
      getAppList()
        .then((result) => {
          this.appList = result.data.data;
          if (this.appList.length > 0) {
            this.appValue = this.appList[0].app_id;
          }
          if (this.$route.query.user_id) {
            this.searchContent = this.$route.query.user_id;
            this.onDoSearch();
          }
        })
        .catch((err) => {});
    },
    onDoSearch() {
      if (!this.searchContent) return;
      if (!this.appValue) {
        Message.warning("请先选择APP");
        return;
      }
      //执行搜索
      this.searchResult = "";
      this.addToHistory(this.searchContent);
      searchDeviceInfo(this.searchContent, this.appValue)
        .then((result) => {
          console.log(result);
          //组装信息
          this.unique_id = result.data.data.unique_id;
          this.searchResult = {
            用户ID: result.data.data.user_id,
            APP信息: result.data.data.app_info,
            APP渠道: result.data.data.channel,
            设备品牌: result.data.data.device_brand,
            设备硬件: result.data.data.device_hardware,
            设备型号: result.data.data.device_model,
            运行内存: result.data.data.memory_size,
            网络状态: result.data.data.network_state,
            存储空间: result.data.data.storage_size,
            物理尺寸: result.data.data.physics_size,
            屏幕分辨率: result.data.data.screen_size,
            唯一ID:
              result.data.data.unique_id.length > 26
                ? result.data.data.unique_id.substring(0, 26) + "..."
                : result.data.data.unique_id,
            IP地址: result.data.data.ip,
            系统版本: result.data.data.system_version,
            更新时间: result.data.data.add_time,
            更多功能: "敬请期待~",
          };
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}
.header {
  margin-left: 18px;
  margin-top: 18px;
  padding-bottom: 18px;
  position: relative;
}
.el-select {
  width: 130px;
}
.search_container {
  width: 50%;
  margin: 40px auto 20px;
}
.header_tips {
  font-size: 12px;
  padding-bottom: 10px;
  display: inline-block;
  color: #97a1af;
}
.table_container ul,
.table_container li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.table_container .table_content {
  width: 70%;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #e7e7e7;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
}
.table_item {
  flex: 50%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  color: #666;
  border-bottom: 1px solid #e7e7e7;
  font-size: 16px;
}
.el-tag {
  margin-bottom: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.item_content {
  display: flex;
}
.item_content span {
  display: inline-block;
}
.item_title {
  font-weight: 700;
  flex: 30%;
  background-color: #f6f6f6;
}
.table_content .item_content {
  flex: 70%;
  color: #999;
}
.clickable {
  cursor: pointer;
  color: #409eff;
}
</style>