<template>
    <div class='gdqd-dialog'>
        <div class='top'></div>
        <div class='gdqd-dialog-top'>
            <el-input
                clearable
                @keyup.enter.native='queryDetail'
                @blur='queryDetail'
                placeholder='搜索设备名称编号'
                style='width:196px;margin-right:12px'
                size='small'
                prefix-icon='el-icon-search'
                v-model='mcbhChange'
            ></el-input>
            <Select
                width='146'
                v-model='sbglgsStr'
                style='margin-right:12px'
                v-if='sbglgs.length>=0'
                tipPlace='top'
                caption='管理归属：'
                @change='changeSbglgsStr'
                size='small'
                :selectdata='sbglgs'
            ></Select>
            <Select
                width='146'
                style='margin-right:12px'
                v-if='sb_status.length>=0'
                tipPlace='top'
                caption='设备状态：'
                size='small'
                @change='changeSb_status'
                v-model='statusStr'
                :selectdata='sb_status'
            ></Select>
            <el-input
                clearable
                @keyup.enter.native='queryDetail'
                @blur='queryDetail'
                placeholder='搜索品牌型号'
                style='width:196px;margin-right:12px'
                size='small'
                prefix-icon='el-icon-search'
                v-model='ssppbh'
            ></el-input>

            <Select
                width='146'
                style='margin-right:12px'
                tipPlace='top'
                caption='楼层：'
                size='small'
                @change='changeFloorStr'
                v-model='floorStr'
                :selectdata='floorSelect'
            ></Select>
        </div>
        <div class='dialog-none'>
            <div class='input-dialog'>
                <div class='input-dialog-top' @click='show'>
                    <img src='@/assets/imgs/select.png' />
                    筛选
                </div>
                <div class='input-dialog-form' v-if='dialogFormVisible'>
                    <p class='input-dialog-p'>安装位置</p>
                    <p class='input-dialog-p2'>
                        <el-input
                            clearable
                            placeholder='搜索安装位置'
                            style='width:200px;'
                            size='mini'
                            prefix-icon='el-icon-search'
                            v-model='form.wbsxjlInput5'
                        ></el-input>
                    </p>

                    <p class='input-dialog-p'>生产厂商</p>
                    <p class='input-dialog-p2'>
                        <el-input
                            clearable
                            placeholder='搜索生产厂商'
                            style='width:200px;'
                            size='mini'
                            prefix-icon='el-icon-search'
                            v-model='form.rwbhInput5'
                        ></el-input>
                    </p>

                    <p class='input-dialog-p'>服务商</p>
                    <p class='input-dialog-p2'>
                        <el-input
                            clearable
                            placeholder='搜索服务商'
                            style='width:200px;'
                            size='mini'
                            prefix-icon='el-icon-search'
                            v-model='form.ycgdbhInput5'
                        ></el-input>
                    </p>
                    <p class='input-dialog-foot'>
                        <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
                        <el-button type='primary' @click='confirm' size='mini'>确 定</el-button>
                    </p>
                </div>
            </div>
        </div>
        <el-table
            :border='true'
            v-loading='loadingDetail'
            :data='detailData'
            style='width:100%;margin-top:12px'
            :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
        >
            <el-table-column type='index' label='序号' width='50'></el-table-column>
            <el-table-column prop='sbjc' label='设备名称' min-width='150' :show-overflow-tooltip='true' resizable>
                <template slot-scope='{row}'>{{row.type_name||'--'}}</template>
            </el-table-column>
            <el-table-column prop='assetnum' label='设备编号' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.assetnum||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sl' label='数量' width='70' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.sl||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbglgs' label='管理归属' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.sbglgs||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbstatus' label='设备状态' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.sbstatus||'--'}}</template>
            </el-table-column>
            <el-table-column prop='brand' label='品牌' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.brand||'--'}}</template>
            </el-table-column>
            <el-table-column prop='sbxh' label='型号' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
            </el-table-column>
            <el-table-column prop='floor' label='楼层' width='70' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.floor||'--'}}</template>
            </el-table-column>
            <el-table-column prop='wzqy' label='安装位置' min-width='150' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.wzqy||'--'}}</template>
            </el-table-column>
            <el-table-column prop='manufacturer' label='生产厂商' min-width='150' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
            </el-table-column>
            <el-table-column prop='fws' label='服务商' min-width='150' :show-overflow-tooltip='true'>
                <template slot-scope='{row}'>{{row.fws||'--'}}</template>
            </el-table-column>
        </el-table>
        <div class='foot'>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='totalDetail'
                :page-size='sizeDetail'
                @prev-click='pageChanged'
                @next-click='pageChanged'
                @current-change='pageChanged'
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { Select } from 'meri-design'
// import Select from '@/components/Select/Select.vue'
import { querySelect } from '@/api/public.js'
import { mapGetters } from 'vuex'
import { queryHxsbDetail } from '@/api/room.js'

export default {
    props: ['row', 'location'],
    data() {
        return {
            dialogFormVisible: false,
            sb_status: [],
            sbglgs: [],
            input: '',
            floorStr: '',
            sbglgsStr: '',
            statusStr: '',
            loadingDetail: true,
            totalDetail: 0,
            pageDetail: 1,
            sizeDetail: 10,
            detailData: [],
            keyword: '',
            form: {
                wbsxjlInput5: '',
                rwbhInput5: '',
                ycgdbhInput5: '',
                ssmsInput5: ''
            },
            mcbhChange: '',
            ssppbh: ''
        }
    },
    components: {
        Select
    },
    computed: {
        ...mapGetters(['floorSelect', 'plazaId'])
    },
    mounted() {
        if (this.row) {
            this.queryDetail()
            this.query()
        }
    },
    watch: {
        row: {
            deep: true,
            handler: function(newV, oldV) {
                if (newV != oldV) {
                    this.queryDetail()
                    this.query()
                }
            }
        }
    },
    methods: {
        indexMethod(index) {
            return (this.page - 1) * this.size + index + 1
        },
        show() {
            this.dialogFormVisible = !this.dialogFormVisible
        },
        // 改变楼层
        changeFloorStr() {
            this.queryDetail()
        },
        // 改变管理归属
        changeSbglgsStr() {
            this.queryDetail()
        },
        // 改变设备状态
        changeSb_status() {
            this.queryDetail()
        },
        // 点击分页
        pageChanged(page) {
            this.pageDetail = page
            this.queryDetail()
        },
        // 设备详情
        queryDetail() {
            this.detailData = []
            let postParams = {
                manufacturer: this.row.manufacturer || '--',
                sbxh: this.row.sbxh || '--',
                brand: this.row.brand || '--',
                location: this.location,
                classstructureid: this.row.classstructureid
                // type_code: this.row.type_code
            }
            // if (this.floorChange) {
            //     postParams.gname = this.floorChange
            // }
            // if (this.row.floorcode) {
            //     postParams.floorcode = this.row.floorcode
            // }
            let data = {
                plazaId: this.plazaId,
                page: this.pageDetail,
                size: this.sizeDetail
            }
            if (this.floorStr) {
                postParams.floor = this.floorStr
            }
            if (this.sbglgsStr) {
                postParams.sbglgs = this.sbglgsStr
            }
            if (this.statusStr) {
                postParams.sb_status = this.statusStr
            }

            if (this.form.wbsxjlInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.form.wbsxjlInput5}:wzqy`
                } else {
                    data.keyword = `${this.form.wbsxjlInput5}:wzqy`
                }
            }
            if (this.form.rwbhInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.form.rwbhInput5}:manufacturer`
                } else {
                    data.keyword = `${this.form.rwbhInput5}:manufacturer`
                }
            }
            if (this.form.ycgdbhInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.form.ycgdbhInput5}:fws`
                } else {
                    data.keyword = `${this.form.ycgdbhInput5}:fws`
                }
            }
            if (this.form.ssmsInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.form.ssmsInput5}:sbbh`
                } else {
                    data.keyword = `${this.form.ssmsInput5}:sbbh`
                }
            }
            if (this.mcbhChange) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.mcbhChange}:type_name,sbbh`
                } else {
                    data.keyword = `${this.mcbhChange}:type_name,sbbh`
                }
            }
            if (this.ssppbh) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.ssppbh}:brand,sbxh`
                } else {
                    data.keyword = `${this.ssppbh}:brand,sbxh`
                }
            }

            queryHxsbDetail({ data, postParams }).then(res => {
                //console.log('钻取表', res)
                this.loadingDetail = false
                this.detailData = res.data.data ? res.data.data : []
                this.totalDetail = res.data.count
            })
        },
        // 下拉框数据
        query() {
            let postParams = [
                {
                    columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
                    params: {
                        type_code: this.type_code
                    },
                    tableName: 'sms_asset'
                }
            ]
            let data = {
                plazaId: this.plazaId
            }
            querySelect({ data, postParams }).then(res => {
                //console.log('管理归属', res)
                if (res.data.data) {
                    let sb_status = [],
                        sbglgs = []
                    sb_status = res.data.data.sms_asset ? res.data.data.sms_asset.sb_status : []
                    sbglgs = res.data.data.sms_asset ? res.data.data.sms_asset.sbglgs : []
                    if (sb_status.length > 0) {
                        sb_status.forEach(el => {
                            let obj = {
                                id: el.key,
                                name: el.value
                            }
                            this.sb_status.push(obj)
                        })
                    }
                    if (sbglgs.length > 0) {
                        sbglgs.forEach(el => {
                            let obj = {
                                id: el.key,
                                name: el.value
                            }
                            this.sbglgs.push(obj)
                        })
                    }
                }
            })
        },
        confirm() {
            this.queryDetail()
        }
    }
}
</script>
<style lang="less" scoped>
.gdqd-dialog {
    .gdqd-dialog-top {
        display: flex;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
    .dialog-none {
        width: 100px;
        position: absolute;
        right: 0;
        .input-dialog {
            .input-dialog-top {
                color: #c3c7cb;
                cursor: pointer;
                position: absolute;
                top: -30px;
                right: 30px;
            }
            .input-dialog-form {
                padding: 20px 24px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(195, 199, 203, 1);
                z-index: 9999;
                position: absolute;
                top: 0px;
                right: 30px;
            }
            .input-dialog-p {
                margin-bottom: 8px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(100, 108, 115, 1);
                line-height: 22px;
            }
            .input-dialog-p2 {
                margin-bottom: 16px;
            }
        }
        .input-dialog-foot {
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>
<style lang="less">
.gdqd-dialog {
    padding: 16px 24px 24px;
    .el-table td,
    .el-table th {
        padding: 8px 0;
    }
}
</style>