<template>
    <div class="bg-in-stock" ref="printId">
        <div class="numOrder">
            <barcode :value="barcodeValue"></barcode>
        </div>
        <el-form ref="orderFormRef" :rules="rules" :model="OrderForm" label-width="120px" inline :disabled="isDetail">
            <h3>基本信息</h3>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="订单类型:" prop="type" :rules="rules.type">
                        {{ getTypeName(OrderForm.type) }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="下单客户:" prop="member_id">
                        {{ getMemberName(OrderForm.member_id) }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="客户名称:" prop="customer_name">
                        {{ OrderForm.customer_name }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="客户联系方式:">
                        {{ OrderForm.customer_phone }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="起始时间:" prop="time" :rules="rules.start_time" v-if="OrderForm.type == 'TO_C'">
                        {{ OrderForm.start_time }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="付款方式:" prop="pay_type" :rules="rules.pay_type">
                        {{ getPayType(OrderForm.pay_type) }}
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="10">
                    <el-form-item label="应付金额:" prop="pay_price" :rules="rules.pay_price">
                        <span>{{ "¥" + price }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="折扣:" prop="">
                        <el-input placeholder="请输入" v-model="discount" @blur="handleBlur"
                            :disabled="type == 'pone'"></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="10">
                    <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
                        {{ "¥" + OrderForm.real_price }}
                    </el-form-item>
                </el-col>-->
                <el-col :span="10">
                    <el-form-item label="销售人员:" prop="marketing_id" :rules="rules.marketing_id">
                        {{ getMarketingName(OrderForm.marketing_id) }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="配送方式:" prop="send_type" :rules="rules.send_type">
                        {{ getSendType(OrderForm.send_type) }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="配送仓库:" prop="warehouse_id" :rules="rules.warehouse_id">
                        {{ warehouseNames(OrderForm.warehouse_id) }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="返回仓库:" prop="return_warehouse_id" :rules="rules.return_warehouse_id">
                        {{ warehouseName(OrderForm.return_warehouse_id) }}
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="配送地址:" prop="province_city_area_address">
                        {{ OrderForm.province_city_area_address }}
                    </el-form-item>
                </el-col>
                <!--  <el-col :span="10">
                    <el-form-item label="允许负库存:">
                        <el-radio-group v-model="OrderForm.subtract_stock" :disabled="type == 'pone'">
                            <el-radio :label="false">禁止</el-radio>
                            <el-radio :label="true">允许</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col> -->
                <el-col :span="24">
                    <div class="redClass">
                        <el-form-item label="备注:" prop="remark">
                            {{ OrderForm.remark }}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <div style="margin-bottom: 10px">
                <h3>商品明细</h3>
                <div v-if="!isDetail">
                    <el-button class="button" size="mini" type="primary" @click="handleSelectGoods">手动选择</el-button>
                    <el-button class="button" size="mini" type="primary" @click="handleSelectGrou">选择分组商品</el-button>
                </div>
            </div>
            <div style="display: block">
                <el-table :data="OrderForm.product_list" border :cell-style="{ textAlign: 'center' }"
                    @selection-change="handleSelectionChange" :header-cell-style="{ textAlign: 'center' }"
                    style="width: 95%">
                    <el-table-column type="selection" width="40" align="center" />
                    <el-table-column label="图标">
                        <template slot-scope="scope">
                            <img :src="cleanUrl(scope.row.goods_vo.image_small_list)" alt="" width="50px">
                        </template>
                    </el-table-column>
                    <el-table-column label="仓库名称">
                        <template slot-scope="scope">
                            {{ warehouseName(scope.row.warehouse_id) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="商品编号">
                        <template slot-scope="scope">
                            {{ scope.row.goods_vo.sn }}
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称">
                        <template slot-scope="scope">
                            {{ scope.row.goods_vo.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="sku">
                        <template slot-scope="scope">
                            <span v-if="!id"> {{ scope.row.product_vo.sku }}</span>
                            <span v-else> {{ scope.row.product_vo.sku }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="序列号">
                        <template slot-scope="scope">
                            <span v-if="!id"> {{ scope.row.product_vo.sn_code }}</span>
                            <span v-else> {{ scope.row.product_vo.sn_code }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="product_vo.spec_name" label="规格型号">
                        <!--  <template slot-scope="scope">
                            <span v-if="!id">{{ scope.row.product_vo.spec_name }}</span>
                            <span v-else>{{ scope.row.product_vo.spec_name }}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column label="单位">
                        <template slot-scope="scope">
                            <span v-if="!id"> {{ scope.row.product_vo.unit }}</span>
                            <span v-else> {{ scope.row.product_vo.unit }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单数量">
                        <template slot-scope="scope">
                            {{ scope.row.num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="库存数量">
                        <template slot-scope="scope">
                            {{ scope.row.usable_stock }}
                        </template>
                    </el-table-column>
                    <el-table-column label="售后数量">
                        <template slot-scope="scope">
                            {{ scope.row.return_num }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁天数" v-if="OrderForm.type == 'TO_C'">
                        <template slot-scope="scope">
                            {{ scope.row.day_num }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="结束时间" width="200" v-if="OrderForm.type == 'TO_C'">
                        <template slot-scope="scope">
                            <el-date-picker style="width: 170px;" v-model="scope.row.end_time" type="datetime"
                                placeholder="选择日期时间" :picker-options="pickerOptionsEnd"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作" v-if="!isDetail && type !== 'pone'">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger"
                                @click="OrderForm.product_list.splice(scope.$index, 1)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row style="margin-top: 15px;margin-bottom: 20px;">
                <el-col :span="8">
                    <el-form-item label="应付金额:" prop="pay_price" :rules="rules.pay_price">
                        <span>{{ "¥" + price }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
                        {{ OrderForm.real_price }}
                        <!-- <el-input v-model="OrderForm.real_price" placeholder="请输入"
                            :disabled="type == 'pone'"></el-input>  style="display: flex;justify-content: center;" -->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="扫码支付:" prop="real_price" :rules="rules.pay_price">
                        <div id="qrCode" ref="qrCodeDiv"></div>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="footer">
                <el-button type="primary" @click="submit" v-if="!isDetail && type == 'pone'"
                    :loading="formLoading">确认</el-button>
                <el-button type="primary" @click="submitOrderForm" v-if="!isDetail && type !== 'pone'"
                    :loading="formLoading">保存</el-button>
                <el-button type="primary" @click="saveSubmitOrderForm" v-if="!isDetail && type !== 'pone'"
                    :loading="formLoading">确认并保存</el-button>
                <el-button @click="printIng" :disabled="false" v-if="isDetail">打印</el-button>
                <el-button @click="roBack()" :disabled="false">返回</el-button>
            </div>
        </el-form>
        <el-dialog title="添加客户信息" :visible.sync="customer.dialogVisible" width="1100px" @open="handleDialogOpen"
            :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="customer.supplierForm" :rules="customer.supplierRules" ref="supplierForm"
                label-width="120px" inline>
                <el-form-item label="公司名称" prop="name">
                    <el-input v-model="customer.supplierForm.name" :minlength="2" :maxlength="20" clearable
                        placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="客户联系人" prop="contact ">
                    <el-input v-model="customer.supplierForm.contact" :minlength="2" :maxlength="20" clearable
                        placeholder="请输入客户联系人"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio v-model="customer.supplierForm.gender" label="男">男</el-radio>
                    <el-radio v-model="customer.supplierForm.gender" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model="customer.supplierForm.mobile" :minlength="2" :maxlength="20" clearable
                        placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="邮件" prop="email">
                    <el-input v-model="customer.supplierForm.email" :minlength="2" :maxlength="20" clearable
                        placeholder="请输入电子邮件"></el-input>
                </el-form-item>
                <el-form-item label="客户类别" prop="type">
                    <el-select v-model="customer.supplierForm.type" placeholder="请选择客户类别">
                        <el-option v-for="item in customer.options" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="状态" prop="status">
            <el-input v-model="customer.supplierForm.status" :minlength="2" :maxlength="20" clearable
              placeholder="请输入客户状态"></el-input>
          </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="customer.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitSupplierForm">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="商品列表" :visible.sync="goodsVisible" width="1000px" @close="closeGoosData">
            <el-table ref="table" :data="goodsData.records" border style="width: 100%"
                @selection-change="handleSelChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="分组名称"> </el-table-column>
                <el-table-column prop="remark" label="描述"> </el-table-column>
            </el-table>
            <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"
                :current-page="goodsData.page" :page-sizes="[10, 20, 50, 100]" :page-size="goodsData.size"
                layout="total, sizes, prev, pager, next, jumper" :total="goodsData.total"></el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeGoosData">取 消</el-button>
                <el-button type="primary" @click="submitGoosData()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as API_Order from "@/api/order";
import * as API_BasicSetting from "@/api/basicSetting";
import * as API_Member from "@/api/member";
import * as API_Setting from "@/api/setting";
import * as API_CollectingAccount from "@/api/collectingAccount";
import * as API_productClass from "@/api/productClass.js"
import { RegExp } from "~/ui-utils";
import {
    provinceAndCityData,
    pcTextArr,
    regionData,
    pcaTextArr,
    codeToText,
} from "element-china-area-data";
import Print from "print-js";
import html2canvas from "html2canvas";
import QRCode from 'qrcodejs2'
const initOrderForm = {
    product_list: [],
    payment_list: [],
    tax_price: 0,
    total_price: 0,
    discount_price: 0,
    pay_price: 0,
    deposit_price: 0,
    send_type: "express",
    subtract_stock: false,
    payment_status: "NOT_PAY",
    start_time: null,
    real_price: 0
};

export default {

    name: "orderAdd",
    data() {
        return {
            brcode: false,
            options: regionData,
            selectedOptions: [],
            warehouseList: [], // 仓库列表
            memberList: [], // 会员列表
            marketingList: [], // 销售经理列表
            storeList: [], // 门店列表
            collectingAccountList: [], // 支付方式列表
            fileList: [],
            deliveryTypeList: [
                {
                    code: "express",
                    name: "快递配送",
                },
                {
                    code: "self_pick",
                    name: "门店自提",
                },
            ],
            id: "",
            /** 订单表单*/
            OrderForm: {
                //省市区地址
                province_city_area: "",
                //详细信息
                address: "",
                real_price: '',
                province_city_area_address: "",
                subtract_stock: false,
                warehouse_id: [],
                return_warehouse_id: '',
                start_time: null,
                customer_name: "",
                customer_phone: '',
            },
            formLoading: false,
            isDetail: undefined,
            multipleSelection: [], // 勾选的商品
            batchUpdateNum: 0, // 批量设置的数量
            showUpdateNum: false, // 是否显示数量设置
            batchDiscountType: 0, // 批量设置的类型 0按比例 1按金额
            batchDiscountPrice: 0, // 批量设置的优惠比例或金额
            showDiscountPrice: false, // 是否显示优惠金额设置
            batchTaxRate: 0, // 批量设置的税率
            showTaxRate: false, // 是否显示税率设置
            rules: {
                customer_name: [this.MixinRequired("请输入客户名称", "blur")],
                type: [this.MixinRequired("请选择订单类型", "change")],
                pay_type: [this.MixinRequired("请选择付款方式", "change")],
                pay_price: [this.MixinRequired("请输入付款金额", "blur")],
                marketing_id: [this.MixinRequired("请选择销售人员", "change")],
                send_type: [this.MixinRequired("请选择配送方式", "change")],
                warehouse_id: [this.MixinRequired("请选择仓库", "change")],
                return_warehouse_id: [this.MixinRequired("请选择返回仓库", "change")],
                order_time: [this.MixinRequired("下单时间不能为空", "change")],
                payment_status: [this.MixinRequired("支付状态不能为空", "change")],
                payment_time: [this.MixinRequired("支付时间不能为空", "change")],
                real_price: [this.MixinRequired("请输入实付金额", "blur")],
                // delivery_type: [this.MixinRequired("请选择配送方式", "change")],
                product_list: {
                    num: [
                        this.MixinRequired("数量不能为空", "change"),
                        {
                            validator: (rule, value, callback) => {
                                if (value && !RegExp.integer.test(value)) {
                                    callback(new Error("请输入正整数"));
                                } else {
                                    callback();
                                }
                            },
                        },
                    ],
                    tax_rate: [
                        this.MixinRequired("税率不能为空", "change"),
                        {
                            validator: (rule, value, callback) => {
                                if (value && !RegExp.money.test(value)) {
                                    callback(new Error("请输入正确的税率"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur",
                        },
                    ],
                    price: [
                        this.MixinRequired("单价不能为空", "change"),
                        {
                            validator: (rule, value, callback) => {
                                if (value && !RegExp.money.test(value)) {
                                    callback(new Error("请输入正确的价格"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur",
                        },
                    ],
                    discount_price: [
                        this.MixinRequired("优惠金额不能为空", "change"),
                        {
                            validator: (rule, value, callback) => {
                                if (value && !RegExp.money.test(value)) {
                                    callback(new Error("请输入正确的金额"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur",
                        },
                    ],
                },
                payment_list: {
                    collecting_account_id: [
                        this.MixinRequired("请选择支付方式", "change"),
                    ],
                    price: [
                        this.MixinRequired("支付金额不能为空", "change"),
                        {
                            validator: (rule, value, callback) => {
                                if (value && !RegExp.money.test(value)) {
                                    callback(new Error("请输入正确的金额"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur",
                        },
                        {
                            validator: (rule, value, callback) => {
                                if (value && value * 1 <= 0) {
                                    callback(new Error("支付金额必须大于0"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur",
                        },
                    ],
                },
                customer_phone: [
                    this.MixinRequired("请输入手机号码！"),
                    {
                        validator: (rule, value, callback) => {
                            if (!RegExp.mobile.test(value)) {
                                callback(new Error("手机号码格式有误！"));
                            } else {
                                callback();
                            }
                        },
                        trigger: ["change", "blur"],
                    },
                ],
            },
            deptList: [],
            // 客户列表
            customerList: [],
            //
            orderTypeList: [],
            // 条形码
            barcodeValue: "",
            time: [],
            //新增客户
            customer: {
                dialogVisible: false,
                supplierRules: {
                    custom_sn: [
                        this.MixinRequired("请输入客户编号！"),
                        { min: 2, max: 20, message: "长度在 2 到 20 个字符" },
                        {
                            validator: (rule, value, callback) => {
                                if (value && !RegExp.userName.test(value)) {
                                    callback(
                                        new Error("只支持汉字、字母、数字、“-”、“_”的组合！")
                                    );
                                } else {
                                    callback();
                                }
                            },
                        },
                    ],
                    postal_address: [this.MixinRequired("请输入通讯地址！")],
                    telephone: [
                        this.MixinRequired("请输入联系电话！"),
                        {
                            validator: (rule, value, callback) => {
                                if (!RegExp.mobile.test(value)) {
                                    callback(new Error("联系电话格式有误！"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: ["change", "blur"],
                        },
                    ],
                    name: [this.MixinRequired("请输入联系人！")],
                    mobile: [
                        this.MixinRequired("请输入手机号码！"),
                        {
                            validator: (rule, value, callback) => {
                                if (!RegExp.mobile.test(value)) {
                                    callback(new Error("手机号码格式有误！"));
                                } else {
                                    callback();
                                }
                            },
                            trigger: ["change", "blur"],
                        },
                    ],
                    gender: [
                        { required: true, message: "请选择性别", trigger: "change" },
                    ],
                    type: [
                        { required: true, message: "请选择客户类别", trigger: "change" },
                    ],
                    contact: [
                        { required: true, message: "请输入客户联系人", trigger: "blur" },
                    ],
                },
                supplierForm: {},
                options: [],
            },
            //折扣
            discount: '',
            pickerOptions: {
                disabledDate(v) {
                    return v.getTime() < new Date().getTime() - 86400000;//  - 86400000是否包括当天
                }
            },
            pickerOptionsEnd: {
                disabledDate(time) {
                    // 禁用所有在 start_time 之前的时间
                    return time.getTime() < new Date().getTime();
                }
            },
            type: '',
            goodsData: [],
            goodsVisible: false,
            goodsList: [],//暂存勾选的分类
            params: {
                pages: 1,
                size: 10
            },//商品分页
            orderType: '',//条形码查看类型
            payurl:"",
        };
    },
    computed: {
        ...mapGetters(["user"])
    },
    mounted() {
        this.payurl = window.location.href.split('#')[0]
        this.type = this.$route.params.type
        this.orderType = this.$route.params.type
        this.GET_WarehouseList();
        this.GET_MemberList();
        this.GET_MarketingList();
        this.GET_StoreList();
        this.GET_CollectingAccountList();
        // 获取客户列表
        this.GET_CustomerList();
        
    },
    methods: {
        // 二维码生成
        creatQrCode() {
            this.$nextTick(() => {
                this.$refs.qrCodeDiv.innerHTML = "";
                new QRCode(this.$refs.qrCodeDiv, {
                    text: this.payurl + '#/payType?id=' + this.id + '&sn=' + this.barcodeValue + '&price=' + this.OrderForm.real_price,
                    width: 200,
                    height: 200,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                })
            }, 500);
        },
        cleanUrl(url) {
            // 检查URL是否以.png结尾
            if (url.endsWith('.png')) {
                // 找到.png后第一个下划线的位置
                const index = url.indexOf('.png') + 4;
                // 返回从开始到.png后的字符串
                return url.substring(0, index);
            }
            // 如果不是.png，可以选择去除最后一个下划线后的部分
            // 这部分根据实际情况调整，这里假设总是去除最后一个下划线后的内容
            const lastIndex = url.lastIndexOf('_');
            if (lastIndex !== -1) {
                return url.substring(0, lastIndex);
            }
            // 如果没有下划线，返回原URL
            return url;
        },
        //获取仓库名称
        warehouseNames(val) {
            let name = [];
            this.warehouseList.map((el) => {
                val.map((e) => {
                    if (el.id == e) {
                        return name.push(el.name)
                    }
                });
            });
            return name.join('/');
        },
        //配送方式
        getSendType(value) {
            // Access orderTypeList directly from the component's data
            const type = this.deliveryTypeList.find(type => type.value === value);
            return type ? type.label : '未知类型';
        },
        //销售人员
        getMarketingName(value) {
            // Access orderTypeList directly from the component's data
            const type = this.marketingList.find(type => type.id === value);
            return type ? type.real_name : '未知类型';
        },
        //付款方式
        getPayType(value) {
            // Access orderTypeList directly from the component's data
            const type = this.collectingAccountList.find(type => type.id === value);
            return type ? type.name : '未知类型';
        },
        //下单客户
        getMemberName(value) {
            // Access orderTypeList directly from the component's data
            const type = this.customerList.find(type => type.id === value);
            return type ? type.name : '未知类型';
        },
        //订单类型
        getTypeName(value) {
            // Access orderTypeList directly from the component's data
            const type = this.orderTypeList.find(type => type.value === value);
            return type ? type.label : '未知类型';
        },
        selMember(val) {
            API_BasicSetting.getCustomer(val).then(res => {

                this.$set(this.OrderForm, 'customer_name', res.name);
                this.$set(this.OrderForm, 'customer_phone', res.mobile);
            })

        },
        //选择商品
        handleSelChange(val) {
            if (val.length > 1) {
                // 如果当前选中数量超过1，移除先前选中的，保留最后选中的
                const lastSelected = val[val.length - 1];
                this.$refs.table.clearSelection(); // 清除所有选中
                this.$refs.table.toggleRowSelection(lastSelected, true); // 重新选中最后一个
            }
            this.goodsList = val // 更新当前选中的行
        },
        // 保存已选商品
        submitGoosData() {
            if (this.goodsList.length >= 1) {
                API_productClass.getProductByGroup(this.OrderForm.warehouse_id, this.goodsList[0].id).then(res => {
                    res.map(el => {
                        this.OrderForm.product_list.push(el)
                    })
                    this.goodsVisible = false;
                })

            } else {
                this.$message.error("请选择商品信息");
            }
        },
        // 关闭商品明细
        closeGoosData() {
            this.goodsVisible = false;
        },
        handleBlur() {
            const value = this.discount;
            const regex = /^(10|([1-9](\.\d{0,1})?))$/;
            if (!regex.test(value)) {
                this.discount = ''; // 清空不符合条件的输入
            }
        },
        // 打印功能
        printIng() {
            const printContent = this.$refs.printId;
            // 获取dom 宽度 高度
            const width = printContent.clientWidth;
            const height = printContent.clientHeight;
            // 创建一个canvas节点
            const canvas = document.createElement("canvas");

            const scale = 1; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
            canvas.width = width * scale; // 定义canvas 宽度 * 缩放
            canvas.height = height * scale; // 定义canvas高度 *缩放
            canvas.style.width = width * scale + "px";
            canvas.style.height = height * scale + "px";
            canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale

            const scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
            const scrollLeft =
                document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

            html2canvas(printContent, {
                canvas,
                backgroundColor: null,
                useCORS: true,
                windowHeight: document.body.scrollHeight,
                scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
                scrollY: -scrollTop,
            })
                .then((canvas) => {
                    const url = canvas.toDataURL("image/png");
                    printJS({
                        printable: url,
                        type: "image",
                        documentTitle: "", // 标题
                        style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
                    });
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        //获取仓库名称
        warehouseName(val) {
            let name = ''
            this.warehouseList.map(el => {
                if (el.id == val) {
                    return name = el.name
                }
            })

            return name
        },
        /** dialog打开后重置form表单校验结果 */
        handleDialogOpen() {
            setTimeout(() => {
                this.$refs["supplierForm"].clearValidate();
            });
            this.customer.supplierForm = {};
        },
        submitSupplierForm() {
            this.$refs["supplierForm"].validate((valid) => {
                if (valid) {
                    const { id } = this.customer.supplierForm;
                    const params = this.MixinClone(this.customer.supplierForm);
                    API_BasicSetting.addCustomer(params).then(() => {
                        this.customer.dialogVisible = false;
                        this.$message.success("添加成功！");
                        this.GET_CustomerList();
                    });
                } else {
                    this.$message.error("表单填写有误，请核对！");
                    return false;
                }
            });
        },
        // 添加客户
        addCust() {
            this.customer.dialogVisible = true;
        },
        handleChange(value) {
            this.OrderForm.province_city_area = value.join(",");
            //打印区域码所对应的属性值即中文地址
        },
        /** 初始化 */
        init() {
            const { id } = this.$route.params;

            if (id) {
                this.id = id;
                this.GET_OrderDetail();
            } else {
                this.OrderForm = this.MixinClone(initOrderForm);
                this.$set(this.OrderForm, "order_time", new Date().getTime());
                this.$nextTick(() => {
                    this.$refs.orderFormRef.clearValidate();
                });
            }
            this.isDetail = this.$route.name === "orderDetail";
        },
        /** 清除已选商品明细 */
        cleanGoodsList() {
            // 切换仓库需要清除已选对应仓库下的商品数据
            this.$set(this.OrderForm, "product_list", []);
        },
        //获取客户列表
        GET_CustomerList() {
            API_BasicSetting.customer(this.params)
                .then((response) => {
                    this.customerList = response.data;
                })
                .catch(() => { });
            API_Setting.getPage({ dictType: "order_type" }).then((res) => {
                this.orderTypeList = res.data;
            });
            API_Setting.getPage({ dictType: "order_send_type" }).then((res) => {
                this.deliveryTypeList = res.data;
            });
        },
        /** 获取会员列表 */
        GET_MemberList() {
            API_Member.getMemberList({
                page_no: 1,
                page_size: -1,
                disable_flag: false,
            }).then((response) => {
                this.memberList = response.data;
            });
        },
        /** 获取销售经理列表 */
        GET_MarketingList() {
            API_BasicSetting.getUserByDept().then((res) => {
                this.marketingList = res;
            });
        },
        /** 获取自提门店列表 */
        GET_StoreList() {
            API_BasicSetting.getBranches({
                page_no: 1,
                page_size: -1,
            }).then((response) => {
                this.storeList = response.data;
            });
        },
        /** 获取支付方式列表 */
        GET_CollectingAccountList() {
            API_CollectingAccount.getList({
                page_no: 1,
                page_size: -1,
                enable_flag: true,
            }).then((response) => {
                this.collectingAccountList = response.data;
            });
        },
        roBack() {
            const { callback } = this.$route.params;
            if (typeof callback === "function") callback();
            this.$store.dispatch("delCurrentViews", {
                view: this.$route,
                $router: this.$router,
            });
            this.$router.push({ name: "order" });
        },
        // 选择批次商品
        async handleSelectGoods() {
            if (!this.OrderForm.type) {
                this.$message.error("请选择订单类型！");
                return
            }
            if (this.OrderForm.warehouse_id.length == 0) {
                this.$message.error("请选择仓库！");
                return;
            }
            let warehouse_ids = this.OrderForm.warehouse_id.join(',')
            const goodsData = await this.$EnPickerGoods({
                goodsApi: `/admin/erp/warehouseOut/getGoodByWarehouse/warehouseIdAndOrderType/${this.OrderForm.type}/${warehouse_ids}`,
                selectedIds: this.OrderForm.product_list.map((item) => item.product_id),

            });
            goodsData.map(el => {
                el.end_time = ''
            })
            this.OrderForm.product_list = goodsData;
        },
        /** 分页大小发生改变 */
        handlePageSizeChange(size) {
            this.params.size = size;
            API_productClass.getProductList(this.params).then(res => {
                this.goodsData = res
                this.goodsVisible = true
            })
        },
        /** 分页页数发生改变 */
        handlePageCurrentChange(page) {
            this.params.page = page;
            API_productClass.getProductList(this.params).then(res => {
                this.goodsData = res
                this.goodsVisible = true
            })
        },
        /* 选择分组商品 */
        handleSelectGrou() {
            if (!this.OrderForm.type) {
                this.$message.error("请选择订单类型！");
                return
            }
            if (this.OrderForm.warehouse_id.length == 0) {
                this.$message.error("请选择仓库！");
                return;
            }
            this.params.order_choose_type = this.OrderForm.type
            API_productClass.getProductList(this.params).then(res => {
                this.goodsData = res
                this.goodsVisible = true
            })
        },
        /** 添加支付方式 */
        handleInsertPayment() {
            const defaultCollectingAccount = this.collectingAccountList.findLast(
                (item) => item.default_flag === true
            );
        },
        /** table单选框事件 */
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        /** 显示数量设置 */
        handleShowUpdateNum() {
            if (this.multipleSelection.length === 0) {
                this.$message.error("请先勾选商品");
                return;
            }
            this.showUpdateNum = true;
            this.batchUpdateNum = 1;
            this.$nextTick(() => {
                this.$refs.batchSetNumRef.focus();
            });
        },
        /** 取消数量设置 */
        handleCancelUpdateNum() {
            this.showUpdateNum = false;
        },
        /** 确认设置数量 */
        handleConfirmUpdateNum() {
            this.showUpdateNum = false;
            for (let i = 0; i < this.multipleSelection.length; i++) {
                this.multipleSelection[i].num = this.batchUpdateNum;
            }
        },
        /** 显示优惠金额设置 */
        handleShowUpdateDiscountPrice() {
            if (this.multipleSelection.length === 0) {
                this.$message.error("请先勾选商品");
                return;
            }
            this.showDiscountPrice = true;
            this.batchDiscountPrice = 0;
            this.$nextTick(() => {
                this.$refs.batchSetDiscountRef.focus();
            });
        },
        /** 取消优惠金额设置 */
        handleCancelUpdateDiscountPrice() {
            this.showDiscountPrice = false;
        },
        /** 确认设置优惠金额 */
        handleConfirmUpdateDiscountPrice() {
            this.showDiscountPrice = false;
            for (let i = 0; i < this.multipleSelection.length; i++) {
                const item = this.multipleSelection[i];
                if (this.batchDiscountType === 0) {
                    // 按比例
                    item.discount_price =
                        item.total_price * this.batchDiscountPrice * 0.01;
                } else {
                    // 按金额
                    item.discount_price = this.batchDiscountPrice;
                }
            }
        },
        /** 显示税率设置 */
        handleShowUpdateTaxRate() {
            if (this.multipleSelection.length === 0) {
                this.$message.error("请先勾选商品");
                return;
            }
            this.showTaxRate = true;
            this.batchTaxRate = 0;
            this.$nextTick(() => {
                this.$refs.batchSetTaxRateRef.focus();
            });
        },
        /** 取消税率设置 */
        handleCancelUpdateTaxRate() {
            this.showTaxRate = false;
        },
        /** 确认设置税率 */
        handleConfirmUpdateTaxRate() {
            this.showTaxRate = false;
            if (this.batchTaxRate != null) {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.multipleSelection[i].tax_rate = this.batchTaxRate;
                }
            }
        },
        //保存订单
        async submitOrderForm() {
            // 校验商品明细数据
            const valid = await this.$refs.orderFormRef
                .validate()
                .catch((err) => err);
            if (valid !== true) {
                this.$message.error("表单数据输入有误，请检查！");
                return;
            }
            const { id } = this.OrderForm;
            var loc = "";
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += codeToText[this.selectedOptions[i]] + ",";
            }
            this.OrderForm.province_city_area_address = loc + this.OrderForm.address;
            const params = this.MixinClone(this.OrderForm);
            params.pay_price = this.price;
            params.real_price = Number(params.real_price);
            params.item_list = params.product_list;
            params.order_time = Math.floor(params.order_time / 1000);
            params.payment_time = Math.floor(params.payment_time / 1000);
            this.formLoading = true;
            if (id) {
                API_Order.editOrder(id, params)
                    .then((response) => {
                        this.$message.success("修改成功！");
                        this.backOrderList();
                    })
                    .finally(() => {
                        this.formLoading = false;
                    });
            } else {
                params.product_list = params.product_list.map((el) => {
                    el.product_stock_id = el.id;
                    el.id = "";
                    return el;
                });
                API_Order.addOrder(params)
                    .then(() => {
                        this.$message.success("添加成功！");
                        this.backOrderList();
                    })
                    .finally(() => {
                        this.formLoading = false;
                    });
            }
        },
        //确认并保存订单
        async saveSubmitOrderForm() {
            // 校验商品明细数据
            const valid = await this.$refs.orderFormRef
                .validate()
                .catch((err) => err);
            if (valid !== true) {
                this.$message.error("表单数据输入有误，请检查！");
                return;
            }
            const { id } = this.OrderForm;
            var loc = "";
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += codeToText[this.selectedOptions[i]] + ",";
            }
            this.OrderForm.province_city_area_address = loc + this.OrderForm.address;
            const params = this.MixinClone(this.OrderForm);

            params.pay_price = this.price;
            params.real_price = Number(params.real_price);
            params.item_list = params.product_list;
            /* params.product_list.map((el) => {
              el.goods_id = el.id;
              el.id = "";
            });*/
            params.order_time = Math.floor(params.order_time / 1000);
            params.payment_time = Math.floor(params.payment_time / 1000);
            this.formLoading = true;
            if (id) {
                API_Order.editOrder(id, params)
                    .then((response) => {
                        this.$message.success("修改成功！");
                        API_Order.submit(id).then((res) => {
                            this.$message.success("订单已确认");
                            this.backOrderList();
                        });
                    })
                    .finally(() => {
                        this.formLoading = false;
                    });
            } else {
                params.product_list = params.product_list.map((el) => {
                    el.product_stock_id = el.id;
                    el.id = "";
                    return el;
                });
                API_Order.addOrder(params)
                    .then((res) => {
                        this.$message.success("添加成功！");
              /**/ API_Order.submit(res).then((res) => {
                            this.$message.success("订单已确认");
                            this.backOrderList();
                        });
                    })
                    .finally(() => {
                        this.formLoading = false;
                    });
            }
        },
        //延期确定
        async submit() {
            // 校验商品明细数据
            const valid = await this.$refs.orderFormRef
                .validate()
                .catch((err) => err);
            if (valid !== true) {
                this.$message.error("表单数据输入有误，请检查！");
                return;
            }
            const { id } = this.OrderForm;
            const params = this.MixinClone(this.OrderForm);
            params.item_list = params.product_list;
            this.formLoading = true;
            API_Order.extension(id, params)
                .then((response) => {
                    this.$message.success("调整成功！");
                    this.backOrderList();
                })
                .finally(() => {
                    this.formLoading = false;
                });
        },
        /** 获取仓库 */
        GET_WarehouseList() {
            API_BasicSetting.getWarehouseListAll({}).then((response) => {
                this.warehouseList = response;
            });
            API_Setting.getPage({ dictType: "customer_type" }).then((res) => {
                this.customer.options = res.data;
            });
        },
        /** 审核 */
        async handleAudit(isPass, remark) {
            // 二次确认
            const text = isPass ? "审核通过" : "审核驳回";
            await this.$confirm(`确认要${text}吗?`, "提示");
            await API_Order.audit(
                this.id,
                isPass ? "WAIT_WAREHOUSE_OUT" : "AUDIT_REJECT",
                remark
            );
            this.$message.success("审核成功！");
            this.backOrderList();
        },
        /** 返回订单列表 */
        backOrderList() {
            const { callback } = this.$route.params;
            if (typeof callback === "function") callback();
            this.$store.dispatch("delCurrentViews", {
                view: this.$route,
                $router: this.$router,
            });
            this.$router.push({ name: "order" });
        },
        /** 获取订单详情 */
        GET_OrderDetail() {
            API_Order.getOrderDetail(this.id).then((response) => {
          /**/ this.price = response.pay_price;
                this.barcodeValue = response.sn
                response.product_list = response.item_list.map(el => {
                    el.good_vo = el.goods_vo
                    return el
                });
                this.selectedOptions = response.province_city_area.split(",");
                this.OrderForm = response;
                if (response.type == "TO_C") {
                    this.time.push(response.start_time);
                    this.time.push(response.end_time);
                }
                this.creatQrCode() 
            });
        },
    },
    computed: {
        price: {
            get() {
                let total = 0;
                if (!this.OrderForm.product_list) return
                if (!this.id) {
                    if (this.OrderForm.type == "TO_C") {
                        /* var start = new Date(this.OrderForm.start_time); // 将起始日期字符串转换为Date对象
                        this.OrderForm.product_list.map((item) => {
                            var end = new Date(item.end_time); // 将结束日期字符串转换为Date对象
                            var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差（单位：毫秒）
                            var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
                            total += item.product_vo.day_price * item.num * monthDiff;
                        }); */
                        var start = new Date(this.time[1]); // 将起始日期字符串转换为Date对象
                        var end = new Date(this.time[0]); // 将结束日期字符串转换为Date对象
                        var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差（单位：毫秒）
                        var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
                        this.OrderForm.product_list.map((item) => {
                            total += item.product_vo.day_price * item.num * item.day_num;
                        });
                        return total;
                    } else {
                        this.OrderForm.product_list.map((item) => {
                            total += item.product_vo.price * item.num;
                        });
                        return total;
                    }
                } else {
                    if (this.OrderForm.type == "TO_C") {
                        var start = new Date(this.time[1]); // 将起始日期字符串转换为Date对象
                        var end = new Date(this.time[0]); // 将结束日期字符串转换为Date对象
                        var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差（单位：毫秒）
                        var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
                        this.OrderForm.product_list.map((item) => {
                            total += item.product_vo.day_price * item.num * item.day_num;
                        });
                        return total;
                    } else {
                        this.OrderForm.product_list.map((item) => {
                            total += item.product_vo.price * item.num;
                        });
                        return total;
                    }
                }
            },
            set(newValue) {
                this.OrderForm.real_price = newValue;
            }
        },
    },
    watch: {
        discount: {
            deep: true,
            handler(newVal) {
                this.OrderForm.real_price = this.price * newVal / 10;
            },
        },
        "OrderForm.product_list": {
            deep: true,
            handler(newVal) {
                newVal.forEach((item) => {
                });
            },
        },
        $route: {
            immediate: true,
            handler(newVal) {
                if (
                    newVal.name === "orderAdd" ||
                    newVal.name === "orderEdit" ||
                    newVal.name === "orderDetail"
                ) {
                    this.init();
                }
            },
        },
        "OrderForm.payment_status": {
            handler(newVal) {
                if (newVal === "PAY" && !this.OrderForm.payment_time) {
                    this.OrderForm.payment_time = new Date().getTime();
                }
            },
        },
    },
};
</script>

<style type="text/scss" lang="scss" scoped>
/** 底部步骤 */
.footer {
    width: 95%;
    padding: 10px;
    bottom: 0px;
    text-align: center;
    z-index: 999;
}

.mx {
    display: flex;
    align-items: center;

    .button {
        margin-left: 10px;
    }
}

.bg-in-stock {
    background-color: #fff;
    margin: 10px;
    padding: 25px;

    .numOrder {
        display: flex;
        justify-content: center;
    }
}

/deep/ {
    .el-input--suffix .el-input__inner {
        padding-right: 10px;
    }

    .error-input {
        .el-input__inner {
            border: 1px solid red;
        }
    }
}

/deep/ .el-form-item {
    // width: 350px;
}

/** 表格中输入框样式 */
.tableFormItem {
    width: 100%;
    margin-bottom: 0;
}

/** 输入框错误提示样式 */
/deep/ .el-form-item__error {
    // position: relative;
}

/** date-picker宽度和其他输入框保持一致 */
/deep/ .el-date-editor {
    .el-input__inner {
        padding-inline-start: 15px;
    }

    .el-input__prefix {
        display: none;
    }
}

.redClass /deep/ .el-form-item__content {
    //color: red !important;
    font-weight: 700;
    width: 500px !important;
}

/deep/ .el-form-item {
    width: 100%;
    height: auto;

    .el-input {
        width: 200px;
    }
}
</style>