<template>
  <div class="bg-in-stock">
    <div class="numOrder" v-if="brcode">
      <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">
            <!-- @change="cleanGoodsList" -->
            <el-select v-model="OrderForm.type" clearable>
              <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="time"
            :rules="rules.time"
            v-if="OrderForm.type == 'TO_C'"
          >
            <!--  -->
            <el-date-picker
              v-model="time"
              type="daterange"
              align="center"
              :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="member_id"
            :rules="rules.member_id"
          >
            <el-select v-model="OrderForm.member_id" clearable>
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-button type="primary" @click="addCust">新增客户</el-button>
          </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>
              <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="pay_price"
            :rules="rules.pay_price"
          >
            <span>{{ "¥" + price }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            label="实付金额:"
            prop="pay_price"
            :rules="rules.pay_price"
          >
          <!-- @input="validateNumber" -->
            <span
              >折扣:<el-input
                placeholder="请输入"
                v-model="discount"
                @blur="handleBlur"
                style="width: 70px"
              ></el-input>
            </span>
            <span>折后金额:</span>
            <el-input
              v-model="OrderForm.real_price"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="销售人员" :rules="rules.marketing_id">
            <el-select v-model="OrderForm.marketing_id" clearable>
              <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>
              <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
            >
              <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-select v-model="OrderForm.addres">
              <el-option
                v-for="item in marketingList"
                :key="item.id"
                :label="item.real_name"
                :value="item.id"
              />
            </el-select> -->
            <el-cascader
              size="large"
              :options="options"
              clearable
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader>
            <el-input
              v-model="OrderForm.address"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <div class="redClass">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="OrderForm.remark"
                type="textarea"
                :autosize="{ minRows: 2 }"
              ></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
          >
        </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">
              {{ warehouseName(scope.row.warehouse_id) }}
            </template>
          </el-table-column>
          <el-table-column label="商品编号">
            <template slot-scope="scope">
              {{ scope.row.good_vo.sn }}
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              {{ scope.row.good_vo.name }}
            </template>
          </el-table-column>
          <el-table-column label="条码">
            <template slot-scope="scope">
              <span v-if="!id"> {{ scope.row.product_vo.bar_code }}</span>
              <span v-else> {{ scope.row.product_vo.bar_code }}</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.join("/") }}</span>
              <span v-else>{{ scope.row.product_vo.spec_name.join("/") }}</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="差异">
            <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">
            <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>
      <!-- <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="submitOrderForm"
          v-if="!isDetail"
          :loading="formLoading"
          >保存</el-button
        >
        <el-button
          type="primary"
          @click="saveSubmitOrderForm"
          v-if="!isDetail"
          :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>
  </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 { RegExp } from "~/ui-utils";
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
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",
  payment_status: "NOT_PAY",
};

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: "",
        province_city_area_address: "",
        warehouse_id:[],
      },
      formLoading: false,
      isDetail: undefined,
      multipleSelection: [], // 勾选的商品
      batchUpdateNum: 0, // 批量设置的数量
      showUpdateNum: false, // 是否显示数量设置
      batchDiscountType: 0, // 批量设置的类型 0按比例 1按金额
      batchDiscountPrice: 0, // 批量设置的优惠比例或金额
      showDiscountPrice: false, // 是否显示优惠金额设置
      batchTaxRate: 0, // 批量设置的税率
      showTaxRate: false, // 是否显示税率设置
      rules: {
        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")],
        member_id: [this.MixinRequired("请选择会员", "change")],
        order_time: [this.MixinRequired("下单时间不能为空", "change")],
        payment_status: [this.MixinRequired("支付状态不能为空", "change")],
        payment_time: [this.MixinRequired("支付时间不能为空", "change")],
        // 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",
            },
          ],
        },
      },
      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: [
          /*  {
              value: '全部',
              label: '全部'
            },{
              value: '销售客户',
              label: '销售客户'
            }, {
              value: '租赁客户',
              label: '租赁客户'
            }, */
        ],
      },
      //折扣
      discount: '',
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  mounted() {
    this.GET_WarehouseList();
    this.GET_MemberList();
    this.GET_MarketingList();
    this.GET_StoreList();
    this.GET_CollectingAccountList();
    // 获取客户列表
    this.GET_CustomerList();
  },
  methods: {
    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})?))$/;
      console.log(regex.test(value) || value === '');
      if (regex.test(value) || value === '') {
        this.discount = value;
      } else {
        event.target.value = this.discount;
      }
    }, */
    // 打印功能
    printIng() {},
  /*   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(",");
      console.log(this.OrderForm.province_city_area);
      /**/

      //打印区域码所对应的属性值即中文地址
    },
    /** 初始化 */
    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;
          console.log(this.customerList);
        })
        .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(',')
      console.log(this.OrderForm.warehouse_id);
      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 },

      });

      this.OrderForm.product_list = goodsData;
      /* .map((item) => {
        // 初始化字段，和订单的item字段名保持一致
        item.product_id = item.id;
        item.product_name = item.name;
        item.product_sn = item.sn;
        item.product_specification = item.specification;
        item.product_unit = item.unit;
        item.num = 0;
        item.discount_price = 0;
        // 原价（总）
        item.total_price = 0;
        // 税额（总）
        item.tax_price = 0;
        // 合计

        return item;
      }); */
    },
    /** 添加支付方式 */
    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;
      //设置时间
      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.product_list = params.product_list.map((el) => {
        el.product_stock_id = el.id;
        el.id = "";
        return el;
      });
      /*  params.item_list = params.product_list;
      params.product_list.map((el) => {
        el.goods_id = el.id;
        el.id = "";
      });*/
      params.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 {
        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.product_list = params.product_list.map((el) => {
        el.product_stock_id = el.id;
        el.id = "";
        return el;
      });
      params.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 {
        API_Order.addOrder(params)
          .then((res) => {
            this.$message.success("添加成功！");
            console.log(res);
            /**/ API_Order.submit(res).then((res) => {
              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.price;
        response.product_list = response.item_list.map(el=>{
          el.good_vo=el.goods_vo
          return el
        }); /* .map((el) => {
          el.allow_sn = el.good_vo.allow_sn;
          el.bar_code = el.goods_vo.bar_code;
          el.brand_id = el.goods_vo.brand_id;
          el.brand_name = el.goods_vo.brand_name;
          el.category_id = el.goods_vo.category_id;
          el.category_ids = el.goods_vo.category_ids;
          el.category_name = el.goods_vo.category_name;
          el.cost_price = el.goods_vo.cost_price;
          el.create_time = el.goods_vo.create_time;
          el.creator = el.goods_vo.creator;
          el.description = el.goods_vo.description;
          el.en_name = el.goods_vo.en_name;
          el.freight_template_id = el.goods_vo.freight_template_id;
          el.goods_style = el.goods_vo.goods_style;
          el.goods_unit = el.goods_vo.goods_unit;
          el.goods_unit = el.goods_vo.goods_unit;
          el.have_spec = el.goods_vo.have_spec;
          el.hire_or_sail = el.goods_vo.hire_or_sail;
          el.id = el.goods_vo.id;
          el.image = el.goods_vo.image;
          el.image_list = el.goods_vo.image_list;
          el.label_names = el.goods_vo.label_names;
          el.market_enable = el.goods_vo.market_enable;
          el.mkt_price = el.goods_vo.mkt_price;
          el.name = el.goods_vo.name;
          el.params_list = el.goods_vo.params_list;
          el.price = el.goods_vo.price;
          el.sn = el.goods_vo.sn;
          el.sn_code = el.goods_vo.sn_code;
          el.sort = el.goods_vo.sort;
          el.update_time = el.goods_vo.update_time;
          el.updater = el.goods_vo.updater;
          el.usable_stock = el.goods_vo.usable_stock;
          el.video = el.goods_vo.video;
          return el;
        }); */

        this.selectedOptions = response.province_city_area.split(",");
        this.OrderForm = response;
        console.log(this.OrderForm.product_list);
        /* 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() {
      let total = 0;
      if(!this.OrderForm.product_list) return
      if (!this.id) {
        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.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.pay_price = this.price * newVal/10;
      },
    },
    "OrderForm.product_list": {
      deep: true,
      handler(newVal) {
        newVal.forEach((item) => {
          /* item.sum=item.price*item.num
          return console.log(item.sum+=); */
        });
        /* 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__label {
  //color: red !important;
  font-weight: 700;
  width: 500px;
}
/deep/ .el-form-item {
  width: 100%;
  height: auto;
  .el-input {
    width: 200px;
  }
}
</style>
