<template>
  <div class="bg-in-stock" ref="printId">
    <!--  <h2 v-if="barcodeValue">订单编号</h2> 
    <div class="numOrder" v-if="(barcodeValue && type !== 'pone') && orderType == 'check'">
      <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">
            <el-select v-model="OrderForm.type" clearable :disabled="type == 'pone'">
              <el-option v-for="(item, index) in orderTypeList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="下单客户:" prop="member_id">
            <el-select v-model="OrderForm.member_id" clearable :disabled="type == 'pone'" @change="selMember">
              <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <!--   <el-button type="primary" v-if="type !== 'pone'" @click="addCust">新增客户</el-button> -->
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="客户名称:" prop="customer_name">
            <el-input placeholder="请输入客户名称" v-model="OrderForm.customer_name" :disabled="type == 'pone'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="客户联系方式:" prop="customer_phone">
            <el-input placeholder="请输入客户联系方式" v-model="OrderForm.customer_phone" :disabled="type == 'pone'"></el-input>
          </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'">
            <!-- <el-date-picker v-model="OrderForm.start_time" type="datetime" placeholder="选择日期时间"
              :disabled="type == 'pone'" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker> -->

            <el-date-picker v-model="time" type="daterange" align="center" @change='timeChange' :editable="false"
              unlink-panels :clearable="false" :default-time="['00:00:00', '23:59:59']" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" :picker-options="{
                disabledDate(time) {
                  return (
                    time.getTime() <=
                    new Date(
                      new Date().getFullYear(),
                      new Date().getMonth(),
                      new Date().getDate()
                    ).getTime() -
                    86400000
                  );
                },
                shortcuts: MixinPickerShortcuts,
              }">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="付款方式:" prop="pay_type" :rules="rules.pay_type">
            <el-select v-model="OrderForm.pay_type" clearable :disabled="type == 'pone'">
              <el-option v-for="item in collectingAccountList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="销售人员:" prop="marketing_id" :rules="rules.marketing_id">
            <el-select v-model="OrderForm.marketing_id" clearable :disabled="type == 'pone'">
              <el-option v-for="item in marketingList" :key="item.id" :label="item.real_name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="配送方式:" prop="send_type" :rules="rules.send_type">
            <el-select v-model="OrderForm.send_type" clearable :disabled="type == 'pone'">
              <el-option v-for="item in deliveryTypeList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="配送仓库:" prop="warehouse_id" :rules="rules.warehouse_id">
            <!-- <el-cascader v-model="OrderForm.dept_id" :options="deptList" :props="{
            label: 'name',
            value: 'id',
            emitPath: false,
            checkStrictly: true
          }" clearable></el-cascader> -->
            <el-select @change="cleanGoodsList" v-model="OrderForm.warehouse_id" multiple clearable
              :disabled="type == 'pone'">
              <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="返回仓库:" prop="return_warehouse_id" :rules="rules.return_warehouse_id">
            <el-select v-model="OrderForm.return_warehouse_id" clearable :disabled="type == 'pone'">
              <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="配送地址:" prop="province_city_area_address">
            <el-cascader size="small" :options="options" clearable v-model="selectedOptions" @change="handleChange"
              :disabled="type == 'pone'">
            </el-cascader>
            <el-input v-model="OrderForm.address" placeholder="请输入" :disabled="type == 'pone'"></el-input>
          </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">
              <el-input v-model="OrderForm.remark" type="textarea" :autosize="{ minRows: 2 }"
                :disabled="type == 'pone'"></el-input>
            </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="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 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">
              <el-input v-model="scope.row.num" type="number" :min="0" :maxlength="20"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存数量">
            <template slot-scope="scope">
              {{ scope.row.usable_stock }}
            </template>
          </el-table-column>
          <el-table-column label="天数" width="200" v-if="OrderForm.type == 'TO_C'">
            <template slot-scope="scope">
              <el-input v-model="scope.row.num" type="number" :min="0" :maxlength="20"></el-input>
            </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="差异">
            <template slot-scope="scope">
              {{ scope.row.usable_stock - scope.row.num || 0 }}
            </template>
          </el-table-column>
           <el-table-column label="数量">
          <template slot-scope="scope">
            <el-form-item v-if="!isDetail" :prop="'product_list.'+scope.$index+'.num'" :rules="rules.product_list.num" class="tableFormItem">
              <el-input v-model="scope.row.num" :maxlength="20" :minlength="1"></el-input>
            </el-form-item>
            <span v-else>{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <el-form-item v-if="!isDetail" :prop="'product_list.'+scope.$index+'.price'" :rules="rules.product_list.price" class="tableFormItem">
              <el-input v-model="scope.row.price" :maxlength="20" :minlength="1"></el-input>
            </el-form-item>
            <span v-else>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            {{ scope.row.total_price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="税率">
          <template slot-scope="scope">
            <el-form-item v-if="!isDetail" :prop="'product_list.'+scope.$index+'.tax_rate'" :rules="rules.product_list.tax_rate" class="tableFormItem">
              <el-input v-model="scope.row.tax_rate" :maxlength="20"></el-input>
            </el-form-item>
            <span v-else>{{ scope.row.tax_rate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="税额">
          <template slot-scope="scope">
            {{ scope.row.tax_price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="优惠金额">
          <template slot-scope="scope">
            <el-form-item v-if="!isDetail" :prop="'product_list.'+scope.$index+'.discount_price'" :rules="rules.product_list.discount_price" class="tableFormItem">
              <el-input v-model="scope.row.discount_price"></el-input>
            </el-form-item>
            <span v-else>{{ scope.row.discount_price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合计">
          <template slot-scope="scope">
            {{ scope.row.pay_price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-if="!isDetail" v-model="scope.row.remark"></el-input>
            <span v-else>{{ scope.row.remark }}</span>
          </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="">
            <el-input placeholder="请输入" v-model="discount" @blur="handleBlur" :disabled="type == 'pone'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
            <!-- @input="validateNumber" 
            <span>折扣:
            </span>
            <span>折后金额:</span>-->
            <el-input v-model="OrderForm.real_price" placeholder="请输入" :disabled="type == 'pone'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <div class="mx">
      <h3>支付信息</h3>
      <el-button v-if="!isDetail" class="button" size="mini" type="primary" icon="el-icon-circle-plus-outline"
                 @click="handleInsertPayment"></el-button>
    </div>
    <div style="display:block">
      <el-table :data="OrderForm.payment_list" border :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }" style="width: 95%; ">
        <el-table-column label="支付方式">
          <template slot-scope="scope">
            <el-form-item v-if="!isDetail" :prop="'payment_list.'+scope.$index+'.collecting_account_id'" :rules="rules.payment_list.collecting_account_id" class="tableFormItem">
              <el-select v-model="scope.row.collecting_account_id">
                <el-option v-for="item in collectingAccountList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <span v-else>{{ scope.row.collecting_account_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付金额">
          <template slot-scope="scope">
            <el-form-item v-if="!isDetail" :prop="'payment_list.'+scope.$index+'.price'" :rules="rules.payment_list.price" class="tableFormItem">
              <el-input v-model="scope.row.price"></el-input>
            </el-form-item>
            <span v-else>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-if="!isDetail" v-model="scope.row.remark"></el-input>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="!isDetail">
          <template slot-scope="scope">
            <el-button size="mini" type="danger"
                       @click="OrderForm.payment_list.splice(scope.$index, 1)">删除
            </el-button>
          </template>
        </el-table-column>
        <div slot="append" style="text-align: right;line-height: 50px;margin-right: 20px;font-size: small">
          收取定金：{{ OrderForm.deposit_price.toFixed(2) }} &nbsp;&nbsp;
        </div>
      </el-table>
    </div> -->
      <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 type="primary" :disabled="false" @click="handleAudit(true)" v-if="isDetail && checkPermission(['order:audit']) && OrderForm.allowable.audit">审核通过</el-button>
      <el-button type="danger" :disabled="false" @click="handleAudit(false)" v-if="isDetail && checkPermission(['order:audit']) && OrderForm.allowable.audit">审核驳回</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";

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: '',//条形码查看类型
      
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  mounted() {
    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();
    this.OrderForm.marketing_id=JSON.parse(JSON.parse(localStorage.getItem("admin_user")).data).uid
  },
  methods: {
    // 租赁时间
    timeChange(val) {
      let start = new Date(val[1]); // 将起始日期字符串转换为Date对象
      let end = new Date(val[0]); // 将结束日期字符串转换为Date对象
      let timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差（单位：毫秒）
      let monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000));
    },
    selMember(val) {
      API_BasicSetting.getCustomer(val).then(res => {
        this.$set(this.OrderForm, 'customer_name', res.name);
        this.$set(this.OrderForm, 'customer_phone', res.mobile);
        /*  this.$nextTick(() => { this.OrderForm.customer_name = res.name
          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 = ''; // 清空不符合条件的输入
      }
    },
    /*  //折扣正则
     handleInput(event) {
       // 使用正则表达式来检查输入是否为1到10的整数或最多两位小数
       const value = event.target.value;
       const regex = /^(10|([1-9](\.\d{0,1})?))$/;
       if (regex.test(value) || value === '') {
         this.discount = value;
       } else {
         event.target.value = this.discount;
       }
     }, */
    // 打印功能
    printIng() {
      // Print({
      //   printable: 'deliverySheet',
      //   type: 'html',
      //   targetStyles: ['*'],
      //   ignoreElements: ['no-logs', 'goods-image', 'no-btn']
      // })
      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);
        });
    },
    /*   validateNumber(){
        const regex = '/^(?:[0-9]|10(?:\.0{1,2})?)$/';
       return regex.test(this.discount)
      }, */
    //获取仓库名称
    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;
      });
    },
    /** 获取会员列表 */
    GET_MemberList() {
      API_Member.getMemberList({
        page_no: 1,
        page_size: -1,
        disable_flag: false,
      }).then((response) => {
        this.memberList = response.data;
      });
    },
    /** 获取销售经理列表 */
    GET_MarketingList() {
      /*  API_BasicSetting.getMarketingManagerList({
        page_no: 1,
        page_size: -1,
        disable_flag: 0,
      }).then((response) => {
        this.marketingList = response.data;
      }); */
      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}`,
        // goodsApi: `/admin/erp/warehouseOut/getGoodByWarehouse/warehouseIdAndOrderType`,
        selectedIds: this.OrderForm.product_list.map((item) => item.product_id),
        //goodsApiParams: { order_type: this.OrderForm.type,warehouse_ids:arr },

      });
      goodsData.map(el => {
        el.end_time = ''
        console.log(el);
      })
      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
      );
      /*  this.OrderForm.payment_list.push({
        collecting_account_id: defaultCollectingAccount
          ? defaultCollectingAccount.id
          : null,
      }); */
    },
    /** 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.item_list = params.product_list;
      params.product_list.map((el) => {
        el.goods_id = el.id;
        el.id = "";
      });*/
      params.pay_price = this.price;
      params.real_price = Number(params.real_price);
      /*  params.product_list.map((el) => {
        return (el.product_id = el.id);
      }); */
      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;
      //设置时间
      /*    delete this.OrderForm.start_time;
         delete this.OrderForm.end_time;
         if (this.time) {
           this.OrderForm.start_time = this.time[0];
           this.OrderForm.end_time = this.time[1];
         }
         delete this.time; */
      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;
      /* 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;
      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;
        /* this.fileList = response.attachment
          ? [{ name: "附件", url: response.attachment }]
          : [];
        this.OrderForm.order_time = Math.floor(
          this.OrderForm.order_time * 1000
        );*/
        if (response.type == "TO_C") {
          this.time.push(response.start_time);
          this.time.push(response.end_time);
        }
        /* if (this.OrderForm.payment_time) {
          this.OrderForm.payment_time = Math.floor(
            this.OrderForm.payment_time * 1000
          );
        } */
      });
    },
  },
  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 * monthDiff;
            });
            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 * monthDiff;
            });
            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;
        /*  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;
             });
 
             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 * monthDiff;
             });
             return total;
           } else {
             this.OrderForm.product_list.map((item) => {
               total += item.product_vo.price * item.num;
             });
             return total;
           }
         } */
      }
    },
  },
  watch: {
    discount: {
      deep: true,
      handler(newVal) {
        this.OrderForm.real_price = this.price * newVal / 10;
      },
    },
    "OrderForm.product_list": {
      deep: true,
      handler(newVal) {
        newVal.forEach((item) => {
          /* item.sum=item.price*item.num
          return  */
        });
        /* this.OrderForm.total_price = newVal.reduce(
          (sum, item) => sum + item.total_price,
          0
        );    // 税额（总）
          item.tax_price = item.total_price * item.tax_rate * 0.01;
          // 合计
        this.OrderForm.discount_price = newVal.reduce(
          (sum, item) => sum + item.discount_price * 1,
          0
        );
        this.OrderForm.tax_price = newVal.reduce(
          (sum, item) => sum + item.tax_price,
          0
        ); */
      },
    },
    /* "OrderForm.payment_list": {
      deep: true,
      handler(newVal) {
        this.OrderForm.deposit_price = newVal.reduce(
          (sum, item) => sum + item.price * 1,
          0
        );
      },
    }, */
    $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>
