<template>
    <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="证件存取记录" name="stream">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
                    <el-form-item label="日期范围">
                        <el-date-picker
                            v-model="dateRange"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss" style="width: 400px"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form> 
                <el-row :gutter="10" class="mb8"> 
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row> 
                <el-table v-loading="loading" :data="tableListData"> 
                    <el-table-column label="序号" align="center" width="80" type="index" fixed="left">
                        <template slot-scope="scope">
                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" width="120"/>
                    <el-table-column label="身份证号" align="center" prop="idNumber" :show-overflow-tooltip="true" width="180"/>
                    <!-- <el-table-column label="部门" align="center" prop="deptFullName" :show-overflow-tooltip="true" width="250"/> 
                    <el-table-column label="出生日期" align="center" width="120" prop="birthday" :show-overflow-tooltip="true"/>
                    <el-table-column label="出生地点" align="center" prop="birthAddr" :show-overflow-tooltip="true"/> -->
                    <el-table-column label="证件类型" align="center" prop="certificateTypeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="证件编号" align="center" prop="certificateNo" :show-overflow-tooltip="true" width="180">
                    <template slot-scope="scope">
                        <span style="color: #1890ff;cursor: pointer;" @click="openLog(scope.row)">{{scope.row.certificateNo}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column label="签发地"   align="center" prop="issueAddr" :show-overflow-tooltip="true"/>
                    <el-table-column label="签发日期" align="center" width="120" prop="issueDay" :show-overflow-tooltip="true"/>
                    <el-table-column label="有效期至" align="center" width="120" prop="issueLifespan" :show-overflow-tooltip="true"/>
                    <el-table-column label="设备编号" align="center" prop="deviceNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="槽位编号" align="center" prop="soltNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="存取类型" align="center" prop="" :show-overflow-tooltip="true"/>
                    <el-table-column label="存取证任务下达时间" align="center" prop="" :show-overflow-tooltip="true"/>
                    <el-table-column label="实际存取证时间" align="center" prop="" :show-overflow-tooltip="true"/> 
                </el-table> 
                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-tab-pane>
            <el-tab-pane label="证件核验记录" name="statistics">
                <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" v-show="showSearch" label-width="90px"> 
                    <el-form-item label="日期范围">
                        <el-date-picker
                            v-model="dateRange"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss" style="width: 400px"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
                    </el-form-item>
                </el-form> 
                <el-row :gutter="10" class="mb8"> 
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList2"></right-toolbar>
                </el-row> 
                <el-table v-loading="loading" :data="tableListData2">
                    <el-table-column label="序号" align="center" width="80" type="index" fixed="left">
                        <template slot-scope="scope">
                        <span>{{(queryParams2.pageNum - 1) * queryParams2.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" width="120"/>
                    <el-table-column label="身份证号" align="center" prop="idNumber" :show-overflow-tooltip="true" width="180"/>
                    <!-- <el-table-column label="部门" align="center" prop="deptFullName" :show-overflow-tooltip="true" width="250"/> 
                    <el-table-column label="出生日期" align="center" width="120" prop="birthday" :show-overflow-tooltip="true"/>
                    <el-table-column label="出生地点" align="center" prop="birthAddr" :show-overflow-tooltip="true"/> -->
                    <el-table-column label="证件类型" align="center" prop="certificateTypeName" :show-overflow-tooltip="true"/>
                    <el-table-column label="证件编号" align="center" prop="certificateNo" :show-overflow-tooltip="true" width="180">
                    <template slot-scope="scope">
                        <span style="color: #1890ff;cursor: pointer;" @click="openLog(scope.row)">{{scope.row.certificateNo}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column label="签发地"   align="center" prop="issueAddr" :show-overflow-tooltip="true"/>
                    <el-table-column label="签发日期" align="center" width="120" prop="issueDay" :show-overflow-tooltip="true"/>
                    <el-table-column label="有效期至" align="center" width="120" prop="issueLifespan" :show-overflow-tooltip="true"/>
                    <el-table-column label="设备编号" align="center" prop="deviceNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="槽位编号" align="center" prop="soltNo" :show-overflow-tooltip="true"/>
                    <el-table-column label="核验类型" align="center" prop="" :show-overflow-tooltip="true"/>
                    <el-table-column label="任务下达时间" align="center" prop="" :show-overflow-tooltip="true"/>
                    <el-table-column label="实际验证时间" align="center" prop="" :show-overflow-tooltip="true"/>
                </el-table> 
                <pagination
                v-show="total2>0"
                :total="total2"
                :page.sync="queryParams2.pageNum"
                :limit.sync="queryParams2.pageSize"
                @pagination="getList2"
                />
            </el-tab-pane> 
        </el-tabs>  
    </div>
</template>

<script>
// import { stockInoutFlowingPageApi,stockInoutStatisticsPageApi } from "@/api/foodManage/stockReport";

export default {
    name: "CertificateLogList",
    dicts: [],
    data() {
        return {
            certificateInfoRowData:{},
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,  
            activeName:'stream',
            //-----证件存取记录------
            // 总条数
            total: 0,
            //表格数据
            tableListData: [], 
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,   
            },
            dateRange:this.defaultDateRange(),//区域树
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const start = new Date();
                    const end = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                    picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近一个月',
                    onClick(picker) {
                    const start = new Date();
                    const end = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近三个月',
                    onClick(picker) {
                    const start = new Date();
                    const end = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            }, 
            //-----证件核验记录------
             // 总条数
            total2: 0,
            //表格数据
            tableListData2: [],  
            // 查询参数
            queryParams2: {
                pageNum: 1,
                pageSize: 10,      
            },
        };
    },
    created() {   
        this.getList(); 
    },
    created() { 
        if(this.$route.query.certificateInfoRowData){ 
            this.certificateInfoRowData = JSON.parse(this.$route.query.certificateInfoRowData)
            console.log(this.certificateInfoRowData)
            this.getList()
        }
    },
    watch:{
        '$route.query.certificateInfoRowData':function(newId, oldId) {
            if(newId){
                this.certificateInfoRowData = JSON.parse(newId)
                this.getList()
            }else{
                this.certificateInfoRowData={}
                this.tableListData=[]
                this.tableListData2=[]
            }
        },
    },
    methods: {
        // 返回列表页
        jumpList() {
            // const obj = { path: "foodManage/purchaseManage/contractDetail" };
            // this.$tab.closeOpenPage(obj);
            // this.$router.replace({ path: "/foodManage/purchaseManage/contractList" }); // 要打开的页面 
        },
        handleTabClick(){
            if(this.activeName=='stream'){
                this.queryParams={
                    pageNum: 1,
                    pageSize: 10,   
                }
                this.dateRange = this.defaultDateRange()
                this.resetForm("queryForm");
                this.handleQuery()
            }
            if(this.activeName=='statistics'){
                this.queryParams2={
                    pageNum: 1,
                    pageSize: 10,
                }
                this.resetForm("queryForm2");
                this.handleQuery2()
            }
        },
        //-----证件存取记录------
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() { 
            this.dateRange = this.defaultDateRange()
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.resetForm("queryForm");
            this.handleQuery();
        }, 
        /** 查询列表 */
        getList() {
            // this.loading = true;
            let param = {
                "pageNum": this.queryParams.pageNum, 
                "pageSize": this.queryParams.pageSize,  
            }
            if(this.dateRange&&this.dateRange.length>0){
                param.startDate=this.formatDateTime(this.dateRange[0])
                param.endDate=this.formatDateTime(this.dateRange[1])
            }else{
                param.startDate=undefined;
                param.endDate=undefined;
            } 
            console.log(param)
            // stockInoutFlowingPageApi(param).then(response => {
            //     this.tableListData = response.rows; 
            //     this.total = Number(response.total);
            //     this.loading = false;
            // });
        },  
        //-----证件核验记录------
        /** 搜索按钮操作 */
        handleQuery2() {
            this.queryParams2.pageNum = 1;
            this.getList2();
        },
        /** 重置按钮操作 */
        resetQuery2() { 
            this.queryParams2 = {
                pageNum: 1,
                pageSize: 10,
            }
            this.resetForm("queryForm2");
            this.handleQuery2();
        },
        /** 查询列表 */
        getList2() {
            this.loading = true;
            let param = {
                "pageNum": this.queryParams2.pageNum, 
                "pageSize": this.queryParams2.pageSize,
            }
            if(this.dateRange&&this.dateRange.length>0){
                param.startDate=this.formatDateTime(this.dateRange[0])
                param.endDate=this.formatDateTime(this.dateRange[1])
            }else{
                param.startDate=undefined;
                param.endDate=undefined;
            }
            console.log(param)
            // stockInoutStatisticsPageApi(param).then(response => {
            //     this.tableListData2 = response.rows;
            //     this.total2 = Number(response.total);
            //     this.loading = false;
            // });
        }, 
        defaultDateRange() {
          const end = new Date(new Date().toLocaleDateString());
          end.setTime(end.getTime() + 24 * 60 * 60 * 1000 -1);
          const start = new Date((new Date().toLocaleDateString()));
          start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000); 
          this.start = parseInt(start.getTime() / 1000)
          this.end = parseInt(end.getTime() / 1000)
          return [start, end]
        }, 
        //日期
        formatDate(date) {
            // 格式化为 YYYY-MM-DD
            date = new Date(date)
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        //日期时间
        formatDateTime(date) {
            // 格式化为 YYYY-MM-DD
            date = new Date(date)
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(date.getDate()).padStart(2, '0');
            const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        } 
    }
};
</script>
