<template>
  <div v-if="loading" class="loading">
    <CSpinner />
    读取中...
  </div>
  <div v-else>
    <div class="alert alert-primary">
      <h4>数据统计</h4>
      <hr>
      <div>
        总文件数： {{ objects }}
      </div>
      <div>
        总数据量： {{ show_size(size) }}
      </div>
      
    </div>
    <div class="alert alert-secondary my-2">
      <h4>
        按序列码搜索
      </h4>
      <hr>
      <div>
        输入序列码（完整匹配）:
      </div>
      <input class="form-control my-2" type="text" v-model="search_code" />
      <button class="btn btn-primary" @click="search_feature">查找</button>
      <div v-if="search_error" class="alert alert-danger my-2">
        {{ search_error }}
      </div>
      <div class="my-4" v-if="search_result">
        <a :href="search_result" target="_blank">
          <div>
            {{ search_code }}
          </div>
          <div>
            <img :src="search_result" alt=""/>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CodeFeature',
  props: [],
  components: {
  },
  data: function () {
    return {
      loading: false,
      objects: 0,
      size: 0,
      search_code: '',
      search_error: '',
      search_result: null,
    };
  },
  computed: {
  },
  methods: {
    async search_feature() {
      if (!this.search_code.length) return;
      this.search_result = null;
      this.search_error = null;
      try {
        var url = "/api/v1/qr-std/?token=" + this.$root.token + "&code=" + this.search_code;
        var r = await this.$root.api_get(url);
        if (r) {
          this.search_result = url;
        } else {
          this.search_error = "没有找到序列码";
        }
      } catch (e) {
        console.log(r);
        this.search_error = "没有找到序列码";
      }
    },
    async reload() {
      this.loading = true;
      var r = await this.$root.api_get("/api/v1/qr-std-stat/");
      this.objects = r.data.objects;
      this.size = r.data.size;
      this.loading = false;
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
</style>
