<!--  -->
<template>
    <div class="m-container">
        <h2>
            <div class="squrt"></div>抽奖记录
        </h2>
        <!-- 搜索标题 -->
        <save-form :inline="true"
                class="searchForm"
                ref="searchForm"
                @submit="search"
                @reset="onReset"
                :model="searchForm">
            <el-form-item prop="userId">
                <el-input v-model.number="searchForm.userId" maxlength="9" clearable placeholder="请输入学生编号" type="number"></el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model.trim="searchForm.name" clearable
                        placeholder="请输入奖项名称"></el-input>
            </el-form-item>
            <el-form-item prop="time">
                <el-date-picker
                    style="width: 100%"
                    v-model="time"
                    :picker-options="{ firstDayOfWeek: 1 }"
                    @change="onDateChange"
                    type="daterange"
                    clearable
                    range-separator="至"
                    start-placeholder="抽奖开始日期"
                    end-placeholder="抽奖结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="organId">
                <el-select class="multiple"
                            v-model.trim="searchForm.organId"
                            filterable
                            clearable
                            placeholder="请选择分部">
                    <el-option v-for="(item,index) in selects.branchs"
                            :key="index"
                            :label="item.name"
                            :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button native-type="submit" type="danger">搜索</el-button>
                <el-button native-type="reset" type="primary">重置</el-button>
            </el-form-item>
        </save-form>
        <!-- 列表 -->
        <div class="tableWrap">
            <el-table :data="tableList"
                        :header-cell-style="{background:'#EDEEF0',color:'#444'}">
                <el-table-column align="center"
                                prop="userId"
                                label="学员编号">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.userId }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                prop="user.username"
                                label="学员姓名"></el-table-column>
                <el-table-column align="center"
                                prop="user.phone"
                                label="手机号码"></el-table-column>
                <el-table-column align="center"
                                prop="user.organName"
                                label="所属分部"></el-table-column>
                <el-table-column align="center"
                                prop="luckDrawPrize.name"
                                label="奖项">
                    <template slot-scope="scope">
                        <copy-text>{{ scope.row.luckDrawPrize.name }}</copy-text>
                    </template>
                </el-table-column>
                <el-table-column align="center"
                                prop="createOn"
                                label="抽奖时间">
                </el-table-column>
            </el-table>
            <pagination sync :total.sync="pageInfo.total"
                        :page.sync="pageInfo.page"
                        :limit.sync="pageInfo.limit"
                        :page-sizes="pageInfo.page_size"
                        @pagination="getList" />
        </div>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { luckDrawLogList } from './api'
import dayjs from 'dayjs';
import cleanDeep from 'clean-deep';
export default {
    components: { pagination },
    data () {
        return {
            time: null,
            searchForm: {
                userId: null,
                name: null,
                startDate: null,
                organId: null,
                endDate: null
            },
            tableList: [],
            organList: null,
            pageInfo: {
                // 分页规则
                limit: 10, // 限制显示条数
                page: 1, // 当前页
                total: 1, // 总条数
                page_size: [10, 20, 40, 50] // 选择限制显示条数
            }
        };
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        // 设置默认为当前周
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        this.__init()
        this.getList()
    },
    methods: {
        async __init() {
            // 获取分部
            this.$store.dispatch('setBranchs')
        },
        onDateChange(value) {
            let searchForm = this.searchForm
            searchForm.startDate = null
            searchForm.endDate = null
            if(value) {
                searchForm.startDate = dayjs(value[0]).format('YYYY-MM-DD')
                searchForm.endDate = dayjs(value[1]).format('YYYY-MM-DD') + ' 23:59:59'
            }
        },
        async getList() {
            let params = Object.assign({}, this.searchForm)
            params.rows = this.pageInfo.limit
            params.page = this.pageInfo.page
            await luckDrawLogList(cleanDeep(params)).then(res => {
                if (res.code == 200 && res.data) {
                    this.tableList = res.data.rows
                    this.pageInfo.total = res.data.total
                }
            })
        },
        search() {
            this.pageInfo.page = 1
            this.getList()
        },
        onReset() {
            this.$refs.searchForm.resetFields()
            this.time = null
            this.searchForm.startDate = null
            this.searchForm.endDate = null
            this.pageInfo.page = 1
            this.getList()
        }
    }
};
</script>
<style lang='scss' scoped>
.micon {
  position: absolute;
  top: 3px;
  right: 2px;
}
</style>