<template>
    <section>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.orderNumber" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="block">
                        <el-date-picker
                                v-model="filters.payTime"
                                type="datetimerange"
                                unlink-panels
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="filters.payType" placeholder="请选择">
                        <el-option
                                v-for="item in optionList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="filters.paystatus" placeholder="请选择">
                        <el-option
                                v-for="item in paystatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="QueryOrder()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="exportClick()">导出excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table
                v-loading="listLoading"
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column prop="ordernumber" label="订单号" width="180">
            </el-table-column>

            <el-table-column prop="payuserid" label="用户编号" width="100">
            </el-table-column>

            <el-table-column prop="payusername" label="缴费用户" width="100">
            </el-table-column>

            <el-table-column prop="paylocationname" label="房间号码" width="150">
            </el-table-column>

            <el-table-column prop="paytypeaddress" label="水电表编号" width="200">
            </el-table-column>

            <el-table-column prop="paytime" :formatter="dateForma" label="充值日期" width="160">
            </el-table-column>

            <el-table-column prop="payfees" label="充值金额" width="100">
            </el-table-column>

            <el-table-column prop="paytype" label="充值类型" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.paytype === false" style="color:#20a0ff">水费</div>
                    <div v-else="scope.row.paytype === true" style="color: #42d885">电费</div>
                </template>
            </el-table-column>
            <el-table-column prop="paystatus" label="支付状态" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.paystatus === false" style="color:#ff4d51">未支付</div>
                    <div v-else="scope.row.paystatus === true" style="color: #42d885">已支付</div>
                </template>
            </el-table-column>
            <el-table-column prop="reamke3" label="充值状态" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.reamke3 === '1'" style="color:#42d885">充值成功</div>
                    <div v-else="scope.row.reamke3 === '0'" style="color: #ff4d51">充值失败</div>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope" align="center" class-name="small-padding fixed-width">
                    <!--<el-button @click="Pay(scope.row)" type="primary" size="mini">去完成</el-button>-->
                    <el-button type="primary" v-if="username == 'admin'" @click="payDelete(scope.$index,scope.row)"
                               size="small">移除订单
                    </el-button>
                    <el-button type="primary" v-else="" disabled @click="payDelete(scope.$index,scope.row)"
                               size="small">移除订单
                    </el-button>
                    <el-button type="primary" v-if="username == 'admin' && scope.row.paystatus == true && scope.row.reamke3 == '0' " @click="defeatedOrders(scope.$index,scope.row)"
                               size="small">处理订单充值
                    </el-button>
                    <el-button type="primary" v-else-if="username == 'admin'" disabled @click="defeatedOrders(scope.$index,scope.row)"
                               size="small">处理订单充值
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange"
                           :page-size="this.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

    </section>
</template>
<script>
    import {getOrder, addOrder, ediOrder, remove, defeatedOrder} from '../../api/empt/PayOrder';
    import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
    import moment from 'moment'
    // 引入插件
    import fileSaver from 'file-saver'
    import xlsx from 'xlsx'

    export default {
        components: {ElButton},
        data() {
            return {
                filters: {
                    orderNumber: '',
                    payTime: '',
                    payType: '',
                    paystatus: ''
                },
                radio:'水',
                username: JSON.parse(sessionStorage.getItem('user')).username,
                total: 0,
                pageNum: 1,
                pageSize: 30,
                listLoading: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                formInline: {
                    user: '',
                    date1: '',

                },
                tableData: [],
                optionList: [{
                    value: '0',
                    label: '水表'
                }, {
                    value: '1',
                    label: '电表'
                }, {
                    value: '',
                    label: '水电表'
                }],
                paystatusList:[{
                   value: '1',
                   label: '已支付'
                }, {
                   value: '0',
                   label: '未支付'
                },{
                    value: '',
                    label: '全部'
                }]
            }
        },
        mounted() {
            this.QueryOrder();
        },
        methods: {

            handleCurrentChange(val) {
                this.pageNum = val;
                this.QueryOrder();
            },
            QueryOrder() {
                // 清空后为null 问题
                var payTimes = '';
                if (this.filters.payTime !== null) {
                    payTimes = this.filters.payTime[0] + ',' + this.filters.payTime[1]
                }
                if (this.$route.params.orderNumber != undefined) {
                    this.filters.orderNumber = this.$route.params.orderNumber;
                }

                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    orderNumber: this.filters.orderNumber,
                    payTime: payTimes,
                    username: this.username,
                    payType: this.filters.payType,
                    paystatus: this.filters.paystatus

                };
                this.listLoading = true;
                getOrder(params).then(res => {
                    let resData = res.data;
                    this.total = resData.total;
                    this.tableData = resData.list;
                    this.listLoading = false;
                }).catch((error) => {
                    if (null != error.response && error.response !== undefined) {
                        let status = error.response.status;
                        let msg = error.response.statusText;
                        this.listLoading = false;
                        alert(status + msg);
                    } else {
                        this.listLoading = false;
                        alert(error);
                    }
                })
            },

            //删除
            payDelete: function (index, row) {
                this.$confirm('确认移出该订单吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    remove(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '移出成功',
                            type: 'success'
                        });
                        this.QueryOrder();
                    }).catch((error) => {
                        this.listLoading = false;
                        alert(error);
                    });
                }).catch();
            },

            // 处理订单充值
            defeatedOrders: function(index, row){
                this.$confirm('确定充值?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    defeatedOrder(row).then((res) => {
                        this.listLoading = false;
                        if (res.data.code == 200){
                            this.$message({
                                message: '充值成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: '充值失败',
                                type: 'error'
                            });
                        }

                        this.QueryOrder();
                    }).catch((error) => {
                        this.listLoading = false;
                        alert(error);
                    });
                }).catch();
            },

            dateForma: function (row, column) {

                var date = row[column.property];

                if (date == undefined) {
                    return ''
                }
                ;

                return moment(date).format("YYYY-MM-DD HH:mm:ss")

            },
            // 导出excel
            exportClick(){

                // 清空后为null 问题
                var payTimes = '';
                if (this.filters.payTime !== null) {
                    payTimes = this.filters.payTime[0] + ',' + this.filters.payTime[1]
                }
                if (this.$route.params.orderNumber != undefined) {
                    this.filters.orderNumber = this.$route.params.orderNumber;
                }

                let params = {
                    orderNumber: this.filters.orderNumber,
                    payTime: payTimes,
                    username: this.username,
                    payType: this.filters.payType,
                    paystatus: this.filters.paystatus

                };
                this.listLoading = true;//缓冲条加载

                //此代码实现向后台异步请求数据

                getOrder(params).then(response => {

                    this.listLoading = false;

                    const data = response.data.list;//声明常量data用来接收后台返回的数据data

                    this.tableData = data;//将接受到的data数据赋给exportList这个列表，用于当作导出Excel的数据源

                    //开始执行导出方法，此方法要放在括号里面，因为是异步请求数据，请求完才能执行导出

                    this.export2Excel()

                }).catch(error => {

                    debugger;

                    this.listLoading = false

                    console.log(error)

                })

            },

            export2Excel() {

                require.ensure([], () => {

                    const { export_json_to_excel } = require('vendor/Export2Excel');

                    const tHeader =

                        ['订单编号', '用户编号', '缴费用户','房间号码',

                            '水电表编号','充值日期','充值金额', '充值类型',

                            '支付状态','充值状态'

                        ];

                    const filterVal =

                        ['ordernumber', 'payuserid','payusername','paylocationname',

                            'paytypeaddress','stringDate', 'payfees', 'stringType', 'stringStatus',

                            'stringReamke3'

                        ];



                    const list = this.tableData;

                    const data = this.formatJson(filterVal, list);
                    if (this.filters.payType === '1'){
                        export_json_to_excel(tHeader, data, '电表账单报表'+moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
                    }else if (this.filters.payType === '0'){
                        export_json_to_excel(tHeader, data, '水表账单报表'+moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
                    }else {
                        export_json_to_excel(tHeader, data, '水电表账单报表'+moment(new Date()).format('YYYY-MM-DD HH:mm:ss'));
                    }


                })

            },

            formatJson(filterVal, jsonData) {

                return jsonData.map(v => filterVal.map(j => v[j]))

            },

        },

    }
</script>