<template>
    <div>
        <div class="app-container">
            <el-form
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
            >
                <el-form-item label="订单编号" prop="orderIndex">
                    <el-input
                        v-model="queryParams.orderIndex"
                        placeholder="请输入订单编号"
                        maxlength="30"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="商家/个体户编号"
                    prop="merchantIndex"
                    style="margin-left: 30px"
                >
                    <el-input
                        v-model="queryParams.merchantIndex"
                        placeholder="请输入商家/个体户编号"
                        maxlength="30"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="服务主题"
                    prop="goodsName"
                    style="margin-left: 30px"
                >
                    <el-input
                        v-model="queryParams.goodsName"
                        placeholder="请输入服务主题"
                        maxlength="30"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="服务类型"
                    prop="categoryId"
                    style="margin-left: 30px"
                >
                    <el-cascader
                        v-model="queryParams.categoryId"
                        :options="categoryList"
                        :props="optionProps"
                        size="small"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="服务人员手机号" prop="serverId">
                    <el-input
                        v-model="queryParams.serverPhone"
                        placeholder="请输入服务人员手机号"
                        maxlength="11"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="服务人员姓名"
                    prop="serverName"
                    style="margin-left: 30px"
                >
                    <el-input
                        v-model="queryParams.serverName"
                        placeholder="请输入服务人员姓名"
                        maxlength="20"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="店铺名称/个体户姓名"
                    prop="merchantName"
                    style="margin-left: 30px"
                >
                    <el-input
                        v-model="queryParams.merchantName"
                        placeholder="请输入店铺名称/个体户姓名"
                        maxlength="20"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="顾客手机号" prop="serverId">
                    <el-input
                        v-model="queryParams.memberPhone"
                        placeholder="请输入顾客手机号"
                        maxlength="11"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item
                    label="服务类型主体"
                    prop="merchantType"
                    style="margin-left: 30px"
                >
                    <el-select
                        v-model="queryParams.merchantType"
                        placeholder="请选择"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    >
                        <el-option label="全部" value=""></el-option>
                        <el-option label="商家" value="0"></el-option>
                        <el-option label="个体" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="是否追加费用"
                    prop="repairAdd"
                    style="margin-left: 30px"
                >
                    <el-select v-model="queryParams.repairAdd">
                        <el-option
                            v-for="item in addStatusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="状态"
                    prop="orderState"
                    style="margin-left: 30px"
                >
                    <el-select
                        v-model="queryParams.orderState"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.decodeValue"
                            :label="item.decodeValue"
                            :value="item.decodeId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单日期" prop="createTime">
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 280px"
                        size="small"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 30px">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                        >搜索</el-button
                    >
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetQuery"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getList"
                ></right-toolbar>
            </el-row>

            <el-table
                v-loading="loading"
                :data="orderList"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column label="序号" type="index" /> -->
                <el-table-column
                    label="订单编号"
                    align="center"
                    prop="orderIndex"
                    width="180px"
                />
                <el-table-column
                    label="商家/个体户编号"
                    align="center"
                    prop="merchantIndex"
                    width="180px"
                />
                <el-table-column
                    label="店铺名称/个体户姓名"
                    align="center"
                    prop="merchantName"
                    width="180px"
                />
                <el-table-column
                    label="服务编号"
                    align="center"
                    prop="goodsIndex"
                    width="180px"
                />
                <el-table-column
                    label="服务主题"
                    align="center"
                    prop="goodsName"
                    width="80px"
                />
                <el-table-column
                    label="服务类型"
                    align="center"
                    prop="categoryName"
                    width="80px"
                />
                <el-table-column
                    label="单价"
                    align="center"
                    prop="price"
                    width="80px"
                />
                <el-table-column
                    label="数量"
                    align="center"
                    prop="goodsCounts"
                    width="80px"
                />
                <el-table-column
                    label="订单金额"
                    align="center"
                    prop="orderAmount"
                    width="80px"
                />
                <el-table-column
                    label="支付金额"
                    align="center"
                    prop="totalAmount"
                    width="80px"
                />
                <el-table-column
                    label="另付维修/配件费"
                    align="center"
                    prop="maintenanceAmount"
                    width="120px"
                />
                <el-table-column
                    label="服务人员手机号"
                    align="center"
                    prop="serverPhone"
                    width="120px"
                />
                <el-table-column
                    label="服务人员姓名"
                    align="center"
                    prop="serverName"
                    width="120px"
                />
                <el-table-column
                    label="顾客手机号"
                    align="center"
                    prop="memberPhone"
                    width="120px"
                />
                <el-table-column
                    label="上门时间"
                    align="center"
                    prop="appointmentStartTime"
                    width="150"
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseTime(scope.row.appointmentStartTime)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="下单时间 "
                    align="center"
                    prop="createTime"
                    width="150"
                />
                <el-table-column
                    label="服务主体类型"
                    align="center"
                    prop="merchantType"
                >
                    <template slot-scope="scope">
                        {{ handleMerchantType(scope.row.merchantType) }}
                    </template>
                </el-table-column>
                <el-table-column label="是否追加费用" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.maintenanceAmount > 0 ? "是" : "否" }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态 "
                    align="center"
                    prop="refStatus"
                />
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    fixed="right"
                    width="150"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="toSee(scope.row)"
                            v-hasPermi="['system:order:edit']"
                            >查看</el-button
                        >
                        <div v-if="scope.row.orderState == '000'">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="toUpdatePrice(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >修改单价</el-button
                            >
                        </div>
                        <div v-if="scope.row.orderState == '001'">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-coordinate"
                                @click="editRefund(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >退款</el-button
                            >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-alarm-clock"
                                @click="updateServiceTime(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >修改上门时间</el-button
                            >
                        </div>
                        <div v-if="scope.row.orderState == '002'">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-coordinate"
                                @click="editRefund(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >退款</el-button
                            >
                        </div>
                        <div
                            v-if="
                                scope.row.orderState == '003' ||
                                scope.row.orderState == '004' ||
                                scope.row.orderState == '007'
                            "
                        >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-coordinate"
                                @click="editRefund(scope.row)"
                                v-hasPermi="['system:order:edit']"
                                >退款</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>

        <el-dialog
            title="修改单价"
            :visible.sync="open"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-row>
                <el-col>
                    <el-input v-model="form.price" />
                </el-col>
            </el-row>

            <div slot="footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="updatePrice">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="修改上门时间"
            :visible.sync="timeOpen"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-row>
                <el-col>
                    <el-date-picker
                        v-model="appointmentStartTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间"
                    >
                    </el-date-picker>
                </el-col>
            </el-row>

            <div slot="footer">
                <el-button @click="timeOpen = false">取 消</el-button>
                <el-button type="primary" @click="editVerifyTime"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            title="退款"
            :visible.sync="refundOpen"
            width="600px"
            :close-on-click-modal="false"
        >
            <el-form
                :model="refundParams"
                label-width="100px"
                ref="refundForm"
                :inline="true"
                label-position="left"
                style="margin-left: 100px"
                :rules="rules"
            >
                <el-form-item label="退款金额" prop="refundMoney">
                    <el-input v-model="refundParams.refundMoney"></el-input>
                </el-form-item>

                <el-form-item label="退款原因" prop="refundReason">
                    <el-input v-model="refundParams.refundReason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="refundOpen = false">取 消</el-button>
                <el-button type="primary" @click="handleRefund"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    modifyPrice,
    updateOrder,
    editVerify,
} from "@/api/system/order";
import { merchantRefund } from "@/api/merchant/merchant";
import { listCode } from "../../api/system/dict/code";
import { getTime, listTime } from "../../api/system/serverTime";
import { categoryTree } from "@/api/basic/category";
import { getInfo } from "@/api/login";
export default {
    name: "order",
    data() {
        return {
            // 日期范围
            dateRange: "",
            //服务类别筛选框
            serviceOptions: [],
            //服务状态筛选框
            statusOptions: [],
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 订单主表格数据
            orderList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderIndex: null,
                memberId: null,
                merchantId: null,
                merchantName: null,
                orderType: null,
                orderState: null,
                appointmentStartTime: null,
                appointmentEndTime: null,
                serviceStartTime: null,
                serviceEndTime: null,
                serviceLongitude: null,
                serviceLatitude: null,
                shopAmount: null,
                isSettle: null,
                orderAmount: null,
                beanAmount: null,
                memberCouponId: null,
                couponAmount: null,
                totalAmount: null,
                payWay: null,
                memo: null,
                loginIp: null,
                loginDate: null,
                column1: null,
                column2: null,
                column3: null,
                Gname: null,
                goodsUnit: null,
                otherUnit: null,
                memberPhone: null,
                categoryName: null,
                goodsCounts: null,
                serverName: null,
                serverPhone: null,
                price: null,
                addCount: null,
                repairAdd: null,
                serverId: null,
                gname: null,
                categoryId: [],
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                refundMoney: [
                    {
                        required: true,
                        message: "退款金额不能为空",
                        trigger: "blur",
                    },
                ],
            },
            refStatusOptions: [],
            timeForm: {
                serverId: null,
            },
            timeOpen: false,
            timeOptions: [],
            //追加服务选择框
            addStatusOptions: [
                {
                    label: "全部",
                    value: "",
                },
                {
                    label: "是",
                    value: "1",
                },
                {
                    label: "否",
                    value: "0",
                },
            ],
            refundParams: {
                orderId: null,
                refundMoney: "",
                refundReason: "",
            },
            refundOpen: false,
            categoryList: [],
            appointmentStartTime: null,
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
        };
    },
    created() {
        this.getStatus();
        this.getRefStatus();
        this.getList();
        this.queryCategory();
    },
    mounted() {},
    methods: {
        // 处理服务主体名称
        handleMerchantType(merchantType) {
            if (merchantType === 0) {
                return "商家";
            }
            if (merchantType === 1) {
                return "个体";
            }
            return "-";
        },

        /** 填充服务类型*/
        queryCategory() {
            categoryTree()
                .then((res) => {
                    if (res.code == 200) {
                        this.categoryList = res.data;
                    } else {
                        this.$message.error("获取分类列表失败");
                    }
                    console.log(res);
                })
                .catch((err) => {
                    this.$message.error("获取分类列表失败");
                    console.log(err);
                });
        },
        /** 获取当前服务 服务人员时间安排*/
        query(row) {
            listTime(this.timeForm).then((res) => {
                console.log(row);
            });
        },
        editServiceTime() {
            this.form.appointmentStartTime = this.appointmentStartTime;

            updateOrder(this.form).then((res) => {
                if (res.code == "200") {
                    this.$modal.msgSuccess("修改成功");
                    this.timeOpen = false;
                    this.getList();
                }
            });
        },
        updateServiceTime(row) {
            row.column1 = null;
            row.column2 = null;
            this.form = JSON.parse(JSON.stringify(row));
            this.appointmentStartTime = this.form.appointmentStartTime;
            this.timeOpen = true;
        },

        // 校验时间
        editVerifyTime() {
            var params = {
                orderId: this.form.orderId,
                appointmentStartTime: this.appointmentStartTime,
                serverId: this.form.serverId,
            };
            editVerify(params).then((res) => {
                if (res.code == "200") {
                    if (res.data == "201") {
                        this.$modal
                            .confirm(res.msg)
                            .then(() => {
                                return this.editServiceTime();
                            })
                            .catch(() => {});
                    }

                    if (res.data == "200") {
                        this.editServiceTime();
                    }
                }
            });
        },

        //修改单价
        toUpdatePrice(row) {
            this.form = JSON.parse(JSON.stringify(row));
            this.open = true;
        },
        updatePrice() {
            const { orderId, price } = this.form;
            modifyPrice({ orderId, price }).then((res) => {
                if (res.code == "200") {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                } else {
                    this.$modal.msgError("修改失败，请联系管理员处理");
                    this.open = false;
                }
            });
        },
        //详情页面跳转
        toSee(row) {
            this.$router.push({
                path: "/order/repairDetail",
                query: { id: row.orderId },
            });
        },
        /** 获取订单状态*/
        getStatus() {
            let param = {
                codeValue: "订单状态",
            };
            listCode(param).then((res) => {
                this.statusOptions = res.rows;
            });
        },
        /** 获取订单退款子状态*/
        getRefStatus() {
            let param = {
                codeValue: "退款状态",
            };
            listCode(param).then((res) => {
                this.refStatusOptions = res.rows;
            });
        },
        /** 查询订单主列表 */
        getList() {
            getInfo().then((r) => {
                if (r.roles[0] == "merchant") {
                    if (r.merchant.merchantId != null) {
                        this.queryParams.merchantId = r.merchant.merchantId;
                    }
                }
                this.loading = true;
                // 级联选择器绑定的参数queryParams.categoryId是一个数组，需要将最后一个层级分类的id 重新赋值给查询参数categoryId
                if (
                    this.queryParams.categoryId &&
                    this.queryParams.categoryId.length > 1
                ) {
                    this.queryParams.categoryId =
                        this.queryParams.categoryId[
                            this.queryParams.categoryId.length - 1
                        ];
                }
                // 查询维修订单列表
                this.queryParams.orderType = "002";
                listOrder(
                    this.addDateRange(this.queryParams, this.dateRange)
                ).then((response) => {
                    this.orderList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.dateRange = null;
            this.queryParams = {
                orderId: null,
                orderIndex: null,
                memberId: null,
                merchantId: null,
                merchantName: null,
                orderType: null,
                orderState: null,
                appointmentStartTime: null,
                appointmentEndTime: null,
                serviceStartTime: null,
                serviceEndTime: null,
                serviceLongitude: null,
                serviceLatitude: null,
                shopAmount: null,
                isSettle: null,
                orderAmount: null,
                beanAmount: null,
                memberCouponId: null,
                couponAmount: null,
                totalAmount: null,
                payWay: null,
                memo: null,
                delFlag: null,
                loginIp: null,
                loginDate: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                column1: null,
                column2: null,
                column3: null,
                goodsUnit: null,
                otherUnit: null,
                memberPhone: null,
                goodsCounts: null,
                serverName: null,
                serverPhone: null,
                price: null,
                addCount: null,
                refStatus: null,
                serverId: null,
                goodsName: null,
                categoryId: [],
                repairAdd: null,
                pageNum: 1,
                pageSize: 10,
                
            };
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.reset();
            this.queryParams.orderState = null;
            this.queryParams.addCount = null;
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.orderId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加订单主";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const orderId = row.orderId || this.ids;
            getOrder(orderId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改订单主";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.orderId != null) {
                        updateOrder(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addOrder(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const orderIds = row.orderId || this.ids;
            this.$modal
                .confirm('是否确认删除订单主编号为"' + orderIds + '"的数据项？')
                .then(function () {
                    return delOrder(orderIds);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        editRefund(row) {
            this.refundOpen = true
            this.refundParams.orderId = row.orderId
        },
        async handleRefund() {
            await this.$refs.refundForm.validate();

            const { code } = await merchantRefund(this.refundParams);
            if (code === 200) {
                this.$modal.msgSuccess("操作成功");
            }
        },
    },
};
</script>

<style scoped></style>
