<template>
  <div class="bg-in-stock dark:!bg-[#060818] bg-white">
    <el-form ref="goodsExchangeAddFormRef" :model="goodsExchangeAddForm" :rules="goodsExchangeAddFormRule" label-width="160px" inline class="change-form">
      <el-row class="flex flex-wrap">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" class="mb-4">
          <el-form-item prop="warehouse_id" :label="$t('warehousing') + $t('warechouse') + ':'" class="change-form-item">
            <el-select v-model="goodsExchangeAddForm.warehouse_id" clearable :disabled="type === 'view'" class="w-full">
              <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 :xs="24" :sm="12" :md="8" :lg="8" class="mb-4">
          <el-form-item :label="$t('type') + ':'" prop="type" class="change-form-item">
            <el-select
              v-model="goodsExchangeAddForm.type"
              filterable
              allow-create
              clearable
              default-first-option
              :disabled="type === 'view' || orderType || goodsExchangeAddForm.type == 'SALE_AFTER' || goodsExchangeAddForm.type == 'HAIL_ENTRY'"
              class="w-full"
            >
              <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-col>
        <el-col :xs="24" :sm="24" :md="16" :lg="16" class="mb-4">
          <el-form-item :label="$t('notes') + ':'" prop="change_desc" class="change-form-item w-full">
            <el-input
              v-model="goodsExchangeAddForm.memo"
              type="textarea"
              :disabled="type === 'view' || type === 'audit'"
              :autosize="{ minRows: 3, maxRows: 4 }"
              :placeholder="$t('place')"
              class="w-full"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="mx">
        <h3>{{ $t('goods_inventory') }}:</h3>
        <el-button class="button" size="small" type="primary" v-if="type !== 'view' && type !== 'audit'" @click="scanCode">{{ $t('scan_code') }}</el-button>
        <el-button
          class="button"
          size="small"
          type="primary"
          v-if="
            type !== 'view' &&
            type !== 'audit' &&
            goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' &&
            goodsExchangeAddForm.type !== 'HAIL_ENTRY' &&
            goodsExchangeAddForm.type !== 'SALE_AFTER'
          "
          @click="handleSelectWarehouseEntryBatch"
          >{{ $t('select') }}</el-button
        >
      </div><!-- style="width: 100%; display: block" -->
      <div class="w-full" >
        <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="$t('warechouse_code')">
              <template #default="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>
                  <template #reference>
                    <span v-if="scope.row.area_stock_list.length !== 0">{{ scope.row.area_stock_list[0].warehouse_area_name }}</span>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column :label="$t('goods_name')">
              <template #default="scope">
                {{ scope.row.product_vo.name }}
              </template>
            </el-table-column>
            <el-table-column label="sku">
              <template #default="scope">
                {{ scope.row.product_vo.sku }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('goods_unit')">
              <template #default="scope">
                {{ scope.row.product_vo.unit }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('warehousing_num')">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.num"
                  type="number"
                  :min="0"
                  :maxlength="20"
                  :disabled="
                    type === 'view' ||
                    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="$t('warehousing_in_num')"
              v-if="goodsExchangeAddForm.type == 'TRANSFER_ENTRY' || goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER'"
            >
              <template #default="scope">
                {{ scope.row.entry_num }}
              </template>
            </el-table-column>
            <el-table-column
              prop="not_entry_num"
              :label="$t('not_entry_num')"
              v-if="goodsExchangeAddForm.type == 'TRANSFER_ENTRY' || goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER'"
            >
              <template #default="scope">
                {{ scope.row.not_entry_num }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('order_num')"
              v-if="goodsExchangeAddForm.type == 'HAIL_ENTRY' || goodsExchangeAddForm.type == 'SALE_AFTER' || goodsExchangeAddForm.type == 'TRANSFER_ENTRY'"
            >
              <template #default="scope">
                {{ scope.row.order_num }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('return_num')" v-if="goodsExchangeAddForm.type == 'SALE_AFTER'">
              <template #default="scope">
                {{ scope.row.return_num }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('transit_stock')" v-if="TO_BE_RETURN == 'TO_BE_RETURN'">
              <template #default="scope">
                {{ scope.row.stock_num }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('diff')" v-if="id">
              <template #default="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="$t('operate')"
              v-if="
                type !== 'view' &&
                type !== 'audit' &&
                goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' &&
                goodsExchangeAddForm.type !== 'HAIL_ENTRY' &&
                goodsExchangeAddForm.type !== 'SALE_AFTER'
              "
            >
              <template #default="scope">
                <el-button size="small" type="danger" @click="goodsExchangeAddForm.product_list.splice(scope.$index, 1)">{{ $t('delete') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
    </el-form>
    <div class="footer">
      <el-button
        v-if="
          type !== 'view' &&
          type !== 'detail' &&
          checkPermission(['warehouseEntry2:add']) &&
          goodsExchangeAddForm.type !== 'TRANSFER_ENTRY' &&
          goodsExchangeAddForm.type !== 'HAIL_ENTRY' &&
          goodsExchangeAddForm.type !== 'SALE_AFTER'
        "
        type="primary"
        @click="savegoodsExchangeAddForm"
        >{{ $t('save') }}
      </el-button>
      <el-button v-if="type !== 'view' && type !== 'detail' && checkPermission(['warehouseEntry:update'])" type="primary" @click="submitgoodsExchangeAddForm"
        >{{ $t('warehousing') }}
      </el-button>
      <el-button @click="printIng" v-if="type == 'audit'">{{ $t('print') }}</el-button>
      <el-button @click="toBack()">{{ $t('return') }}</el-button>
    </div>
    <el-dialog :title="$t('prompt')" v-model="dialogVisible" width="30%" class="!rounded-lg">
      <el-form :model="goodsExchangeAddForm" label-width="120px" inline ><!-- style="width: 900px" -->
        <el-form-item :label="$t('reject')" prop="reject_reason">
          <el-input v-model="goodsExchangeAddForm.reject_reason" type="textarea" :minlength="0" :maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="handleRejectGoodsExchange()">{{ $t('submit') }}</el-button>
      </template>
    </el-dialog>
    <el-dialog :title="$t('scan_code')" v-model="scanDialogVisible" width="30%" :close-on-click-modal="false" class="!rounded-lg">
      <el-form ref="scanGoodsFormRef" :model="scanGoodsForm" label-width="120px" inline>
        <el-form-item label="sku" prop="bar_code">
          <el-input v-model="scanGoodsForm.bar_code" ref="inputRef" @keyup.enter="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="toSnCode()" :minlength="0" :maxlength="100"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :title="$t('warehousing') + $t('goods_info')" v-model="goodsVisible" width="1000px" @close="closeGoosData" class="!rounded-lg">
      <div style="display: flex; align-items: center; justify-content: flex-end; padding: 10px 0">
        <span>{{ $t('search') + $t('goods_info') }}:</span><el-input v-model="params.keyWord" style="width: 200px; margin-right: 5px"></el-input>
        <el-button @click="searchGoodEvent"> {{ $t('search') }} </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="product_vo.name" :label="$t('goods_name')"></el-table-column>
        <el-table-column prop="product_vo.sku" label="sku"> </el-table-column>
        <el-table-column prop="" :label="$t('brand')">
          <template #default="scope">
            {{ scope.row.product_vo.brand }}
          </template>
        </el-table-column>
        <el-table-column prop="product_vo.weight" :label="$t('weight')"> </el-table-column>
        <el-table-column prop="product_vo.unit" :label="$t('goods_unit')"> </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>
      <template #footer>
        <el-button @click="closeGoosData">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitGoosData()">{{ $t('submit') }}</el-button>
      </template>
    </el-dialog>
    <el-dialog title="订单列表" v-model="orderVisible" width="1000px" @close="closeGoosData" class="!rounded-lg">
      <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 #default="scope">
            {{ scope.row.sn }}
          </template>
        </el-table-column>
        <el-table-column prop="order_time" label="下单时间">
          <template #default="scope">{{ scope.row.order_time }}</template>
        </el-table-column>
        <el-table-column prop="" label="仓库名称">
          <template #default="scope">
            {{ warehouseName(scope.row.warehouse_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="配送方式">
          <template #default="scope">{{ deliveryType(scope.row.send_type) }}</template>
        </el-table-column>
        <el-table-column prop="" label="实付金额">
          <template #default="scope">{{ '￥' + scope.row.pay_price }}</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>
      <template #footer>
        <el-button @click="closeOrder">取 消</el-button>
        <el-button @click="searchOrderAdd" type="primary">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
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'; */
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const store = useStore();
const route = useRoute();
const router = useRouter();

const dialogVisible = ref(false);
const scanDialogVisible = ref(false);
const goodsVisible = ref(false);
const orderVisible = ref(false);
const snCodeVisible = ref(false);

const goodsExchangeAddFormRef = ref();
let goodsExchangeAddForm = reactive({
  contract_product_list: [],
  product_list: [],
  warehouse_id: '',
  type: '',
  memo: '',
  sn: '',
  reject_reason: '',
  order_id: '',
});

const goodsExchangeAddFormRule = {
  warehouse_id: [{ required: true, message: t('change') + t('warehousing') + t('warechouse'), trigger: 'change' }],
  type: [{ required: true, message: t('change') + t('warehousing') + t('type'), trigger: 'change' }],
};

const params = reactive({
  page_no: 1,
  page_size: 10,
  keyWord: '',
});

const warehouseList = ref([]);
const typeList = ref([]);
const goodsData = ref([]);
const orderList = ref([]);
const sn_code = ref('');
const scanGoodsForm = reactive({
  bar_code: '',
});
const scanGoodsFormRef = ref();

const type = ref('');
const id = ref('');
const orderType = ref(false);
const TO_BE_RETURN = ref('');

const checkPermission = (permissions) => {
  // Implement your permission check logic here
  return true;
};

const searchGoodEvent = () => {
  API_GoodsExchange.getGoodsInfo(params, goodsExchangeAddForm.warehouse_id).then((res) => {
    goodsData.value = res;
  });
};

const handleSelOrderChange = (val) => {
  if (val.length > 1) {
    const lastSelected = val[val.length - 1];
    orderList.value = [lastSelected];
  }
};

const toBack = () => {
  router.push({ name: 'goodsExchange', params: { type: 'second' } });
};

const toSnCode = async () => {
  if (scanGoodsForm.bar_code === '') return;
  const res = await API_GoodsExchange.getSnCode('in', scanGoodsForm.bar_code, sn_code.value.replace(/\s+/g, ''));
  sn_code.value = '';
  const exists = goodsExchangeAddForm.product_list.find((item) => item.sn_code === res.sn_code && item.sku === res.sku);
  if (!exists) {
    goodsExchangeAddForm.product_list.push(res);
  }
  if (TO_BE_RETURN.value === 'TO_BE_RETURN') {
    if (goodsExchangeAddForm.product_list.length >= goodsExchangeAddForm.stock_num) {
      return;
    }
  }
  if (goodsExchangeAddForm.type === 'TRANSFER_ENTRY' || goodsExchangeAddForm.type === 'HAIL_ENTRY' || goodsExchangeAddForm.type === 'SALE_AFTER') {
    if (goodsExchangeAddForm.product_list.length >= goodsExchangeAddForm.not_entry_num) {
      return;
    }
  }
  goodsExchangeAddForm.product_list.length = goodsExchangeAddForm.product_list.length;
  scanGoodsForm.bar_code = '';
};

const addSnCode = (row, index) => {
  scanGoodsForm.bar_code = row.product_vo.sku;
  snCodeVisible.value = true;
};

const orderBtn = () => {
  params.status = 'TO_BE_RETURN';
  API_order.getOrderList(params).then((res) => {
    orderList.value = res;
    orderVisible.value = true;
  });
};

const closeOrder = () => {
  orderVisible.value = false;
};

const goodsPageSizeChange = (size) => {
  params.page_size = size;
  searchGoodEvent();
};

const goodsPageCurrentChange = (page) => {
  params.page_no = page;
  searchGoodEvent();
};

const handlePageSizeChange = (size) => {
  params.page_size = size;
  API_order.getOrderList(params).then((res) => {
    orderList.value = res;
  });
};

const handlePageCurrentChange = (page) => {
  params.page_no = page;
  API_order.getOrderList(params).then((res) => {
    orderList.value = res;
  });
};

const searchOrderAdd = () => {
  if (orderList.value.length >= 1) {
    API_GoodsExchange.getOneBySn(orderList.value[0].sn).then((res) => {
      orderType.value = true;
      goodsExchangeAddForm.type = res.scan_order_type === 'saleAfter' ? 'SALE_AFTER' : 'HAIL_ENTRY';
      TO_BE_RETURN.value = res.status;
      goodsExchangeAddForm.warehouse_id = res.return_warehouse_id;
      goodsExchangeAddForm.scan_order_sn = orderList.value[0].sn;
      goodsExchangeAddForm.scan_order_type = res.type;
      goodsExchangeAddForm.order_id = res.id;
      goodsExchangeAddForm.product_list = res.item_list
        .filter((el) => el.stock_num > 0)
        .map((el) => {
          el.scan_order_item_id = el.id;
          el.scan_order_id = res.id;
          el.num = res.scan_order_type === 'saleAfter' ? el.return_num : 0;
          el.order_num = res.scan_order_type === 'saleAfter' ? el.order_item_num : el.num;
          el.sn_code_list = [];
          return el;
        });
      orderVisible.value = false;
    });
  } else {
    ElMessage.error('请选择订单');
  }
};

const blurUsername = () => {
  if (goodsExchangeAddForm.sn !== undefined) {
    API_GoodsExchange.getOneBySn(goodsExchangeAddForm.sn).then((res) => {
      orderType.value = true;
      goodsExchangeAddForm.type = res.scan_order_type === 'saleAfter' ? 'SALE_AFTER' : 'HAIL_ENTRY';
      goodsExchangeAddForm.warehouse_id = res.return_warehouse_id;
      goodsExchangeAddForm.scan_order_sn = goodsExchangeAddForm.sn;
      goodsExchangeAddForm.scan_order_type = res.type;
      goodsExchangeAddForm.order_id = res.id;
      res.item_list.forEach((el) => {
        el.scan_order_item_id = el.id;
        el.scan_order_id = res.id;
        el.num = res.scan_order_type === 'saleAfter' ? el.return_num : 0;
        el.order_num = res.scan_order_type === 'saleAfter' ? el.num : el.num;
        el.sn_code_list = [];
      });
      goodsExchangeAddForm.product_list = res.item_list;
    });
  } else {
    ElMessage.error('请填写订单编号');
  }
};
/* 选中的商品列表 */
const goodsList = ref([]);
const handleSelectionChange = (val) => {
  goodsList.value = val.map((el) => {
    /* el.product_id = el.id;
    el.goods_id = el.id;
    el.sn_code_list = []; */
    return el;
  });
};

const submitGoosData = () => {
  if (goodsList.value.length >= 1) {
    goodsExchangeAddForm.product_list = goodsList.value.map((el) => {
      /* el.sn_code_list = []; */
      return el;
    });
    goodsVisible.value = false;
  } else {
    ElMessage.error(t('change') + t('goods_info') + '!');
  }
};

const closeGoosData = () => {
  goodsVisible.value = false;
};

const inputRef = ref();
const scanCode = () => {
  if (!goodsExchangeAddForm.warehouse_id) {
    ElMessage.error(t('change') + t('warechouse') + '!');
    return;
  }
  scanDialogVisible.value = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};

const handleSelectWarehouseEntryBatch = () => {
  if (!goodsExchangeAddForm.warehouse_id) {
    ElMessage.error(t('change') + t('warechouse') + '!');
    return;
  }
  API_GoodsExchange.getGoodsInfo(params, goodsExchangeAddForm.warehouse_id, 'le').then((res) => {
    goodsData.value = res;
    goodsVisible.value = true;
  });
};

const savegoodsExchangeAddForm = () => {
  goodsExchangeAddFormRef.value.validate((valid) => {
    if (valid) {
      const params = { ...goodsExchangeAddForm };
      params.save_or_submit = 'save';
      if (!params.product_list.length) {
        ElMessage.error(t('change') + t('goods_info') + '!');
        return;
      }
      params.product_list.forEach((el) => {
        el.product_stock_id = el.id;
        el.product_id = el.product_vo.id;
        el.id = '';
      });
      if (type.value == 'edit') {
        API_GoodsExchange.editWarehouseEntry(route.query.id, params).then((response) => {
          ElMessage.success(t('edit_success') + '！');
          router.push({ name: 'goodsExchange' });
        });
      } else {
        API_GoodsExchange.warehouseEntry(params).then(() => {
          ElMessage.success(t('sub_success') + '！');
          router.push({ name: 'goodsExchange' });
        });
      }
    }
  });
};

const submitgoodsExchangeAddForm = () => {
  goodsExchangeAddFormRef.value.validate((valid) => {
    if (valid) {
      const params = { ...goodsExchangeAddForm };
      params.save_or_submit = 'submit';
      if (!params.product_list.length) {
        ElMessage.error(t('change') + t('goods_info') + '!');
        return;
      }
      params.product_list.forEach((el) => {
        el.product_stock_id = el.id;
        el.product_id = el.product_vo.id;
        el.id = '';
      });
      if (type.value == 'edit') {
        API_GoodsExchange.editWarehouseEntry(route.query.id, params).then((response) => {
          ElMessage.success(t('edit_success') + '！');
          router.push({ name: 'goodsExchange' });
        });
      } else {
        API_GoodsExchange.warehouseEntry(params).then(() => {
          ElMessage.success(t('sub_success') + '！');
          router.push({ name: 'goodsExchange' });
        });
      }
    }
  });
};
/* 获取当前入库单详情 */
const GET_WarehousInfo = () => {
  API_GoodsExchange.getGoodsExchangeInfo(route.query.id).then((response) => {
    API_Setting.getPage({ dictType: 'warehouse_entry_type' }).then((res) => {
      Object.assign(typeList, res.data);
    });
    Object.assign(goodsExchangeAddForm, response);
  });
};

onMounted(() => {
  if (route.query.type == 'view') {
    type.value = 'view';
    GET_WarehousInfo();
  } else if (route.query.type == 'edit') {
    type.value = 'edit';
    GET_WarehousInfo();
  }
  API_BasicSetting.getWarehouseListAll().then((response) => {
    warehouseList.value = response;
  });
  API_Setting.getPage({ dictType: 'warehouse_entry_type' }).then((res) => {
    typeList.value = res.data;
  });
});
</script>

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

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

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

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

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

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

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

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

.goods-info {
  display: flex;
}

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

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

.goods-info .goods-name-box .specs {
  color: #999999;
}

.sn-code-container {
  max-height: 100px;
  overflow-y: auto;
}

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

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