<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <right-toolbar
      :showSearch.sync="showSearch"
      @queryTable="getList"
    ></right-toolbar>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
      class="search-z"
    >
      <el-form-item :label="$t('订单号') + ':'">
        <el-input
          v-model="queryParams.orderNo"
          :placeholder="$t('请输入订单号')"
          clearable
          @keyup.enter.native="handleQuery"
          @input="replaceSpace(queryParams, 'orderNo')"
          class="w-200"
        >
          <template slot="prepend">
            <dict-selector
              :type="DICT_TYPE.EXCEPTION_SELECT_FILED"
              v-model="queryParams.orderNoKey"
            />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('运输方式') + ':'">
        <dict-selector
          :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
          :clearable="true"
          v-model="queryParams.transportId"
          class="w-200"
        />
      </el-form-item>
      <el-form-item :label="$t('异常状态') + ':'">
        <dict-selector
          :type="DICT_TYPE.ORDER_EXCEPTION_STATUS"
          :clearable="true"
          v-model="queryParams.orderExceptionStatusList"
          multiple
          @keyup.enter.native="handleQuery"
          class="w-200"
        />
      </el-form-item>
      <el-form-item :label="$t('客户经理') + ':'">
        <el-select
          v-model="queryParams.customerIds"
          multiple
          :placeholder="$t('请选择客户经理')"
          clearable
          class="w-200"
        >
          <el-option
            v-for="item in creatorData"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('发货人')" prop="consignorText">
        <el-input
          v-model.trim="queryParams.consignorText"
          :placeholder="$t('发货人')"
          clearable
          @keyup.enter.native="handleQuery"
          class="w-200"
        />
      </el-form-item>
      <el-form-item :label="$t('收货人')" prop="consigneeText">
        <el-input
          v-model="queryParams.consigneeText"
          :placeholder="$t('收货人')"
          clearable
          @keyup.enter.native="handleQuery"
          class="w-200"
        />
      </el-form-item>
      <el-form-item :label="$t('异常类型') + ':'">
        <dict-selector
          :type="DICT_TYPE.ORDER_ERROR_TYPE"
          :clearable="true"
          multiple
          v-model="queryParams.orderExceptionType"
          @keyup.enter.native="handleQuery"
          multiple
          class="w-200"
        />
      </el-form-item>
      <el-form-item :label="$t('出货渠道')" prop="channelId">
        <!--嵌套一个form来脱离disabled控制-->
        <selector
          :clearable="true"
          v-model="queryParams.channelIds"
          multiple
          :options="channelList"
          value-field="channelId"
          :label-field="$l(null, 'name')"
          class="w-200"
        ></selector>
      </el-form-item>
      <el-form-item :label="$t('始发仓')">
        <el-select
          v-model="queryParams.startWarehouseIds"
          multiple
          :placeholder="$t('请选择始发仓')"
          clearable
          class="w-200"
        >
          <el-option
            v-for="item in exportWarehouseList"
            :label="$l(item, 'title')"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('目的国')" prop="destCountryId">
        <el-select
          v-model="destCountryId"
          filterable
          multiple
          :label="destCountryId"
          :placeholder="$t('请选择目的国')"
          clearable
          @change="handleQuery"
          class="w-200"
        >
          <el-option
            v-for="item in AddressProvince"
            :key="item.guojia"
            :label="item.guojiaName"
            :value="item.guojia"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('目的城市')" prop="objectiveId">
        <el-select
          v-model="objectiveId"
          filterable
          multiple
          :placeholder="$t('请选择目的城市')"
          style="width: 200px"
          clearable
          @change="handleQuery"
          class="w-200"
        >
          <el-option
            v-for="item in AddressCity"
            :key="item.shi"
            :label="item.shiName"
            :value="item.shi"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('目的仓')" prop="destWarehouseId">
        <el-select
          v-model="destWarehouseId"
          filterable
          multiple
          :placeholder="$t('请选择目的仓')"
          style="width: 200px"
          clearable
          @change="handleQuery"
          class="w-200"
        >
          <el-option
            v-for="item in AddressTown"
            :key="item.id"
            :label="item.titleZh"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('商品') + ':'">
        <div class="flex w-200">
          <dict-selector
            :type="DICT_TYPE.EXCEPTION_SELECT_FILED"
            style="width: 40px"
            v-model="queryParams.goodsNameKey"
          />
          <product-selector
            v-model.trim="queryParams.goodsName"
            :clearable="true"
            @keyup.enter.native="handleQuery"
            class="flex-1"
          />
        </div>
      </el-form-item>
      <!--<el-form-item :label="$t('订单状态')" prop="status">
        <dict-selector
          :type="DICT_TYPE.ORDER_STATUS"
          v-model="queryParams.orderStatus"
          @keyup.enter.native="handleQuery"
          clearable
        />
      </el-form-item>-->
      <el-form-item :label="$t('跟进客服')" prop="salesmanIds">
        <el-select
          v-model="queryParams.salesmanIds"
          multiple
          :placeholder="$t('请选择')"
          clearable
          class="w-200"
        >
          <el-option
            v-for="dict in followUpList"
            :key="parseInt(dict.id)"
            :label="dict.nickname"
            :value="parseInt(dict.id)"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('控货') + ':'" v-show="showSearch">
        <dict-selector
          :type="DICT_TYPE.ECW_YESNO"
          :clearable="true"
          v-model="queryParams.isCargoControl"
          @keyup.enter.native="handleQuery"
          class="w-200"
        />
      </el-form-item>
      <!-- <el-form-item :label="$t('发货人')+':'">
          <customer-selector v-model="queryParams.consignor" :clearable="true" @change="consignor = $event" />
      </el-form-item>
      <el-form-item :label="$t('发货人')+':'">
          <customer-selector v-model="queryParams.consignor" :clearable="true" @change="consignor = $event" />
      </el-form-item> -->

      <el-form-item :label="$t('唛头') + ':'" v-show="showSearch">
        <el-input
          v-model.trim="queryParams.marks"
          :placeholder="$t('请输入唛头')"
          clearable
          @keyup.enter.native="handleQuery"
          @blur="trimMarks"
          class="w-200"
        >
          <template slot="prepend">
            <dict-selector
              :type="DICT_TYPE.EXCEPTION_SELECT_FILED"
              v-model="queryParams.marksKey"
              class="w-50"
            />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('商品类型')" prop="goodsTypes" v-show="showSearch">
        <selector v-model="queryParams.goodsTypes" multiple clearable :options="productAttrList" label-field="attrName" value-field="id" class="w-200">
        </selector>
      </el-form-item>
      <el-form-item :label="$t('特需')" prop="packageType" v-show="showSearch">
        <el-select
          v-model="queryParams.packageTypeArr"
          multiple
          :placeholder="$t('请选择')"
          clearable
          class="w-200"
        >
          <template
            v-for="item in getDictDatas(DICT_TYPE.ORDER_SPECIAL_NEEDS)"
          >
            <el-option
              :label="$l(item, 'label')"
              :value="item.value"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('备案') + ':'" v-show="showSearch">
        <dict-selector
          :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE"
          :clearable="true"
          v-model="queryParams.productRecord"
          multiple
          @keyup.enter.native="handleQuery"
          class="w-200"
        />
      </el-form-item>
      <el-form-item :label="$t('外部仓')" prop="number" v-show="showSearch">
        <el-select
          v-model="queryParams.isExternalWarehouse"
          :placeholder="$t('请选择')"
          clearable
          @change="handleQuery"
          class="w-200"
        >
          <el-option :label="$t('外部仓')" :value="1"></el-option>
          <el-option :label="$t('自有仓')" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('增值服务')" prop="types" v-show="showSearch">
        <el-select
          v-model="queryParams.types"
          multiple
          :placeholder="$t('请选择')"
          clearable
          @change="handleQuery"
          class="w-200"
        >
          <el-option :label="$t('普通订单')" :value="0"></el-option>
          <el-option :label="$t('集运服务')" :value="1"></el-option>
          <el-option :label="$t('海外仓')" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <div class="flex pb-20 items-center">
          <el-select
            v-model="queryParams.dateType"
            style="width: 150px"
            clearable
          >
            <el-option :label="$t('入仓时间')" value="1" />
            <el-option :label="$t('处理时间')" value="2" />
          </el-select>
          <el-date-picker
            clearable
            v-model="queryParams.beginCreateTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :placeholder="$t('请选择开始日期')"
          />
          <span style="margin: 0 8px">{{ $t("到") }}</span>
          <el-date-picker
            clearable
            v-model="queryParams.endCreateTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :placeholder="$t('请选择结束日期')"
          />
          <div class="mr-10">
            <el-checkbox
              style="margin-left: 60px"
              v-model="queryParams.isHaveCustomer"
              @change="handleQuery"
            >{{ $t("无归属订单") }}</el-checkbox>
          </div>

          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            >{{ $t("搜索") }}</el-button
          >
          <el-button icon="el-icon-refresh" @click="reset">{{
            $t("重置")
          }}</el-button>
      </div>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="exportSearch"
          v-hasPermi="['ecw:exception:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="17.5">
        <div class="total" v-if="totalData">
          <div :label="$t('箱数')">
            <div>{{ $t("箱数") }}:</div>
            <span v-if="totalData.totalNum">{{
              totalData.totalNum + $t("箱")
            }}</span>
            <span v-else></span>
          </div>
          <div>
            <div>{{ $t("测量方数汇总") }}:</div>
            <span v-if="totalData.totalVolume"
              >{{ totalData.totalVolume }}m³</span
            >
            <span v-else></span>
          </div>
          <div>
            <div>{{ $t("收费方数汇总") }}:</div>
            <span v-if="totalData.totalChargeVolume"
              >{{ totalData.totalChargeVolume }}m³</span
            >
            <span v-else></span>
          </div>
          <div>
            <div>{{ $t("重量汇总") }}:</div>
            <span v-if="totalData.totalWeight"
              >{{ totalData.totalWeight }}KG</span
            >
            <span v-else></span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" border :data="list">
      <el-table-column
        :label="$t('序号')"
        align="center"
        prop="id"
        type="index"
        fixed
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单号')" align="center" fixed>
        <template slot-scope="scope">
          <router-link
            :to="{
              path: '/order/detail',
              query: { orderId: scope.row.orderId },
            }"
            class="link-type"
          >
            <span>{{ scope.row.orderNo }}</span>
          </router-link>
          <div
            style="display: flex; flex-wrap: wrap"
            v-if="scope.row.specialNeed"
          >
            <el-button
              size="mini"
              style="margin-left: 20px"
              type="danger"
              circle
              v-for="(item, index) in specialRendering(scope.row.specialNeed)"
              :key="index"
              >{{ item.symbol }}</el-button
            >
          </div>
          <!--             <span>{{specialNeedTag(scope.row.specialNeed)}}</span>-->
        </template>
      </el-table-column>
      <el-table-column :label="$t('唛头')" align="center" fixed>
        <template slot-scope="scope">
          <span>{{ scope.row.marks || $t("无") }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('总箱数/入仓箱数')" align="center">
        <template slot-scope="scope">
          <p v-if="scope.row.customsType == 1">
            {{
              scope.row.totalBox +
              $t("箱/") +
              scope.row.warehousingBox +
              $t("箱")
            }}
          </p>
          <p style="color: #ff4949" v-else>
            {{
              scope.row.totalBox +
              $t("箱/") +
              scope.row.warehousingBox +
              $t("箱")
            }}
          </p>
          <dict-tag
            style="color: #ff4949"
            v-if="scope.row.customsType != 1"
            :type="DICT_TYPE.ECW_CUSTOMS_TYPE"
            :value="scope.row.customsType"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('体积/重量')" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.orderType == 1">
            <span v-if="scope.row.status >= 5">{{
              scope.row.volume + "m³/" + scope.row.weight + "kg"
            }}</span>
            <span v-else>{{
              scope.row.totalVolume + "m³/" + scope.row.totalWeight + "kg"
            }}</span>
          </div>
          <el-tooltip
            v-else-if="scope.row.orderType == 2"
            class="item"
            effect="dark"
            :content="(scope.row.wvolume || 0) + 'm³'"
            placement="bottom"
          >
            <span class="red" v-if="scope.row.status >= 5">{{
              scope.row.volume + "m³/" + scope.row.weight + "kg"
            }}</span>
            <span class="red" v-else>{{
              scope.row.totalVolume + "m³/" + scope.row.totalWeight + "kg"
            }}</span>
          </el-tooltip>
          <el-tooltip
            v-else-if="scope.row.orderType == 3"
            class="item"
            effect="dark"
            :content="(scope.row.vweight || 0) + 'kg'"
            placement="bottom"
          >
            <span class="red" v-if="scope.row.status >= 5">{{
              scope.row.volume + "m³/" + scope.row.weight + "kg"
            }}</span>
            <span class="red" v-else>{{
              scope.row.totalVolume + "m³/" + scope.row.totalWeight + "kg"
            }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('运输方式/目的地')" align="center">
        <template slot-scope="scope">
          <span
            ><dict-tag
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              :value="scope.row.transportId"
            ></dict-tag>
            / {{ $l(scope.row, "destination") }}</span
          >
        </template>
      </el-table-column>
      <el-table-column :label="$t('控货')" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
            :value="scope.row.isCargoControl"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单状态')" align="center" prop="statusMsg">
        <!--        <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.orderStatus" />
          </template> -->
      </el-table-column>
      <el-table-column :label="$t('异常状态')" align="center">
        <template slot-scope="scope">
          <dict-tag
            :type="DICT_TYPE.ORDER_EXCEPTION_STATUS"
            :value="scope.row.orderExceptionStatus"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('异常类型')" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.moreException">{{ $t("多个异常") }}</span>
          <dict-tag
            v-else
            :type="DICT_TYPE.ORDER_ERROR_TYPE"
            :value="scope.row.orderExceptionType"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("查看") }}</el-button
          >
          <!-- <el-button size="mini" type="text" icon="el-icon-share" @click="handEdit(scope.row.orderId)">{{$t('查看')}}</el-button> -->
          <el-button
            v-if="
              scope.row.orderExceptionType == 'order_superfluous_box_exception'
            "
            v-hasPermi="['ecw:exception:superfluousBox']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_lack_box_exception'
            "
            v-hasPermi="['ecw:exception:lackBox']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'order_pay_exception'"
            v-hasPermi="['ecw:exception:pay']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'order_miss_exception'"
            v-hasPermi="['ecw:exception:miss']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType ==
              'order_superfluous_goods_exception'
            "
            v-hasPermi="['ecw:exception:superfluousGoods']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_in_water_exception'
            "
            v-hasPermi="['ecw:exception:inWater']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'order_damage_exception'"
            v-hasPermi="['ecw:exception:damaged']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_heavy_cargo_exception'
            "
            v-hasPermi="['ecw:exception:heavyCargo']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'order_doc_exception'"
            v-hasPermi="['ecw:exception:doc']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_consignor_exception'
            "
            v-hasPermi="['ecw:exception:consignor']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'order_other_exception'"
            v-hasPermi="['ecw:exception:other']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'order_cod_exception'"
            v-hasPermi="['ecw:exception:cod']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <!--未报价异常 lanbm 2024-05-28 添加注释 -->
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_no_quote_exception'
            "
            v-hasPermi="['ecw:exception:noQuote']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <!--泡货异常-->
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_bulky_cargo_exception'
            "
            v-hasPermi="['ecw:exception:bulkyCargo']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'order_pick_up_exception'
            "
            v-hasPermi="['ecw:exception:pickUp']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'not_customer_service_exception'
            "
            v-hasPermi="['ecw:exception:notCustomer']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'goods_add_exception'"
            v-hasPermi="['ecw:exception:goodsAddException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <!--费用异常-->
          <el-button
            v-else-if="scope.row.orderExceptionType == 'fee_exception'"
            v-hasPermi="['ecw:exception:feeException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <!-- 2.0 -->
          <el-button
            v-else-if="scope.row.orderExceptionType == 'line_loop_exception'"
            v-hasPermi="['ecw:exception:lineLoopException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'customs_fee_not_quote_exception'
            "
            v-hasPermi="['ecw:exception:notQuoteException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'overweight_exception'"
            v-hasPermi="['ecw:exception:overweightException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'not_shipping_channel_exception'
            "
            v-hasPermi="['ecw:exception:notChannelException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'goods_weight_exception'"
            v-hasPermi="['ecw:exception:goodsWeightException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType == 'in_warehousing_diff_exception'
            "
            v-hasPermi="['ecw:exception:inWarehousingException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'stock_up_exception'"
            v-hasPermi="['ecw:exception:stockUpException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="scope.row.orderExceptionType == 'channel_exception'"
            v-hasPermi="['ecw:exception:channelException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <el-button
            v-else-if="
              scope.row.orderExceptionType ==
              'channel_packaging_overweight_exception'
            "
            v-hasPermi="['ecw:exception:channelPackagingException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
          <!-- 2.0.2 -->
          <!--路线重量超限异常 lanbm 2024-05-28 添加注释-->
          <el-button
            v-else-if="scope.row.orderExceptionType == 'line_weight_exception'"
            v-hasPermi="['ecw:exception:lineWeightException']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handEdit(scope.row.orderId)"
            >{{ $t("处理") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getOrderExceptionPage,
  exportExcel,
  getStatistics,
} from "@/api/ecw/orderException";
import { getTradeCityList } from "@/api/ecw/region";
import { DICT_TYPE } from "@/utils/dict";
// import { userList } from "@/api/system/user"
import { listServiceUser, userList } from "@/api/system/user";
import CustomerSelector from "@/components/CustomerSelector";
import ProductSelector from "@/components/ProductSelector";
import { getWarehouseList } from "@/api/ecw/warehouse";
import Template from "@/views/cms/template/index.vue";
import { getChannelList } from "@/api/ecw/channel";
import Selector from "@/components/Selector";
import {getRegionList} from "@/api/ecw/order";
import { getProductAttrList } from "@/api/ecw/productAttr";
export default {
  name: "EcwOrderException",
  components: {
    Template,
    CustomerSelector,
    ProductSelector,
    Selector,
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 订单异常列表
      list: [],
      dateRangeCreateTime: [],
      creatorData: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        orderNoKey: "in",
        marksKey: "in",
        goodsNameKey: "in",
      },
      tradeCityList: [],
      warehouseList: [],
      totalData: {},
      followUpList: [],
      productAttrList: [],
      channelList: [], // 出货取到
      AddressProvince: [],
      AddressCity: [],
      AddressTown: [],
      destCountryId: null,
      objectiveId: null,
      destWarehouseId: null,
    };
  },
  activated() {
    this.getList();
  },
  async created() {
    this.getList();
    this.channelList = (await getChannelList()).data;
    getTradeCityList().then((res) => (this.tradeCityList = res.data));
    listServiceUser().then((r) => {
      this.creatorData = r.data;
    });
    userList("documentary customer service").then((r) => {
      this.followUpList = r.data;
    });
    getWarehouseList().then((res) => (this.warehouseList = res.data));
    // userList('salesman').then(res =>this.creatorData = res.data)
    getProductAttrList().then((res) => (this.productAttrList = res.data));
    this.getAddressProvince()
    this.getAddressCity()
    this.getAddressTown()
  },
  watch:{
    destCountryId: {
      //监听当前地区值的变化，于与上方地区值进行了双向绑定
      deep: true, //深度监听
      handler() {
        //每当值省份值改变时其下地区值进行清空
        this.AddressCity = [];
        this.AddressTown = [];
        this.objectiveId = "";
        this.destWarehouseId = "";
        this.findByprovinceCode();
        if (this.destCountryId == "") {
          this.getAddressCity()
          this.getAddressTown()
        } else if (
          this.destCountryId != "" &&
          this.objectiveId == "" &&
          this.destWarehouseId == ""
        ) {
          this.getAddressTown()
        }
      },
    },
    objectiveId: {
      deep: true, //深度监听
      handler() {
        this.AddressTown = [];
        this.destWarehouseId = "";
        this.findBycityCode();

        if (
          this.objectiveId != "" &&
          this.destCountryId != "" &&
          this.destWarehouseId == ""
        ) {
          //获取当前城市值id，获取该城市下区域
        } else if (
          this.destCountryId == "" &&
          this.objectiveId == "" &&
          this.destWarehouseId == ""
        ) {
          this.getAddressTown()
        } else if (
          this.destCountryId != "" &&
          this.objectiveId == "" &&
          this.destWarehouseId == ""
        ) {
          this.findByprovinceCode();
          this.getAddressTown()
        }
      },
    },
    destWarehouseId: {
      deep: true, //深度监听
      handler() {
        if (
          this.objectiveId != "" &&
          this.destCountryId != "" &&
          this.destWarehouseId == ""
        ) {
          //获取当前城市值id，获取该城市下区域
          this.findBycityCode();
        } else if (
          this.destCountryId != "" &&
          this.objectiveId == "" &&
          this.destWarehouseId == ""
        ) {
          this.getAddressTown()
        }
      },
    },
  },
  computed: {
    expoerCityList() {
      return this.tradeCityList.filter((item) => item.type == 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1);
    },
    exportWarehouseList() {
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(
        (item) => item.tradeType == 2 || item.tradeType == 3
      );
    },
    importWarehouseList() {
      return this.warehouseList.filter(
        (item) => item.tradeType == 1 || item.tradeType == 3
      );
    },
  },

  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.list = [];
      // 处理查询参数
      let params = { ...this.queryParams };
      if (params.packageTypeArr && params.packageTypeArr.length) {
        params.packageType = params.packageTypeArr.join(",");
        delete params.packageTypeArr;
      }
      //目的国
      if (this.destCountryId != null && this.destCountryId != "") {
        params.destCountryIds = this.destCountryId;
      }
      //目的城市
      if (this.objectiveId != null && this.objectiveId != "") {
        params.objectiveIds = this.objectiveId;
      }
      //目的仓
      if (this.destWarehouseId != null && this.destWarehouseId != "") {
        params.destWarehouseIds = this.destWarehouseId;
      }
      // 执行查询
      getOrderExceptionPage(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
        // this.reset()
      });
      getStatistics(params).then((res) => (this.totalData = res.data));
    },
    /** 表单重置 */
    reset() {
      this.queryParams = {
        page: 1,
        rows: 10,
        orderNoKey: "in",
        marksKey: "in",
        goodsNameKey: "in",
      };
      this.destCountryId = null
      this.destWarehouseId = null
      this.objectiveId = null
      this.queryParams.isHaveCustomer = null
      this.queryParams.channelIds = null
      this.queryParams.goodsTypes = null
      this.$nextTick(_ => {
        this.$forceUpdate()
      })
      this.getList();
    },
    importCityName(id) {
      return this.tradeCityList.filter((item) => item.id == id);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log(this.queryParams);
      this.queryParams.page = 1;
      this.getList();
    },
    handEdit(id) {
      //处理异常页面 lanbm 2024-05-28 添加注释
      //id 是订单ID
      this.$router.push({
        path: "./pending?id=" + id,
      });
    },
    specialNeedTag(value) {
      var tag = "";
      if (!value) {
        return;
      }
      if (value.indexOf("1") != -1 || value.indexOf("2") != -1) {
        tag += this.$t("(木)");
      }
      if (value.indexOf("3") != -1) {
        tag += this.$t("(箱)");
      }
      if (value.indexOf("4") != -1) {
        tag += this.$t("(袋)");
      }
      if (value.indexOf("5") != -1) {
        tag += this.$t("(纸)");
      }
      if (value.indexOf("6") != -1) {
        tag += this.$t("(垫)");
      }
      if (value.indexOf("7") != -1) {
        tag += this.$t("(空)");
      }
      return tag;
    },
    exportSearch() {
      exportExcel(this.queryParams).then((res) => {
        this.$message.success(
          this.$t("已加入导出队列，请稍后在下载日志中下载")
        );
      });
    },
    specialRendering(val) {
      console.log("val", val);
      if (val !== undefined) {
        let i = val.split(",");
        return this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS)
          .filter((e) => {
            return i.indexOf(e.value) > -1;
          })
          .map((item) => {
            // 打字开头的用最后一个字，否则取第一个字
            item.symbol =
              item.label[0] == "打"
                ? item.label[item.label.length - 1]
                : item.label[0];
            return item;
          });
      }
    },
    getAddressProvince() {
      getRegionList(1, 1).then(({ data }) => {
        this.AddressProvince = data;
      })
    },
    getAddressCity() {
      getRegionList(4, 4).then(({ data }) => {
        this.AddressCity = data;
      })
    },
    getAddressTown() {
      getRegionList(5, 5).then(({ data }) => {
        this.AddressTown = data;
      })
    },
    findByprovinceCode() {
      if (this.destCountryId != null && this.destCountryId != '') {
        //获取当前省份值id，获取该省份下城市 destCountryId provinceCode
        getRegionList(2, this.destCountryId).then(({ data }) => {
          this.AddressCity = data;
        })
      }
    },
    findBycityCode() {
      if (this.objectiveId != null && this.objectiveId != '') {
        //获取当前城市值id，获取该城市下区域
        getRegionList(3, this.objectiveId).then(({ data }) => {
          this.AddressTown = data;
        })
      }
    },
    // 去掉唛头首尾空格
    trimMarks(){
      this.queryParams.marks = this.queryParams.marks.trim()
    },
    // 自动去除空格
    replaceSpace(obj, field){
      obj[field] = obj[field].replace(/\s+/g, '');
    }
  },
};
</script>
<style scoped>
.top-right-btn{
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  right: 0;
}
::v-deep .top-right-btn .el-row .el-button{
  font-size: 18px;
}
::v-deep .top-right-btn .el-row{
  position: fixed;
  right: 20px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.total {
  display: flex;
  align-items: center;
}
.total div {
  margin-right: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.red {
  color: #ff4949;
}
</style>