<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="80px">
        <template v-if="activeName == 0">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_1')" prop="orderCode">
                <el-input clearable v-model="queryParams.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_T_1')" prop="memberCode">
                <el-input clearable v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('CK_KS_14')" prop="memberName">
                <el-input clearable v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0052')" prop="phone">
                <el-input clearable v-model="queryParams.phone"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_2')" prop="orderType">
                <el-select
                  clearable
                  v-model="queryParams.orderType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in orderTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_9')" prop="orderStatus">
                <el-select
                  clearable
                  v-model="queryParams.orderStatus"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in orderStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_253')" prop="preSaleStatus">
                <el-select
                  clearable
                  v-model="queryParams.preSaleStatus"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in presaleStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0061')" prop="deliveryWay">
                <el-select
                  clearable
                  v-model="queryParams.deliveryWay"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0063')" prop="transportType">
                <el-select
                  clearable
                  v-model="queryParams.transportType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in transportTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0215')" prop="payType">
                <el-select
                  clearable
                  v-model="queryParams.payType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in orderPayTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_250')" prop="operateScope">
                <el-select
                  clearable
                  v-model="queryParams.operateScope"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in supplyWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_63')" prop="pkClassify">
                <el-select
                  clearable
                  v-model="queryParams.pkClassify"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in classifyAllList"
                    :key="index"
                    :label="item.name"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_249')" prop="isGift">
                    <el-select
                      clearable
                      v-model="queryParams.isGift"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in saleTypeList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="$t('MN_F_T_1125')"
                    prop="shippingChannel"
                  >
                    <el-select
                      clearable
                      v-model="queryParams.shippingChannel"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in shippingChannelList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_251')" prop="orderType">
                    <el-select
                      clearable
                      v-model="queryParams.pkStorehouse"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_39')" prop="productName">
                    <el-input v-model="queryParams.productName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_41')" prop="specsName">
                    <el-input v-model="queryParams.specsName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MY_ORD_10')" prop="recName">
                    <el-input v-model="queryParams.recName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('w_0242')" prop="recPhone">
                    <el-input v-model="queryParams.recPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_1177')" prop="code">
                    <el-input
                      v-model="queryParams.originalOrderCode"
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('选择产品')" prop="productIdList">
                    <el-input
                      clearable
                      @clear="clearProduct"
                      @focus="openDig"
                      v-model="productLists"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="4">-->
                <!--                  <el-form-item :label="$t('系统类型')">-->
                <!--                    <el-select clearable v-model="queryParams.systemType">-->
                <!--                      <el-option-->
                <!--                        v-for="item in systemTypes"-->
                <!--                        :key="item.value"-->
                <!--                        :label="item.label"-->
                <!--                        :value="item.value"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="8">
                  <el-form-item :label="$t('PER_DA_9')" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('MN_F_T_914')" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    class="dizhi"
                    :label="$t('S_C_27')"
                    prop="shoppingAddress"
                  >
                    <el-cascader
                      style="width: 100%"
                      v-model="queryParams.shoppingAddress"
                      :options="areaData"
                      :props="regionParams"
                      @change="handleChange1"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label-width="10px">
                    <el-input
                      clearable
                      v-model="queryParams.recAddress"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <template v-if="activeName == 1">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_37')" prop="deliverCode">
                <el-input
                  clearable
                  v-model="queryParams.deliverCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_1')" prop="orderCode">
                <el-input clearable v-model="queryParams.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_T_1')" prop="memberCode">
                <el-input clearable v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('CK_KS_14')" prop="memberName">
                <el-input clearable v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0052')" prop="phone">
                <el-input clearable v-model="queryParams.phone"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_2')" prop="orderType">
                <el-select
                  clearable
                  v-model="queryParams.orderType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in orderTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_9')" prop="orderStatus">
                <el-select
                  clearable
                  v-model="queryParams.orderStatus"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in orderStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_253')" prop="preSaleStatus">
                <el-select
                  clearable
                  v-model="queryParams.preSaleStatus"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in presaleStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0061')" prop="deliveryWay">
                <el-select
                  clearable
                  v-model="queryParams.deliveryWay"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0063')" prop="transportType">
                <el-select
                  clearable
                  v-model="queryParams.transportType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in transportTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_250')" prop="operateScope">
                <el-select
                  clearable
                  v-model="queryParams.operateScope"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in supplyWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_276')" prop="printStatus">
                <el-select
                  clearable
                  v-model="queryParams.printStatus"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in printStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('MY_ORD_10')" prop="recName">
                    <el-input v-model="queryParams.recName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('w_0242')" prop="recPhone">
                    <el-input v-model="queryParams.recPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    class="dizhi"
                    :label="$t('S_C_27')"
                    prop="shoppingAddress"
                  >
                    <el-cascader
                      style="width: 100%"
                      v-model="queryParams.shoppingAddress"
                      :options="areaData"
                      :props="regionParams"
                      @change="handleChange1"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="recAddress" label-width="40px">
                    <el-input
                      clearable
                      v-model="queryParams.recAddress"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_39')" prop="productName">
                    <el-input
                      clearable
                      v-model="queryParams.productName"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_44')" prop="barCode">
                    <el-input
                      clearable
                      v-model="queryParams.barCode"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="是否追溯" prop="isBarCode">
                    <el-select
                      clearable
                      :placeholder="$t('CK_KS_38')"
                      v-model="queryParams.isBarCode"
                    >
                      <el-option
                        v-for="item in yesornoList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="$t('MN_F_T_1125')"
                    prop="shippingChannel"
                  >
                    <el-select
                      clearable
                      :placeholder="$t('CK_KS_38')"
                      v-model="queryParams.shippingChannel"
                    >
                      <el-option
                        v-for="item in shippingChannelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_251')" prop="orderType">
                    <el-select
                      clearable
                      v-model="queryParams.pkStorehouse"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="4">-->
                <!--                  <el-form-item :label="$t('系统类型')">-->
                <!--                    <el-select clearable v-model="queryParams.systemType">-->
                <!--                      <el-option-->
                <!--                        v-for="item in systemTypes"-->
                <!--                        :key="item.value"-->
                <!--                        :label="item.label"-->
                <!--                        :value="item.value"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="4">
                  <el-form-item label="批次" prop="dayBatch">
                    <el-input
                      clearable
                      v-model="queryParams.dayBatch"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('PER_DA_9')" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('MN_F_T_914')" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <template v-if="activeName == 2">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_37')" prop="deliverCode">
                <el-input
                  clearable
                  v-model="queryParams.deliverCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_1')" prop="orderCode">
                <el-input clearable v-model="queryParams.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_T_1')" prop="memberCode">
                <el-input clearable v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('CK_KS_14')" prop="memberName">
                <el-input clearable v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0052')" prop="phone">
                <el-input clearable v-model="queryParams.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_48')" prop="deliveryStatus">
                <el-select
                  clearable
                  v-model="queryParams.deliveryStatus"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in deliveryStatusList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('w_0061')" prop="deliveryWay">
                <el-select
                  clearable
                  v-model="queryParams.deliveryWay"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0063')" prop="transportType">
                <el-select
                  clearable
                  v-model="queryParams.transportType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in transportTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_250')" prop="operateScope">
                <el-select
                  clearable
                  v-model="queryParams.operateScope"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in supplyWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_39')" prop="productName">
                <el-autocomplete
                  class="inline-input"
                  v-model="queryParams.productName"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容或选择"
                  @select="handleSelect"
                ></el-autocomplete>
                <!-- <el-select
                  clearable
                  v-model="queryParams.productName"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in productAllList"
                    :key="index"
                    :label="item.productName"
                    :value="item.pkId"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_41')" prop="specsName">
                <el-input clearable v-model="queryParams.specsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_21')" prop="logisticsCompany">
                <el-input
                  clearable
                  v-model="queryParams.logisticsCompany"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_226')" prop="logisticsCode">
                    <el-input
                      clearable
                      v-model="queryParams.logisticsCode"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MY_ORD_10')" prop="recName">
                    <el-input v-model="queryParams.recName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_251')" prop="orderType">
                    <el-select
                      clearable
                      v-model="queryParams.pkStorehouse"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    class="dizhi"
                    :label="$t('S_C_27')"
                    prop="shoppingAddress"
                  >
                    <el-cascader
                      style="width: 100%"
                      v-model="queryParams.shoppingAddress"
                      :options="areaData"
                      :props="regionParams"
                      @change="handleChange1"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="recAddress" label-width="40px">
                    <el-input
                      clearable
                      v-model="queryParams.recAddress"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('w_0242')" prop="recPhone">
                    <el-input v-model="queryParams.recPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="$t('ENU_ORDER_T_23')"
                    prop="secondDeliver"
                  >
                    <el-select
                      clearable
                      v-model="queryParams.secondDeliver"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in yesornoList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="是否追溯" prop="isBarCode">
                    <el-select
                      clearable
                      :placeholder="$t('CK_KS_38')"
                      v-model="queryParams.isBarCode"
                    >
                      <el-option
                        v-for="item in yesornoList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_44')" prop="barCode">
                    <el-input v-model="queryParams.barCode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :label="$t('MN_F_T_1125')"
                    prop="shippingChannel"
                  >
                    <el-select
                      clearable
                      v-model="queryParams.shippingChannel"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in shippingChannelList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="4">-->
                <!--                  <el-form-item :label="$t('系统类型')">-->
                <!--                    <el-select clearable v-model="queryParams.systemType">-->
                <!--                      <el-option-->
                <!--                        v-for="item in systemTypes"-->
                <!--                        :key="item.value"-->
                <!--                        :label="item.label"-->
                <!--                        :value="item.value"-->
                <!--                      ></el-option>-->
                <!--                    </el-select>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item :label="$t('PER_DA_9')" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('MN_F_T_914')" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('w_0436')" prop="printTime">
                    <el-date-picker
                      v-model="queryParams.printTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('w_0430')" prop="deliverTime">
                    <el-date-picker
                      v-model="queryParams.deliverTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <template v-if="activeName == 3">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_1')" prop="orderCode">
                <el-input clearable v-model="queryParams.orderCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_T_1')" prop="memberCode">
                <el-input clearable v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('CK_KS_14')" prop="memberName">
                <el-input clearable v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0052')" prop="phone">
                <el-input clearable v-model="queryParams.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_2')" prop="orderType">
                <el-select
                  clearable
                  v-model="queryParams.orderType"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in orderTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0061')" prop="deliveryWay">
                <el-select
                  clearable
                  v-model="queryParams.deliveryWay"
                  :placeholder="$t('CK_KS_38')"
                >
                  <el-option
                    v-for="(item, index) in deliveryWayList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('MY_ORD_10')" prop="recName">
                <el-input v-model="queryParams.recName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('w_0242')" prop="recPhone">
                <el-input v-model="queryParams.recPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="dizhi"
                :label="$t('S_C_27')"
                prop="shoppingAddress"
              >
                <el-cascader
                  style="width: 100%"
                  v-model="queryParams.shoppingAddress"
                  :options="areaData"
                  :props="regionParams"
                  @change="handleChange1"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" prop="recAddress" label-width="0">
                <el-input clearable v-model="queryParams.recAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-collapse-transition>
            <div v-show="isActive">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-form-item :label="$t('w_0215')" prop="payType">
                    <el-select
                      clearable
                      v-model="queryParams.payType"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in orderPayTypeList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="$t('MN_F_T_251')" prop="orderType">
                    <el-select
                      clearable
                      v-model="queryParams.pkStorehouse"
                      :placeholder="$t('CK_KS_38')"
                    >
                      <el-option
                        v-for="(item, index) in storehouseList"
                        :key="index"
                        :label="item.name"
                        :value="item.pkId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('PER_DA_9')" prop="code">
                    <el-date-picker
                      v-model="queryParams.creationTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('MN_F_T_914')" prop="code">
                    <el-date-picker
                      v-model="queryParams.payTime"
                      type="daterange"
                      range-separator="——"
                      :start-placeholder="$t('CK_KS_4')"
                      :end-placeholder="$t('CK_KS_5')"
                      value-format="yyyy-MM-dd"
                      :unlink-panels="true"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-transition>
        </template>
        <el-row>
          <el-col :span="4">
            <div class="searchbox" style="margin-left: 20px">
              <el-button class="searchbtn" @click="getSearch(1)">
                {{ $t("MN_T_2") }}</el-button
              >
              <el-button @click="reChongzhi"> {{ $t("MN_T_3") }}</el-button>
            </div>
          </el-col>
          <div class="openClose" @click="changeActive">
            <i
              :class="isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            ></i>
            <div>{{ isActive ? $t("MN_F_T_545") : $t("MN_F_T_546") }}</div>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <el-tabs
        style="padding: 10px 20px"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane :label="$t('MN_F_T_1178')" name="0" v-if="menu1">
          <unhandeled ref="unhandeled" :params="queryParams"></unhandeled>
        </el-tab-pane>
        <el-tab-pane :label="$t('MN_F_T_1179')" name="1" v-if="menu2">
          <yihandeled ref="yihandeled" :params="queryParams"></yihandeled>
        </el-tab-pane>
        <el-tab-pane name="2" :label="$t('MN_F_36')" v-if="menu3">
          <nowdelivery ref="nowdelivery" :params="queryParams"></nowdelivery>
        </el-tab-pane>
        <el-tab-pane :label="$t('ENU_ORDER_T_23')" name="3" v-if="menu4">
          <twoSend ref="twoSend" :params="queryParams"></twoSend>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="$t('w_0328')"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
      center
      :before-close="handleClose"
    >
      <div class="cpHeight">
        <el-input
          v-model="select.productName"
          :placeholder="$t('S_C_70')"
          @keyup.enter.native="getDataList"
          prefix-icon="el-icon-search"
        ></el-input>
        <div style="height: 10px"></div>
        <el-table
          :data="dialogList"
          ref="lessonTableRef"
          style="width: 100%"
          :row-key="
            (row) => {
              return row.pkProduct;
            }
          "
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="dialogChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          >
          </el-table-column>
          <el-table-column align="center" prop="cover" :label="$t('MN_F_38')">
            <template slot-scope="scope">
              <img class="bgImg" :src="scope.row.cover" alt="" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="$t('MN_F_39')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productCode"
            :label="$t('MN_F_40')"
          >
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDataList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t("ENU_P_TYPE0") }}</el-button>
        <el-button type="primary" @click="onSubmit('form')">{{
          $t("ENU_P_TYPE4")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import * as api from "@/api/site.js";
import * as log from "@/api/logistics";
import unhandeled from "@/components/Delivery/unhandeled.vue";
import yihandeled from "@/components/Delivery/yihandeled.vue";
import nowdelivery from "@/components/Delivery/nowdelivery.vue";
import twoSend from "@/components/Delivery/twoSend.vue";
import * as del from "@/api/delivery.js";
import { getRouters } from "@/api/settle";
import { productList } from "@/api/product";
export default {
  name: "Fhqd",
  components: {
    topBar,
    unhandeled,
    yihandeled,
    nowdelivery,
    twoSend,
  },
  data() {
    return {
      moren: "fhqd",
      topList: [
        {
          name: this.$t("MN_F_T_76"),
          path: "fhqd",
        },
      ],
      dialogVisible: false,
      dialogList: [],
      lsArr: [],
      tableData: [],
      productLists: [],
      select: {},
      orderTypeList: [], //订单类型
      orderStatusList: [], //订单状态
      presaleStatusList: [], //预售状态
      deliveryWayList: [], //发货方式
      transportTypeList: [], //运输方式
      orderPayTypeList: [], //支付方式
      supplyWayList: [], //供应方式
      saleTypeList: [], //销售类型
      deliveryStatusList: [], //发货状态
      shippingChannelList: [], //发货类型
      classifyAllList: [], //产品分类
      printStatusList: [], //打印状态
      productAllList: [], //产品名称
      yesornoList: [], //二次发货
      storehouseList: [], //发货仓库
      total:'',
      queryParams: {
        pageNum: 1,
        pageSize: 500,
        deliverCode: "", //发货单号12
        printStatus: "", //打印状态1
        productName: "", //产品名称2
        specsName: "", //产品规格2
        logisticsCompany: "", //物流公司2
        logisticsCode: "", //物流单号2
        secondDeliver: "", //二次发货2
        orderCode: "",
        memberCode: "",
        memberName: "",
        phone: "",
        orderType: "",
        orderStatus: "",
        preSaleStatus: "",
        deliveryWay: "",
        transportType: "",
        payType: "",
        operateScope: "",
        recName: "",
        recPhone: "",
        recProvince: "",
        recCity: "",
        recCounty: "",
        recAddress: "",
        isGift: "",
        shippingChannel: "",
        shoppingAddress: [],
        creationTime: [],
        payTime: [],
        printTime: [], //打印时间2
        deliverTime: [], //发货时间2
        productIdList: [],
      },
      isActive: true,
      areaData: [],
      regionParams: {
        label: "name",
        value: "id",
        children: "children",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      activeName: 0,
      menu1: false,
      menu2: false,
      menu3: false,
      menu4: false,
    };
  },
  created() {
    this.getData();
    this.getSearch();
    this.getUserRoute();
  },
  methods: {
    clearProduct() {
      this.tableData = [];
      this.lsArr = [];
      this.queryParams.productIdList = [];
      this.productLists = [];
    },
    openDig() {
      this.select = {};
      productList(Object.assign({ isPutOn: 0 }, this.queryParams)).then(
        (res) => {
          res.rows.forEach((item) => {
            item.quantity = 1;
            item.pkProduct = item.pkProduct;
            item.isGift = 0;
          });
          this.dialogList = res.rows;
          this.total = res.total;
        }
      );
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getDataList() {
      productList(
        Object.assign({ isPutOn: 0 }, this.queryParams, this.select)
      ).then((res) => {
        res.rows.forEach((item) => {
          item.quantity = 1;
          item.pkProduct = item.pkProduct;
          item.isGift = 0;
        });
        this.dialogList = res.rows;
        this.total = res.total;
      });
    },
    dialogChange(val) {
      this.lsArr = val;
    },
    onSubmit() {
      // this.tableData = []
      this.lsArr.forEach((item) => {
        this.tableData.push(item);
      });
      // this.tableData = this.clearArr(this.tableData)
      this.dialogVisible = false;
      this.dialogList.forEach((row) => {
        this.$refs.lessonTableRef.toggleRowSelection(row, false);
      });
      // 判断重复
      let arr = this.tableData;
      let isTrue = false;
      for (var i = 0; i < arr.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {
          // 再次遍历数组
          if (arr[i].productCode == arr[j].productCode) {
            if (arr[i].isGift == arr[j].isGift) {
              isTrue = true;
            }
          }
        }
      }
      if (isTrue) {
        this.$message.error("请勿选择重复的商品");
        this.tableData = [];
        this.lsArr = [];
        this.queryParams.productIdList = [];
        this.productLists = [];
        return;
      }
      this.queryParams.productIdList = [];
      this.productLists = [];
      this.tableData.forEach((item) => {
        this.queryParams.productIdList.push(item.pkId);
        this.productLists.push(item.productName);
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          // 未合单
          if (item.routeName == "DeliveryUnhandled") {
            this.menu1 = true;
          }
          // 已合单
          if (item.routeName == "DeliveryHandled") {
            this.menu2 = true;
          }
          // 立即发货
          if (item.routeName == "DeliveryImmediate") {
            this.menu3 = true;
          }
          // 二次发货
          if (item.routeName == "DeliverySecond") {
            this.menu4 = true;
          }
        });
      });
    },
    //带输入建议的产品名称
    querySearch(queryString, cb) {
      // console.log('queryString??',queryString)
      var productAllList = this.productAllList;
      var results = queryString
        ? productAllList.filter(this.createFilter(queryString))
        : productAllList;
      // 调用 callback 返回建议列表的数据

      cb(results);
    },
    createFilter(queryString) {
      return (product) => {
        return (
          product.productName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.queryParams.productName = item.pkId;
      // console.log('🌈a???',item)
    },
    handleClick(tab) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 500,
        orderStatus: "",
      };
      // this.activeName = tab.name
      this.getSearch(0);
      // console.log('🌈',tab.name)
    },
    getData() {
      api.areaList().then((res) => {
        this.areaData = res.data;
      });
      log.getOrderType().then((res) => {
        this.orderTypeList = res.data;
      });
      del.getDeliveryStatus().then((res) => {
        this.deliveryStatusList = res.data;
      });
      del.getOrderStatus().then((res) => {
        this.orderStatusList = res.data;
      });
      del.getPresaleStatus().then((res) => {
        this.presaleStatusList = res.data;
      });
      del.getDeliveryWayList().then((res) => {
        this.deliveryWayList = res.data;
      });
      del.getTransportType().then((res) => {
        this.transportTypeList = res.data;
      });
      del.getOrderPayType().then((res) => {
        this.orderPayTypeList = res.data;
      });
      del.getSupplyWay().then((res) => {
        this.supplyWayList = res.data;
      });
      del.getSaleTypeList().then((res) => {
        this.saleTypeList = res.data;
      });
      del.getShippingChannelList().then((res) => {
        this.shippingChannelList = res.data;
      });
      del.getClassifyAll().then((res) => {
        this.classifyAllList = res.data;
      });
      del.getPrintStatus().then((res) => {
        this.printStatusList = res.data;
      });
      del.getProductAll().then((res) => {
        res.data.forEach((element) => {
          element.value = element.productName;
        });
        this.productAllList = res.data;
      });
      del.getDealerYesNo().then((res) => {
        this.yesornoList = res.data;
      });
      del.getStorehouseList().then((res) => {
        this.storehouseList = res.rows;
      });
    },
    handleChange1() {},
    //搜索
    getSearch(index) {
      if (this.queryParams.shoppingAddress) {
        this.queryParams.recProvince = this.queryParams.shoppingAddress[0];
        this.queryParams.recCity = this.queryParams.shoppingAddress[1];
        this.queryParams.recCounty = this.queryParams.shoppingAddress[2];
      } else {
        this.queryParams.recAddress = "";
      }

      this.$nextTick(() => {
        console.log("this.$refs", this.$refs);
        if (this.activeName == 0) {
          this.$refs.unhandeled.getList();
        } else if (this.activeName == 1) {
          this.$refs.yihandeled.getList();
        } else if (this.activeName == 2) {
          this.$refs.nowdelivery.getList();
        } else if (this.activeName == 3) {
          if (index && index == 1) {
            this.$refs.twoSend.getList();
          }
        }
      });
    },
    //重置
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 500,
        orderStatus: 1,
      };
      this.getSearch();
    },
    // 展开折叠
    changeActive() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

<style lang="scss" scoped>
.bgImg {
  width: 48px;
  height: 48px;
}
.cpHeight {
  height: 60vh;
  overflow-y: auto;
}
.el-range-editor.el-input__inner {
  width: 100%;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #c8161d;
        color: #ffffff;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
  .main {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .main_title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .bluekuai {
        width: 5px;
        height: 19px;
        background: #4391fd;
        margin-right: 20px;
      }
      .title_word {
        font-size: 14px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
      }
    }
    .main_content {
      padding: 20px 25px;
    }

    .maintop {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(243, 169, 0, 1);
        }
        .thebtn2 {
          color: #ffffff;

          background: rgba(72, 178, 253, 1);
        }
        .thebtn3 {
          color: #ffffff;

          background: rgba(1, 143, 243, 1);
        }
        .thebtn4 {
          color: #ffffff;
          background: rgba(167, 116, 176, 1);
        }
        .thebtn5 {
          color: #ffffff;
          background: rgba(0, 155, 88, 1);
        }
        .thebtn6 {
          color: #ffffff;
          background: rgba(236, 108, 0, 1);
        }
      }
    }
  }
}
</style>
