<template>
    <!-- 土建清单 -->
    <div class='tj-list'>
        <div class='eq-list-top'>
            <el-input
                clearable
                placeholder='搜索类别'
                size='small'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='lb'
                style='width:192px;margin-right:12px'
            ></el-input>
            <el-input clearable placeholder='搜索品牌' size='small' @blur='getList' prefix-icon='el-icon-search' v-model='brand' style='width:192px'></el-input>
        </div>
        <el-table :data='tableData' style='width: 100%' :border='true'>
            <el-table-column type='index' label='序号' width='80'></el-table-column>
            <el-table-column prop='category' label='类别'  show-overflow-tooltip resizable>
                <template slot-scope='{row}'>{{row.category || '--'}}</template>
            </el-table-column>
            <el-table-column prop='sl' label='数量' >
                <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
            </el-table-column>
            <el-table-column prop='brand' label='品牌'>
                <template slot-scope='{row}'>{{row.brand || '--'}}</template>
            </el-table-column>
            <el-table-column prop='unit' label='单位'>
                <template slot-scope='{row}'>{{row.unit || '--'}}</template>
            </el-table-column>
        </el-table>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='total'
                :page-size='size'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { queryMaterialList } from '@/api/equipmentList.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            pageSize: 10,
            tableData: [],
            total: 0,
            currentPage: 1,
            size: 13,
            lb: '',
            brand: ''
        }
    },
    props: ['param'],
    computed: {
        ...mapGetters(['floorSelect'])
    },
    methods: {
        pageChanged(page, size) {
            this.currentPage = page
            this.getList()
        },
        getList() {
            let getParams = {
                page: this.currentPage,
                size: this.size,
                plazaId: this.$store.state.plazaId
                // major: this.major,
            }
            getParams.keyword = ''
            if (this.lb) {
                getParams.keyword += `${this.lb}:category;`
            }
            if (this.brand) {
                getParams.keyword += `${this.brand}:brand;`
            }
            if (getParams.keyword == '') {
                delete getParams.keyword
            }
            queryMaterialList({ getParams }).then(res => {
                this.tableData = res.data
                this.total = res.count
            })
        }
    },
    watch: {
        param(newV, oldV) {
            if (newV !== oldV) {
                this.getList()
            }
        }
    },
    mounted() {
        this.getList()
    }
}
</script>
<style lang="less" scoped>
.tj-list {
    .eq-list-top {
        display: flex;
        margin-bottom: 12px;
    }
    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
}
</style>