<template>
    <div class="template">
        <el-row>
            <el-col :span="17">
                <el-input v-model="searchWord" @keyup.enter.native="seachTemplate" placeholder="请输入搜索单位名称"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 14px;">
                <el-button type="primary" @click="seachTemplate">查找</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-col>
        </el-row>
        <el-table
            class="res"
            :data="list"
            border
            v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80" />
            <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="单位名称" />
            <el-table-column prop="unitSize" show-overflow-tooltip label="单位规模" />
            <el-table-column prop="legal_person" label="单位法人" show-overflow-tooltip align="center" />
            <el-table-column prop="usage_status" label="近期检查" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span :class="scope.row.last_enforce_status && scope.row.last_enforce_status == 'NOT_PASS' ? 'danger' : 'success'">{{scope.row.status}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center" width="150">
                <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 { getEnforceList } from '@/api/resource'

import { resourceMixin } from '@/mixin/resource'

export default {
    name: 'ChooseResource',
    mixins: [resourceMixin],
    data () {
        return {
            params: {
                query: null,
                page: 1,
                size: 5
            },
            searchWord: null,
            loading: false,
            total: 0,
            list: [],
        }
    },
    mounted () {
        this.getTemplates()
    },
    methods: {
        getTemplates() {
            this.loading = true
            getEnforceList(this.params).then(res => {
                if (res && res.data) {
                    this.total = res.total
                    res.data.map(item => {
                        item.unitSize = this.parseUnitSize(item.enforce_obj_type)
                        item.status = item.last_enforce_status ? (item.last_enforce_status == 'NOT_PASS' ? '不合格' : '合格') : '未检查';
                    })
                    this.list = res.data
                }
                this.loading = false
            })
        },
        seachTemplate() {
            if (this.searchWord) {
                this.params.query = 'enforce_obj_name==' + "'" + this.searchWord + "*'"
                this.params.page = 1
                this.getTemplates()
            }
        },
        resetSearch() {
            this.searchWord = null
            this.params.query = ''
            this.params.page = 1
            this.getTemplates()
        },
        handlePageChange(v) {
            this.params.page = v
            this.getTemplates()
        },
        handleConfirm(row) {
            this.$emit('changeResource', row)
        }
    }
}
</script>

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