<template>
  <div class="mainPage flex-v">
    <div class="header flex-h">
      <div class="flex-item flex-h">
        <i class="iconfont icon-sousuo"></i>
        <div class="flex-item">
          <div>
            <input type="text" v-model="searchKey" placeholder="请输入图书名">
          </div>
        </div>
      </div>
      <a @click="search">搜索</a>
    </div>
    <div class="searchRemark" v-if="showSearch">
      <span>
        关于“
        <em>{{doSearchKey}}</em>”的搜索结果：
      </span>
    </div>
    <div class="flex-item" :hidden="!showSearch">
      <div>
        <div class="noData" v-if="(books.list || []).length < 1">
          <img src="../../../../common/icon/kong.png" alt>
          <span>暂无内容</span>
        </div>
        <ul v-else>
          <li v-for="(item, index) in books.list" :key="index">
            <libraryListItem :data="item" :status="mineBookStatus(item)" @appointmentBook="appointmentBook"></libraryListItem>
          </li>
        </ul>
      </div>
    </div>
    <van-dialog v-model="showAppointmentDialog" :show-confirm-button="false">
      <div class="dialogContent">
        <span class="title">确认在线预约当前图书?</span>
        <div>
          <span style="color: #666;">在线预约需在{{reserveEndDate}}前前往案场借阅图书, 否则 将取消预约资格</span>
        </div>
        <div class="btn">
          <a @click="sureAppointmentBook">确定</a>
          <a @click="showAppointmentDialog = false">取消</a>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import libraryListItem from '../../../../components/libraryListItem/index'
import toolClass from '../../../../util/util'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
export default {
  data () {
    return {
      searchKey: '',
      showSearch: false,
      noData: false,
      showAppointmentDialog: false,
      caseid: '',
      page: 1,
      pagesize: 10,
      doSearchKey: '',
      reserveBookId: '',
    }
  },
  created () {
    this.caseid = this.$route.query.caseid
    this.getMineBook({
      page: 1,
      pagesize: 1000,
    })
  },
  computed: {
    ...mapBookState({
      books: x => x.books,
      mineBooks: x => x.minebooks,
    }),
    reserveEndDate() {
      return toolClass.calDate(7)
    }
  },
  mounted () {
  },
  components: {
    libraryListItem
  },
  methods: {
    ...mapBookAction([
      'getBookList',
      'getMineBook',
      'reserveBook',
      "updateBookLeftNum",
    ]),
    search () { // 搜索
      if (this.searchKey !== '') {
        this.doSearchKey = this.searchKey
        this.getSearchList()
      } else {
        this.$toast('搜索关键词不能为空')
      }
    },
    appointmentBook (id) { // 预约图书
      this.reserveBookId = id
      this.showAppointmentDialog = true
    },
    sureAppointmentBook () { // 确定预约图书
      this.reserveBook({
        bookid: this.reserveBookId,
      }).then(() => {
        this.updateBookLeftNum(this.reserveBookId)
        this.getMineBook({
          page: 1,
          pagesize: 1000,
        })
      })
      this.showAppointmentDialog = false
    },
    getSearchList () {
      this.getBookList({
        caseid: this.caseid,
        name: this.doSearchKey,
        page: this.page,
        pagesize: this.pagesize,
      }).then(() => {
        this.showSearch = true
      })
    },
    mineBookStatus (item) {
      return ((this.mineBooks.list || []).filter(x => x.BookId === item.BookId && (x.BorrowStatus == '4' || x.BorrowStatus == '1' || x.BorrowStatus == '0'))[0] || {}).BorrowStatus
    }
  }
}
</script>

<style lang="scss" scoped>
.mainPage {
  .header {
    padding: 0.1rem 0.2rem;
    > div {
      background: #f2f2f2;
      position: relative;
      overflow: hidden;
      i {
        font-size: 0.15rem;
        color: #ccc;
        margin-left: 0.08rem;
        line-height: 0.3rem;
      }
      > div {
        margin-left: 0.1rem;
        > div {
          width: 100%;
          position: relative;
          overflow: hidden;
          input {
            width: 100%;
            display: block;
            line-height: 0.2rem;
            padding: 0.05rem 0;
            background: none;
            font-size: 0.13rem;
          }
        }
      }
    }
    > a {
      line-height: 0.3rem;
      margin-left: 0.1rem;
      font-size: 0.14rem;
    }
  }
  .searchRemark {
    padding: 0 0.2rem;
    span {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      line-height: 0.22rem;
      font-size: 0.14rem;
      color: #616161;
      em {
        line-height: 0.22rem;
        font-size: 0.14rem;
        color: #fc5634;
      }
    }
  }
  > .flex-item {
    position: relative;
    overflow: hidden;
    > div {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      .noData {
        width: 100%;
        margin: 0.5rem auto 0;
        position: relative;
        overflow: hidden;
        img {
          width: 0.7rem;
          display: block;
          margin: 0 auto;
        }
        span {
          width: 100%;
          display: block;
          text-align: center;
          line-height: 0.3rem;
          color: #b4b4b4;
          font-size: 0.14rem;
          margin: 0.05rem auto 0;
        }
      }
      > ul {
        padding: 0 0.2rem;
        margin: 0 auto 0.1rem;
        position: relative;
        overflow: hidden;
        > li {
          width: 100%;
          position: relative;
          overflow: hidden;
          margin: .1rem auto 0;
        }
      }
    }
  }
}
</style>
