<template>
    <div class='gcfz2'>
        <div class='table-2-input'>
            <Select
                width='200'
                tipPlace='top'
                @change='changelc'
                caption='楼层：'
                v-model='cg.floors'
                size='small'
                style='margin-right:12px'
                :selectdata='floorSelect'
                :placeholder='"选择楼层"'
            ></Select>
            <el-input
                @change='changelc'
                placeholder='搜索区域'
                size='small'
                style='width:200px;margin-right:12px;'
                prefix-icon='el-icon-search'
                v-model='cg.searVal'
            ></el-input>
            <div class='picker-box'>
                <span class='picker-span'>记录日期：</span>
                <el-date-picker
                    v-model='cg.dateVal'
                    value-format='yyyyMMdd'
                    type='daterange'
                    size='mini'
                    style='width:190px'
                    range-separator='-'
                    start-placeholder
                    end-placeholder
                    @change='changelc'
                ></el-date-picker>
            </div>
        </div>
        <div class='table-2-table'>
            <el-table
                :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
                v-loading='loading'
                :data='bgjlTable'
                style='width: 100%'
                border
            >
                <el-table-column label='序号' type='index' width='50'></el-table-column>
                <el-table-column prop label='楼层' width='130'>
                    <template slot-scope='{row}'>{{row.floor||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='库存变化' align='center'>
                    <el-table-column prop label='新增（间）'>
                        <template slot-scope='{row}'>{{row.xzkf||'--'}}</template>
                    </el-table-column>
                    <el-table-column prop label='减少（间）'>
                        <template slot-scope='{row}'>{{row.jskf||'--'}}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column prop label='区域（㎡）'>
                    <template slot-scope='{row}'>{{row.region||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='面积（㎡）'>
                    <template slot-scope='{row}'>{{row.area||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='调整后库房总数（间）' width='170'>
                    <template slot-scope='{row}'>{{row.afterkf||'--'}}</template>
                </el-table-column>
                <el-table-column prop label='记录日期' width='100' :sortable='true'>
                    <template slot-scope='{row}'>{{row.recordtime?formatter(row.recordtime):'--'}}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class='table-2-p'>注：广场辅助用房使用信息变更时，需同步调整对应楼层辅助用房管理平面图</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>
    </div>
</template>
<script>
// import Select from '@/components/Select/Select.vue'
import { Select } from 'meri-design'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
    data() {
        return {
            dateVal: '',
            searVal: '',
            cg: {
                dateVal: '',
                floors: '',
                searVal: ''
            }
        }
    },
    computed: {
        ...mapGetters(['floorSelect'])
    },
    props: ['bgjlTable', 'total', 'page', 'size', 'loading'],
    components: { Select },
    methods: {
        formatter(date) {
            return moment.unix(date / 1000).format('YYYY.MM.DD')
        },
        pageChanged(page) {
            this.page = page
            this.$emit('queryChange')
        },
        changelc() {
            this.$emit('changeEmit', this.cg)
        }
    }
}
</script>
<style lang="less" scoped>
.gcfz2 {
    .table-2-input {
        display: flex;
        align-items: center;
    }
    .table-2-table {
        margin-top: 10px;
    }
    .table-2-p {
        height: 48px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 36, 41, 1);
        line-height: 48px;
    }
    .foot {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        margin-top: 28px;
    }
    .picker-box {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 0 6px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        height: 32px;
        box-sizing: border-box;
        margin-right: 12px;
        .picker-span {
            margin-right: 6px;
            color: rgba(0, 0, 0, 0.65);
        }
    }
}
</style>
<style lang="less">
.gcfz2 {
    .picker-box {
        .el-input__inner {
            border: none;
        }
        .el-range-editor.el-input__inner {
            padding: 3px 0px;
        }
        .el-icon-date {
            display: none;
        }
        .el-range__close-icon {
            position: absolute;
            right: 0px;
            top: 2px;
        }
        .el-range-editor--mini .el-range-input {
            font-size: 14px;
            color: rgb(31, 36, 41);
        }
    }
}
</style>