<!-- 电井商铺 -->
<template>
    <div class='djsp-list'>
        <div class='eq-list-top'>
            <el-input
                placeholder='搜索电井间'
                size='small'
                @keyup.enter.native='getList'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='welldes'
                clearable
                style='width:192px;margin-right:12px'
            ></el-input>
            <el-input
                placeholder='搜索商铺信息'
                size='small'
                @keyup.enter.native='getList'
                @blur='getList'
                prefix-icon='el-icon-search'
                v-model='shopInfo'
                clearable
                style='width:192px;margin-right:12px'
            ></el-input>
            <Select @change='getList' v-model='floor' width='180' tipPlace='top' caption='楼层 ：' :selectdata='floorAllSelect'></Select>
        </div>
        <el-table :data='tableData' :span-method='objectSpanMethod' :border='true' style='width: 100%' @row-click='innerVisible = true'>
            <el-table-column prop='floor' label='楼层' width='50'>
                <template slot-scope='{row}'>{{row.floor || '--'}}</template>
            </el-table-column>
            <el-table-column prop='welldes' label='电井间' width='120'>
                <template slot-scope='{row}'>{{row.welldes || '--'}}</template>
            </el-table-column>
            <el-table-column prop='meterbox' label='商铺电表数' width='200'>
                <template slot-scope='{row}'>{{row.meterbox || '--'}}</template>
            </el-table-column>
            <el-table-column prop='shopInfo' label='商铺信息'>
                <template slot-scope='{row}'>{{row.brandList || '--'}}</template>
                <template slot-scope='{row}'>
                    <div v-if='row.brandList' class='shop-info'>
                        <i v-for='(info,infoIndex) in row.brandList' :key='infoIndex'>
                            {{ info.brandname || 'xxx' }}
                            -
                            <!-- {{ info.shopsnumList ? info.shopsnumList.replaceAll(',','、') : 'xxx' }} -->
                            {{ info.shopsnumList ? info.shopsnumList.replace(/,/g,'、') : 'xxx' }}
                            {{ infoIndex === row.brandList.length - 1 ? '' : '，' }}
                        </i>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class='foot'></div>
    </div>
</template>
<script>
import { Select } from 'meri-design'
import EqDetail from './eqDetaileDialog'
import { queryShops, queryBrand } from '@/api/equipmentList.js'
import { mapGetters } from 'vuex'
import store from '../../../store/index'
export default {
    components: { Select, EqDetail },
    data() {
        return {
            tableData: [],
            floor: '1',
            innerVisible: false, //详情弹框
            shopInfo: '',
            welldes: '',
            floorAllSelect: [],
        }
    },
    computed: {
        ...mapGetters(['floorSelect', 'plazaId']),
    },
    props: ['param'],
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.col0count > 0) {
                    return {
                        rowspan: row.col0count,
                        colspan: 1,
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    }
                }
            }
        },
        getList() {
            let getParams = {
                orderBy: `floor,0;welldesm,1;meterbox,1;`,
                plazaId: this.plazaId,
            }
            if (this.floor && this.floor != 1) {
                getParams.floor = this.floor
            }
            getParams.keyword = ''
            if (this.welldes) {
                getParams.keyword += `${this.welldes}:welldes;`
            }
            if (this.shopInfo) {
                getParams.keyword += `${this.shopInfo}:shopsnumList,brandname;`
            }
            if (getParams.keyword == '') {
                delete getParams.keyword
            }
            queryBrand({ getParams }).then((res) => {
                console.log(res)
                this.tableData = []
                let floor = {}
                res.data &&
                    res.data.forEach((i) => {
                        console.log(i)
                        Object.keys(i).forEach((key) => (floor[key] = 0)) // 初始化每一楼层个数为0
                        Object.values(i).forEach((j) => {
                            Object.values(j).forEach((k) => {
                                console.log(k)
                                this.tableData.push(k)
                            })
                        })
                    })

                this.tableData.map((n) => {
                    if (floor[n.floor] === 0) {
                        const count = this.tableData.filter((m) => m.floor === n.floor).length
                        floor[n.floor] = count
                        n.col0count = count
                    } else {
                        n.col0count = 0
                    }
                    return n
                })
            })
        },
        getFloorAllSelect() {
            this.floorAllSelect = []
            this.floorAllSelect.push({
                name: '全部',
                id: '1',
            })
            this.floorSelect.forEach((el) => {
                this.floorAllSelect.push(el)
            })
        },
    },
    watch: {
        param(newV, oldV) {
            if (newV !== oldV) {
                this.getList()
            }
        },
        /* floor() {
            console.log('watch floor')
            this.getList()
        }, */
        // 监听 vuex 中currentFloor的变化,切换楼层后,更新下拉菜单
        '$store.state.currentFloor': {
            handler(newV, oldV) {
                if (newV.gcname !== oldV.gcname) {
                    this.floor = newV.gcname
                    this.getList()
                }
            },
            deep: true,
        },
    },
    mounted() {
        // this.floor = this.$cookie.get('floorMapId')
        this.getList()
        this.getFloorAllSelect()
    },
}
</script>
<style lang="less" scoped>
.djsp-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;
    }
    .shop-info {
        word-break: break-word;
        i {
            // display: inline-block;
            padding: 2px 0;
        }
    }
}
</style>