<template>
  <div>
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="库存记录">
      <div slot="content"></div>
      <slot>
        <div class="selects">

          <div>
            <span style="padding: 0 6px;word-break: keep-all;">
              关键字
            </span>
            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
            <span style="padding: 0 6px;word-break: keep-all;">
              借阅状态
            </span>
            <el-select v-model="select.borrow_status" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">重置
          </Button>
          <Button style="margin-left: 10px" type="primary" @click="doSearch">查询</Button>
          <Button style="margin-left: 10px" type="primary" @click="doPrint">打印</Button>
        </div>
      </slot>
    </lx-header>


    <xy-table :row-key="row => row.id + row.no" :page-size="select.page_size" :list="list" :table-item="table" :total="total" @pageSizeChange="pageSizeChange"
      @pageIndexChange="pageChange" @delete="deleteitem" @editor="put">
    </xy-table>

    <putIn ref="putIn" @refresh="load()"></putIn>

  </div>
</template>

<script>
  import {
    list as index,
    save,
    del,
    show
  } from "@/api/bookStore/storeList";

  import putIn from '@/views/bookStore/components/putIn'
  export default {
    components: {
      putIn
    },
    data() {
      return {
        select: {
          page: 1,
          page_size: 20,
          keyword: '',
          borrow_status: "",
        },
        options: [{
            value: '',
            label: '所有'
          },
          {
            value: 0,
            label: '在库'
          }, {
            value: 1,
            label: '借出'
          }
        ],
        total: 0,
        list: [],
        table: [{
            prop: 'no',
            label: '库存编号',
            align: 'center',
            width: 120,
            fixed: 'left',

          }, {
            prop: 'book.name',
            label: '图书',
            width: 280,
            align: 'left',
            fixed: 'left'

          }, {
            prop: 'small_cover',
            label: '图片',
            align: 'cneter',
            width: 180,
            fixed: 'left',
            customFn: (row) => {
              return (<div style = {
                  {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }
                } > <img src = {
                  row.barcode
                }
                style = 'width:120px;height:90px'> </img></div>)
            }

          }, {
            prop: 'addr',
            label: '所在位置',
            width: 180,
            align: 'left',
            customFn: (row) => {
              if (row.bookshelf && row.line && row.rows)
                return ( <div> {
                    "书架：" + row.bookshelf
                  } <br/> {
                    "位于：第" + row.line + "列 "
                  } {
                    "第" + row.rows + "行"
                  } </div> )
                }
            },
            {
              prop: 'book.author',
              label: '作者',
              align: 'left',
              width: 140,

            },
            {
              prop: 'book.bind_way',
              label: '装订方式',
              width: 180,
              align: 'center'

            },
            {
              prop: 'enter_date',
              label: '入库日期',
              width: 180,
              align: 'center'
            },
            {
              prop: 'borrow_status',
              label: '借阅状态',
              width: 120,
              align: 'center',
              formatter: (v1, v2, value) => {
                return value == 1 ? "借出" : "在库";
              }
            },
            {
              prop: 'remark',
              label: '备注',
              minWidth: 280,
              align: 'left'
            },

            {
              prop: 'created_at',
              label: '创建信息',
              width: 180,
              formatter: (v1, v2, value) => {
                return value;
              }
            }
          ],
        }
      },
      methods: {

          put(row) {
            this.$refs['putIn'].id = row.id;

            this.$refs['putIn'].isShow = true;
            this.$refs['putIn'].type = 'editor'
          },
          doSearch() {
            this.select.page = 1;
            this.load();
          },
          doPrint() {
            let baseUrl = process.env.VUE_APP_BASE_API + "/print";
            window.open(baseUrl)
          },
          pageChange(e) {
            this.select.page = e
            this.load();
          },

          pageSizeChange(e) {
            this.select.page_size = e;
            this.select.page = 1;
            this.load();
          },
          async load() {
            const res = await index(this.select)
            this.total = res.total
            this.list = res.data
          },
          deleteitem(row) {
            del({
              id: row.id
            }).then(res => {
              this.load();
              this.$Message.success("操作成功");
            })
          }
        },
        mounted() {
          this.load()
        },
        created() {}
    }
</script>

<style lang="scss" scoped>
  .selects {
    display: flex;
    flex-wrap: wrap;

    &>div {
      margin-bottom: 6px;
    }
  }
</style>
