<template>
  <div>
    <transition appear enter-active-class="animated fadeIn">
      <q-table
        class="my-sticky-header-column-table shadow-24"
        :data="table_list"
        row-key="id"
        :separator="separator"
        :loading="loading"
        :columns="columns"
        hide-bottom
        :pagination.sync="pagination"
        no-data-label="No data"
        no-results-label="No data you want"
        :table-style="{ height: height }"
        flat
        bordered
      >
        <template v-slot:top>
          <q-btn-group push>
            <q-btn
              :label="$t('new')"
              icon="add"
              @click="
                newForm = true;
                newFormData.creater = login_name;
              "
            >
              <q-tooltip
                content-class="bg-amber text-black shadow-4"
                :offset="[10, 10]"
                content-style="font-size: 12px"
                >{{ $t("newtip") }}</q-tooltip
              >
            </q-btn>
            <q-btn :label="$t('refresh')" icon="refresh" @click="reFresh()">
              <q-tooltip
                content-class="bg-amber text-black shadow-4"
                :offset="[10, 10]"
                content-style="font-size: 12px"
                >{{ $t("refreshtip") }}</q-tooltip
              >
            </q-btn>
          </q-btn-group>
          <q-space />
          <div class="flex items-center">
            <q-input
              outlined
              rounded
              dense
              debounce="200"
              color="primary"
              v-model="filter"
              :placeholder="'输入名称搜索'"
              @input="getSearchList()"
              @keyup.enter="getSearchList()"
            >
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
          </div>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <template v-if="props.row.id === editid">
              <q-td key="detail" :props="props">
                <q-btn
                  round
                  flat
                  push
                  color="black"
                  icon="description"
                  @click="detailData(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ "查看批次详情" }}</q-tooltip
                  >
                </q-btn>
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="detail" :props="props">
                <q-btn
                  round
                  flat
                  push
                  color="black"
                  icon="description"
                  @click="detailData(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ "查看批次详情" }}</q-tooltip
                  >
                </q-btn>
              </q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_date" :props="props">{{
                props.row.bound_date
              }}</q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_date" :props="props">{{
                props.row.bound_date
              }}</q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_code" :props="props">{{
                props.row.bound_code
              }}</q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_code" :props="props">{{
                props.row.bound_code
              }}</q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_code_type" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_code_type"
                  :label="'单据类型'"
                  autofocus
                  :options="bound_code_type_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_code_type" :props="props">
                {{
                  bound_code_type_map[props.row.bound_code_type] ||
                  props.row.bound_code_type
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_bs_type" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_bs_type"
                  :label="'单据类型'"
                  :options="bound_bs_type_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_bs_type" :props="props">
                {{
                  bound_bs_type_map[props.row.bound_bs_type] ||
                  props.row.bound_bs_type
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_desc" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_desc"
                  :label="'出入库类别'"
                  :options="bound_desc_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_desc" :props="props">
                {{
                  bound_desc_map[props.row.bound_desc] || props.row.bound_desc
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_department" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_department"
                  :label="'部门'"
                  :options="bound_department_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_department" :props="props">
                {{
                  bound_department_map[props.row.bound_department] ||
                  props.row.bound_department
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="creater" :props="props">
                <q-input
                  dense
                  outlined
                  square
                  v-model.number="editFormData.creater"
                  :label="'经办人'"
                  :rules="[(val) => (val && val > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="creater" :props="props">{{ props.row.creater }}</q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_status" :props="props">
                {{
                  bound_status_map[props.row.bound_status] ||
                  props.row.bound_status
                }}</q-td
              >
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_status" :props="props">
                {{
                  bound_status_map[props.row.bound_status] ||
                  props.row.bound_status
                }}</q-td
              >
            </template>

            <template v-if="!editMode">
              <q-td key="action" :props="props" style="width: 100px">
                <q-btn
                  round
                  flat
                  push
                  color="dark"
                  icon="trolley"
                  @click="change_status(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >一键分拣</q-tooltip
                  >
                </q-btn>
                                <q-btn
                  round
                  flat
                  push
                  color="dark"
                  icon="delete"
                  @click="deleteData(props.row.id)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ $t("delete") }}</q-tooltip
                  >
                </q-btn>
              </q-td>
            </template>
            <template v-else-if="editMode">
              <template v-if="props.row.id === editid">
                <q-td key="action" :props="props" style="width: 100px">
                  <q-btn
                    round
                    flat
                    push
                    color="secondary"
                    icon="check"
                    @click="editDataSubmit()"
                  >
                    <q-tooltip
                      content-class="bg-amber text-black shadow-4"
                      :offset="[10, 10]"
                      content-style="font-size: 12px"
                      >{{ $t("confirmedit") }}</q-tooltip
                    >
                  </q-btn>
                  <q-btn
                    round
                    flat
                    push
                    color="red"
                    icon="close"
                    @click="editDataCancel()"
                  >
                    <q-tooltip
                      content-class="bg-amber text-black shadow-4"
                      :offset="[10, 10]"
                      content-style="font-size: 12px"
                      >{{ $t("canceledit") }}</q-tooltip
                    >
                  </q-btn>
                </q-td>
              </template>
              <template v-else-if="props.row.id !== editid"></template>
            </template>
          </q-tr>
        </template>
      </q-table>
    </transition>
    <template>
      <div v-show="max !== 0" class="q-pa-lg flex flex-center">
        <div>{{ total }}</div>
        <q-pagination
          v-model="current"
          color="black"
          :max="max"
          :max-pages="6"
          boundary-links
          @click="
            getSearchList(current);
            paginationIpt = current;
          "
        />
        <div>
          <input
            v-model="paginationIpt"
            @blur="changePageEnter"
            @keyup.enter="changePageEnter"
            style="width: 60px; text-align: center"
          />
        </div>
      </div>
      <div v-show="max === 0" class="q-pa-lg flex flex-center">
        <q-btn flat push color="dark" :label="$t('no_data')"></q-btn>
      </div>
    </template>
    <q-dialog v-model="newForm">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ $t("newtip") }}</div>
          <q-space />
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-amber text-black shadow-4">{{
              $t("index.close")
            }}</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section style="max-height: 325px; width: 400px" class="scroll">
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_code_type"
            :label="'单据类型'"
            autofocus
            :options="bound_code_type_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_bs_type"
            :label="'业务类型'"
            :options="bound_bs_type_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_desc"
            :label="'出入库类别'"
            :options="bound_desc_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_department"
            :label="'部门'"
            :options="bound_department_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-input
            dense
            outlined
            square
            v-model="newFormData.creater"
            :label="'经办人'"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
        </q-card-section>

        <div style="float: right; padding: 15px 15px 15px 0">
          <q-btn
            color="white"
            text-color="black"
            style="margin-right: 25px"
            @click="newDataCancel()"
            >{{ $t("cancel") }}</q-btn
          >
          <q-btn color="primary" @click="newDataSubmit()">{{
            $t("submit")
          }}</q-btn>
        </div>
      </q-card>
    </q-dialog>
    <q-dialog v-model="deleteForm">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ $t("delete") }}</div>
          <q-space />
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip>{{ $t("index.close") }}</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section
          style="max-height: 325px; width: 400px"
          class="scroll"
          >{{ $t("deletetip") }}</q-card-section
        >
        <div style="float: right; padding: 15px 15px 15px 0">
          <q-btn
            color="white"
            text-color="black"
            style="margin-right: 25px"
            @click="deleteDataCancel()"
            >{{ $t("cancel") }}</q-btn
          >
          <q-btn color="primary" @click="deleteDataSubmit()">{{
            $t("submit")
          }}</q-btn>
        </div>
      </q-card>
    </q-dialog>
    <q-dialog v-model="newBatchForm">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ "新建批次" }}</div>
          <q-space />
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-amber text-black shadow-4">{{
              $t("index.close")
            }}</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section style="min-height: 325px; width: 500px" class="scroll">
          <div class="text-h6 q-mb-md">{{ "批次信息" }}</div>
          <div class="row q-gutter-x-md">
            <div class="col column q-gutter-y-md">
              <q-select
                dense
                outlined
                square
                v-model="newBatchFormData.goods_code"
                :label="'物料编码'"
                :options="product_list"
                option-label="value"
                option-value="value"
                emit-value
                map-options
                transition-show="scale"
                transition-hide="scale"
                :rules="[(val) => (val && val.length > 0) || error1]"
                :onClick="assignGoodsCode()"
              />
            </div>
            <div class="col column q-gutter-y-md">
              <q-input
                outlined
                dense
                color="primary"
                v-model="product_filter"
                :placeholder="'搜索名称'"
                autofocus
                @input="getProductSearchList()"
                @keyup.enter="getProductSearchList()"
              >
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
            </div>
          </div>
          <q-select
            dense
            outlined
            square
            v-model="newBatchFormData.goods_code"
            :label="'物料'"
            :options="product_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            :readonly="false"
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />

          <q-input
            dense
            outlined
            square
            v-model="newBatchFormData.goods_desc"
            :label="'名称'"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />

          <div class="row q-gutter-x-md">
            <div class="col column q-gutter-y-md">
              <!-- <q-input
                dense
                outlined
                square
                v-model.number="newBatchFormData.goods_weight"
                :label="'单重'"
                type="number"
                :rules="[(val) => (val && val > 0) || error1]"
              /> -->
              <q-input
                dense
                outlined
                square
                v-model.number="newBatchFormData.goods_qty"
                :label="'数量'"
                type="number"
                :rules="[(val) => (val && val > 0) || error1]"
              />
              <q-input
                dense
                outlined
                square
                v-model="newBatchFormData.goods_package"
                :label="'包装'"
                :rules="[(val) => (val && val.length > 0) || error1]"
              />
              <q-toggle
                v-model="isorder"
                :label="isorder ? '自动编码' : '手动编码(建议)'"
              />
            </div>
            <div class="col column q-gutter-y-md">
              <q-input
                dense
                outlined
                square
                v-model="newBatchFormData.goods_unit"
                :label="'单位'"
                :rules="[(val) => (val && val.length > 0) || error1]"
              />
              <q-input
                dense
                outlined
                square
                v-model="newBatchFormData.goods_std"
                :label="'规格/备注'"
                :rules="[(val) => (val && val.length > 0) || error1]"
              />
            </div>
          </div>
          <div class="row q-gutter-x-md" v-show="!isorder">
            <div class="col column q-gutter-y-md">
              <q-input
                dense
                outlined
                square
                v-model="batch_number_year"
                type="number"
                :label="'年'"
                :rules="[(val) => (val && val > 0) || error1]"
              />
            </div>
            <div class="col column q-gutter-y-md">
              <q-input
                dense
                outlined
                square
                v-model="batch_number_month"
                :label="'月'"
                type="number"
                :rules="[(val) => (val && val > 0) || error1]"
              />
            </div>
            <div class="col column q-gutter-y-md">
              <q-input
                dense
                outlined
                v-model="batch_number_batch"
                type="number"
                :label="'批'"
                :rules="[(val) => (val && val > 0) || '请输入正确的批号']"
              />
            </div>
          </div>
          <q-input
            v-show="!isorder"
            dense
            outlined
            square
            v-model.number="newBatchFormData.bound_batch_order"
            :label="'批号——年月第几批(202504009)'"
            class="centered-input"
            type="number"
            :rules="[(val) => (val && val > 0) || error1]"
          />

          <q-input
            dense
            outlined
            square
            v-model="newBatchFormData.creater"
            :label="'经办人'"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
        </q-card-section>

        <div style="float: right; padding: 15px 15px 15px 0">
          <q-btn
            color="white"
            text-color="black"
            style="margin-right: 25px"
            @click="newBatchCancel()"
            >{{ $t("cancel") }}</q-btn
          >
          <q-btn color="primary" @click="newBatchSubmit()">{{
            $t("submit")
          }}</q-btn>
        </div>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="detailForm"
      transition-show="jump-down"
      transition-hide="jump-up"
    >
      <q-card style="min-width: 1150px">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>
            {{ "批次信息" }}
          </div>
          <q-space></q-space>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip
              content-class="bg-amber text-black shadow-4"
              :offset="[20, 20]"
              content-style="font-size: 12px"
            >
              {{ $t("index.close") }}</q-tooltip
            >
          </q-btn>
        </q-bar>
        <q-card-section class="q-pt-md">
          <q-tabs v-model="activeTab">
            <q-tab name="tab1" label="入库信息" />
            <!-- <q-tab name="tab2" label="货物信息" /> -->
          </q-tabs>
        </q-card-section>
        <!-- 选项卡内容 -->
        <q-tab-panels v-model="activeTab" animated>
          <q-tab-panel name="tab1" style="height: 70px">
            <div class="row q-gutter-x-md">
              <div class="col column q-gutter-y-md">
                <q-input
                  dense
                  outlined
                  square
                  v-model="table_detail.bound_date"
                  :label="'单据时间'"
                  :readonly="true"
                />
              </div>
              <div class="col column q-gutter-y-md">
                <q-input
                  dense
                  outlined
                  square
                  v-model="table_detail.bound_code"
                  :label="'单据编码'"
                  :readonly="true"
                />
              </div>
            </div>
          </q-tab-panel>
        </q-tab-panels>

        <div
          style="float: right; padding: 15px 15px 50px 15px; min-width: 100%"
          flow="row wrap"
        >
          <q-card class="q-mb-md" bordered>
            <q-card-actions
              class="q-px-none"
              style="position: absolute; right: 20px; top: 10px; z-index: 100"
            >
              <q-btn
                icon="add"
                flat
                dense
                color="primary"
                @click="addbatch(table_detail.id)"
                :label="$t('stock.add')"
              />
            </q-card-actions>
            <q-card-section>
              <template>
                <div class="text-h6 q-mb-md">{{ "批次信息" }}</div>
                <q-table
                  v-if="batch_detail.length > 0"
                  :data="batch_detail"
                  :columns="columns_batch"
                  row-key="id"
                  flat
                  bordered
                  hide-pagination
                  class="my-sticky-table scrollable-table"
                  :style="{ 'max-height': '400px' }"
                  :container-style="{ height: 'auto' }"
                   :pagination="{ rowsPerPage: 0 }"
                >
                  <template v-slot:body-cell-actions="props">
                    <q-td :props="props">
                      <q-btn
                        icon="print"
                        flat
                        v-print="getPrintConfig(props.row)"
                        @click="setCurrentBatch(props.row)"
                      >
                        <q-tooltip>打印条码</q-tooltip>
                      </q-btn>
                    </q-td>
                  </template>
                </q-table>
              </template>
            </q-card-section>
          </q-card>
        </div>
      </q-card>
    </q-dialog>
    <div id="printBarcode" class="print-area">
      <div class="q-pa-md text-center" style="flex: none">
        <div class="row no-wrap">
          <div class="col text-left">
            <p style="font-weight: 500">{{ currentgoods.goods_desc }}</p>
          </div>
          <div class="col text-right">
            <p>
              数量: {{ currentgoods.goods_qty }}{{ currentgoods.goods_unit }}
            </p>
          </div>
        </div>
        <svg ref="barcodeElement" style="width: 100%; height: auto"></svg>
      </div>
    </div>
  </div>
</template>

<router-view />

<script>
import { getauth, postauth, putauth, deleteauth } from 'boot/axios_request'

import JsBarcode from 'jsbarcode'
import { date, exportFile, LocalStorage, QToggle } from 'quasar'
export default {
  components: {
    QToggle
  },
  name: 'Pageasnlist',
  data () {
    return {
      createDate1: '',
      createDate2: '',
      date_range: '',
      proxyDate: '',
      date: '',
      goods_code: '',
      goods_desc: '',
      openid: '',
      login_name: '',
      authin: '0',
      warehouse_code: '',
      warehouse_name: '',

      searchUrl: '',
      pathname: 'bound/list/',
      pathfilename: 'bound/file/',

      pathname_previous: '',
      pathname_next: '',
      separator: 'cell',
      loading: false,
      height: '',

      printObj: {
        id: 'printMe',
        popTitle: this.$t('inbound.asn')
      },
      table_list: [],
      table_detail: {},
      batch_detail: [],
      bound_code_type_list: [],
      bound_code_type_map: [],
      bound_bs_type_list: [],
      bound_bs_type_map: [],
      bound_desc_list: [],
      bound_desc_map: [],
      bound_department_list: [],
      bound_department_map: [],
      bound_status_list: [],
      bound_status_map: [],
      product_list: [],
      product_map: [],
      batch_number_year: '',
      batch_number_month: '',
      batch_number_batch: '',

      columns: [
        { name: 'detail', label: '详情', field: 'detail', align: 'center' },
        {
          name: 'bound_date',
          label: '单据日期',
          field: 'bound_date',
          align: 'center'
        },
        {
          name: 'bound_code',
          label: '单据编号',
          field: 'bound_code',
          align: 'center'
        },
        {
          name: 'bound_code_type',
          label: '单据类型',
          field: 'bound_code_type',
          align: 'center'
        },
        {
          name: 'bound_bs_type',
          label: '业务类型',
          field: 'bound_bs_type',
          align: 'center'
        },
        {
          name: 'bound_desc',
          label: '出入库类别',
          field: 'bound_desc',
          align: 'center'
        },
        {
          name: 'bound_department',
          label: '部门',
          field: 'bound_department',
          align: 'center'
        },
        { name: 'creater', label: '经办人', field: 'creater', align: 'center' },
        {
          name: 'bound_status',
          label: '状态',
          field: 'bound_status',
          align: 'center'
        },
        { name: 'action', label: '操作', align: 'center' }
      ],
      // 列定义
      columns_batch: [
        {
          name: 'actions',
          label: '操作',
          align: 'center',
          style: 'width: 80px'
        },
        {
          name: 'bound_batch_order',
          label: '批次',
          field: (row) => row.bound_batch.bound_batch_order,
          align: 'center'
        },
        {
          name: 'goods_desc',
          label: '货物',
          field: (row) => row.bound_batch.goods_desc,
          align: 'center'
        },
        {
          name: 'plan_weight',
          label: '计划入库重量',
          field: (row) => row.bound_batch.goods_qty, // 确保字段路径正确
          align: 'center',
          style: 'width: 150px'
        },
        {
          name: 'actual_weight',
          label: '实际入库重量',
          field: (row) => row.bound_batch.goods_in_qty, // 根据实际字段调整
          align: 'center',
          style: 'width: 150px'
        },
        {
          name: 'unit',
          label: '单位',
          field: (row) => row.bound_batch.goods_unit,
          align: 'center',
          style: 'width: 10px'
        },
        {
          name: 'package',
          label: '包装',
          field: (row) => row.bound_batch.goods_package,
          align: 'center',
          style: 'width: 10px'
        }
      ],
      filter: '',
      product_filter: '',
      pagination: {
        page: 1,
        rowsPerPage: 11
      },
      newForm: false,
      newBatchForm: false,
      newFormData: {},
      newBatchFormData: {},
      newDetailFormData: {},
      editid: 0,
      editFormData: {},
      editMode: false,
      deleteForm: false,
      detailForm: false,
      deleteid: 0,
      detailid: 0,
      bar_code: '',
      error1: this.$t('goods.view_goodslist.error1'),

      max: 0,
      total: 0,
      paginationIpt: 1,
      current: 1,
      onlyread: true,
      bound_batch_list: [],

      activeTab: 'tab1',
      isorder: false,
      order: 'false',

      printConfig: {
        id: 'printBarcode'
      },
      currentBarcode: null,

      currentgoods: {}
    }
  },
  computed: {
    interval () {
      return (
        this.$t('download_center.start') +
        ' - ' +
        this.$t('download_center.end')
      )
    }
  },
  methods: {
    assignGoodsCode () {
      console.log('data', this.newBatchFormData.goods_code)
      console.log(
        'product_map',
        this.product_map[this.newBatchFormData.goods_code]
      )
      if (this.product_map[this.newBatchFormData.goods_code]) {
        this.newBatchFormData.goods_desc =
          this.product_map[this.newBatchFormData.goods_code].product_name
        this.newBatchFormData.goods_std =
          this.product_map[this.newBatchFormData.goods_code].product_std
        this.newBatchFormData.goods_unit =
          this.product_map[this.newBatchFormData.goods_code].product_unit
        this.newBatchFormData.goods_package =
          this.product_map[this.newBatchFormData.goods_code].product_package
        this.newBatchFormData.goods_weight = 1
      }
      // this.newBatchFormData.goods_code = this.product_map[this.newBatchFormData.goods_code].product_code
      // this.newBatchFormData.goods_std = this.product_map[this.newBatchFormData.goods_code].goods_std
      // this.newBatchFormData.goods_package = this.product_map[this.newBatchFormData.goods_code].goods_package
    },
    setCurrentBatch (item) {
      this.currentBarcode = item.bound_batch?.bound_number || ''
      this.currentgoods = item.bound_batch
    },
    getPrintConfig () {
      this.generateBarcode()
      return {
        id: 'printBarcode'
      }
    },
    generateBarcode () {
      this.$refs.barcodeElement.innerHTML = ''

      try {
        JsBarcode(this.$refs.barcodeElement, this.currentBarcode, {
          format: 'CODE128',
          displayValue: true,
          fontSize: 16,
          height: 60,
          margin: 10
        })
      } catch (error) {
        console.error('条码生成失败:', error)
      }
    },
    getList (params = {}) {
      var _this = this
      _this.loading = true
      // 合并基础参数
      const baseParams = {
        page: _this.current,
        base_type: '0',
        page_size: _this.pagination.rowsPerPage
      }

      // 创建URLSearchParams处理参数
      const queryParams = new URLSearchParams({
        ...baseParams,
        ...params
      })
      console.log(queryParams)
      // 过滤空值参数
      Array.from(queryParams.entries()).forEach(([key, value]) => {
        if (value === '' || value === null || value === undefined) {
          queryParams.delete(key)
        }
      })

      getauth(`${_this.pathname}?${queryParams}`)
        .then((res) => {
          _this.table_list = res.results

          _this.total = res.count
          _this.max = Math.ceil(res.count / _this.pagination.rowsPerPage) || 0
          _this.pathname_previous = res.previous
          _this.pathname_next = res.next
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
        .finally(() => {
          _this.loading = false
        })
    },
    changePageEnter () {
      if (Number(this.paginationIpt) < 1) {
        this.current = 1
        this.paginationIpt = 1
      } else if (Number(this.paginationIpt) > this.max) {
        this.current = this.max
        this.paginationIpt = this.max
      } else {
        this.current = Number(this.paginationIpt)
      }
      this.getSearchList(this.current)
    },

    getProductSearchList () {
      var _this = this
      _this.loading = true
      const params = {
        product_name__icontains: _this.product_filter,
        max_page: 1000
      }
      const queryParams = new URLSearchParams({
        ...params
      })
      console.log(queryParams)
      // 过滤空值参数
      Array.from(queryParams.entries()).forEach(([key, value]) => {
        if (value === '' || value === null || value === undefined) {
          queryParams.delete(key)
        }
      })
      console.log(`warehouse/product/?${queryParams}`)
      getauth(`warehouse/product/?${queryParams}`)
        .then((res) => {
          _this.product_list = res.results.map((item) => ({
            label: item.product_name,
            value: item.product_code
          }))
          _this.product_map = res.results.reduce((acc, item) => {
            acc[item.product_code] = item
            return acc
          }, {})
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
        .finally(() => {
          _this.loading = false
        })
    },

    // 带搜索条件加载
    getSearchList (page = 1) {
      this.current = page
      this.paginationIpt = page
      this.getList({
        goods_desc__icontains: this.filter,
        document_date__range: this.date_range
      })
    },
    downloadlistData () {
      this.getfileList()
    },
    getfileList () {
      var _this = this
      _this.loading = true
      const params = {
        goods_desc__icontains: _this.filter,
        document_date__range: _this.date_range
      }
      const queryParams = new URLSearchParams({
        ...params
      })
      console.log(queryParams)
      // 过滤空值参数
      Array.from(queryParams.entries()).forEach(([key, value]) => {
        if (value === '' || value === null || value === undefined) {
          queryParams.delete(key)
        }
      })
      console.log(`${_this.pathfilename}?${queryParams}`)
      getauth(`${_this.pathfilename}?${queryParams}`)
        .then((res) => {
          var timeStamp = Date.now()
          var formattedString = date.formatDate(timeStamp, 'YYYYMMDDHHmmss')
          const status = exportFile(
            _this.pathfilename + 'list' + formattedString + '.csv',
            '\uFEFF' + res,
            'text/csv'
          )
          if (status !== true) {
            _this.$q.notify({
              message: 'Browser denied file download...',
              color: 'negative',
              icon: 'warning'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
        .finally(() => {
          _this.loading = false
        })
    },

    getListPrevious () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_previous, {})
          .then((res) => {
            _this.table_list = res.results
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch((err) => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
      }
    },
    getListNext () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_next, {})
          .then((res) => {
            _this.table_list = res.results

            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch((err) => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      }
    },
    reFresh () {
      var _this = this
      _this.getSearchList()
    },

    newDataSubmit () {
      var _this = this

      _this.newFormData.bound_type = 'in'
      _this.newFormData.openid = _this.openid

      postauth(_this.pathname, _this.newFormData)
        .then((res) => {
          _this.getSearchList()
          _this.newDataCancel()
          if (res.status_code !== 500) {
            _this.$q.notify({
              message: '成功新增数据',
              icon: 'check',
              color: 'green'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    newBatchSubmit () {
      var _this = this

      _this.newBatchFormData.openid = _this.openid
      _this.newBatchFormData.warehouse_code = _this.warehouse_code
      _this.newBatchFormData.warehouse_name = _this.warehouse_name
      _this.newBatchFormData.order = _this.order
      console.log('当前的order是', _this.newBatchFormData.order)
      postauth('bound/batch/', _this.newBatchFormData)
        .then((res) => {
          if (res.status_code !== 500) {
            _this.newDetailFormData.bound_batch = res.id
            _this.newDetailFormData.creater = _this.login_name

            postauth('bound/detail/', _this.newDetailFormData).then(
              (res) => {
                if (res.status_code !== 500) {
                  _this.detailData(_this.newDetailFormData)

                  _this.$q.notify({
                    message: '成功新增数据',
                    icon: 'check',
                    color: 'green'
                  })
                }
              },
              (err) => {
                _this.$q.notify({
                  message: err.detail,
                  icon: 'close',
                  color: 'negative'
                })
              }
            )
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    newDataCancel () {
      var _this = this
      _this.newForm = false
      _this.newFormData = {
        bound_code_type: '',
        bound_bs_type: '',
        bound_desc: '',
        bound_department: '',
        creater: ''
      }
    },
    addbatch (bound_number) {
      var _this = this
      _this.newBatchForm = true
      _this.batch_number_year = _this.date.slice(0, 4)
      _this.batch_number_month = _this.date.slice(5, 7)
      _this.newBatchFormData.creater = _this.login_name
      _this.newDetailFormData = {
        id: bound_number,
        bound_list: bound_number
      }
    },
    editData (e) {
      var _this = this
      _this.editMode = true
      _this.editid = e.id
      _this.editFormData = {
        bound_date: e.bound_date,
        bound_code: e.bound_code,
        bound_code_type: e.bound_code_type,
        bound_bs_type: e.bound_bs_type,
        bound_desc: e.bound_desc,

        bound_department: e.bound_department,
        creater: _this.login_name
      }
    },

    change_status (e) {
      var _this = this

      var status_FormData = {
        bound_date: e.bound_date,
        bound_code: e.bound_code,
        bound_code_type: e.bound_code_type,
        bound_bs_type: e.bound_bs_type,
        bound_desc: e.bound_desc,

        bound_department: e.bound_department,
        creater: _this.login_name,
        bound_type: 'in',
        bound_status: '101'
      }

      putauth(_this.pathname + e.id + '/', status_FormData)
        .then((res) => {
          _this.editDataCancel()
          _this.getSearchList()
          if (res.status_code !== 500) {
            _this.$q.notify({
              message: '开始入库',
              icon: 'check',
              color: 'green'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    editDataSubmit () {
      var _this = this
      _this.editFormData.bound_type = 'in'

      putauth(_this.pathname + _this.editid + '/', _this.editFormData)
        .then((res) => {
          _this.editDataCancel()
          _this.getSearchList()
          if (res.status_code !== 500) {
            _this.$q.notify({
              message: '成功编辑数据',
              icon: 'check',
              color: 'green'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    editDataCancel () {
      var _this = this
      _this.editMode = false
      _this.editid = 0
      _this.editFormData = {
        bound_date: '',
        bound_code: '',
        bound_code_type: '',
        bound_bs_type: '',
        bound_desc: '',

        bound_department: '',
        creater: ''
      }
    },
    deleteData (e) {
      var _this = this
      _this.deleteForm = true
      _this.deleteid = e
    },
    detailData (e) {
      var _this = this
      _this.detailForm = true
      _this.detailid = e.id
      console.log('detail查询的id是:', _this.detailid)
      getauth(_this.pathname + _this.detailid + '/')
        .then((res) => {
          _this.table_detail = res
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      console.log('detail查询的结果是:', _this.table_detail)

      getauth('bound/detail/?max_page=1000&bound_list=' + _this.detailid)
        .then((res) => {
          _this.batch_detail = res.results
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      console.log('batch查询的结果是:', _this.batch_detail)
      console.log('batch长度查询的结果是:', _this.batch_detail.length)
    },
    deleteDataSubmit () {
      var _this = this
      deleteauth(_this.pathname + _this.deleteid + '/')
        .then((res) => {
          _this.deleteDataCancel()
          _this.getSearchList()
          _this.$q.notify({
            message: '成功删除数据',
            icon: 'check',
            color: 'green'
          })
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    deleteDataCancel () {
      var _this = this
      _this.deleteForm = false
      _this.deleteid = 0
    },

    updateProxy () {
      var _this = this
      _this.proxyDate = _this.date
    }
  },
  created () {
    var _this = this
    if (LocalStorage.has('openid')) {
      _this.openid = LocalStorage.getItem('openid')
    } else {
      _this.openid = ''
      LocalStorage.set('openid', '')
    }
    if (LocalStorage.has('warehouse_code')) {
      _this.warehouse_code = LocalStorage.getItem('warehouse_code')
    }
    if (LocalStorage.has('warehouse_name')) {
      _this.warehouse_name = LocalStorage.getItem('warehouse_name')
    }
    if (LocalStorage.has('login_name')) {
      _this.login_name = LocalStorage.getItem('login_name')
    } else {
      _this.login_name = ''
      LocalStorage.set('login_name', '')
    }
    if (LocalStorage.has('auth')) {
      const timeStamp = Date.now()
      const formattedString = date.formatDate(timeStamp, 'YYYY/MM/DD')
      _this.date = formattedString
      console.log(_this.date)
      _this.authin = '1'
      _this.getList()
    } else {
      _this.authin = '0'
    }
    getauth('warehouse/boundcodetype/', {})
      .then((res) => {
        _this.bound_code_type_list = res.results.map((item) => ({
          label: item.bound_code_type_name,
          value: item.bound_code_type_code
        }))
        // 编码 → 名称的映射（普通对象，确保响应式）
        _this.bound_code_type_map = res.results.reduce((acc, item) => {
          acc[item.bound_code_type_code] = item.bound_code_type_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/boundtype/', {})
      .then((res) => {
        _this.bound_desc_list = res.results.map((item) => ({
          label: item.bound_type_name,
          value: item.bound_type_code
        }))
        // 编码 → 名称的映射（普通对象，确保响应式）
        _this.bound_desc_map = res.results.reduce((acc, item) => {
          acc[item.bound_type_code] = item.bound_type_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/department/?max_page=1000', {})
      .then((res) => {
        _this.bound_department_list = res.results.map((item) => ({
          label: item.department_name,
          value: item.department_code
        }))
        _this.bound_department_map = res.results.reduce((acc, item) => {
          acc[item.department_code] = item.department_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/boundbusiness/', {})
      .then((res) => {
        _this.bound_bs_type_list = res.results.map((item) => ({
          label: item.bound_bs_name,
          value: item.bound_bs_code
        }))
        // 编码 → 名称的映射（普通对象，确保响应式）
        _this.bound_bs_type_map = res.results.reduce((acc, item) => {
          acc[item.bound_bs_code] = item.bound_bs_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/status/', {})
      .then((res) => {
        _this.bound_status_list = res.results.map((item) => ({
          label: item.bound_status_name,
          value: item.bound_status_code
        }))
        _this.bound_status_map = res.results.reduce((acc, item) => {
          acc[item.bound_status_code] = item.bound_status_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })
  },

  mounted () {
    var _this = this
    if (_this.$q.platform.is.electron) {
      _this.height = String(_this.$q.screen.height - 290) + 'px'
    } else {
      _this.height = _this.$q.screen.height - 290 + '' + 'px'
    }
    _this.newFormData.creater = _this.login_name
  },
  updated () {},
  destroyed () {},

  watch: {
    isorder: function (val) {
      console.log(val)
      if (val) {
        this.order = 'true'
      } else {
        this.order = 'false'
      }
    },
    batch_number_batch: function (val) {
      console.log(val)
      this.newBatchFormData.bound_batch_order =
        this.batch_number_year * 100000 + this.batch_number_month * 1000 + Number(val)
    },
    createDate1 (val) {
      if (val) {
        if (val.to) {
          this.createDate2 = `${val.from} - ${val.to}`
          this.date_range = `${val.from},${val.to} `

          // this.downloadhUrl = this.pathname + 'filelist/?' + 'document_date__range=' + this.date_range
        } else {
          this.createDate2 = `${val}`
          this.dateArray = val.split('/')
          this.searchUrl =
            this.pathname +
            '?' +
            'document_date__year=' +
            this.dateArray[0] +
            '&' +
            'document_date__month=' +
            this.dateArray[1] +
            '&' +
            'document_date__day=' +
            this.dateArray[2]
          // this.downloadhUrl = this.pathname + 'filelist/?' + 'document_date__year=' + this.dateArray[0] + '&' + 'document_date__month=' + this.dateArray[1] + '&' + 'document_date__day=' + this.dateArray[2]
        }
        this.date_range = this.date_range.replace(/\//g, '-')

        this.getSearchList()
        this.$refs.qDateProxy.hide()
      } else {
        this.createDate2 = ''
        this.date_range = ''
        this.getSearchList()
      }
    }
  }
}
</script>
<style scoped>
/* 添加在 <style> 中 */
.q-date__calendar-item--selected {
  transition: all 0.3s ease;
  background-color: #1976d2 !important;
}

.q-date__range {
  background-color: rgba(25, 118, 210, 0.1);
}

:deep(.q-field__label) {
  margin-top: 8px;
  align-self: center;
}

:deep(.q-field__control-container) {
  padding-left: 50px;
  margin-top: -5px;
}

/* 修改打印样式 */
#printBarcode {
  width: 80mm; /* 标准标签纸宽度 */
  max-width: 50mm;
  padding: 2mm;
  box-sizing: border-box;
}

/* 打印时强制缩放 */
@media print {
  body {
    margin: 0 !important;
    visibility: hidden;
  }

  #printBarcode,
  #printBarcode * {
    visibility: visible;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 强制单页布局 */
  .print-area {
    page-break-inside: avoid;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    gap: 2mm;
  }

  /* 条码缩放 */
  svg {
    transform: scale(0.9);
    transform-origin: center top;
    max-height: 30mm !important;
  }

  /* 文本适配 */
  p {
    font-size: 9pt !important;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 网格布局优化 */
  .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1mm;
  }
}

/* 在样式文件中添加 */
.centered-input ::v-deep .q-field__control {
  justify-content: center;
}

.centered-input ::v-deep input {
  text-align: center;
  -moz-appearance: textfield; /* 隐藏Firefox的数字箭头 */
}

/* 隐藏Chrome/Safari的数字箭头 */

.centered-input ::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 修改滚动样式 */
.scrollable-table {
  flex: 1; /* 允许表格填充剩余空间 */
  display: flex;
  flex-direction: column;
}

.scrollable-table .q-table__container {
  flex: 1;
  overflow: auto;
}

.scrollable-table .q-table__top {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.my-sticky-table .q-table__middle {
  overflow-y: auto !important;
}
</style>