<template>
    <section>
        <el-form
            :inline="true"
            :model="listQuery"
            size="small"
            class="qg-search-form"
        >
       <el-form-item label="编号"  >
         <el-input v-model="listQuery.code" clearable />
      </el-form-item>
       <el-form-item label="书名"  >
         <el-input v-model="listQuery.name" clearable />
      </el-form-item>
       <el-form-item label="类别"  >
         <el-select v-model="listQuery.category"
                    clearable
                    
                    >
           <el-option label="全部" value="" />
           <el-option v-for="(label,value) in componentsData.categoryOptions"
                        :key="value"
                        :label="label"
                        :value="value"
                    />
         </el-select>
      </el-form-item>
         	<el-form-item label=" ">
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <qg-table
            ref="bookReferListTable"
            :columns="tableColumns"
            :param="listQuery"
            :request="listRequest"
            :default-selections="defaultSelectData"
            :keep-selections="true"
        />
        <div style="text-align: center;padding: 15px;border-top: 1px solid #eaeaea;">
            <el-button type="primary" @click="handleOk">确定</el-button>
            <el-button @click="handleCancel">取消</el-button>
        </div>
    </section>
</template>

<script>
  	import {bookPage} from '@/api/moudles/zxm/book';
    import {bookSearchModel,tableColumns,componentsData} from './config.js';
             
    export default {
        name: 'BookReferTable',
        props: {
            multiple: {
                type: Boolean,
                default: false
            },
            selected: {
                type: [Object, Array],
                default: null
            },
            callback: {
                type: Function,
                default: null
            }
        },
        data() {
            const columns = tableColumns.bind(this)();
            // 如果有操作栏，删除最后一列
            columns.pop();
            columns.shift();
            if (this.multiple) {
                // 多选
                columns.push({
                    type: 'checkbox',
                    fixed: 'right',
                    width: 80,
                    selectable: (row, index) => {
                        // 是否可选
                        return true;
                    }
                });
            } else {
                // 单选
                columns.push({
                    text: '选择',
                    type: 'radio',
                    fixed: 'right',
                    width: 80,
                    selectable: (row, index) => {
                        // 是否可选
                        return true;
                    }
                });
            }

            if (this.multiple && this.selected) {
                const defaultSelectData = [];
                for (const key in this.selected) {
                    defaultSelectData.push(this.selected[key]);
                }
                this.defaultSelectData = defaultSelectData;
            }

            return {
                tableColumns: columns,
                listRequest: bookPage,
                listQuery: bookSearchModel,
                componentsData,
                defaultSelectData: null
            };
        },
        created() {
        },
        methods: {
            handleSearch(data) {
                this.$refs.bookReferListTable.load(data);
            },
            handleOk() {
                if (this.callback) {
                    this.callback('ok', this.multiple ? this.$refs.bookReferListTable.getSelections().rows : this.$refs.bookReferListTable.singleSelection);
                }
            },
            handleCancel() {
                if (this.callback) {
                    this.callback('close');
                }
            }
        }
    };
</script>