<!-- 设备清单的有select的表格 无tab的标准设备表格 -->
<template>
    <div class='stand-list'>
        <div class='eq-list-top'>
            <el-input
                placeholder='搜索设备名称'
                size='small'
                @keyup.enter.native='getList'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='sbjc'
                clearable
                style='width:192px;margin-right:12px'
            ></el-input>
            <el-input
                placeholder='搜索品牌型号'
                size='small'
                clearable
                @keyup.enter.native='getList'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='keyword'
                style='width:192px;margin-right:12px'
            ></el-input>
            <Select
                @change='getList'
                @cancel='getList'
                v-model='floor'
                style='margin-right:12px;'
                width='160'
                tipPlace='top'
                caption='楼层 ：'
                :selectdata='floorAllSelect'
            ></Select>
            <el-input
                clearable
                placeholder='搜索生产厂商'
                size='small'
                @keyup.enter.native='getList'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='manufacturer'
                style='width:192px;'
            ></el-input>
        </div>
        <div ref='tableBox' style='height: calc(100% - 115px);'>
            <el-table :data='tableData' :max-height='tableMaxHeight' :border='true' style='width: 100%' @row-click='rowHandle'>
                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
                <el-table-column prop label='设备名称' show-overflow-tooltip resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.type_name || '--'}}</template>
                </el-table-column>
                <!-- sbjc -->
                <el-table-column prop='sl' label='数量' width='60'>
                    <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                </el-table-column>
                <el-table-column prop='brand' label='品牌' width='300'>
                    <template slot-scope='{row}'>{{row.brand || '--'}}</template>
                </el-table-column>
                <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
                </el-table-column>
                <el-table-column prop='floor' label='楼层' width='60' show-overflow-tooltip resizable>
                    <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
                </el-table-column>
                <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='300'>
                    <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
                </el-table-column>
            </el-table>
        </div>
        <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>
        <!-- 标准表格详情钻取表 -->
        <el-dialog width='90%' style='height:900px;overflow: hidden;' :title='`${InfoName}-${type_name}`' :visible.sync='innerVisible' append-to-body>
            <eq-detail ref='qdDialog' :row='row' :major='major' :sonpage='sonpage'></eq-detail>
        </el-dialog>
    </div>
</template>
<script>
import { queryEquipmentList } from '@/api/equipmentList.js'
import EqDetail from './eqDetaileDialog'

import { mapGetters } from 'vuex'
import { Select } from 'meri-design'
import store from '../../../store/index'

export default {
    data() {
        return {
            innerVisible: false,
            tableData: [],
            total: 0,
            currentPage: 1,
            sonpage:1,
            size: 10,
            keyword: '',
            floor: '1',
            row: {},
            sbjc: '',
            manufacturer: '',
            type_name: '',
            tableMaxHeight: 0,
            floorAllSelect: [],
        }
    },
    props: ['major', 'param', 'InfoName'],
    components: { EqDetail, Select },
    computed: {
        ...mapGetters(['floorSelect']),
    },
    methods: {
        indexMethod(index) {
            return (this.currentPage - 1) * this.size + index + 1
        },
        rowHandle(row) {
            this.type_name = row.type_name
            this.innerVisible = true
            this.row = row
            this.sonpage = 1
        },
        pageChanged(page, size) {
            this.currentPage = page
            this.getList()
        },
        getList() {
            let postParams = {
                tab_code: this.param,
            }
            let major
            if (this.major.slice(0, 2) == 'GD') {
                major = '供电'
            } else if (this.major.slice(0, 2) == 'XF') {
                major = '消防'
            } else if (this.major.slice(0, 2) == 'GPS') {
                major = '给排水'
            } else if (this.major.slice(0, 2) == 'DT') {
                major = '电梯'
            } else if (this.major.slice(0, 2) == 'RQ') {
                major = '燃气'
            }
            let data = {
                page: this.currentPage,
                size: this.size,
                plazaId: this.$store.state.plazaId,
                major: major,
                // floor:this.floor
            }
            //下拉
            if (this.floor && this.floor != 1) {
                postParams.gname = this.floor
            }
            //输入框搜索
            data.keyword = ''
            if (this.keyword) {
                data.keyword += `${this.keyword}:brand,sbxh;`
            }
            if (this.sbjc) {
                data.keyword += `${this.sbjc}:type_name;`
            }
            if (this.manufacturer) {
                data.keyword += `${this.manufacturer}:manufacturer;`
            }
            if (data.keyword == '') {
                delete data.keyword
            }
            queryEquipmentList({ data, postParams }).then((res) => {
                this.tableData = res.data.data
                this.total = res.data.count
            })
        },
        getFloorAllSelect() {
            this.floorAllSelect = []
            this.floorAllSelect.push({
                name: '全部',
                id: '1',
            })
            this.floorSelect.forEach((el) => {
                this.floorAllSelect.push(el)
            })
            console.log(this.floorAllSelect)
        },
    },
    watch: {
        param(newV, oldV) {
            if (newV !== oldV) {
                this.getList()
                this.$nextTick(() => {
                    // 页面渲染完成后的回调
                    this.tableMaxHeight = this.$refs.tableBox.offsetHeight
                })
                this.getFloorAllSelect()
            }
        },
        /* floor(newV, oldV) {
            this.getList()
        }, */
        // 监听 vuex 中currentFloor的变化,切换楼层后,更新下拉菜单
        '$store.state.currentFloor': {
            handler(newV, oldV) {
                if (newV.gname !== oldV.gname) {
                    this.floor = newV.gname
                    this.getList()
                }
            },
            deep: true,
        },
    },
    mounted() {
        // this.floor = this.$cookie.get('floorMapId')
        this.getList()
        this.$nextTick(() => {
            // 页面渲染完成后的回调
            this.tableMaxHeight = this.$refs.tableBox.offsetHeight
        })
        this.getFloorAllSelect()
    },
}
</script>
<style lang="less" scoped>
.stand-list {
    height: 100%;
    .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;
    }
}
@media screen and (max-width: 1600px) {
    /deep/ .el-dialog__body {
        padding: 0;
    }
    /deep/ .el-table td {
        padding: 4px 0;
    }
    /deep/ .el-dialog {
        margin-top: 5vh !important;
    }
}
</style>
<style lang="less">
.stand-list {
    /deep/.el-table td {
        cursor: pointer;
    }
}
</style>