<template>
  <div class="mainPage">
    <div>
      <div class="noData" v-if="show && (books.list || []).length < 1">
        <img src="../../../../common/icon/kong.png" alt>
        <span>暂无内容</span>
      </div>
      <ul>
        <li v-for="(item, index) in (books.list || [])" :key="index" v-if="show">
          <libraryListItem :data="item" :status="mineBookStatus(item)" @appointmentBook="appointmentBook"></libraryListItem>
        </li>
      </ul>
      <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>
  </div>
</template>

<script>
import libraryListItem from '../../../../components/libraryListItem/index'
import { createNamespacedHelpers } from 'vuex'
import toolClass from '../../../../util/util'
const { mapState: mapBookState, mapActions: mapBookAction } = createNamespacedHelpers('book')
export default {
  data () {
    return {
      showAppointmentDialog: false,
      query: {
        caseid: '',
        bookType: '',
        page: 1,
        pagesize: 10,
      },
      reserveBookId: '',
      show: false,
    }
  },
  created () {
    this.query.bookType = this.$route.query.type
    this.query.caseid = this.$route.query.caseid
    this.getBookList(this.query).then(() => {
      this.show = true
    })
    this.getMineBook({
      page: 1,
      pagesize: 1000,
    })
  },
  computed: {
    ...mapBookState({
      books: x => x.books,
      mineBooks: x => x.minebooks,
    }),
    reserveEndDate() {
      return toolClass.calDate(7)
    }
  },
  components: {
    libraryListItem,
  },
  methods: {
    ...mapBookAction([
      'getBookList',
      "getMineBook",
      "reserveBook",
      "updateBookLeftNum",
    ]),
    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
    },
    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 {
  > 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 .16rem;
      margin-bottom: .1rem;
      position: relative;
      overflow: hidden;
      li{
        margin: .1rem auto 0;
      }
    }
  }
}
</style>
