<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <!--<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户ID" />-->
            <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户手机" />
            <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 160px;" placeholder="请输入订单编号" />
            <el-date-picker v-model="listQuery.timeArray" type="datetimerange" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
            <el-select v-model="listQuery.orderStatusArray" multiple style="width: 200px" class="filter-item" placeholder="请选择订单状态">
                <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
            </el-select>
            <el-select v-model="listQuery.orderChannel" style="width:200px" placeholder="请选择订单渠道" clearable>  
                    <el-option  v-for="item in channels" :key="item.id" :label="item.name" :value="item.id"  />  
            </el-select>
            <el-button v-permission="['GET /admin/order/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <!-- <el-button :loading="importLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleImport">导入盒马订单</el-button> -->
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

            <el-table-column align="center" label="客户手机" prop="mobile" />
            <el-table-column align="center" label="预约时间" min-width="150" prop="orderDate" />
            <el-table-column align="center" label="购买门店" prop="shop.shopName" />
            <el-table-column align="center" label="订单编号" width="135" prop="orderSn" />
            <el-table-column align="center" label="下单时间" min-width="90" prop="createTime" />
            <el-table-column align="center" label="订单渠道" min-width="90" prop="orderChannel">
                <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.orderChannel | channelsFilter }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" label="订单状态" width="100" prop="orderStatus">
                <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.orderStatus | orderStatusFilter }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="center" width="80" label="订单金额" prop="orderPrice" />

            <el-table-column align="center" width="80" label="支付金额" prop="actualPrice" />

            <el-table-column align="center" label="支付时间" min-width="100" prop="payTime" />

            <el-table-column align="center" label="操作" min-width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-permission="['GET /admin/order/detail']" type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                    <!-- <el-button v-permission="['POST /admin/order/delete']" type="danger" size="mini" @click="handleDeleteConfirm(scope.row)">删除</el-button>
          <el-button v-if="scope.row.orderStatus==201" v-permission="['POST /admin/order/ship']" type="primary" size="mini" @click="handleShip(scope.row)">发货</el-button>
          <el-button v-if="scope.row.orderStatus==202||scope.row.orderStatus==204" v-permission="['POST /admin/order/refund']" type="primary" size="mini" @click="handleRefund(scope.row)">退款</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <el-dialog title="盒马服务工单详情" :visible.sync="dialogHemaVisible" width="1270px" :close-on-click-modal="false" center>
            <el-table :data="jzBookOrders" fit highlight-current-row>
                <el-table-column align="center" label="服务订单号" prop="bookOrderNo" />
                <el-table-column align="center" label="服务项" prop="itemName" />
                <el-table-column align="center" label="预约人" prop="userName" />
                <el-table-column align="center" label="预约手机号" prop="phone" />
                <el-table-column align="center" label="上门地址" prop="addrDetail" />
                <el-table-column align="center" label="预约时间" prop="bookTime" />
                <el-table-column align="center" label="创建时间" prop="createTime" />

                <el-table-column align="center" label="预约用户id" prop="userId" />
                <el-table-column align="center" label="关联业务单号" prop="bizOrderId" />
                <el-table-column align="center" label="业务订单实付" prop="payFee" />
                <el-table-column align="center" label="关联渠道单号" prop="hmOrderId" />
                <el-table-column align="center" label="服务主单号" prop="serviceContractNo" />
                <el-table-column align="center" label="付款单号" prop="paymentNo" />
                <el-table-column align="center" label="运营备注" prop="operRemark" />
                <el-table-column align="center" label="状态" prop="status" />
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogHemaVisible = false">关闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import axios from "axios";
import {
    detailOrder,
    listOrder,
    listChannel,
    refundOrder,
    deleteOrder,
    shipOrder,
    importOrder,
} from "@/api/order";
import { allChannel } from "@/api/channel";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import checkPermission from "@/utils/permission"; // 权限判断函数
import { getToken } from "@/utils/auth";
import { selectByPaymentNo } from "@/api/bookOrder";

let vm;

const statusMap = {
    101: "未付款",
    102: "用户取消",
    103: "系统取消",
    201: "已付款",
    202: "申请退款",
    203: "已退款",
    301: "已发货",
    401: "用户收货",
    402: "系统收货",
};

export default {
    name: "Order",
    components: { Pagination },
    filters: {
        orderStatusFilter(status) {
            return statusMap[status];
        },
        channelsFilter(value) {
            const rs = vm.channels.filter((item) => {
                return item.id === value;
            });
            if (rs != null && rs.length > 0) {
                return rs[0].name;
            }
        },
    },
    data() {
        return {
            dialogHemaVisible: false, //订单下 盒马服务工单详情
            jzBookOrders: [], //服务工单
            list: [],
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                name: undefined,
                mobile: undefined,
                timeArray: [],
                orderStatusArray: [],
                sort: "create_time",
                order: "desc",
                orderChannel: "",
            },

            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]);
                        },
                    },
                ],
            },
            channels: [],
            statusMap,
        };
    },
    computed: {},
    beforeCreate() {
        vm = this;
    },
    created() {
        this.getList();
        allChannel().then((res) => {
            this.channels = res.data.data;
        });
    },
    methods: {
        checkPermission,
        getList() {
            this.listLoading = true;
            if (
                this.listQuery.timeArray &&
                this.listQuery.timeArray.length === 2
            ) {
                this.listQuery.start = this.listQuery.timeArray[0];
                this.listQuery.end = this.listQuery.timeArray[1];
            } else {
                this.listQuery.start = null;
                this.listQuery.end = null;
            }

            listOrder(this.listQuery)
                .then((response) => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },

        handleDetail(row) {
            //展示订单下面的服务工单工单
            this.dialogHemaVisible = true;
            selectByPaymentNo({ paymentNo: row.orderSn }).then((res) => {
                this.jzBookOrders = res.data.data;
            });
        },
    },
};
</script>

<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}
</style>
