<template>
    <div class="orderList">
        <div class="head">
            <div class="text headrow">
                <el-input placeholder="请输入内容" v-model="params.orderId" clearable>
                    <template slot="prepend">订单编号</template>
                </el-input>

                <el-input placeholder="请输入内容" v-model="params.cpBillNo" clearable>
                    <template slot="prepend">CP订单号</template>
                </el-input>

                <el-input placeholder="请输入内容" v-model="params.loginName" clearable>
                    <template slot="prepend">用户账号</template>
                </el-input>

                <el-input placeholder="请输入内容" v-model="params.adFlag" clearable>
                    <template slot="prepend">广告标识</template>
                </el-input>
            </div>

            <div class="select headrow">
                <el-select v-model="params.status" placeholder="请选择订单状态" clearable>
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    ></el-option>
                </el-select>

                <el-select v-model="params.orderPlatfrom" placeholder="请选择订单平台" filterable clearable>
                    <el-option
                            v-for="item in platfromOptions"
                            :key="item.value"
                            :label="item.value + '_' + item.text"
                            :value="item.value"
                    ></el-option>
                </el-select>

                <el-select v-model="params.orderType" placeholder="请选择支付类型" filterable clearable>
                    <el-option
                            v-for="item in payTypeOptions"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value"
                    ></el-option>
                </el-select>

                <el-select v-model="params.gameId" placeholder="请选择游戏" filterable clearable>
                    <el-option
                            v-for="item in gameList"
                            :key="item.gameId"
                            :label="item.gameId + '_' +item.name"
                            :value="item.gameId"
                    ></el-option>
                </el-select>
            </div>

            <div class="interval headrow">
                <el-date-picker
                        v-model="pagTime"
                        @change="handelPayTimeChange"
                        type="datetimerange"
                        :value-format="'yyyy-MM-dd HH:mm:ss'"
                        start-placeholder="充值日期"
                        end-placeholder="充值日期"
                        :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>

                <el-date-picker
                        v-model="regTime"
                        @change="handelRegTimeChange"
                        type="datetimerange"
                        :value-format="'yyyy-MM-dd HH:mm:ss'"
                        start-placeholder="注册日期"
                        end-placeholder="注册日期"
                        :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>

                <div class="range headrow">
                    <el-input placeholder="充值金额范围" v-model="params.orderStartAmount" clearable/>
                    －
                    <el-input placeholder="充值金额范围" v-model="params.orderEndAmount" clearable/>
                </div>

                <el-select
                        v-model="channleIdList"
                        placeholder="请选择渠道"
                        filterable
                        clearable
                        multiple
                        @change="handelChannelChange"
                >
                    <el-option
                            v-for="item in channelList"
                            :key="item.channelId"
                            :label="item.channelId + '_' +item.channelName"
                            :value="item.channelId"
                    ></el-option>
                </el-select>
            </div>

            <div class="action">
                <el-button plain type="primary" icon="el-icon-search" @click="getOrderList">搜索</el-button>
                <el-button plain type="danger" icon="el-icon-coin" @click="dialogVisible = true">导出</el-button>
            </div>
        </div>

        <div class="list">
            <el-table :data="orderList" border stripe :fit="false" height="100%">
                <el-table-column label="渠道广告ID" prop="channelAdid" width="150" show-overflow-tooltip/>
                <el-table-column label="用户UID" prop="uid" width="150" show-overflow-tooltip fixed="left"/>
                <el-table-column label="下单时间" prop="orderTime" width="150" show-overflow-tooltip/>
                <el-table-column label="注册时间" prop="regTime" width="150" show-overflow-tooltip/>
                <el-table-column label="订单金额" prop="orderAmount" width="150" show-overflow-tooltip fixed="right"/>
                <el-table-column label="订单状态" prop="status" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag
                                :type="orderStatusType(scope.row.status)"
                        >{{statusOptions.find(obj=> scope.row.status == obj['value'])['label']}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="orderId" width="150" show-overflow-tooltip/>
                <el-table-column label="CP订单号" prop="cpBillNo" width="150" show-overflow-tooltip/>
                <el-table-column label="区服ID" prop="serverId" width="150" show-overflow-tooltip/>
                <el-table-column label="用户账号" prop="loginName" width="150" show-overflow-tooltip/>
                <el-table-column label="广告名称" prop="adName" width="150" show-overflow-tooltip/>
                <el-table-column label="充值包标识" prop="adFlag" width="150" show-overflow-tooltip/>
                <el-table-column label="注册包标识" prop="regFlag" width="150" show-overflow-tooltip/>
                <el-table-column label="游戏名称" prop="gameName" width="150" show-overflow-tooltip/>
                <el-table-column label="角色名称" prop="roleName" width="150" show-overflow-tooltip
                                 fixed="left"
                                 :formatter="formatRoleName"
                />
                <el-table-column label="支付方式" prop="payType" width="150" show-overflow-tooltip>
                    <template slot-scope="scope" v-if="scope.row.payType">
                        <el-tag>{{payTypeText(scope.row.payType)}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="订单平台" prop="orderPlatfrom" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag>{{platfromOptions.find(obj=> scope.row.orderPlatfrom == obj['value'])['text']}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="支付成功时间" prop="payTime" width="150" show-overflow-tooltip fixed="right"/>
                <el-table-column label="OPENID" prop="orderId" width="150" show-overflow-tooltip/>
            </el-table>
        </div>

        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="page.size"
                    :pager-count="11"
                    :total="page.total"
            ></el-pagination>
        </div>

        <el-dialog title="请选择要导出的字段" :visible.sync="dialogVisible" width="30%" center>
            <div class="content">
                <el-checkbox
                        style="margin-left:4px;"
                        :indeterminate="isIndeterminate"
                        v-model="checkAll"
                        @change="handleCheckAllChange"
                >全选
                </el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedFieldList" @change="handleCheckedFieldChange">
                    <el-checkbox
                            style="width:200px; margin:4px;"
                            v-for="item in fieldList"
                            :label="item.javaField"
                            :key="item.javaField"
                    >{{item.label}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelExcelExport">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import orderApi from '@/api/order'
    import {getLastDay, formatTime} from '@/utils/util'

    export default {
        name: 'orderList',
        data() {
            return {
                orderList: [],
                page: {},
                params: {},
                statusOptions: [
                    {label: '待支付', value: 1},
                    {label: '充值成功', value: 2},
                    {label: '已发货', value: 3},
                    {label: '充值失败', value: -1},
                    {label: '发货失败', value: -2},
                    {label: '苹果验证失败', value: -3}
                ],
                tableHeight: (window.innerHeight / 3) * 2,
                platfromOptions: [],
                payTypeOptions: [],
                gameList: [],
                channelList: [],
                pagTime: '',
                regTime: '',
                dialogVisible: false,
                channleIdList: [],
                fieldList: [
                    {label: '订单编号', javaField: 'orderId'},
                    {label: 'CP订单号', javaField: 'cpBillNo'},
                    {label: '用户UID', javaField: 'uid'},
                    {label: '区服ID', javaField: 'serverId'},
                    {label: '用户账号', javaField: 'loginName'},
                    {label: '广告名称', javaField: 'adName'},
                    {label: '充值包标识', javaField: 'adFlag'},
                    {label: '注册包标识', javaField: 'regFlag'},
                    {label: '游戏名称', javaField: 'gameName'},
                    {label: '角色名称', javaField: 'roleName'},
                    {label: '支付方式', javaField: 'payType"'},
                    {label: '订单平台', javaField: 'orderPlatfrom'},
                    {label: '订单金额', javaField: 'orderAmount'},
                    {label: '订单状态', javaField: 'status'},
                    {label: '下单时间', javaField: 'orderTime'},
                    {label: '注册时间', javaField: 'regTime'},
                    {label: '支付成功时间', javaField: 'payTime'},
                    {label: 'OPENID', javaField: 'openId'},
                    {label: '渠道广告ID', javaField: 'channelAdid'},
                    {label: '过滤notfound', javaField: 'filterNotfound'}
                ],
                checkAll: false,
                checkedFieldList: ['uid', 'orderAmount', 'payTime', 'regTime'],
                isIndeterminate: true
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            async init() {
                let lastDay = getLastDay(3)
                this.pagTime = lastDay
                this.params.orderStartTime = lastDay ? formatTime(lastDay[0]) : null
                this.params.orderEndTime = lastDay ? formatTime(lastDay[1]) : null
                await this.getSelectOptions();
                this.getOrderList()
            },
            getOrderList() {
                orderApi.getOrderList(this.params).then(res => {
                    this.$log.debug(res)
                    this.orderList = res.rows
                    this.page = res.page
                })
            },

            async getSelectOptions() {
                await orderApi.getSelectOptions().then(res => {
                    this.$log.debug(res)
                    this.gameList = res.game.map(m => {
                        m.name = m.gameFlag + '_' + m.gameName
                        return m
                    })
                    this.payTypeOptions = res.payType
                    this.platfromOptions = res.payPlatform
                    this.channelList = res.channel
                })
            },

            handleSizeChange(val) {
                this.$log.debug(val)
                this.params.size = val
                this.getOrderList()
            },
            handleCurrentChange(val) {
                this.params.cur = val
                this.getOrderList()
            },
            handelPayTimeChange(val) {
                this.params.orderStartTime = val ? val[0] : null
                this.params.orderEndTime = val ? val[1] : null
                this.$log.debug(this.params)
            },
            handelRegTimeChange(val) {
                this.params.regStartTime = val ? val[0] : null
                this.params.regEndTime = val ? val[1] : null
                this.$log.debug(this.params)
            },
            handleCheckedFieldChange(val) {
                this.$log.debug(val)
                let checkedCount = val.length
                this.checkAll = checkedCount === this.fieldList.length
                this.isIndeterminate =
                    checkedCount > 0 && checkedCount < this.fieldList.length
            },
            handleCheckAllChange(val) {
                this.$log.debug(val);
                this.checkedFieldList = val
                    ? this.fieldList.map(obj => {
                        return obj.javaField
                    })
                    : [];
                this.isIndeterminate = false
            },
            handelExcelExport() {
                if (JSON.stringify(this.params) === '{}') {
                    this.$message({message: '查询条件不能为空', type: 'warning'})
                    return
                }
                let map = {};
                map.vo = this.fieldList.filter(
                    f => this.checkedFieldList.indexOf(f.javaField) != -1
                );
                map.dto = this.params;
                let jsonData = JSON.stringify(map);
                let a = document.createElement('a');
                a.href = `${orderApi.baseUrl}/v2/excel?jsonData=${jsonData}`;
                a.click();
                this.dialogVisible = false
            },
            handelChannelChange(val) {
                if (val && val.length && val.length != 0) {
                    if (val.length === 1) {
                        this.params.channelId = val[0]
                    } else {
                        this.params.channelId = val.join(',')
                    }
                } else {
                    this.params.channelId = null
                }
            },
            orderStatusType(status) {
                if (status == '3') {
                    return 'success'
                } else if (status > 0 && status < 3) {
                    return 'warning'
                } else {
                    return 'danger'
                }
            },
            payTypeText(payType) {
                if (!payType) {
                    return ""
                }
                this.$log.debug(payType);
                return this.payTypeOptions.find(obj => obj.value == payType).text
            },
            formatRoleName(row, column, cellValue, index) {
                return decodeURI(cellValue)
            }
        }
    }
</script>

<style lang="less" scoped>
    .orderList {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .head {
            margin: 4px;

            .text {
                .el-input {
                    margin: 4px;
                }
            }

            .select {
                .el-select {
                    margin: 4px;
                    width: 25%;
                }
            }

            .interval {
                .el-range-editor {
                    margin: 4px;
                    width: 25%;
                }

                .range {
                    margin: 4px;
                    width: 25%;
                }

                .el-select {
                    margin: 4px;
                    width: 25%;
                }
            }

            .action {
                margin: 4px;
            }
        }
    }
</style>
