<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_steps">
        <div class="content_box_body_steps_item " v-for="(item,index) of listSteps"
          :class="{'content_box_body_steps_item_on':(item.step==step)}">
          <span>{{item.name}}</span>
          <span style="margin-left: 10px;" v-if="item.step==step">></span>
        </div>
      </div>


      <div id="section1" v-if="step==1" style="width: 100%;">

        <!-- 滚动条要包裹的内容 -->
        <div class="content_box_body_select">
          <div class="content_box_body_select_box" v-for="(item,index) of listDepts" :key="index">
            <div class="content_box_body_select_box_header" style="cursor: pointer;" @click="tabdept(item)">
              <div class="content_box_body_select_box_header_left">
                <img src="../../assets/center/people.png" />
                <span>{{item.name}}</span>
              </div>
              <div class="content_box_body_select_box_header_right">
                <span style="margin-left: 10px;font-size: 18px;"  v-show='item.show'>></span>
                <span style="margin-left: 10px;font-size: 18px;transform: rotate(0deg); !important;"  v-show='!item.show'>></span>
              </div>
            </div>
            <el-collapse-transition>
              <div class="content_box_body_select_box_items"  v-show='item.show'>
                <div class="content_box_body_select_box_item" @click="toSelectuser(uitem)"
                  v-for="(uitem,uindex) of item.user" :class="{'content_box_body_select_box_item_on':(uitem.on==true)}">
                  {{uitem.name}}
                </div>
              </div>
            </el-collapse-transition>
          </div>

        </div>
      </div>

      <transition name="el-fade-in" v-else-if="step==2">
        <div id="section2" style="width: 100%;">
          <div class="content_box_body_search">
            <span>* 书籍编号</span>
            <el-input v-model="form.no" ref="inputNo" @change="checkBookBorrow" 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="40vh">
              <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-column prop="op" label="操作" align="center" width="120">
                <template slot-scope="scope">
                  <el-button type="danger" size="medium" @click="del(scope.$index)" plain>删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="content_box_body_table_footer" @click="toBorrow">
              <div class="content_box_body_table_footer_btn">
                确定借阅
              </div>
            </div>
          </div>

        </div>
      </transition>

      <div id="section3" v-else-if="step==3" style="width: 100%;">
        <el-result icon="success" title="借阅成功" subTitle="请及时归还图书">
          <template slot="extra">

            <div class="content_box_body_table_footer" @click="back">
              <div class="content_box_body_table_footer_btn">
                返回
              </div>
            </div>
          </template>
        </el-result>
      </div>

    </div>

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

<script>
  import {
    bookDetail,
    userIndex,
    checkBookBorrow,
    bookBorrow
  } from "@/api/lendCenter/index";
  export default {
    data() {
      return {
        form: {
          no: ""
        },
        userId: "",
        step: 1,
        listDepts: [],
        tableData: [],
        listSteps: [{
          step: 1,
          name: '选择借阅人'
        }, {
          step: 2,
          name: '添加借阅书籍'
        }, {
          step: 3,
          name: '借阅成功'
        }]
      }
    },
    methods: {
      tabdept(item){
        
        for(var mod of this.listDepts){
          mod.show=false;
        }
        
        item.show=!item.show;
        this.$forceUpdate();

      },
      del(index) {
        this.tableData.splice(index, 1);
        this.$nextTick(function() {
          this.$refs.inputNo.focus();
          this.form.no = ""
        })
      },
      //借阅验证
      checkBookBorrow(no) {

        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 fals;
        }
        var _arr = [];
        _arr.push(no)
        checkBookBorrow({
          no: _arr
        }).then(res => {
          this.bookDetail(no);
        }).catch((error) => {
          if (error) {
            this.$nextTick(function() {
              this.$refs.inputNo.focus();
              this.form.no = ""
            })
          }
          console.log(error)
        })
      },
      //借书操作
      toBorrow() {
        if (this.tableData.length == 0) {
          this.$Message.error("请扫码需要借阅的图书");
          return false;
        }
        let _arr = [];
        for (var mod of this.tableData) {
          _arr.push(mod.no);
        }

        let that = this;

        bookBorrow({
          user_id: this.userId,
          no_list: _arr
        }).then(res => {
          this.$Message.success("借阅完成");
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(function() {
            loading.close();
            that.step = 3;
          }, 500)
        }).catch(res => {
          this.$Message.error(res);
        })

      },
      //用户加载
      userIndex() {
        userIndex().then(res => {
          for (var item of res) {
            for (var user of item.user) {
              user.on = false;
            }
          }
          this.listDepts = res;
          for(var mod of this.listDepts){
            mod.show=false;
          }
        })

      },
      //书的详情
      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)
        }
      },
      toSelectuser(item) {
        var that = this;
        if (item) {
          item.on = true;
          that.userId = item.id;
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(function() {
            loading.close();
            that.step = 2;
          }, 500)
        }
      }
    },
    mounted() {

    },
    created() {
      this.userIndex();
    }
  }
</script>

<style lang="scss">
  .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_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: #006756;
          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: #006756;
        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_select {
        margin-top: 29px;
        background: #d6eade;
        border-radius: 10px;
        max-height: 60vh;
        min-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;

        .content_box_body_select_box {
          padding: 20px 29px;

          .content_box_body_select_box_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #006756;

            .content_box_body_select_box_header_left {
              display: flex;
              align-items: center;

              span {
                margin-left: 20px;
              }
            }

            .content_box_body_select_box_header_right {

              span {
                display: block;
                -ms-transform: rotate(90deg);
                /* IE 9 */
                -webkit-transform: rotate(90deg);
                /* Safari and Chrome */
                transform: rotate(90deg);
              }
            }
          }

          .content_box_body_select_box_items {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            margin-left: 50px;
            padding: 30px;
            margin-top: 21px;
            display: flex;
            flex-wrap: wrap;

            .content_box_body_select_box_item {
              width: 100px;
              height: 37px;
              text-align: center;
              line-height: 37px;
              margin-left: 6px;
              margin-bottom: 10px;
              cursor: pointer;
              font-weight: 400;
              font-size: 1.125rem;
            }

            .content_box_body_select_box_item_on {
              width: 100px;
              height: 37px;
              background: linear-gradient(0deg, #066c5b, #79c4b7);
              box-shadow: 0px 1px 10px 0px rgba(0, 103, 86, 0.35);
              border-radius: 19px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 1.125rem;
              color: #FFFFFF;
            }
          }


        }
      }

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


      }

      .content_box_body_search {
        display: flex;
        align-items: center;
        margin-top: 30px;
        justify-content: center;

        span {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #006756;
          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_steps {
        display: flex;

        .content_box_body_steps_item {
          width: 240px;
          height: 62px;
          display: flex;
          line-height: 62px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-right: 25px;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #006756;
        }

        .content_box_body_steps_item_on {
          background: url("../../assets/center/brrow_step_on.png") no-repeat;
          background-size: cover;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FBF7EC;
          border-bottom: none !important;
        }
      }
    }



    .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>
