<template>
    <section class="checkcode-container">
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input width="600" v-model="filters.drawSn" placeholder="请输入抽奖码，至少三位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="filters.drawSn.length < searchNeedMinLength || loading" v-on:click="reqGetDrawsnQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <template>
            <el-table class="table" :data="list" highlight-current-row v-loading="loading" style="width: 100%;">
                <el-table-column type="index" width="60">
                </el-table-column>
                <el-table-column prop="drawSn" label="抽奖码" min-width="110">
                </el-table-column>
                <el-table-column prop="prizeName" label="奖品名称" min-width="80">
                </el-table-column>
                <el-table-column prop="isUsage" label="是否使用" :formatter="formatIsUse" min-width="80">
                </el-table-column>
                <el-table-column prop="openid" label="openid" min-width="120">
                </el-table-column>
                <el-table-column prop="nickname" label="昵称">
                </el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="scope">
                        <div class="avatar">
                            <img v-show="scope.row.avatar" :src="scope.row.avatar">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="winTime" label="中奖时间" :formatter="formatDateWinTime">
                </el-table-column>
            </el-table>
        </template>

        <el-col :span="24" class="toolbar">
            <el-pagination :disabled="loading" layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

    </section>
</template>

<script>
import { getDrawsnQuery } from './../../api/api.js'
import { formatDate } from './../../common/utils.js'

export default {
    data() {
        return {
            loading: false,
            filters: {
                drawSn: ''
            },
            // list: [
            //   {
            //     drawSn: "463GBBIFEVE32313",
            //     isUsage: 1,
            //     openid: "oCwafjoNqQ0VRgB6NUBRmRX2G7zE",
            //     nickname: "SimonFungC",
            //     avatar:
            //       "http://thirdwx.qlogo.cn/mmopen/vi_32/xIibgickibcyJjdniblX2WhbEU6QHMFIwYUCJxJdW9wIIAbEGkZqJmWK5Koich8UiaCYe4tADlRGlmKhf1hGU8LYkkRQ/132",
            //     winTime: null,
            //     prizeName: "奖品123"
            //   }
            // ],
            list: [],
            total: 0,
            page: 1,
            pageSize: 20,
            searchNeedMinLength: 3
        }
    },
    methods: {
        formatIsUse: function(row, column) {
            return row.isUsage == 1 ? '是' : '否'
        },
        formatDateWinTime: function(row, column) {
            return row.winTime
                ? formatDate.formatGMT(row.winTime, 'yyyy-MM-dd hh:mm:ss')
                : '-'
        },
        handleCurrentChange(val) {
            this.page = val
            this.reqGetDrawsnQuery()
        },
        // 查码
        reqGetDrawsnQuery() {
            let drawSn = this.filters.drawSn
            let code = this.$route.query.code
            let parm = {
                drawSn: drawSn,
                appCode: code,
                page: this.page,
                size: this.pageSize
            }
            this.loading = true
            getDrawsnQuery(parm).then(res => {
                let { code, content } = res
                if (code == 200 && content) {
                    this.total = content.total
                    this.list = content.list
                }
                this.loading = false
            })
        }
    },
    created() {
        // 2019-03-06T03:21:23.000+0000
        // 2019/03/06T03:21:23.000+0000
        // var ttt = formatDate.GMTToStr("2019-03-06T03:21:23.000+0000");
        // alert("33333");
        // alert(ttt);
        // var time = new Date(ttt.replace(/-/g, '/'));
        // alert(time);
        // var time = new Date('2019/03/06T03:21:23.000+0000'.replace(/-/g, '/'))
        // alert(time)
        // alert(time.getFullYear())
    }
}
</script>

<style scoped lang="less">
.checkcode-container {
    .toolbar {
        .el-input {
            width: 320px;
        }
    }
    .table {
        .avatar {
            @avatarSize: 40px;
            width: @avatarSize;
            height: @avatarSize;
            img {
                width: @avatarSize;
                height: @avatarSize;
            }
        }
    }
}
</style>