<template>
    <div class="order">
        <sum-head title="订单列表" text="总订单数" :sum="list.total+''" ></sum-head>

        <div class="filter-container">
            <span>区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <span>订单状态：</span>
            <el-select v-model="listQuery.orderStatus" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in orderOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>操作状态：</span>
            <el-select v-model="listQuery.orderControl" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in operateOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-input placeholder="订单号/车牌号/手机号码/用户昵称" v-model="listQuery.keyword" size="small" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="curPage(1)">搜索</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="list.resultList"
                element-loading-text="Loading"
                border
                size="small">
            <el-table-column label="订单号" align="center" width="250">
                <template slot-scope="scope">
                    {{ scope.row.internalNumber }}
                </template>
            </el-table-column>
            <el-table-column label="车牌号" align="center" width="90">
                <template slot-scope="scope">
                    {{ scope.row.plateNumber }}
                </template>
            </el-table-column>
            <el-table-column label="用户昵称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center">
                <template slot-scope="scope">
                    {{ scope.row.mobile }}
                </template>
            </el-table-column>
            <el-table-column label="骑行时长(分)" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.useBikeTimeLength }}</span>
                </template>
            </el-table-column>
            <el-table-column label="交易金额(元)" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.totalPayMoney }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.orderStatus | stateFilter">{{ scope.row.orderStatus  | typeFilter}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center" width="140">
                <template slot-scope="scope">
                    <span>{{ scope.row.useBikeStartTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" width="140">
                <template slot-scope="scope">
                    <span>{{ scope.row.useBikeEndTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="$refs.orderInfo.open(scope.row)">详情</el-button>
                    <!--<el-button type="danger" size="mini" @click="delOrder(scope.row.id, scope.$index)">删除</el-button>-->
                    <el-button type="primary" size="mini" @click="$refs.orderPay.open(scope.row)" v-if="scope.row.orderStatus==1">结算</el-button>
                    <el-button type="danger" size="mini" @click="$refs.orderBack.open(scope.row)" v-if="scope.row.orderStatus==2">返还</el-button>
                    <el-button type="primary" size="mini" @click="$refs.orderChange.open(scope.row)" v-if="scope.row.orderStatus==4">改价</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <el-pagination background layout="prev, pager, next" :page-size="listQuery.pageSize" :total="list.total" :current-page.sync="listQuery.pageNumber" @current-change="curPage"></el-pagination>
        </div>

        <order-info ref="orderInfo"></order-info>
        <order-pay ref="orderPay" @updateList="getList"></order-pay>
        <order-back ref="orderBack" @updateList="getList"></order-back>
        <order-change ref="orderChange" @updateList="getList"></order-change>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import orderInfo from './components/orderInfo'
import orderPay from './components/orderPay'
import orderBack from './components/orderBack'
import orderChange from './components/orderChange'

import api from '@/api/order'
export default {
    name: "order",
    components: {
        SumHead,
        orderInfo,
        orderPay,
        orderBack,
        orderChange
    },
    data() {
        return {
            listQuery: {
                pageNumber: 1,
                pageSize: 15,
                orderStatus: '',
                orderControl: '',
                // orderDirection: 'desc',
                // orderProperty: 'create_time',
                manageAreaId: '',
                keyword: undefined
            },
            operateOptions: [
                { label: '全部', value: '' },
                { label: '立即启动', value: 'LOADBIKE_NOW' },
                { label: '车辆故障停止用车', value: 'MALFUNCTIONUSE' },
                { label: '临时停车', value: 'TEMPORARYLOCKBIKE' },
                { label: '取消临时停车', value: 'CANCEL_TEMPORARYLOCKBIKE' },
                { label: '刷新', value: 'REFRESH' },
                { label: '继续骑行', value: 'CONTINUE_RIDING' },
                { label: '还车', value: 'RETURNBIKE' },
                { label: '立即支付(微信)', value: 'PAY_WX' },
                { label: '立即支付(余额)', value: 'PAY_WALLET' },
                { label: '重启', value: 'RESTART' },
                { label: '自动临时停车', value: 'TEMPORARYLOCKBIKE_AUTO' },
                { label: '自动结算', value: 'RETURNBIKE_AUTO' },
                { label: '确认还车', value: 'CONFIT_RETURNBIKE' },
                { label: '商户后台手动结账', value: 'PAY_BY_CUSTOMER' },
                { label: '微信支付(到账)', value: 'PAY_WX_ARRIVAL' }
            ],
            orderOptions: [
                { label: '全部', value: '' },
                { label: '骑行中', value: '1' },
                { label: '交易完成', value: '2' },
                { label: '已关闭', value: '3' },
                { label: '待支付', value: '4' }
            ],
            list: {},
            listLoading: false,
        }
    },
    filters: {
        stateFilter(state) {
            const stateMap = ['danger', 'success', 'info', '']
            return stateMap[state-1]
        },
        typeFilter(state) {
            const stateMap = ['骑行中', '交易完成', '已关闭', '待支付']
            return stateMap[state-1]
        },
    },
    methods: {
        getList() {
            this.listLoading = true
            api.getOrderList(this.listQuery).then(res => {
                console.log(res)
                this.listLoading = false
                this.list = res.results
            }).catch(err => {
                console.log(err)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
        delOrder(id, index) {
            this.$confirm('你确定要删除这条订单信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delOrder({ id }).then(res => {
                    console.log(res)
                    this.list.resultList.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    created() {
        this.getList()
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .order {
        position: relative;
        padding: 5px 16px 0;
        margin-bottom: 30px;

        .filter-container {
            padding: 10px 0 10px 12px;
            .filter-item {
                width: 120px;
                margin-right: 20px;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
            float: right;
        }
    }
</style>
