<template>
    <div class="alarm bg-white">
        <div class="ant-advanced-search-form">
            <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" :form="queryParam">
                <a-row :gutter="24">
                    <a-col :span="4" style="text-align: left">
                        <a-form-item  label="时间">
                            <a-range-picker @change="onTimeChange"
                                            v-model="time"
                                            format="YYYY-MM-DD HH:mm"
                                            :show-time="{
                                              defaultValue: [moment('00:00', 'HH:mm'), moment('23:59', 'HH:mm')],
                                            }"
                            >
                                <a-icon slot="suffixIcon" type="calendar"/>
                            </a-range-picker>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4" ></a-col>
                    <a-col :span="4" >
                        <a-form-item label="盘点任务号：">
                            <a-input v-model="queryParam.taskId" placeholder="请输入" style="width:200px;" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" style="text-align: right">
                        <a-button type="primary" @click="handleSearch">搜索</a-button>
                        <a-button style="margin-left: 15px" @click="reset">重置</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        
        <a-table
        
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="handleGetalarmList"
            :customRow="clickRow"
        >
        </a-table>
        <a-table
            :columns="streetSummaryColumns"
            :data-source="streetSummarys"
            :pagination="false"
        >
        </a-table>
        
    </div>
</template>

<script>
import moment from 'moment';
export default {
    name: "checkSummary",
    
    data() {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            queryParam: {
                startTime: moment().subtract(1, "days").format('YYYY-MM-DD HH:mm:ss'), //当前时间的前一个天时间
                endTime: moment().format('YYYY-MM-DD HH:mm:ss')
            },
            time:[],
            pageNum:1,
            pageSize:3,
            data: [],
            streetSummarys:[],
            pagination:{
                total:0,
                defaultPageSize:3, // 默认每页显示数量
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger:true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
            },
            loading: false,
            columns: [
                {
                    title: "盘点任务号",
                    dataIndex: "taskId",
                },
                {
                    title: "开始时间 ",
                    dataIndex: "startTime",
                },
                {
                    title: "结束时间",
                    dataIndex: "endTime",
                }
                
            ],
            streetSummaryColumns:[
                {
                    title: "巷道",
                    dataIndex: "streetName",
                },
                {
                    title: "盘点任务号",
                    dataIndex: "taskId",
                },
                {
                    title: "空托盘数量",
                    dataIndex: "emptyCount",
                },
                {
                    title: "空货位数",
                    dataIndex: "emptyGoodsCount",
                },
                {
                    title: "卷烟货位数",
                    dataIndex: "goodsCount",
                },
                {
                    title: "开始时间 ",
                    dataIndex: "startTime",
                },
                {
                    title: "结束时间",
                    dataIndex: "endTime",
                }
            ]
            
        };
    },
    mounted() {
        this.handleGetalarmList()
    },
    methods: {
        moment,
        clickRow(record,index){
            return{
                on:{
                    click:(event)=>{
                        console.log(record.endTime)
                        this.getStreetSummarys(record.taskId)
                    },
                }
            }
            
        },
        
        handleSearch(){
            console.log(this.queryParam)
            this.handleGetalarmList()
        },
        handleGetalarmList(pagination) {
            console.log(pagination)
            if(pagination){
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
            this.request();
        },
        //获取盘点统计
        request() {
            this.$api.httpApi.getCheckSummary({
                data: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    ...this.queryParam
                }
            }).then(res => {
                const pagination = {...this.pagination};
                pagination.total = res.data.total;
                this.pagination = pagination;
                this.data = res.data.list
                if(res.data.list.length > 0){
                    this.getStreetSummarys(res.data.list[0].taskId);
                }else{
                    this.streetSummarys = []
                }
                
            }).catch(err => {

            });
        },
        //获取盘点任务下所有巷道的统计
        getStreetSummarys(taskId) {
            
            this.$api.httpApi.getStreetSummary({
                params: {
                    taskId: taskId,
                }
            }).then(res => {
                if (res.code == 200) {
                    this.streetSummarys = res.data
                    
                }
            }).catch(err => {

            });
        },
        onTimeChange(date, dateString) {
            this.handleReset()
            console.log(date)
            console.log(date[0].format('YYYY-MM-DD HH:mm:ss'))
            this.queryParam.startTime = date[0].format('YYYY-MM-DD HH:mm:ss')
            this.queryParam.endTime = date[1].format('YYYY-MM-DD HH:mm:ss')
        },
        handleReset() {
            this.queryParam.startTime = ""
            this.queryParam.endTime = ""
        },
        
        reset() {
            this.queryParam.startTime = moment().subtract(1, "days").format('YYYY-MM-DD HH:mm:ss')
            this.queryParam.endTime = moment().format('YYYY-MM-DD HH:mm:ss')
            this.time = []
            this.handleGetalarmList()
        },
    },
};
</script>

<style lang="scss" scoped>
    .alarm {
        padding: 24px;
    }
    .ant-drawer-content-wrapper {
        height: auto !important;
    }
    .ant-drawer-body {
        text-align: center;
    }
    .ant-advanced-search-form .ant-form-item {
        display: flex;
        width: 100%;
    }
</style>
