<template>
    <div class="book">
        <el-row>
            <el-col :span="17">
                <el-input v-model="params.query" @keyup.enter.native="seachBook" placeholder="请输入搜索关键词"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 14px;">
                <el-button type="primary" @click="seachBook">查找</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-col>
        </el-row>
        <el-table
            :data="list"
            class="res"
            border
            v-loading="loading">
            <!-- <el-table-column type="index" align="center" label="选择" width="80">
                <template slot-scope="scope">
                    <el-radio v-model="selectedRow" :label="scope.row.id"></el-radio>
                </template>
            </el-table-column> -->
            <el-table-column prop="handbook_name" label="名称" show-overflow-tooltip width="120" />
            <el-table-column prop="enforce_class" label="检查分类名称" show-overflow-tooltip width="150" align="center" />
            <el-table-column prop="enforce_type" show-overflow-tooltip label="检查类别">
                <template slot-scope="scope">
                    {{ parseType(scope.row.enforce_type) }}
                </template>
            </el-table-column>
            <el-table-column prop="enforce_item" show-overflow-tooltip label="检查项" />
            <el-table-column prop="enforce_method" label="检查流程方法" width="150" show-overflow-tooltip align="center" />
            <el-table-column prop="enforce_obj_type" label="适用单位类型" align="center" width="120" />
            <el-table-column prop="architecture_type" show-overflow-tooltip label="适用建筑类型" align="center" />
            <el-table-column prop="action" label="操作" fixed="right" align="center" width="80">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleConfirm(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
            </div>
            <el-pagination
                background
                class="custom-page"
                layout="prev, pager, next"
                :current-page="params.page"
                :page-size="params.size"
                :total="total"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getHandbookList } from '@/api/book'

import { bookMixin } from '@/mixin/book'

export default {
    name: 'ChooseBook',
    mixins: [bookMixin],
    data () {
        return {
            params: {
                query: null,
                page: 1,
                size: 10
            },
            loading: false,
            total: 0,
            list: [],
        }
    },
    mounted () {
        this.getBooks()
    },
    methods: {
        getBooks() {
            this.loading = true
            getHandbookList(this.params).then(res => {
                if (res && res.data) {
                    this.total = res.total
                    this.list = res.data
                }
                this.loading = false
            })
        },
        seachBook() {
            // this.params.page = 1
            // this.getBooks()
            this.$message.error('接口搜索异常')
        },
        resetSearch() {
            this.params.query = null
        },
        handlePageChange(v) {
            this.params.page = v
            this.getBooks()
        },
        handleConfirm(row) {
            this.$emit('changeBook', row)
        }
    }
}
</script>

<style lang="scss" scoped>
.res {
    margin-top: 15px;
}
</style>