<template>
    <div class="app-container">
        <!-- 表单 -->
        <el-form
            :inline="true"
            :model="queryForm"
            ref="queryForm"
            label-width="68px"
            size="small"
            v-show="showSearch"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryForm.keyWord"
                    clearable
                    placeholder="请输入关键字"
                />
            </el-form-item>
            <el-form-item label="状态" prop="receiveStatus">
                <el-select
                    v-model="queryForm.receiveStatus"
                    placeholder="请选择状态"
                    filterable
                    clearable
                >
                    <el-option label="未接收" value="0"></el-option>
                    <el-option label="已接收" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="推送日期" prop="pushDate">
                <el-date-picker
                    v-model="pushDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button icon="el-icon-refresh" plain @click="resetQueryForm"
                    >重置</el-button
                >
                <el-button
                    icon="el-icon-download"
                    type="warning"
                    plain
                    @click="handleExport"
                    :loading="loading"
                    >导出</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            />
        </el-row>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="selection"
        >
            <el-table-column
                type="selection"
                width="55"
                align="center"
            ></el-table-column>
            <el-table-column
                type="index"
                label="序号"
                width="50"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                prop="receiveDate"
                label="推送日期"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="pushNum"
                label="推送机具数量"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="receiveNum"
                label="已接收数量"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="status"
                label="接收状态"
                align="center"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.receiveStatus == 0"
                        type="warning"
                        size="mini"
                        >未接收</el-tag
                    >
                    <el-tag
                        v-else-if="scope.row.receiveStatus == 1"
                        type="success"
                        size="mini"
                        >已接收</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="{ row }">
                    <el-button
                        v-if="row.receiveStatus == 0"
                        type="text"
                        size="mini"
                        @click="accept(row.id)"
                        >接收</el-button
                    >
                    <el-button type="text" size="mini" @click="pushDetail(row)"
                        >明细</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { receiveNotificationsApi } from '@/api/dataPush/index.js'
export default {
    name: 'PushAndAccept',
    data() {
        return {
            loading: false,
            showSearch: true,
            queryForm: {
                keyWord: '',
                receiveStatus: '',
                // pushDate: '',
            },
            tableData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            ids: [],
            pushDate: '',
        }
    },
    mounted() {
        console.log('🚀 ~ mounted ~ mounted')
        this.getList()
    },
    methods: {
        // 搜索
        handleQuery() {
            console.log('🚀 ~ handleQuery ~ 搜索:', this.queryForm.pushDate)
            this.getList()
        },
        // 重置
        resetQueryForm() {
            console.log('🚀 ~ resetQueryForm ~ 重置:')
            this.$refs.queryForm.resetFields()
            this.pushDate = ''
            this.getList()
        },
        // 导出
        handleExport() {
            this.loading = true
            console.log('🚀 ~ handleExport ~ 导出:')
            this
                .download
                // '',
                // {
                //   ...this.queryParams,
                //   dataCondition: this.ids,
                // },
                // `推送接收_${new Date().getTime()}.xlsx`
                ()
                .then(() => {
                    this.loading = false
                })
        },
        // 获取列表
        async getList() {
            console.log(this.pushDate, '时间')
            const params = {
                ...this.queryForm,
                startTime: this.pushDate[0],
                endTime: this.pushDate[1],
            }
            // console.log('🚀 ~ getList ~ 获取列表:', params)
            // 接口(params).then(res => {
            //   this.tableData = res.data
            //   this.total = res.total
            // }).catch(err => {
            //   console.log('🚀 ~ getList ~ err:', err
            // })
            const res = await receiveNotificationsApi(params)

            this.tableData = res.rows
            this.total = res.total

            console.log(res, '接收数据')
        },
        // 接收
        accept(id) {
            console.log('🚀 ~ accept ~ 接收:')
            const params = {
                id,
                isDetail: false,
            }
            this.$router.push({ path: 'pushAndAcceptDetail', query: params })
        },
        // 明细
        pushDetail(row) {
            console.log('🚀 ~ pushDetail ~ 明细:')
            const params = {
                id: row.id,
                isDetail: true,
            }
            this.$router.push({ path: 'pushAndAcceptDetail', query: params })
        },
        // 选择
        selection(val) {
            console.log('🚀 ~ selection ~ 选择:', val)
            this.ids = val.map((item) => item.id)
        },
    },
}
</script>

<style lang="scss" scoped></style>
