<template>
  <div class="upload_record">
    <div v-if="!isShowDetail">
      <div class="search">
        <div class="input">
          <img src="../../img/search.png" />
          <input type="text" @focus="focusInput" v-model="inputValue" />
        </div>
        <div class="current_button" @click="search">搜索</div>
      </div>
      <div class="sort">
        <Count :sum="sum" />
        <p>排序</p>
        <select v-model="order" @change="sort">
          <option value="">按时间降序</option>
          <option value="DESC">按时间升序</option>
        </select>
      </div>
      <div class="table">
        <Table
          :tableData="tableData"
          @download="download"
          @delet="delet"
          @detail="detail"
        >
        </Table>
      </div>
      <TablePage
        :currentPage="currentPage"
        :totalPage="totalPage"
        @change_page="changePage"
        @jump_page="jumpPage"
      ></TablePage>
    </div>
    <div v-else>
      <Detail></Detail>
    </div>
  </div>
</template>

<script>
import Count from "../../components/Count";
import Table from "./components/UploadRecordTable";
import TablePage from "../../components/TablePage";
import Detail from "./components/UploadRecordDetail";
export default {
  components: {
    Count,
    Table,
    TablePage,
    Detail,
  },
  data() {
    return {
      inputValue: "请输入要搜索的资料名",
      order: "", // 排序方式
      sum: 0, // 表格总数据
      currentPage: 1,
      pageSize: 20,
      tableData: [],
      asc: false,
      onlineUrl: "http://8.136.230.133:8080",
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
    isShowDetail() {
      return this.$route.query && this.$route.query.tag ? true : false;
    },
  },
  methods: {
    focusInput: function () {
      this.inputValue = "";
    },
    search: function () {
      console.log(this.inputValue);
      let data = {};
      if (this.inputValue !== "请输入要搜索的资料名") {
        data = {
          informationName: this.inputValue,
          asc: this.asc,
          page: this.currentPage,
          rows: this.pageSize,
        };
      }
      this.getFirmsUploadList(data);
      this.inputValue = "请输入要搜索的资料名";
    },
    sort: function () {
      this.asc = this.order === "DESC" ? true : false;
      let data = {
        asc: this.asc,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getFirmsUploadList(data);
    },
    changePage: function (page) {
      this.currentPage = page;
      let req = {
        page: this.currentPage,
        rows: this.pageSize,
        asc: this.asc,
      };
      this.getFirmsUploadList(req);
    },
    // 点击上一页，下一页，首页，尾页
    jumpPage: function (item) {
      switch (item) {
        case 1:
          this.currentPage = 1;
          break;
        case 2:
          this.currentPage = this.currentPage - 1;
          break;
        case 3:
          this.currentPage = this.currentPage + 1;
          break;
        case 4:
          this.currentPage = this.totalPage;
          break;
      }
      let req = {
        page: this.currentPage,
        rows: this.pageSize,
        asc: this.asc,
      };
      this.getFirmsUploadList(req);
    },
    download: function (i) {
      let id = this.tableData[i].id;
      let dataObj = {
        informationId: id,
      };
      this.selectInformationAgentList(dataObj);
    },
    delet: function (i) {
      let id = this.tableData[i].id;
      this.deleteInformationInfo(id)
        .then(() => {
          this.currentPage = Math.ceil((this.sum - 1) / this.pageSize);
          let req = {
            page: this.currentPage,
            rows: this.pageSize,
            asc: this.asc,
          };
          this.getFirmsUploadList(req);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    detail: function (i) {
      this.$router.push({
        query: {
          tag: "detail",
          id: i,
          page: this.currentPage,
          rows: this.pageSize,
        },
      });
    },
    // 上传记录列表接口
    getFirmsUploadList: function (data = {}) {
      this.$http({
        method: "post",
        url: "/firmsUploadList",
        data: data,
      })
        .then((res) => {
          console.log(res);
          if (res.data && res.data.code === 200) {
            this.tableData = res.data.data;
            this.sum = res.data.count;
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 下载资料接口
    selectInformationAgentList: function (data) {
      console.log(data);
      let url =
        this.onlineUrl + "/dealerDownload?informationId=" + data.informationId;
      window.open(url);
    },
    // 删除记录接口
    deleteInformationInfo: function (dataId) {
      return new Promise((resolve, rejecct) => {
        this.$http({
          method: "post",
          url: "/deleteInformationInfo",
          data: {
            id: dataId,
          },
        })
          .then((res) => {
            console.log(res, 222);
            if (res.data && res.data.code === 200) {
              alert("删除成功");
              resolve();
            } else {
              alert("删除失败，请重试");
              console.log(res.message);
              rejecct();
            }
          })
          .catch((err) => {
            console.log(err);
            rejecct();
          });
      });
    },
  },
  created() {
    let res = {
      page: 1,
      rows: this.pageSize,
      asc: this.asc,
    };
    this.getFirmsUploadList(res);
  },
};
</script>

<style scoped lang="less">
.upload_record {
  .search {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    .input {
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 2px;
      display: flex;
      img {
        width: 28px;
        height: 28px;
        border: 1px solid #ccc;
      }
      input {
        background-color: #fff;
        border: 1px solid #ccc;
        margin-left: 3px;
        color: #555;
        font-size: 12px;
      }
    }
  }
  .sort {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    height: 30px;
    p {
      margin: 10px 5px 0 15px;
      text-align: center;
      height: 20px;
    }
    select {
      border: 1px solid #ccc;
      font-size: 12px;
      height: 30px;
    }
  }
}
input {
  outline: none;
  border: 1px solid #ccc;
}
input:focus {
  animation: shadowAni 200ms linear forwards;
}
@keyframes shadowAni {
  0% {
    border-color: #cccccc;
    box-shadow: inset 0px 0px 0 #ccc;
  }
  100% {
    border-color: #75b9f0;
    box-shadow: 0px 0px 5px #75b9f0;
  }
}
</style>
