<template>
  <div class="bg-in-stock">
    <el-form ref="goodsExchangeAddForm" :model="goodsExchangeAddForm" :rules="goodsExchangeAddFormRule"
      label-width="160px" inline class="change-form">
      <el-form-item label="订单编号:" prop="order_id" class="change-form-item" v-if="goodsExchangeAddForm.sn && (goodsExchangeAddForm.type == 'SALE_AFTER' || goodsExchangeAddForm.type == 'HAIL_ENTRY')">
        {{ goodsExchangeAddForm.sn }}
        <!-- <span>
          <el-input v-model="goodsExchangeAddForm.sn" ref="order" @keyup.enter.native="blurUsername()">
          </el-input>
          <el-button @click="blurUsername()">搜索</el-button>
          <el-button @click="orderBtn">订单列表</el-button>
        </span> -->
      </el-form-item>
      <el-form-item prop="warehouse_id" label="入库仓库" class="change-form-item">
        <el-select v-model="goodsExchangeAddForm.warehouse_id" clearable
          :disabled="type === 'detail' || type === 'audit'">
          <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type" class="change-form-item">
        <el-select v-model="goodsExchangeAddForm.type" filterable allow-create clearable default-first-option
          :disabled="type === 'detail' || type === 'audit' || orderType || goodsExchangeAddForm.type == 'SALE_AFTER' || goodsExchangeAddForm.type == 'HAIL_ENTRY'">
          <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.value"
            :disabled="item.value == 'TRANSFER_ENTRY' || item.value == 'HAIL_ENTRY' || item.value == 'SALE_AFTER'" />
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="change_desc" class="change-form-item" style="width: 61%">
        <el-input style="flex: 1" v-model="goodsExchangeAddForm.memo" type="textarea"
          :disabled="type === 'detail' || type === 'audit'" :autosize="{ minRows: 3, maxRows: 4 }"
          placeholder="请输入"></el-input>
      </el-form-item>
      <div class="mx">
        <h3>商品明细</h3>
        <el-button class="button" size="mini" type="primary" v-if="type !== 'detail' && type !== 'audit'"
          @click="scanCode">扫码入库</el-button>
        <el-button class="button" size="mini" type="primary"
          v-if="type !== 'detail' && type !== 'audit' && goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' && goodsExchangeAddForm.type !== 'HAIL_ENTRY' && goodsExchangeAddForm.type !== 'SALE_AFTER'"
          @click="handleSelectWarehouseEntryBatch">选择</el-button>
      </div>
      <div style="width: 100%; display: block">
        <el-form-item style="width: 100%">
          <el-table :data="goodsExchangeAddForm.product_list" border :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 20px">
            <el-table-column label="库位号">
              <template slot-scope="scope">
                <el-popover placement="right" trigger="click" v-if="scope.row.area_stock_list">
                  <div>
                    <p v-for="item in scope.row.area_stock_list" :key="item.id">{{ item.warehouse_area_name }}</p>
                  </div>
                  <span slot="reference" v-if="scope.row.area_stock_list.length !== 0">{{
                    scope.row.area_stock_list[0].warehouse_area_name }}</span>
                </el-popover>
              </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">
                <div class="sn-code-container">
                  <span v-for="item in scope.row.sn_code_list" :key="item.id">
                    <p>{{ item.sn_code }}</p>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="product_vo.spec_name" label="规格型号" v-if="id">
              <!-- <template slot-scope="scope">
                {{ scope.row.product_vo.spec_name }}
              </template> -->
            </el-table-column>
            <el-table-column prop="product_vo.spec_name" label="规格型号" v-else>
              <!--  <template slot-scope="scope">
                {{ scope.row.spec_name }}
              </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="入库数量" width="155">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.num" type="number" :min="0" :maxlength="20"
                  :disabled="type === 'detail' || type === 'audit' || goodsExchangeAddForm.type == 'TRANSFER_ENTRY' || goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER'"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="entry_num" label="已入库数量"
              v-if="goodsExchangeAddForm.type == 'TRANSFER_ENTRY' || goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER'">
              <template slot-scope="scope">
                {{ scope.row.entry_num }}
              </template>
            </el-table-column>
            <el-table-column prop="not_entry_num" label="未入库数量"
              v-if="goodsExchangeAddForm.type == 'TRANSFER_ENTRY' || goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER'">
              <template slot-scope="scope">
                {{ scope.row.not_entry_num }}
              </template>
            </el-table-column>
            <el-table-column label="订单数量"
              v-if="goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER' || goodsExchangeAddForm.type == 'TRANSFER_ENTRY'">
              <template slot-scope="scope">
                {{ scope.row.order_num }}
              </template>
            </el-table-column>
            <el-table-column label="退货数量" v-if="goodsExchangeAddForm.type == 'SALE_AFTER'">
              <template slot-scope="scope">
                {{ scope.row.return_num }}
              </template>
            </el-table-column>
            <el-table-column label="在途库存" v-if="TO_BE_RETURN == 'TO_BE_RETURN'">
              <template slot-scope="scope">
                {{ scope.row.stock_num }}
              </template>
            </el-table-column>
            <el-table-column label="差异" v-if="id">
              <template slot-scope="scope">
                <span v-if="scope.row.order_num">{{
                  scope.row.num - scope.row.order_num || 0
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作"
              v-if="type !== 'detail' && type !== 'audit' && goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' && goodsExchangeAddForm.type !== 'HAIL_ENTRY' && goodsExchangeAddForm.type !== 'SALE_AFTER'">
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  @click="addSnCode(scope.row, scope.$index)"
                  >添加序列号</el-button
                > -->
                <el-button size="mini" type="danger" @click="
                  goodsExchangeAddForm.product_list.splice(scope.$index, 1)
                  ">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
    </el-form>
    <div class="footer">
      <!-- <el-button v-if="type === 'audit'" type="primary" @click="handlePassGoodsExchange()">审核通过
      </el-button>
      <el-button v-if="type === 'audit'" type="danger" @click="dialogVisible = true">审核驳回
      </el-button> -->
      <el-button
        v-if="type !== 'audit' && type !== 'detail' && checkPermission(['warehouseEntry2:add']) && goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' && goodsExchangeAddForm.type !== 'HAIL_ENTRY' && goodsExchangeAddForm.type !== 'SALE_AFTER'"
        type="primary" @click="savegoodsExchangeAddForm">保存
      </el-button>
      <el-button v-if="type !== 'audit' && type !== 'detail' && checkPermission(['warehouseEntry:update'])"
        type="primary" @click="submitgoodsExchangeAddForm">入库
      </el-button>
      <el-button @click="printIng" v-if="type == 'audit'">打印</el-button>
      <el-button @click="toBack()">返回</el-button>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="goodsExchangeAddForm" :model="goodsExchangeAddForm" label-width="120px" inline style="width: 900px">
        <el-form-item label="驳回原因" prop="reject_reason">
          <el-input v-model="goodsExchangeAddForm.reject_reason" type="textarea" :minlength="0"
            :maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRejectGoodsExchange()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="扫码入库" :visible.sync="scanDialogVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="scanGoodsForm" :model="scanGoodsForm" label-width="120px" inline>
        <!-- @blur="blurCode()" -->
        <el-form-item label="sku" prop="bar_code">
          <el-input v-model="scanGoodsForm.bar_code" ref="input" @keyup.enter.native="toSearch()" :minlength="0"
            :maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="序列号" prop="sn_code">
          <el-input ref="sn_input" v-model="sn_code" @keyup.enter.native="toSnCode()" :minlength="0"
            :maxlength="100"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="入库商品" :visible.sync="goodsVisible" width="1000px" @close="closeGoosData">
      <div style="display: flex;align-items: center; justify-content: flex-end; padding: 10px 0;">
        <span>搜索商品:</span><el-input v-model="params.keyWord" style="width: 200px;margin-right: 5px;"></el-input>
        <el-button @click="searchGoodEvent"> 搜索 </el-button>
      </div>
      <el-table :data="goodsData.records" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="" label="商品编号">
          <template slot-scope="scope">
            {{ scope.row.goods_vo.sn }}
          </template>
        </el-table-column>
        <el-table-column prop="product_vo.sku" label="sku">
        </el-table-column>
        <!-- <el-table-column prop="" label="序列号"></el-table-column> -->
        <el-table-column prop="" label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.goods_vo.name }}
          </template>
        </el-table-column>
        <el-table-column prop="product_vo.spec_name" label="规格型号">
          <!--  <template slot-scope="scope">
            {{ scope.row.spec_name }}
          </template> -->
        </el-table-column>
        <el-table-column prop="product_vo.unit" label="单位"> </el-table-column>
        <el-table-column prop="" label="商品类型">
          <template slot-scope="scope">
            {{ scope.row.goods_vo.hire_or_sail == 'sail' ? '售卖商品' : '租赁商品' }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="product_list.stock_num" label="库存数量"> </el-table-column> -->
      </el-table>
      <el-pagination @size-change="goodsPageSizeChange" @current-change="goodsPageCurrentChange"
        :current-page="goodsData.current" :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>
    <el-dialog title="订单列表" :visible.sync="orderVisible" width="1000px" @close="closeGoosData">
      <el-table :data="orderList.data" border style="width: 100%" ref="tables" @selection-change="handleSelOrderChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="" label="订单编号">
          <template slot-scope="scope">
            {{ scope.row.sn }}
          </template>
        </el-table-column>
        <!--         <el-table-column prop="member_id" label="客户">
          <template slot-scope="scope">{{
            memberType(scope.row.member_id)
          }}</template>
        </el-table-column>
 -->
        <el-table-column prop="order_time" label="下单时间">
          <template slot-scope="scope">{{
            scope.row.order_time | unixToDate
            }}</template>
        </el-table-column>
        <el-table-column prop="" label="仓库名称">
          <template slot-scope="scope">
            {{ warehouseName(scope.row.warehouse_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="配送方式">
          <template slot-scope="scope">{{
            deliveryType(scope.row.send_type)
            }}</template>
        </el-table-column>
        <!-- <el-table-column prop="pay_type" label="付款方式">
          <template slot-scope="scope">{{
            payType(scope.row.pay_type)
          }}</template>
        </el-table-column> -->
        <el-table-column prop="" label="实付金额">
          <template slot-scope="scope">{{
            "￥" + scope.row.pay_price
            }}</template>
        </el-table-column>
        <!-- <el-table-column prop="" label="订单状态">
          <template slot-scope="scope">
            {{ typeName(scope.row.status) }}
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"
        :current-page="orderList.page_no" :page-sizes="[10, 20, 50, 100]" :page-size="orderList.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="orderList.data_total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOrder">取 消</el-button>
        <el-button @click="searchOrderAdd" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog
      title="序列号"
      @close="closeSncode"
      :visible.sync="snCodeVisible"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="scanGoodsForm"
        :model="scanGoodsForm"
        label-width="120px"
        inline
      >
        <el-form-item label="序列号" prop="sn_code">
          <el-input
            v-model="sn_code"
            @keyup.enter.native="toSnCode()"
            :minlength="0"
            :maxlength="100"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Foundation, RegExp } from "~/ui-utils";
import * as API_GoodsExchange from "@/api/goodsExchange";
import * as API_Setting from "@/api/setting";
import * as API_BasicSetting from "@/api/basicSetting";
import * as API_Erp from "@/api/erp";
import * as API_Auth from "@/api/auth";
import * as API_order from "@/api/order";
import * as API_Goods from "@/api/goods";
import * as API_CollectingAccount from "@/api/collectingAccount";
export default {
  name: "goodsExchangeAdd",
  data() {
    const checkPrice = (rule, value, callback) => {
      if (!value && value !== 0) {
        return callback(new Error("换货金额不能为空"));
      } else if (!RegExp.money.test(value)) {
        callback(new Error("请输入正整数或者两位小数"));
      } else if (parseFloat(value) > 99999999) {
        callback(new Error("换货金额设置超过上限值"));
      } else {
        callback();
      }
    };
    return {
      //分页
      params: {
        page_no: 1,
        page_size: 10,
      },
      typeList: [
        /*    {
          real_name: "采购入库",
          id: "采购入库",
        },
        {
          real_name: "租赁返回",
          id: "租赁返回",
        },
        {
          real_name: "其他入库",
          id: "其他入库",
        }, */
      ],
      adminList: [],
      dialogVisible: false,
      warehouseList: [],
      deptList: [],
      deptListAll: [],
      orderList: [],
      id: "",
      type: "",
      /** 入库单表单*/
      goodsExchangeAddForm: {
        contract_product_list: [],
        /* additionalProp1: {
            barcode: "string",
            category_id: 0,
            category_name: "string",
            contract_id: 0,
            goods_id: 0,必填
            num: 0,
            price: 0,
            product_id: 0,//必填
            product_name: "string",
            product_sn: "string",
            specification: "string",
            stock_num: 0,
            tax_rate: 0,
            total_price: 0,
            unit: "string",
          },
          additionalProp2: {
            barcode: "string",
            category_id: 0,
            category_name: "string",
            contract_id: 0,
            goods_id: 0,
            num: 0,
            price: 0,
            product_id: 0,
            product_name: "string",
            product_sn: "string",
            specification: "string",
            stock_num: 0,
            tax_rate: 0,
            total_price: 0,
            unit: "string",
          },
          additionalProp3: {
            barcode: "string",
            category_id: 0,
            category_name: "string",
            contract_id: 0,
            goods_id: 0,
            num: 0,
            price: 0,
            product_id: 0,
            product_name: "string",
            product_sn: "string",
            specification: "string",
            stock_num: 0,
            tax_rate: 0,
            total_price: 0,
            unit: "string",
          }, */

        product_list: [],
        warehouse_id: "",
        type: "",
      },
      /** 校验规则 */
      goodsExchangeAddFormRule: {
        warehouse_id: [
          { required: true, message: "请选择入库仓库", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择入库类型", trigger: "change" },
        ],
        // order_id: [
        //   { required: true, message: "请输入订单编号", trigger: "blur" },
        // ],
        // change_amount: [
        //   { required: true, message: '请输入换货金额', trigger: 'blur' },
        //   { validator: checkPrice, trigger: 'blur' }
        // ]
      },
      warehouseProduct: null,
      scanDialogVisible: false,
      scanGoodsForm: {},
      routeName: "",
      //出入库
      sttorageType: "",
      // 出库商品明细
      goodsVisible: false,
      goodsData: [],
      // 暂存已勾选商品
      goodsList: [],
      //订单列表
      orderVisible: false,
      deliveryTypeList: [
        {
          code: "express",
          name: "快递配送",
        },
        {
          code: "self_pick",
          name: "门店自提",
        },
      ],
      snCodeVisible: false,
      sn_code: "",
      sku: "",
      sn_code_list: [],
      index: "",
      snMultipleSelection: "",
      orderType: false,
      /* 租赁返回 */
      TO_BE_RETURN: '',
    };
  },
  mounted() {
    /* this.$nextTick(() => {
      this.$refs.order.focus();
    }); */
    this.routeName = this.$route.name;
    this.sttorageType = this.$route.params.type;
    this.GET_WarehouseList();
    this.GET_DeptList();
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (this.$route.name === "goodsExchangeEdit") {
          this.type = "edit";
        } else if (this.$route.name === "goodsExchangeAudit") {
          this.type = "audit";
        } else if (this.$route.name === "goodsExchangeReturn") {
          this.type = "return";
        } else if (this.$route.name === "goodsExchangeAdd") {
          this.type = "add";
          this.goodsExchangeAddForm = {
            change_amount: 0,
            change_list: [],
            return_list: [],
            product_list: [],
            handled_by_id: this.user.uid,
            dept_id: this.user.dept_id,
          };
          // this.goodsExchangeAddForm.handled_by_id = this.user.uid
          // this.goodsExchangeAddForm.dept_id = this.user.dept_id
          this.GET_WarehouseList({ dept_id: this.user.dept_id });
          this.$set(
            this.goodsExchangeAddForm,
            "change_time",
            new Date().getTime()
          );
        } else if (this.$route.name === "goodsExchangeDetail") {
          this.type = "detail";
        }
        if (this.$route.params.id) {
          this.id = this.$route.params.id;
          this.GET_goodsExchangeAddDetail();
        }
        this.GET_AdministratorList();
      },
    },
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    /* 搜索商品 */
    searchGoodEvent() {
      API_GoodsExchange.getGoodsInfo(
        this.params,
        this.goodsExchangeAddForm.warehouse_id
      ).then((res) => {
        this.goodsData = res;
      });
    },
    /* 订单列表选择 */
    handleSelOrderChange(val) {
      if (val.length > 1) {
        // 如果当前选中数量超过1，移除先前选中的，保留最后选中的
        const lastSelected = val[val.length - 1];
        this.$refs.tables.clearSelection(); // 清除所有选中
        this.$refs.tables.toggleRowSelection(lastSelected, true); // 重新选中最后一个
      }
      this.snMultipleSelection = val;
    },
    /* 返回出入明细 */
    toBack() {
      this.$router.push({
        name: "goodsExchange",
        params: { type: "second" },
      });
    },
    closeSncode() {
      this.sn_code = "";
      this.snCodeVisible = false;
    },
    //扫序列号goodsExchangeAddForm.product_list[this.index].sn_code_list
    async toSnCode() {
      if (this.sku == '') return this.$message.error('请录入正确的sku')
      await API_GoodsExchange.getSnCode("in", this.sku, this.sn_code.replace(/\s+/g, '')).then(async (res) => {
        this.sn_code = "";
        // 假设res是一个对象，我们根据res的某个属性（如sn）来检查重复
        let exists = this.goodsExchangeAddForm.product_list[
          this.index
        ].sn_code_list.find(
          (item) => item.sn_code === res.sn_code && item.sku === res.sku
        );
        if (!exists) {
          if (this.id) {
            await API_GoodsExchange.skuRedis({
              send_order_id: this.id, item_id: this.goodsExchangeAddForm.product_list[
                this.index
              ].id, sku: res
            }).then(response => {
              this.goodsExchangeAddForm.product_list[this.index].sn_code_list.push(
                res
              );
            })
          } else {
            this.goodsExchangeAddForm.product_list[this.index].sn_code_list.push(
              res
            );
          }

        }
        /* this.goodsExchangeAddForm.product_list[this.index].sn_code_list.push(
          res
        ); */
        if (this.TO_BE_RETURN == 'TO_BE_RETURN') {
          if (this.goodsExchangeAddForm.product_list[this.index].num >= this.goodsExchangeAddForm.product_list[this.index].stock_num) return this.$message.warning("录入数量大于在途库存!")
        }
        if (this.goodsExchangeAddForm.type == 'TRANSFER_ENTRY' || this.goodsExchangeAddForm.type == 'HAIL_ENTRY' || this.goodsExchangeAddForm.type == 'SALE_AFTER') {
          if (this.goodsExchangeAddForm.product_list[this.index].num >= this.goodsExchangeAddForm.product_list[this.index].not_entry_num) return this.$message.warning("录入数量大于未入库数量!")
        }
        this.goodsExchangeAddForm.product_list[this.index].num =
          this.goodsExchangeAddForm.product_list[
            this.index
          ].sn_code_list.length;
        this.scanGoodsForm.bar_code = "";
        this.$nextTick(() => {
          this.$refs.input.focus();
        });
      });
    },
    addSnCode(row, index) {
      /* this.goodsExchangeAddForm.product_list[index].sn_code_list =[] */
      this.sku = row.product_vo.sku;
      this.index = index;
      this.snCodeVisible = true;
    },
    orderBtn() {
      this.params.status = 'TO_BE_RETURN'
      API_order.getOrderList(this.params).then((res) => {
        this.orderList = res;
        this.orderVisible = true;
      });
    },
    closeOrder() {
      this.orderVisible = false;
    },
    goodsPageSizeChange(size) {
      this.params.page_size = size;
      API_GoodsExchange.getGoodsInfo(
        this.params,
        this.goodsExchangeAddForm.warehouse_id
      ).then((res) => {
        this.goodsData = res;
      });
    },
    goodsPageCurrentChange(page) {
      this.params.page_no = page;
      API_GoodsExchange.getGoodsInfo(
        this.params,
        this.goodsExchangeAddForm.warehouse_id
      ).then((res) => {
        this.goodsData = res;
      });

    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size;
      API_order.getOrderList(this.params).then((res) => {
        this.orderList = res;
      });
    },
    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page;
      API_order.getOrderList(this.params).then((res) => {
        this.orderList = res;
      });
    },
    /* 订单客户信息 */
    memberType(val) {
      let name = "";
      API_BasicSetting.customer(this.params).then((response) => {
        response.data.map((el) => {
          if (el.id == val) {
            return (name = el.name);
          }
        });
        return name;
      });
    },
    //获取仓库名称
    warehouseName(val) {
      let name = "";
      this.warehouseList.map((el) => {
        if (el.id == val) {
          return (name = el.name);
        }
      });
      return name;
    },
    //配送方式名称
    deliveryType(val) {
      let name = "";
      this.deliveryTypeList.map((el) => {
        if (el.code == val) {
          return (name = el.name);
        }
      });
      return name;
    },
    //获取付款方式
    payType(val) {
      let name = "";
      API_CollectingAccount.getList({
        page_no: 1,
        page_size: -1,
        enable_flag: true,
      }).then((response) => {
        response.data.map((el) => {
          if (el.id == val) {
            return (name = el.name);
          }
        });
        return name;
      });
    },
    //获取订单状态大小写转换.toUpperCase()
    typeName(val) {
      let name = "";
      this.$nextTick(() => {
        API_Setting.getPage({ dictType: "order_status" }).then((res) => {
          res.data.map((el) => {
            if (el.value == val) {
              name = el.label;
              console.log(name);
              return name;
            }
          });
        });
      });
    },
    // 根据条码 序列号查询商品
    blurCode() {
      if (
        this.scanGoodsForm.bar_code !== undefined ||
        this.scanGoodsForm.sn_code !== undefined
      ) {
        // 通过列表查询商品详细信息
        API_Goods.getGoodsList({
          barcode: this.scanGoodsForm.bar_code,
          sncode: this.scanGoodsForm.sn_code,
        }).then((res) => {
          console.log(res);
          this.goodsExchangeAddForm.contract_product_list = res.data;
          //this.scanDialogVisible = false;
        });
      }
    },
    searchOrderAdd() {
      if (this.snMultipleSelection.length >= 1) {
        API_GoodsExchange.getOneBySn(this.snMultipleSelection[0].sn).then(
          (res) => {
            this.orderType = true
            if (res.scan_order_type == 'saleAfter') {
              this.goodsExchangeAddForm.type = 'SALE_AFTER'
            } else {
              this.goodsExchangeAddForm.type = 'HAIL_ENTRY'
            }
            this.TO_BE_RETURN = res.status
            this.goodsExchangeAddForm.warehouse_id = res.return_warehouse_id
            this.goodsExchangeAddForm.scan_order_sn =
              this.snMultipleSelection[0].sn;
            this.goodsExchangeAddForm.scan_order_type = res.type;
            this.goodsExchangeAddForm.order_id = res.id;
            const filteredItemList = res.item_list.filter(el => el.stock_num > 0)
              .map(el => {
                el.scan_order_item_id = el.id;
                el.scan_order_id = res.id;
                if (res.scan_order_type == 'saleAfter') {
                  el.num = el.return_num;
                  el.order_num = el.order_item_num;
                } else {
                  el.order_num = el.num;
                  el.num = 0;
                }
                el.sn_code_list = [];
                return el;
              });
            this.goodsExchangeAddForm.product_list = filteredItemList
            this.orderVisible = false;
          }
        );
      } else {
        this.$message.error("请选择订单");
      }
    },
    // 查询订单编号
    blurUsername() {
      if (this.goodsExchangeAddForm.sn !== undefined) {
        API_GoodsExchange.getOneBySn(this.goodsExchangeAddForm.sn).then(
          (res) => {
            this.orderType = true
            if (res.scan_order_type == 'saleAfter') {
              this.goodsExchangeAddForm.type = 'SALE_AFTER'
            } else {
              this.goodsExchangeAddForm.type = 'HAIL_ENTRY'
            }
            this.goodsExchangeAddForm.warehouse_id = res.return_warehouse_id
            this.goodsExchangeAddForm.scan_order_sn =
              this.goodsExchangeAddForm.sn;
            this.goodsExchangeAddForm.scan_order_type = res.type;
            this.goodsExchangeAddForm.order_id = res.id;
            res.item_list.map((el) => {
              el.scan_order_item_id = el.id;
              el.scan_order_id = res.id;
              if (res.scan_order_type == 'saleAfter') {
                el.order_num = el.num
                el.num = el.return_num
              } else {
                el.order_num = el.num;
                el.num = 0
              }
              el.sn_code_list = [];
            });
            this.goodsExchangeAddForm.product_list = res.item_list;
          }
        );
      } else {
        this.$message.error("请填写订单编号");
      }
    },
    /* 通过id查询商品信息
    orderInfo(id){
      API_
    },*/
    handleSelectionChange(val) {
      this.goodsList = val.map((el) => {
        el.product_id = el.id;
        el.goods_id = el.id;
        el.sn_code_list = [];
        return el;
      });
    },
    // 保存已选商品
    submitGoosData() {
      if (this.goodsList.length >= 1) {
        /* let ids=[]
        const param_list={
          warehouse_id:this.goodsExchangeAddForm.warehouse_id,
          good_ids:ids
        }
        this.goodsList.forEach(el=>{
         ids.push(el.id)
        })
        API_GoodsExchange.getStockByWarehouseGood(param_list).then(res=>{
         res.map(el=>{
          el.product_id=el.id
          el.goods_id=el.id
         })
          this.goodsExchangeAddForm.product_list = res;
          this.goodsExchangeAddForm.contract_product_list = res;
          console.log(res);

         }) */
        this.goodsExchangeAddForm.product_list = this.goodsList; //.map(el=>{el.sn_code_list=[]})
        console.log(this.goodsList);
        this.goodsVisible = false;
      } else {
        this.$message.error("请选择商品信息");
      }
    },
    // 关闭商品明细
    closeGoosData() {
      this.goodsVisible = false;
    },
    // 打印功能
    printIng() { },
    /* 扫SKU */
    toSearch() {
      API_GoodsExchange.getProduct(
        this.goodsExchangeAddForm.warehouse_id,
        this.scanGoodsForm.bar_code.replace(/\s+/g, '')
      ).then((res) => {
        if (!res) {
          return this.$message.error("未找到商品信息");
        }

        res.sn_code_list = [];
        this.sku = res.product_vo.sku;

        // 查找当前商品是否已存在于列表中
        const indexs = this.goodsExchangeAddForm.product_list.findIndex((el) => {
          return (
            el.goods_id === res.goods_id &&
            el.product_id === res.product_id &&
            el.product_vo.sku === res.product_vo.sku
          );
        });

        // 如果商品不存在，则添加到列表
        if (indexs === -1) {
          this.index = this.goodsExchangeAddForm.product_list.length;
          if (
            this.goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' ||
            this.goodsExchangeAddForm.type !== 'HAIL_ENTRY' ||
            this.goodsExchangeAddForm.type !== 'SALE_AFTER'
          ) {
            this.goodsExchangeAddForm.product_list.push({ ...res, num: 1 });
          } else {
            return this.$message.warning("请扫描订单内的商品!");
          }
        } else {
          this.index = indexs;
        }
        if (res.product_vo.have_sn) {
          this.$nextTick(() => {
            this.$refs.sn_input.focus();
          });
        } else {
          const currentProduct = this.goodsExchangeAddForm.product_list[this.index];

          if (this.TO_BE_RETURN === 'TO_BE_RETURN') {
            if (currentProduct.num >= currentProduct.stock_num) {
              return this.$message.warning("录入数量大于在途库存!");
            }
          }

          if (
            this.goodsExchangeAddForm.type === 'TRANSFER_ENTRY' ||
            this.goodsExchangeAddForm.type === 'HAIL_ENTRY' ||
            this.goodsExchangeAddForm.type === 'SALE_AFTER'
          ) {
            if (currentProduct.num >= currentProduct.not_entry_num) {
              return this.$message.warning("录入数量大于未入库数量!");
            }
          }

          this.$set(this.goodsExchangeAddForm.product_list[this.index], 'num', currentProduct.num + 1);
          console.log(this.goodsExchangeAddForm.product_list);
        }
      }).catch((error) => {
        console.error("API 调用失败:", error);
        this.$message.error("获取商品信息失败");
      });
    },
    // 扫码入库
    scanCode() {
      if (!this.goodsExchangeAddForm.warehouse_id) {
        this.$message.error("请先选择仓库！");
        return;
      }
      this.scanDialogVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs.input);
        this.$refs.input.focus();
      });
    },
    /** 获取人员列表 */
    GET_AdministratorList() {
      API_Auth.getAdministratorList({
        page_no: 1,
        page_size: 9999,
        user_state: 0,
      }).then((response) => {
        this.adminList = response.data;
      });
    },
    /** 清除已选商品明细 */
    cleanGoodsList() {
      // 切换部门或仓库需要清除已选对应仓库下的商品数据 change_list
      this.goodsExchangeAddForm.contract_product_list = [];
      this.goodsExchangeAddForm.product_list = [];
    },
    changewarehouseList(e) {
      this.$set(this.goodsExchangeAddForm, "warehouse_id", "");
      this.GET_WarehouseList({ dept_id: e });
      this.cleanGoodsList();
    },
    /** 审核-通过 */
    handlePassGoodsExchange() {
      if (this.goodsExchangeAddForm.check_amount_same === false) {
        this.$confirm(this.goodsExchangeAddForm.diff_amount_message, "提示", {
          type: "warning",
        })
          .then(() => {
            this.$confirm("确定通过吗？", "提示", { type: "warning" })
              .then(() => {
                API_GoodsExchange.auditGoodsExchange(this.id, {
                  status: "PASS",
                }).then(() => {
                  this.$message.success("已通过！");
                  const { callback } = this.$route.params;
                  if (typeof callback === "function") callback();
                  this.$store.dispatch("delCurrentViews", {
                    view: this.$route,
                    $router: this.$router,
                  });
                  this.$router.push({ name: "goodsExchange" });
                });
              })
              .catch(() => { });
          })
          .catch(() => { });
      } else {
        this.$confirm("确定通过吗？", "提示", { type: "warning" })
          .then(() => {
            API_GoodsExchange.auditGoodsExchange(this.id, {
              status: "PASS",
            }).then(() => {
              this.$message.success("已通过！");
              const { callback } = this.$route.params;
              if (typeof callback === "function") callback();
              this.$store.dispatch("delCurrentViews", {
                view: this.$route,
                $router: this.$router,
              });
              this.$router.push({ name: "goodsExchange" });
            });
          })
          .catch(() => { });
      }
    },
    /** 审核-拒绝 */
    handleRejectGoodsExchange() {
      this.$confirm("确定拒绝吗？", "提示", { type: "warning" })
        .then(() => {
          API_GoodsExchange.auditGoodsExchange(this.id, {
            status: "REJECT",
            reject_reason: this.goodsExchangeAddForm.reject_reason,
          }).then(() => {
            this.$message.success("已拒绝！");
            this.dialogVisible = false;
            const { callback } = this.$route.params;
            if (typeof callback === "function") callback();
            this.$store.dispatch("delCurrentViews", {
              view: this.$route,
              $router: this.$router,
            });
            this.$router.push({ name: "goodsExchange" });
          });
        })
        .catch(() => { });
    },
    /** 获取仓库 */
    GET_WarehouseList(e) {
      API_BasicSetting.getWarehouseListAll().then((response) => {
        this.warehouseList = response;
      });
      API_Setting.getPage({ dictType: "warehouse_entry_type" }).then((res) => {
        this.typeList = res.data;
      });
    },
    //保存
    savegoodsExchangeAddForm() {
      this.$refs["goodsExchangeAddForm"].validate((valid) => {
        if (valid) {
          const { id } = this.goodsExchangeAddForm;
          const params = this.MixinClone(this.goodsExchangeAddForm);
          params.handled_by = this.deptListAll;
          API_order.getOrderList({ sn: this.goodsExchangeAddForm.sn }).then(
            (res) => {
              params.order_id = Number(res.data[0].id);
            }
          );
          params.staff_name = this.goodsExchangeAddForm.distribution_name;
          if (params.warehouse_id) {
            params.warehouse_name = this.warehouseList.find(
              (ware) => ware.id === params.warehouse_id
            ).name;
          }
          if (params.handled_by_id) {
            params.handled_by = this.adminList.find(
              (admin) => admin.id === params.handled_by_id
            ).real_name;
          }
          params.change_time = Math.floor(params.change_time / 1000);
          //类型
          params.save_or_submit = "save";
          if (!params.product_list.length) {
            this.$message.error("请选择商品！");
            return;
          }
          params.product_list.map((el) => {
            el.product_stock_id = el.id;
            el.product_id = el.product_vo.id;
            el.id = "";
            if (!el.order_num) {
              el.scan_diff_num = el.order_num - el.num;
            }
          });
          if (this.$route.name === "editInventory") {
            API_GoodsExchange.editWarehouseEntry(id, params).then(
              (response) => {
                this.$message.success("修改成功！");
                const { callback } = this.$route.params;
                if (typeof callback === "function") callback();
                this.$store.dispatch("delCurrentViews", {
                  view: this.$route,
                  $router: this.$router,
                });
                this.$router.push({
                  name: "goodsExchange",
                  params: { type: "second" },
                });
              }
            );
          } else if (this.$route.name === "addInventory") {
            // 新增入库
            API_GoodsExchange.warehouseEntry(params).then(() => {
              this.$message.success("添加成功！");
              const { callback } = this.$route.params;
              if (typeof callback === "function") callback();
              this.$store.dispatch("delCurrentViews", {
                view: this.$route,
                $router: this.$router,
              });
              this.$router.push({
                name: "goodsExchange",
                params: { type: "second" },
              });
            });
          }
        }
      });
    },
    //入库
    submitgoodsExchangeAddForm() {

      this.$refs["goodsExchangeAddForm"].validate((valid) => {
        if (valid) {

          const { id } = this.goodsExchangeAddForm;
          const params = this.MixinClone(this.goodsExchangeAddForm);
          params.handled_by = this.deptListAll;
          API_order.getOrderList({ sn: this.goodsExchangeAddForm.sn }).then(
            (res) => {
              console.log(res.data);
              params.order_id = Number(res.data[0].id);
            }
          );
          params.staff_name = this.goodsExchangeAddForm.distribution_name;
          if (params.warehouse_id) {
            params.warehouse_name = this.warehouseList.find(
              (ware) => ware.id === params.warehouse_id
            ).name;
          }
          if (params.handled_by_id) {
            params.handled_by = this.adminList.find(
              (admin) => admin.id === params.handled_by_id
            ).real_name;
          }
          params.change_time = Math.floor(params.change_time / 1000);
          params.save_or_submit = "submit";
          if (!params.product_list.length) {
            this.$message.error("请选择商品！");
            return;
          }
          /* let numReturn = false
          params.product_list.map(el => {
            if (el.num > el.not_entry_num) {
              numReturn = true
            }
          })
          if(numReturn) return */
          if (this.$route.name === "editInventory") {
            /* params.contract_product_list.map(el=>{
            el.product_id=el.id
            el.goods_id=el.id
          })
          params.product_list.map(el=>{
            el.product_id=el.id
            el.goods_id=el.id
          }) */
            API_GoodsExchange.editWarehouseEntry(id, params).then(
              (response) => {
                this.$message.success("修改成功！");
                const { callback } = this.$route.params;
                if (typeof callback === "function") callback();
                this.$store.dispatch("delCurrentViews", {
                  view: this.$route,
                  $router: this.$router,
                });
                this.$router.push({
                  name: "goodsExchange",
                  params: { type: "second" },
                });
              }
            );
          } else if (this.$route.name === "addInventory") {
            params.product_list.map((el) => {
              el.product_stock_id = el.id;
              el.product_id = el.product_vo.id;
              el.id = "";
            });
            // 新增入库
            API_GoodsExchange.warehouseEntry(params).then(() => {
              this.$message.success("添加成功！");
              const { callback } = this.$route.params;
              if (typeof callback === "function") callback();
              this.$store.dispatch("delCurrentViews", {
                view: this.$route,
                $router: this.$router,
              });
              this.$router.push({
                name: "goodsExchange",
                params: { type: "second" },
              });
            });
          }
        }
      });
    },
    /*  returngoodsExchangeAddForm() {
      const { id } = this.goodsExchangeAddForm;
      const params = this.MixinClone(this.goodsExchangeAddForm);
      params.dept_name = this.deptListAll.find(
        (dept) => dept.id === params.dept_id
      ).name;
      params.staff_name = this.goodsExchangeAddForm.distribution_name;
      params.warehouse_name = this.warehouseList.find(
        (ware) => ware.id === params.warehouse_id
      ).name;
      params.change_time = Math.floor(params.change_time / 1000);
      params.product_list = params.product_list.map((item) => {
        //change_list
        item.product_sn = item.product_sn;
        item.product_name = item.product_name;
        item.specification = item.product_specification;
        item.product_id = item.product_id;
        item.unit = item.unit;
        item.stock_sn = item.sn;
        item.stock_num = item.remain_num;
        item.cost_price = item.product_cost_price;
        return item;
      });
      API_GoodsExchange.returnGoodsExchange(id, params).then(() => {
        this.$message.success("换货成功！");
        const { callback } = this.$route.params;
        if (typeof callback === "function") callback();
        this.$store.dispatch("delCurrentViews", {
          view: this.$route,
          $router: this.$router,
        });
        this.$router.push({ name: "goodsExchange" });
      });
    }, */
    // 选择入库商品明细
    async handleSelectWarehouseEntryBatch() {
      if (!this.goodsExchangeAddForm.warehouse_id) {
        this.$message.error("请先选择仓库！");
        return;
      }
      API_GoodsExchange.getGoodsInfo(
        this.params,
        this.goodsExchangeAddForm.warehouse_id
      ).then((res) => {
        let item = {};
        res.records.map((el) => {
          item.sn = el.goods_vo.sn;
          item.name = el.goods_vo.name;
          return item;
        });
        this.goodsData = res;
        this.goodsVisible = true;
      });
      /* if (!this.goodsExchangeAddForm.warehouse_id) {
          this.$message.error('请先选择仓库！')
          return
        }
       const goodsData = await this.$EnwarehouseEntryBatch({
        goodsApi: "/admin/erp/goods",
        warehouseList: this.warehouseList,
        //change_list
        selectedIds: this.id
          ? this.goodsExchangeAddForm.product_list &&
            this.goodsExchangeAddForm.product_list.map((item) => item.id)
          : this.goodsExchangeAddForm.product_list.map((item) => item.id),
        purchasePlanApiParams: {
          warehouse_id: this.goodsExchangeAddForm.warehouse_id,
        },
      });
      this.goodsExchangeAddForm.warehouse_id = goodsData.warehouse_id;
      this.goodsExchangeAddForm.product_list = goodsData.purchasePlans.map(
        (item) => {
          item.amount = item.entry_price;
          item.product_sn = item.product_sn;
          item.product_name = item.product_name;
          item.specification = item.product_specification;
          item.product_id = item.product_id;
          item.unit = item.product_unit;
          item.stock_sn = item.warehouse_entry_sn;
          item.stock_id = item.warehouse_entry_id;
          item.stock_batch_sn = item.sn;
          item.stock_batch_id = item.id;
          item.cost_price = item.product_cost_price;
          return item;
        }
      );
      this.goodsExchangeAddForm.change_amount =
        this.goodsExchangeAddForm.product_list.reduce(
          (sum, obj) => sum + obj.entry_price,
          0
        ); */
    },
    /** 选择订单编号 */
    async handleSelectOrderSn() {
      const orders = await this.$EnPickerOrder({
        orderApi: "admin/erp/order",
        selectedIds: [this.goodsExchangeAddForm.order_sn],
        limit: 1,
      });
      this.$set(
        this.goodsExchangeAddForm,
        "distribution_name",
        orders[0].distribution_name
      );
      const orderIds = orders.map((v) => v.sn);
      this.$set(this.goodsExchangeAddForm, "order_sn", orderIds.join(","));
      this.GET_WarehouseOutProduct();
    },
    /** 获取入库单商品明细 */
    async GET_WarehouseOutProduct() {
      const res = await API_Erp.getWarehouseOutProduct({
        order_sn: this.goodsExchangeAddForm.order_sn,
      });
      this.goodsExchangeAddForm.return_list = res.data.map((item) => {
        item.amount = item.product_price;
        item.product_sn = item.product_sn;
        item.product_name = item.product_name;
        item.specification = item.product_specification;
        item.product_id = item.product_id;
        item.unit = item.product_unit;
        item.num = item.return_num;
        item.stock_sn = item.warehouse_entry_sn;
        item.cost_price = item.product_cost_price;
        return item;
      })
    },
    /** 获取部门 */
    GET_DeptList() {
      API_GoodsExchange.getInfo().then((response) => {
        this.deptListAll = response;
        this.deptListAll.password = "";
      });
    },
    /** 切换仓库 */
    handleChangeWareHouse(val) {
      //this.goodsExchangeAddForm.product_list = []change_list
    },
    /** 获取详情页面数据 */
    GET_goodsExchangeAddDetail() {
      this.$nextTick(() => {
        API_GoodsExchange.getGoodsExchangeInfo(this.id).then((response) => {
          this.goodsExchangeAddForm = response;
          this.GET_WarehouseList({ dept_id: response.dept_id });
          this.goodsExchangeAddForm.change_time = Math.floor(
            this.goodsExchangeAddForm.change_time * 1000
          );
          /* 获取缓存数据 */
          response.product_list.map((el) => {
            if (response.type !== 'SALE_AFTER') {
              el.return_num = el.num
            }
            /* Object.keys(response).map(item => {
              if (el.id == item) {
                el.sn_code_list = response[item]
                el.num = el.sn_code_list.length
              }
            }) */
            el.num = 0
            if (this.goodsExchangeAddForm.type === 'TRANSFER_ENTRY' ||
              this.goodsExchangeAddForm.type === 'HAIL_ENTRY' ||
              this.goodsExchangeAddForm.type === 'SALE_AFTER') {
              el.sn_code_list = [];
            } else {
              if (!el.sn_code_list) {
                el.sn_code_list = [];
              } else {
                el.num = el.sn_code_list.length
              }
            }

          });
          console.log(response.product_list);
          this.goodsExchangeAddForm.distribution_name = response.staff_name;
          this.goodsExchangeAddForm.product_list = response.product_list;
          /* .map((item) => {SALE_AFTER
              //change_list
              item.name=item.goods_do.name
              item.sn=item.goods_do.sn
              item.sn_code=item.goods_do.sn_code
              item.bar_code=item.goods_do.bar_code
              item.entry_price = item.amount;
              item.product_specification = item.specification;
              item.product_unit = item.unit;
              item.warehouse_entry_sn = item.stock_sn;
              return item;
            }); */
          /*  this.goodsExchangeAddForm.return_list = response.return_list.map(
            (item) => {
              item.product_price = item.amount;
              item.product_specification = item.specification;
              item.product_unit = item.unit;
              item.return_num = item.num;
              item.warehouse_entry_sn = item.stock_sn;
              return item;
            }
          ); */
          // this.GET_WarehouseOutProduct()
        });
      });
    },
  },
};
</script>

<style type="text/scss" lang="scss" scoped>
/deep/ {}

/** 底部步骤 */
.footer {
  width: 100%;
  padding: 10px;
  bottom: 0px;
  text-align: center;
  z-index: 999;
}

.mx {
  display: flex;
  align-items: center;
  width: 100%;

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

.change-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 900px;

  .change-form-item {
    width: 30%;
    margin: 0 10px 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  /deep/ {
    .el-form-item__content {
      flex: 1;
      width: 100%;
    }

    .el-date-editor,
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }
}

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

.goods-info {
  display: flex;

  .goods-name-box {
    text-align: left;

    .goods-name {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 16px;
    }

    .specs {
      color: #999999;
    }
  }
}

.sn-code-container {
  max-height: 100px;
  /* 设置最大高度，超过这个高度将显示滚动条 */
  overflow-y: auto;
  /* 垂直方向上溢出时显示滚动条 */
}

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

  .error-input {
    .el-input__inner {
      border: 1px solid red;
    }
  }
}
</style>
