<template>
  <div class="content_box">

    <div class="content_box_header">
      <div class="content_box_header_title">
        归还
      </div>
      <div class="content_box_header_back" @click="back">
        <img src="../../assets/center/icon_arrow.png" />
        <span class="content_box_header_back_text">
          返回
        </span>
      </div>

    </div>
    <div class="content_box_body">
      <div class="content_box_body_search">
        <span>* 书籍编号</span>
        <el-input v-model="form.no" ref="inputNo" @change="returnBook" autofocus placeholder="请扫描条形码"
          class="content_box_body_search_no"></el-input>
      </div>
      <div class="content_box_body_table">
        <el-table :data="tableData" style="width: 100%;" height="47vh">
          <el-table-column type="index" label="序号" align="center" width="80">
          </el-table-column>
          <el-table-column prop="name" label="书名" align="center">
          </el-table-column>
          <el-table-column prop="author" label="作者" align="center" width="120">
          </el-table-column>
          <el-table-column prop="publish_date" label="出版时间" align="center" width="120">
          </el-table-column>
          <el-table-column prop="publish_house" label="出版社" align="center" width="200">
          </el-table-column>
          <el-table-column prop="bind_way" label="装订方式" align="center" width="120">
          </el-table-column>
        </el-table>

        <div class="content_box_body_table_footer" @click="back">
          <div class="content_box_body_table_footer_btn">
            返回
          </div>
        </div>
      </div>

    </div>

    <div class="content_box_bottom">
    </div>
    <div class="content_box_bottom_right">
    </div>
  </div>
</template>

<script>
  import {
    bookDetail,
    userIndex,
    checkBookBorrow,
    bookBorrow,
    bookReturn
  } from "@/api/lendCenter/index";
  export default {
    data() {
      return {
        form: {
          no: ""
        },
        tableData: []
      }
    },
    methods: {
      returnBook(e) {
        let arr = this.tableData.filter(function(item) {
          let no = (e.length == 7 ? e : e.substring(0, 7))
          return item.no == no;
        });

        if (arr.length != 0) {
          this.$Message.error("已归还，请勿重复操作");
          this.$nextTick(function() {
            this.$refs.inputNo.focus();
            this.form.no = ""
          })
          return false;
        }
        bookReturn({
          no_list: [e]
        }).then(res => {
          this.$Message.success("成功归还");
          this.bookDetail(e);
          this.$nextTick(function() {
            this.$refs.inputNo.focus();
            this.form.no = ""
          })
        })
      },
      //书的详情
      bookDetail(e) {
        bookDetail({
          no: e
        }).then(res => {
          if (res != {} || res.length != 0 || JSON.stringify(res) != "{}") {

            this.tableData.push({
              id: res.id,
              no: res.no,
              name: res.book?.name,
              author: res.book?.author,
              publish_date: res.book?.publish_date,
              publish_house: res.book?.publish_house,
              bind_way: res.book?.bind_way,
            });
          }
          this.$nextTick(function() {
            this.$refs.inputNo.focus();
            this.form.no = ""
          })
        })
      },
      back() {
        if (window.history.length <= 1) {
          this.$router.push({
            path: '/'
          })
          return false
        } else {
          this.$router.go(-1)
        }
      }
    },
    mounted() {

    },
    created() {
      this.$nextTick(function() {
        this.$refs.inputNo.focus();
        this.form.no = ""
      })
    }
  }
</script>

<style lang="scss">
  .content_box_body_table .el-table th.el-table__cell {

    font-size: 20px !important;
    font-family: PingFang SC !important;
    font-weight: 400 !important;
    color: #333333 !important;

    background: #d6eade !important;
  }

  .content_box {
    background: #e9f5f3;
    width: 100vw;
    height: 100vh;
    position: relative;
    padding: 61px 156px 0px 156px;

    .content_box_bottom_logo {
      position: absolute;
      left: 156px;
      top: 13.75px;
    }

    .content_box_header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .content_box_header_back {
        width: 123px;
        height: 49px;
        background: #d6eade;
        border-radius: 24px;
        display: flex;
        align-items: center;
        padding: 0px 10px;

        .content_box_header_back_text {

          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 300;
          color: #066c5b;
          line-height: 49px;
          margin-left: 13px;
        }
      }

      .content_box_header_title {
        background: linear-gradient(90deg, #d6eade, #FFFFFF);
        width: 539px;
        height: 70px;
        line-height: 70px;
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #066c5b;
        padding-left: 43px;
      }
    }

    .content_box_bottom_name {
      margin: 0 auto;
    }

    .content_box_body {
      display: flex;
      align-items: center;
      flex-direction: column;
      position: relative;
      z-index: 99;
      justify-content: space-between;
      margin: 50px auto;

      .content_box_body_table {
        width: 100%;
        margin-top: 42px;

        .content_box_body_table_footer {

          margin: 42px auto;

          .content_box_body_table_footer_btn {
            width: 180px;
            height: 55px;
            background: linear-gradient(0deg, #066c5b, #79c4b7);
            box-shadow: 0px 1px 10px 0px rgba(0, 103, 86, 0.35);
            border-radius: 10px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 55px;
            text-align: center;
            margin: 0 auto;
            cursor: pointer;
          }

        }
      }

      .content_box_body_search {
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #066c5b;
          line-height: 16px;
          width: 140px;
        }

        .content_box_body_search_no {
          width: 644px;
          height: 66px;
        }

        .content_box_body_search_no input.el-input__inner {
          height: 100% !important;
          line-height: 100% !important;
          font-size: 18px;
          font-weight: 400;
        }

      }


      .content_box_body_btn {


        .content_box_body_btn_img {
          width: 714*.8px;
          height: 384*.8px;
        }
      }
    }



    .content_box_bottom {
      background: url("../../assets/center/index_bottom.png") no-repeat;
      width: 100%;
      height: 50%;
      background-size: cover;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 1;
    }

    .content_box_bottom_right {
      background: url("../../assets/center/index_bottom_right.png") no-repeat;
      width: 395px;
      height: 145px;
      background-size: cover;
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
</style>
