<template>
  <div id="wrapper">
    <el-input v-model="input" :disabled="status" :autofocus="true" placeholder="请输入你快递单号，然后按回车"
              @keyup.enter.native="submit"></el-input>
    <template v-if="input">
      <el-table
        :data="result"
        border
        height="385"
        style="width: 100%;margin-top: 20px">
        <el-table-column
          prop="time"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="context"
          label="详情"
        >
        </el-table-column>
      </el-table>
    </template>
    <div class="file" v-if="!input">
      {{filePath}}
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'landing-page',
    data() {
      return {
        input: null,
        result: null,
        status: false,
        filePath: '拖动文件到这里'
      }
    },
    methods: {
      getInfo() {
        axios.get(`https://biz.trace.ickd.cn/auto/${this.input}?mailNo=${this.input}`).then(res => {
          this.result = res.data.data
          this.status = false
        })
      },
      submit() {
        this.status = true
        this.getInfo()
      },
      // 文件拖动
      dropFile() {
        document.addEventListener('drop', (e) => {
          e.preventDefault();
          e.stopPropagation();

          for (const f of e.dataTransfer.files) {
            console.log('File(s) you dragged here: ', f.path)
            this.filePath = f.path
          }
        });
        document.addEventListener('dragover', (e) => {
          e.preventDefault();
          e.stopPropagation();
        });
      }
    },
    mounted() {
      this.dropFile()
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
  /*滚动条样式*/
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
  }

  #wrapper {
    background: radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 1) 40%,
      rgba(229, 229, 229, .9) 100%
    );
    height: 100vh;
    padding: 30px 30px;
    width: 100vw;
    -webkit-app-region: drag;
  }

  .file {
    width: 100%;
    margin-top: 20px;
  }
</style>