<!-- 器材报修验收-->
<!-- 库管员业务管理页面 这里操作报修验收  验收后设置状态为验收完成--><!--  管理员器材报修审核-->
<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @multi-actions="handleMultiAction"
    >
      <template slot="filter-content">
        <el-input v-model="listQuery.params.isbn" style="width: 200px" placeholder="搜索ISBN书号" class="filter-item"/>
        <el-input v-model="listQuery.params.bName" style="width: 200px" placeholder="搜索书名" class="filter-item"/>
        <el-input v-model="listQuery.params.bAuthor" style="width: 200px" placeholder="搜索作者" class="filter-item"/>
        <el-select v-model="listQuery.params.bType" style="width: 200px" placeholder="搜索图书种类" class="filter-item">
          <el-option
            v-for="item in tszlDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="listQuery.params.state" style="width: 200px" placeholder="搜索是否逾期"
                   class="filter-item">
          <el-option
            v-for="item in stateDicData"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>


        <!--        <el-input v-model="listQuery.params.qctype" style="width: 200px" placeholder="搜索器材种类" class="filter-item"/>-->
        <!--        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">-->
        <!--          添加-->
        <!--        </el-button>-->
      </template>
      <!--      表格-->
      <template slot="data-columns">
        <!--        <el-table-column type="selection" width="55"/>-->

        <el-table-column align="center" label="ISBN书号" prop="isbn"/>
        <template slot-scope="scope">
          <a style="color: #1890ff" @click="handleUpdate(scope.row)">{{ scope.row.id }}</a>
        </template>
        <el-table-column align="center" label="书名" prop="bName"/>
        <el-table-column :formatter="dataFormatter" align="center" label="图书种类" prop="bType" class-name="DIC_TSZL"/>

        <el-table-column align="center" label="价格" prop="bPrice"/>
        <el-table-column align="center" label="作者" prop="bAuthor"/>
        <el-table-column align="center" label="出版商" prop="bPublisher"/>
        <el-table-column align="center" label="封面">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover">
              <el-image slot="reference" :src="scope.row.bPath" width="80" height="80"/>
              <el-image style="width: 250px; height: 250px" :src="scope.row.bPath" fit="cover"/>
            </el-popover>
          </template>
        </el-table-column>
<!--        <el-table-column align="center" label="出版日期">
          <template slot-scope="scope">
            {{ scope.row.bPublicationTime | xmDateFormat }}
          </template>
        </el-table-column>-->
        <el-table-column align="center" label="借阅时间">
          <template slot-scope="scope">
            {{ scope.row.startTime | xmDateFormat }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="应归还时间">
          <template slot-scope="scope">
            {{ scope.row.endTime | xmDateFormat }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="实际归还时间">
          <template v-if="scope.row.state==='1'" slot-scope="scope" >
            {{ scope.row.returnTime | xmDateFormat }}
          </template>
        </el-table-column>


        <!--        <el-table-column align="center" label="出版日期"  type="dateformatter" prop="bPublicationTime" />-->
        <el-table-column align="center" label="库存数量" prop="bNum"/>
        <el-table-column align="center" label="介绍" prop="bIntroduce"/>
        <el-table-column align="center" label="借阅次数" prop="bLendNum"/>
<!--        <el-table-column :formatter="dataFormatter" align="center" label="状态" prop="bState" class-name="STATE"/>-->

        <el-table-column :formatter="dataFormatter" align="center" label="借还状态" prop="state" class-name="DIC_JHZT"/>
        <el-table-column :formatter="dataFormatter" align="center" label="是否逾期" prop="exceedState" class-name="DIC_SFYQ"/>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope" v-if="scope.row.state=='0'">
            <a style="color: #1890ff" @click="handleUpdate(scope.row)">
              <el-button link type="primary" size="small"
              >还书
              </el-button>
            </a>
          </template>

        </el-table-column>

      </template>
      <!--      表格end-->
    </data-table>

    <!--    新增按钮按下-->
    <el-dialog :visible.sync="dialogVisible" title="书籍信息" width="500px">
      <el-form :model="formData" label-position="left" label-width="100px" disabled="disabled">
        <el-form-item label="Isbn书号">
          <el-input v-model="formData.isbn"/>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="formData.bName"/>
        </el-form-item>
        <el-form-item label="图书类型">
          <el-select v-model="formData.bType" placeholder="请选图书类型">
            <el-option
              v-for="item in tszlDicData"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input type="number" v-model="formData.bPrice"/>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="formData.bAuthor"/>
        </el-form-item>
        <el-form-item label="出版商">
          <el-input v-model="formData.bPublisher"/>
        </el-form-item>

        <el-form-item label="出版日期">
          <el-date-picker
            v-model="formData.bPublicationTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="数量">
          <el-input type="number" v-model="formData.bNum"/>
        </el-form-item>-->
        <!--        <el-form-item label="封面图片地址">-->
        <!--          <el-input v-model="formData.bPath" />-->
        <!--        </el-form-item>-->
        <el-form-item label="介绍">
          <el-input v-model="formData.bIntroduce"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleUpCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确认还书</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import MeetRole from '@/components/MeetRole'
import DepartTreeSelect from '@/components/DepartTreeSelect'
import {fetchTree} from '@/api/sys/depart/depart'
import {getSelectOptions} from '@/api/sys/dict/dict'
import {dataFormatter} from '@/utils'
import {saveData} from '@/api/sys/bookgl/bookgl'
import {getBjList, getZyList} from "@/api/sys/grxxgl/grxxgl";
import {jieshuData} from "@/api/sys/jieshu/jieshu";
import {huanshuData} from "@/api/sys/huanshu/huanshu";


export default {
  name: 'BysxxglList',
  components: {
    DepartTreeSelect,
    DataTable,
    MeetRole
  },

  data() {
    return {

      defaultProps: {
        value: 'value',
        text: 'text',
        label: 'deptName',
        children: 'children'
      },
      qcglData: {},
      dialogVisible: false,// 编辑是否显示

      listQuery: {
        current: 0,
        size: 10,
        total: 0,
        params: {}
      },

      formData: {
        avatar: ''
      },

      stateDicData: [],// 状态字典
      tszlDicData: [],// 图书种类字典DIC_TSZL


      options: {
        //  列表请求URL
        listUrl: '/tjhxxb/controller/queryUserSj',
        // 启用禁用
        stateUrl: '/tsjxxb/controller/state',
        // 删除
        deleteUrl: '/tsjxxb/controller/delete',
        //  批量操作列表
        multiActions: [
          {
            value: 'enable',
            label: '启用'
          }, {
            value: 'disable',
            label: '禁用'
          },
          {
            value: 'delete',
            label: '删除'
          }
        ]
      }
    }
  },

  //  页面初始化
  created() {
    getSelectOptions('DIC_TSZL').then(response => {
      //  图书种类字典
      this.tszlDicData = response.data
    })

    getSelectOptions('DIC_SFYQ').then(response => {
      //  图书种类字典
      this.stateDicData = response.data
    })


  },

// 方法
  methods: {
    //  格式化字典
    dataFormatter,


    handleAdd() {
      this.formData = {}
      this.dialogVisible = true
      console.log('新增')
    },

    //借出申请按钮按下
    handleUpdate(row) {
      this.dialogVisible = true
      this.formData = row
      //  this.formData.roles = row.roleIds.split(',')
      //this.formData.password = null
    },

    //取消按钮按下
    handleUpCancel() {
      this.dialogVisible = false;
    },

    departSelected(data) {
      this.formData.id = data.id
      console.log(data + "----depart")
    },
    // 还书按钮按下
    handleSave() {
      //this.formData.bid = this.formData.id;
      huanshuData(this.formData).then((response) => {
        this.$message({
          type: 'success',
          message: '成功!'
        }, {
          type: 'error',
          message: response.msg
        })
        this.dialogVisible = false
        this.$refs.pagingTable.getList()
      })
    },

    //  批量操作监听
    handleMultiAction(obj) {
      if (obj.opt === 'cancel') {
        this.handleCancelOrder(obj.ids)
      }
    }
  }
}
</script>
