<template>
  <div class="subPage edit-book" :style="{ padding: '20px' }">
    <div v-if="!active">
      <el-form style="text-align: center;">
        <el-form-item>
          <el-input v-model="customerInfo" placeholder="会员手机号或条形码" :style="{ width: '400px' }"></el-input>
        </el-form-item>
        <el-form-item :style="{ paddingTop: '20px' }">
          <el-button type="primary" @click="nextStep()">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <!-- 用户信息区 -->
      <div :style="{ marginBottom: '20px', paddingBottom: '20px', borderBottom: '1px solid #eee' }">
        <el-row :gutter="20">
          <el-col :span="4">
            <span>姓名: </span><span>{{ borrowHistory.Name }}</span>
          </el-col>
          <el-col :span="4">
            <span>手机号: </span><span>{{ borrowHistory.Phone }}</span>
          </el-col>
          <el-col :span="4">
            <span>在借数量: </span><span>{{ borrowHistory.BorrowNum }}</span>
          </el-col>
          <el-col :span="4">
            <span>逾期数量: </span><span>{{ borrowHistory.LateNum }}</span>
          </el-col>
          <el-col :span="4">
            <span>历史是否有逾期: </span><span>{{ borrowHistory.IsLate === 'yes' ? '是' : '否' }}</span>
          </el-col>
        </el-row>
      </div>

      <!-- 可借阅列表 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="BookBarcode" label="条形码"></el-table-column>
        <el-table-column prop="BookName" label="书名"></el-table-column>
        <el-table-column prop="BookTypeName" label="分类"></el-table-column>
        <el-table-column label="规定归还日期">
          <template slot-scope="scope">
            <span>{{toolClass.dateFormat(scope.row.EndDate)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="逾期天数">
          <template slot-scope="scope">
            <span>{{ diffToday(scope.row.EndDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="isBookReturn(scope.row)" type="text" size="small">归还</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div :style="{ paddingTop: '40px' }">
        <el-button @click="cancel()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapLibSate, mapActions } = createNamespacedHelpers('library')

export default {
  name: 'bookReturn',
  data() {
    return {
      active: 0,
      customerInfo: ''
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCase: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId
    }),
    ...mapLibSate({
      list: s => s.bookReturn.list,
      borrowHistory: s => s.borrow.history
    })
  },
  methods: {
    ...mapActions({
      getBorrowHistory: 'getBorrowHistory',
      getList: 'getReturnList',
      returnBook: 'returnBook',
      getUserReturn: 'getUserReturn'
    }),

    nextStep() {
      if (!this.customerInfo) {
        this.$message({
          showClose: true,
          message: '请录入会员手机号或条形码',
          type: 'error'
        })
        return
      }

      this.getBorrowHistory({ customerInfo: this.customerInfo })
        .then(() => {
          this.active = 1
        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: err,
            type: 'error'
          })
        })
      this.getList()
    },
    getList () {
      this.getUserReturn({ customerInfo: this.customerInfo, page: 1, pagesize: 1000 })
        .then(() => {

        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: err,
            type: 'error'
          })
        })
    },
    isBookReturn(book) {
      this.$confirm('确定归还此书?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.returnBook({
            borrowIds: book.BookBorrowRecordId,
          })
            .then(() => {
              this.$message({
                showClose: true,
                message: '归还成功',
                type: 'success'
              })
              this.getList()
            })
            .catch(err => {
              this.$message({
                showClose: true,
                message: err,
                type: 'error'
              })
            })
        })
        .catch(x => x)
    },

    diffToday(dt) {
      const days =
        (new window.Date().getTime() - (new Date(dt)).getTime()) / (1000 * 60 * 60 * 24)
      return days <= 0 ? 0 : days
    },
    cancel() {
      this.customerInfo = ''
      this.active = 0
    }
  }
}
</script>

<style lang="scss">
</style>
