<template>
  <div class="content-height">
    <div class="myorder-content">
      <leftMenu></leftMenu>
      <div class="content-right">
        <div class="content-top">
          <topCrumbs
            :firstCrumbs="firstCrumbs"
            :secondCrumbs="secondCrumbs"
          ></topCrumbs>

          <div class="mt10 border-b">
            <div class="item-collection">120天内订单</div>
          </div>

          <div>
            <div class="container-o-box default">
              <div class="com-block m-bottom10">
                <div class="content search-tab p10 p-top5">
                  <table>
                    <tbody>
                      <!-- 平台渠道 -->
                      <tr>
                        <td class="p-right0 gray-c">平台渠道：</td>
                        <td>
                          <a
                            v-for="item in agentCodeList"
                            :key="item.name"
                            :class="
                              listParams.agentCode == item.id
                                ? 'myj-aFocus myj-active'
                                : 'myj-aFocus'
                            "
                            @click="searchActive(item.id, 1)"
                            >{{ item.name }}</a
                          >
                        </td>
                      </tr>
                      <!-- 店铺账号： -->
                      <tr>
                        <td class="p-right0 gray-c">店铺账号：</td>
                        <td :class="showAllShops? 'account-list': 'account-list-all'">
                          <a
                            v-for="item in dataAccount"
                            :key="item.name"
                            :class="
                              listParams.authCode == item.id
                                ? 'myj-aFocus myj-active'
                                : 'myj-aFocus'
                            "
                            @click="searchActive(item.id, 2)"
                            >{{ item.name }}</a
                          >
                        </td>
                        <td>
                          <el-input
                              @input="searchShop"
                              size="small"
                              class="w150 shop-search"
                              clearable
                              placeholder="店铺搜索"
                              suffix-icon="el-icon-search"
                              v-model="searchShopName">
                          </el-input>
                          <el-button class="more-btn" @click="showMoreShops">{{showAllShops?'更 多': '收 起'}}<i :class="showAllShops? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></el-button>
                        </td>
                      </tr>
                      <!-- 国家区域： -->
                      <tr>
                        <td class="p-right0 gray-c">国家区域：</td>
                        <td>
                          <div v-if="showCheckResult" class="choosed-country">
                            <span
                              class="choose-country-list"
                              v-for="(item, index) in checkList"
                              :key="index"
                              >{{ item.name
                              }}{{
                                index == checkList.length - 1 ? "" : "、"
                              }}</span
                            >
                            <span
                              class="r pr10 icon-color poi"
                              @click="clearCheckCountry"
                              >清除多选 X</span
                            >
                          </div>
                          <!-- <div> -->
                          <a
                            v-for="item in dataCountry"
                            :key="item.name"
                            :class="
                              activeCountry == item.value
                                ? 'myj-aFocus myj-active'
                                : 'myj-aFocus'
                            "
                            @click="searchActive(item.value, 3)"
                            v-if="!isShow && !checkBoxShow && !showCheckResult"
                            >{{ item.name }}
                          </a>
                          <!-- </div> -->
                          <div
                            :class="
                              checkBoxShow
                                ? 'country-choose country-choose-checkbox'
                                : 'country-choose '
                            "
                            v-if="isShow || (checkBoxShow && !showCheckResult)"
                          >
                            <div class="tit">
                              <a
                                v-for="item in dataContinent"
                                :key="item.name"
                                :class="
                                  activeContinent == item.id
                                    ? 'myj-aFocus myj-active country-tabs'
                                    : 'myj-aFocus country-tabs'
                                "
                                @click="checkCountryArea(item.id)"
                                >{{ item.name }}</a
                              >
                              <el-input
                                clearable
                                suffix-icon="el-icon-search"
                                v-model="countryVal"
                                size="mini"
                                style="width: 200px"
                                @input="searchCountryClick"
                              />
                            </div>
                            <div class="content">
                              <div v-if="!checkBoxShow">
                                <span
                                  class="specific-country"
                                  v-for="(item, index) in specificCountry"
                                  :key="index"
                                  @click="checkCurrentCountry(item)"
                                  >{{ item.name }}
                                </span>
                              </div>
                              <el-checkbox-group v-model="checkList" v-else>
                                <el-checkbox :indeterminate="checkAllCountry1" v-model="checkAllCountry2" @change="handleCheckAllCountry">全选</el-checkbox>
                                <el-checkbox
                                  @change="handleCheckedAllCountryChange"
                                  v-for="(item, index) in specificCountry"
                                  :key="index"
                                  :label="item"
                                >
                                  {{ item.name }}
                                </el-checkbox>
                              </el-checkbox-group>
                            </div>
                            <div class="p10 dis-flex" v-if="checkBoxShow">
                              <div style="width: 80px">已选国家：</div>
                              <el-checkbox-group v-model="checkList">
                                <el-checkbox
                                  @change="handleCheckedAllCountryChange"
                                  v-for="(item, index) in checkList"
                                  :key="index"
                                  :label="item"
                                >
                                  {{ item.name }}
                                </el-checkbox>
                              </el-checkbox-group>
                            </div>
                            <div v-if="checkBoxShow" class="tc p10">
                              <button
                                class="btn btn-primary"
                                type="button"
                                @click="sureCheckBoxClick"
                              >
                                确 认
                              </button>
                              <button
                                class="btn"
                                type="button"
                                @click="checkBoxShow = false"
                              >
                                取消
                              </button>
                            </div>
                          </div>
                          <span
                            class="show-more"
                            @click="checkBoxShow = true"
                            v-if="!isShow"
                            >多选<i class="el-icon-plus"
                          /></span>
                          <span
                            class="show-more"
                            @click="isShow = true"
                            v-if="!isShow && !checkBoxShow"
                            >更多<i class="el-icon-arrow-down"
                          /></span>
                          <span
                            class="show-more"
                            @click="isShow = false"
                            v-if="isShow && !checkBoxShow"
                            >收起<i class="el-icon-arrow-up"
                          /></span>
                        </td>
                      </tr>
                      <!-- 绑定系统产品 -->
                      <tr class="top-line showSearce">
                        <td class="p-right0 f-right gray-c white-space: nowrap">
                          绑定系统产品：
                        </td>
                        <td class="crawl-date">
                          <el-checkbox
                            v-model="checkAllisBind"
                            @change="(val)=>searchActive(val,4)"
                            style="margin-right: 25px"
                            >全选</el-checkbox
                          >
                          <el-checkbox-group
                            style="display: inline-block"
                            v-model="checkIsBindList"
                            @change="(val)=>searchActive(val,5)"
                          >
                            <el-checkbox
                              v-for="item in checkData"
                              :label="item.id"
                              :key="item"
                              >{{ item.name }}</el-checkbox
                            >
                          </el-checkbox-group>
                        </td>
                      </tr>
                      <!-- 排序类型： -->
                      <tr>
                        <td class="p-right0 gray-c border-dashed-top1">
                          排序类型：
                        </td>
                        <td class="crawl-date border-dashed-top1">
                          <a
                            v-for="item in dataTime"
                            :key="item.name"
                            :class="
                              listParams.sort == item.id
                                ? 'myj-aFocus myj-active'
                                : 'myj-aFocus'
                            "
                            @click="searchActive(item.id, 6)"
                            >{{ item.name }}
                            <i
                              class="fa fa-sort-desc ml5"
                              v-if="
                                item.id == listParams.sort && !listParams.isAsc
                              " />
                            <i
                              class="fa fa-sort-up tp24 ml5"
                              v-if="
                                item.id == listParams.sort && listParams.isAsc
                              "
                          /></a>
                        </td>
                      </tr>
                      <!-- 搜索类型： -->
                      <tr>
                        <td class="p-right0 gray-c border-dashed-top1">
                          搜索类型：
                        </td>
                        <td class="border-dashed-top1">
                          <a
                            v-for="item in dataKind"
                            :key="item.name"
                            :class="
                              listParams.searchType == item.id
                                ? 'myj-aFocus myj-active'
                                : 'myj-aFocus'
                            "
                            @click="searchActive(item.id, 7)"
                            >{{ item.name }}</a
                          >
                        </td>
                      </tr>
                      <!-- 搜索内容： -->
                      <tr>
                        <td class="p-right0 gray-c">搜索内容：</td>
                        <td class="tab-separate search-value">
                          <div class="productSearchGroup">
                            <input
                              class="form-control"
                              type="text"
                              style="width: 460px"
                              v-model="listParams.searchMsg"
                            />
                            <button
                              class="btn btn-primary"
                              style="width: 52px"
                              @click="searchInputClick"
                            >
                              搜索
                            </button>
                            <span
                              class="f-blue poi"
                              @click="advancedSearch = !advancedSearch"
                              >高级搜索</span
                            >
                          </div>
                          <div
                            class="search-group-senior"
                            v-if="advancedSearch"
                          >
                            <table class="productListAdvancedSearch">
                              <tbody>
                                <tr>
                                  <td>订单金额：</td>
                                  <td>
                                    <input
                                      class="form-control2"
                                      type="number"
                                      v-model="listParams.orderTotalStart"
                                      @input="
                                        checkNum(
                                          listParams.orderTotalStart,
                                          'orderTotalStart'
                                        )
                                      "
                                    />
                                    -
                                    <input
                                      class="form-control2"
                                      type="number"
                                      v-model="listParams.orderTotalEnd"
                                      @input="
                                        checkNum(
                                          listParams.orderTotalEnd,
                                          'orderTotalEnd'
                                        )
                                      "
                                    />
                                  </td>
                                </tr>
                                <tr>
                                  <td>下单时间：</td>
                                  <td>
                                    <el-date-picker
                                      @change="changePlatformOrderDate"
                                      size="mini"
                                      v-model="listParams.platformOrderTime"
                                      value-format="yyyy-MM-dd HH:mm:ss"
                                      type="daterange"
                                      range-separator="至"
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                    >
                                    </el-date-picker>
                                  </td>
                                </tr>
                                <tr>
                                  <td>付款时间：</td>
                                  <td>
                                    <el-date-picker
                                      @change="changeTransactionDate"
                                      size="mini"
                                      v-model="listParams.transactionTime"
                                      value-format="yyyy-MM-dd HH:mm:ss"
                                      type="daterange"
                                      range-separator="至"
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                    >
                                    </el-date-picker>
                                  </td>
                                </tr>
                                <tr>
                                  <td>发货时间：</td>
                                  <td>
                                    <el-date-picker
                                      @change="changeShippingDate"
                                      size="mini"
                                      v-model="listParams.shippingTime"
                                      value-format="yyyy-MM-dd HH:mm:ss"
                                      type="daterange"
                                      range-separator="至"
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                    >
                                    </el-date-picker>
                                  </td>
                                </tr>
                                <tr>
                                  <td>剩余发货：</td>
                                  <td class="crawl-date border-dashed-top1">
                                    <a
                                      v-for="item in dataDate"
                                      :key="item.name"
                                      :class="
                                        listParams.collectTime == item.id
                                          ? 'myj-aFocus myj-active'
                                          : 'myj-aFocus'
                                      "
                                      @click="searchActive(item.id, 8)"
                                      >{{ item.name }}</a
                                    >
                                  </td>
                                </tr>
                                <tr>
                                  <td>物流方式：</td>
                                  <td class="crawl-date border-dashed-top1">
                                    <el-select
                                      v-model="listParams.trackingProvider"
                                      placeholder="---- 请选择 ----"
                                      size="mini"
                                      class="w200"
                                      @change="reasonChange"
                                    >
                                      <el-option
                                        :label="item.trackingProvider"
                                        :value="item.trackingProvider"
                                        v-for="(
                                          item, index
                                        ) in logisticTypeOptions"
                                        :key="index"
                                      ></el-option>
                                    </el-select>
                                  </td>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td style="text-align: right">
                                    <span
                                      class="f-blue poi"
                                      @click="iscancelClick"
                                      >取消</span
                                    >
                                    <span
                                      class="ml10 f-blue poi"
                                      @click="resetClick"
                                      >重置</span
                                    >
                                    <button
                                      class="button btn-determine ml10"
                                      @click="searchAdvanced"
                                    >
                                      搜索
                                    </button>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <br />
            <div
              class="content-button"
            >
              <el-dropdown @command="handleClickBatch">
                <el-button type="primary">
                  同步订单<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">同步勾选订单</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="pull-right">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="listParams.currentPage"
                :page-sizes="[30, 50, 100, 300]"
                :page-size="listParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="listParams.total"
                style="float: right; display: inline-block"
              ></el-pagination>
            </div>
            <div style="clear: both">
              <div
                v-if="listParams.isRefund == 1"
                :class="
                  listParams.isVirtualDelivery === item.id
                    ? 'item-collection'
                    : 'item-collection-white'
                "
                v-for="item in dataTabList"
                :key="item.name"
                @click="chooseTabs(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="tab-content border5 m-bottom10">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column align="center" type="selection" width="30">
                </el-table-column>
                <!-- <el-table-column
											align="center"
											prop="authCode"
											label="ID"
										>
										</el-table-column> -->
                <el-table-column label="商品信息" width="220" align="center">
                  <template slot-scope="scope">
                    <div class="table-content">
                      <div>
                        <el-popover
                          placement="top"
                          trigger="click"
                          v-if="scope.row.isBindSku"
                          width="500"
                          @show="getBindInfo(scope.row.id)"
                        >
                          <el-table :data="gridData">
                            <el-table-column
                              label="图片"
                              align="center"
                              width="80px"
                            >
                              <template slot-scope="_scope">
                                <img
                                  :src="_scope.row.unitImageUrl"
                                  width="50px"
                                />
                              </template>
                            </el-table-column>
                            <el-table-column
                              property="skuName"
                              label="系统SKU名"
                              align="center"
                            ></el-table-column>
                            <el-table-column
                              property="skuCode"
                              label="系统SKU编码"
                              width="100px"
                              align="center"
                            ></el-table-column>
                          </el-table>
                          <div
                            slot="reference"
                            class="pointer"
                            style="background: green; color: white"
                          >
                            已绑定
                          </div>
                        </el-popover>
                        <div v-else style="background: red; color: white">
                          未绑定
                        </div>


                        <img :src="scope.row.ecOrderInfoSkuRespDTOList.length >0 ? scope.row.ecOrderInfoSkuRespDTOList[0].skuImageDetail:''" class="imgCss" />

                        <div class="f12">{{ scope.row.authCode }}</div>
                        <div class="g19 f12" v-if="scope.row.orderRemark">
                          备注：{{ scope.row.orderRemark }}
                        </div>
                      </div>
                      <div class="table-content-right">
                        <div class="icon-color">
                          <el-tooltip
                            effect="light"
                            :content="scope.row.ecOrderInfoSkuRespDTOList.length >0 ?scope.row.ecOrderInfoSkuRespDTOList[0].platformSku:''"
                            placement="top"
                          >
                            <a
                              class="el-dropdown-link break-two"
                              :href="scope.row.ecOrderInfoSkuRespDTOList.length >0 ?scope.row.ecOrderInfoSkuRespDTOList[0].productOnlineUrl:''"
                              target="_blank"
                              style="width: 150px"
                              >{{ scope.row.ecOrderInfoSkuRespDTOList.length >0 ?scope.row.ecOrderInfoSkuRespDTOList[0].platformSku:'' }}</a
                            >
                          </el-tooltip>
                        </div>
                        <div>
                          x
                          <span class="sku-number">{{
                              scope.row.ecOrderInfoSkuRespDTOList.length >0 ?scope.row.ecOrderInfoSkuRespDTOList[0].quantity:''
                          }}</span>
                        </div>
<!--                        <div>-->
<!--                          {{ scope.row.actualCurrency }}: {{ scope.row.price }}-->
<!--                        </div>-->
                        <div>
                          <el-popover placement="bottom" trigger="click"
                                      @show="getChildSkus(scope.row.ecOrderInfoSkuRespDTOList)">
                            <div slot="reference" class="g19 poi">展开</div>
                            <div>
                              <el-table
                                  :data="tableDataGroup"
                                  style="width: 100%;margin-top:10px"
                              >
                                <el-table-column
                                    align="center"
                                    width="100px"
                                    label="图片"
                                >
                                  <template slot-scope="scope">
                                    <img width="30px" height="30px"
                                         :src="scope.row.skuImageDetail"
                                         class="imgCss"/>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="platformSku" align="center"
                                                 label="平台产品名"
                                                 width="160px">
                                  <template slot-scope="scope">
                                    <div>{{scope.row.platformSku}}</div>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="platformSku" align="center"
                                                 label="数量"
                                                 width="100px">
                                  <template slot-scope="scope">
                                    <div class="product-count-tag f-blue ">{{scope.row.quantity}}</div>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </div>
                          </el-popover>
                        </div>
                      </div>

                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="
                    listParams.isVirtualDelivery
                      ? '订单金额「运费」'
                      : '订单金额'
                  "
                  width="110"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.actualCurrency }} {{ scope.row.orderAmount }}
                    </div>
                    <div v-if="listParams.isVirtualDelivery">
                      「{{ scope.row.actualCurrency }}
                      {{ scope.row.packageFreight }}」
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="name"
                  label="收件人「国家」"
                >
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.buyerName }}
                      {{ `「${scope.row.buyerCountry}」` }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="
                    listParams.isRefund == 1
                      ? '平台订单号/退款原因'
                      : '平台订单号'
                  "
                  align="center"
                  width="180"
                >
                  <template slot-scope="scope">
                      <div>
                        <a class="el-icon-document-copy" @click="copyUrl(scope.row.platformOrderId)"></a>
                        <a class="icon-color" @click="detailClick(scope.row.id, scope.row.status)">{{ scope.row.platformOrderId }}</a>
                      </div>
                    <div
                      class="squareSpan"
                      v-if="scope.row.requiresDeliveryConfirmation && scope.row.agentCode !='lazada'"
                    >
                      妥
                    </div>
                    <div class="squareSpan" v-if="scope.row.effectivenessStatus =='GLOBAL_COLLECTION'">
                      GC
                    </div>
                    <div>{{ scope.row.refundReason }}</div>
                  </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                  v-if="listParams.isVirtualDelivery !== 0"-->
<!--                  align="center"-->
<!--                  label="物流方式"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <div>{{ scope.row.trackingProvider }}</div>-->
<!--                    <el-popover-->
<!--                      placement="top-start"-->
<!--                      trigger="hover"-->
<!--                      width="50"-->
<!--                    >-->
<!--                      <el-button-->
<!--                        type="primary"-->
<!--                        size="mini"-->
<!--                        @click="copyUrl(scope.row.trackingNumber)"-->
<!--                        >复制</el-button-->
<!--                      >-->
<!--                      <div slot="reference" class="icon-color">-->
<!--                        {{ scope.row.trackingNumber }}-->
<!--                      </div>-->
<!--                    </el-popover>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column label="时间" align="center" width="185">
                  <template slot-scope="scope">
                    <div>下单：{{ scope.row.platformOrderDate }}</div>
                    <div>付款：{{scope.row.agentCode == 'lazada'?scope.row.platformOrderDate: scope.row.transactionDate }}</div>
<!--                    <div v-if="scope.row.isVirtualDelivery">-->
<!--                      提交：{{ scope.row.commitDate }}-->
<!--                    </div>-->
                    <div>到期时间: {{scope.row.fulfilDueDate}}</div>
                    <div
                      v-if="scope.row.status != 3 && scope.row.isVirtualDelivery ==0"
                      :class="scope.row.isVirtualDelivery ? '' : 'f-red'"
                    >
<!--                      {{-->
<!--                        scope.row.isVirtualDelivery ? "发货" : "剩余发货"-->
<!--                      }}-->
                      剩余发货：{{ scope.row.remainingDeliveryTime }}
                    </div>
                    <div v-if="scope.row.refundDate">
                      退款：{{ scope.row.refundDate }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="buyerChooseLogistics"
                  label="买家指定"
                  align="center"
                  width="80"
                >
                </el-table-column>
                <!-- <el-table-column
											prop="authCode"
											label="平台店铺"
											align="center"
											width="90"
										>
										</el-table-column> -->
                  <el-table-column
                    label="状态"
                    align="left"
                    width="150"
                    >
                  <template slot-scope="scope">
                     <div>
                        <p ><label >退款状态：</label><label style="margin-left: 5px;">{{scope.row.payStatusStr?scope.row.payStatusStr:'-'}}</label></p>
                        <p ><label >物流状态：</label><label style="margin-left: 5px;">{{scope.row.logisticsStatusStr?scope.row.logisticsStatusStr:'-'}}</label></p>
                     </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="80">
                  <template slot-scope="scope">
                    <div
                      class="el-dropdown-link"
                      @click="syncPClick(scope.row.platformOrderId,scope.row.agentCode,scope.row.authCode)"
                    >
                      同步订单
                    </div>
                    <!-- <div
                      class="el-dropdown-link"
                      @click="gotoBinding(scope.row.sku, scope.row.id)"
                    >
                      产品绑定
                    </div>
                    <div
                      class="el-dropdown-link"
                      @click="remarkClick(scope.row.id)"
                      v-if="!listParams.isRefund && $_has('edit')"
                    >
                      备注
                    </div> -->
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="pull-right">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="listParams.currentPage"
                :page-sizes="[30, 50, 100, 300]"
                :page-size="listParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="listParams.total"
                style="float: right; display: inline-block"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="备注"
      :visible.sync="dialogVisibleRemark"
      width="40%"
      @close="dialogVisibleRemark = false"
    >
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入备注内容"
        v-model="textareaRemark"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarkSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 订单详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisibleOrderDetail"
      width="65%"
      @close="dialogVisibleOrderDetail = false"
    >
      <div>
        <div class="detail-flex g0">
          <span>订单号：{{ orderDetail.platformOrderId }}</span>
          <span>卖家：{{ orderDetail.authCode }}</span>
          <span>站点：{{ orderDetail.agentCode }}</span>
          <span>包裹总额：{{ orderDetail.orderAmount }}</span>
        </div>
        <div class="logistic-detail mt10">
          <div class="logistic-title g0">收货地址</div>
          <div class="mt20 mb20 f12">
            <el-form :inline="true" class="demo-form-inline" label-width="80px">
              <el-form-item label="收件人：" class="pct33 ova">
                {{ orderDetail.buyerName }}
              </el-form-item>
              <el-form-item label="电话：" class="pct33">
                {{ orderDetail.buyerPhone }}
              </el-form-item>
              <el-form-item label="手机：" class="pct25">
                {{ orderDetail.buyerMobile }}
              </el-form-item>
              <el-form-item label="国家/地区：" class="pct33">
                {{ orderDetail.buyerCountry }}
              </el-form-item>
              <el-form-item label="省/州：" class="pct33">
                {{ orderDetail.buyerPs }}
              </el-form-item>
              <el-form-item label="城市：" class="pct25">
                {{ orderDetail.buyerCity }}
              </el-form-item>
              <el-form-item label="地址1：" class="pct33">
                <el-tooltip
                  effect="dark"
                  :content="orderDetail.buyerAddress1"
                  placement="top"
                >
                  <span class="ell w200 dib">{{
                    orderDetail.buyerAddress1
                  }}</span>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="地址2：" class="pct33">
                <el-tooltip
                  effect="dark"
                  :content="orderDetail.buyerAddress2"
                  placement="top"
                >
                  <span class="ell w200 dib">{{
                    orderDetail.buyerAddress2
                  }}</span>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="邮编：" class="pct25">
                {{ orderDetail.buyerZipcode }}
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="logistic-detail mt10 border5">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="付		款" name="first"></el-tab-pane>
            <el-tab-pane label="商品详情" name="second"></el-tab-pane>
            <el-tab-pane label="物流信息" name="third"></el-tab-pane>
            <el-tab-pane label="退		货" name="fourth"></el-tab-pane>
            <el-tab-pane label="备		注" name="fifth"></el-tab-pane>
          </el-tabs>
          <el-table
            ref="multipleTable"
            :data="orderDetailList"
            tooltip-effect="dark"
          >
            <el-table-column
              prop="transactionDate"
              v-if="activeName == 'first'"
              label="日期"
              align="center"
            >
            <template slot-scope="scope">
              {{scope.row.transactionDate?scope.row.transactionDate: scope.row.platformOrderDate }}
            </template>
            </el-table-column>
            <el-table-column
              prop="payStatusStr"
              v-if="activeName == 'first'"
              label="状态"
              align="left"
            ></el-table-column>

            <el-table-column
              align="center"
              v-if="activeName == 'fourth'"
              prop="refundReason"
              label="退款理由"
            ></el-table-column>
            <el-table-column
              align="center"
              v-if="activeName == 'fourth'"
              prop="refundDate"
              label="时间"
            ></el-table-column>

            <el-table-column
              v-if="activeName == 'fifth'"
              align="center"
              prop="orderRemark"
              label="备注"
            ></el-table-column>

          </el-table>
          <!--商品详情-->
          <el-table
            v-if="activeName == 'second'"
            ref="multipleTable"
            :data="orderDetailSkuInfo"
            tooltip-effect="dark"
          >
            <el-table-column label="产品信息" width="220" align="center" v-if="activeName == 'second'">
              <template slot-scope="scope">
                <div class="table-content">
                  <div>
                    <img :src="scope.row.skuImageDetail" class="imgCss" />
                  </div>
                  <div class="table-content-right">
                    <div>
                      <el-tooltip
                        effect="light"
                        :content="scope.row.platformSku"
                        placement="top"
                      >
                        <span class="break-two" style="width: 150px">{{
                          scope.row.platformSku
                        }}</span>
                      </el-tooltip>
                    </div>
                    <div>
                      x <span class="sku-number">{{ scope.row.quantity }}</span>
                    </div>
                    <div>USD {{ scope.row.price }}</div>
                    <div>Color: {{ scope.row.color }}</div>
                    <div>Size: {{ scope.row.size }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="标题" align="center" v-if="activeName == 'second'">
              <template slot-scope="scope">
                <a
                  class="el-dropdown-link"
                  :href="scope.row.productOnlineUrl"
                  target="_blank"
                  style="width: 150px"
                  >{{ scope.row.skuName }}</a
                >
              </template>
            </el-table-column>
            <el-table-column prop="packageWeight" label="重量（g)" align="center" v-if="activeName == 'second'">
            </el-table-column>
            <el-table-column prop="systemSku" label="商品SKU" align="center" v-if="activeName == 'second'">
            </el-table-column>
          </el-table>
          <!-- 物流信息 -->
          <el-table
            v-if="activeName == 'third'"
            ref="multipleTable"
            :data="logisticsAllDetails"
            tooltip-effect="dark"
          >
            <el-table-column
              v-if="activeName == 'third'"
              align="center"
              label="买家指定邮寄方式"
              prop="buyerChooseLogistics"
            >
            </el-table-column>
            <el-table-column
              v-if="activeName == 'third'"
              align="center"
              prop="trackingProvider"
              label="物流方式"
            >
            </el-table-column>
            <el-table-column
              v-if="activeName == 'third'"
              align="center"
              prop="trackingNumber"
              label="跟踪号"
            >
            </el-table-column>
          </el-table>

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-tooltip
            effect="light"
            content="目前仅支持wish"
            placement="top"
        >
          <el-button
              type="primary"
              @click="refundClick"
              v-if="orderDetail.agentCode == 'wish' && $_has('refund')"
          >退 款
          </el-button>
        </el-tooltip>

        <el-button @click="cancelClick" type="info">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="退款"
      :visible.sync="dialogVisibleRefund"
      width="40%"
      @close="dialogVisibleRefund = false"
    >
      <div>
        退款原因：
        <el-select
          v-model="reasonCode"
          placeholder="-----请选择退款原因-----"
          size="small"
        >
          <el-option
            v-for="item in reasonCodeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="mt20 dis-flex">
        退款理由：
        <el-input class="pct70" type="textarea" :rows="4" v-model="reasonNote">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureRefunedClick">确认退款</el-button>
        <el-button @click="dialogVisibleRefund = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="选择店铺同步"
      :visible.sync="dialogVisibleReleased"
      width="50%"
      @close="dialogVisibleReleased = false"
    >
      <div>
        <div>
          <div class="mb10" v-if="currentType == 1">
            <span>选择时间：</span>
            <el-date-picker
              class="ml20"
              size="mini"
              v-model="customTime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <span>选择平台：</span>
          <el-select
            v-model="platformValue"
            placeholder="请选择"
            size="mini"
            class="pl20"
            style="width: 240px"
            @change="handlePlatformChange"
          >
            <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-checkbox
          v-model="checkAll"
          @change="handleCheckAllChange"
          class="pl5 pt10"
          >全选</el-checkbox
        >
        <el-input
          @input="searchShopClick"
          size="mini"
          style="width: 200px; float: right"
          placeholder="请输入店铺名称"
          suffix-icon="el-icon-search"
          v-model="shopName"
        >
        </el-input>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleShopChange"
          class="shop-list"
        >
          <el-checkbox
            v-for="shop in shopAccount"
            :label="shop.id"
            :key="shop.id"
            class="current-shop"
            >{{ shop.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chooseShopClick">确 定</el-button>
        <el-button @click="dialogVisibleReleased = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="绑定系统产品"
      :visible.sync="dialogVisibleSku"
      width="90%"
      @opened="showMatching"
      @close="dialogVisibleSku = false"
    >
      <productBindingDialog
        ref="productBindingDialogRef"
      ></productBindingDialog>
      <span slot="footer" class="tc">
        <el-button type="primary" @click="dialogVisibleSku = false" size="small"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <syncPollingTemplate
      :syncPollingVisible="syncPollingVisible"
      :batchCode="syncBatchCode"
      @closeSync="closeSync"
      ref="syncFunction"
    ></syncPollingTemplate>
  </div>
</template>
<script>
import leftMenu from "@/components/leftMenu";
import topCrumbs from "@/components/business/topCrumbs";
import productBindingDialog from "@/components/business/productBindingDialog";
import syncPollingTemplate from "@/components/business/syncPollingTemplate";
import util from "@/common/js/util";
export default {
  data() {
    return {
      firstCrumbs: "平台订单",
      secondCrumbs: "",
      agentCodeList:[],//所有的平台
      dataAccount: [{ name: "全部", id: 0 }],//店铺账户
      showAllShops: true,
      searchShopName: '',
      dataCountry: [{ name: "全部", value: 0 }],//国家列表
      activeCountry: 0,//选中单个
      chooseCountryData: [],//选中多个
      isShow: false,//正常展示国家列表
      checkBoxShow: false,//是否显示国家多选框
      showCheckResult: false,//是否展示更多
      countryList: [],//国家列表 虚拟发货用
      // 搜索类型
      dataKind: [
        { name: "订单号", id: "platformOrderId" },
        { name: "运单号", id: "trackingNumber" },
        { name: "SKU", id: "sku" },
        { name: "买家指定渠道", id: "buyerChooseLogistics" },
        { name: "店长", id: "storeManagerName" },
        { name: "收件人", id: "buyerName" },
        { name: "电话", id: "buyerPhone" },
      ],
      // 排序
      dataTime: [
        { name: "按下单时间", id: "platformOrderDate" },
        { name: "按剩余发货时间", id: "deliveryDate" },
        { name: "按付款时间", id: "transactionDate" },
        { name: "按退款时间", id: "refundDate" },
      ],

      dialogVisibleSku: false,
      productBindingDialogData: {},
      currentType: 1,

      checkAllisBind: true,
      checkIsBindList: [0, 1],
      checkData: [
        { name: "是", id: 1 },
        { name: "否", id: 0 },
      ],
      countryAllData: [], //所有大洲和国家
      dataContinent: [], //大洲
      allCountry: [], //全部国家
      activeContinent: 1631,
      specificCountry: [], //选中大洲后的国家
      dataDate: [
        { name: "全部", id: "all" },
        { name: "到期", id: "expire" },
        { name: "1天内", id: "aDayAgo" },
        { name: "2天内", id: "twoDaysAgo" },
        { name: "3天内", id: "threeDaysAgo" },
        { name: "5天内", id: "fiveDaysAgo" },
        { name: "大于5天", id: "moreThanFiveDays" },
      ],
      listParams: {
        currentPage: 1,
        pageSize: 50,
        total: 0,
        agentCode: 0,
        authCode: 0,
        sort: "platformOrderDate",
        isAsc: false,
        searchType: "platformOrderId",
        searchMsg: "",
        isVirtualDelivery: "",
        isRefund: "",
        buyerCountry: [],
        collectTime: "all",
        transactionDateStart: "",
        transactionDateEnd: "",
        platformOrderDateStart: "",
        platformOrderDateEnd: "",
        fulfilDueDateStart: "",
        fulfilDueDateEnd: "",
        shippingDateStart: "",
        shippingDateEnd: "",
        orderTotalStart: "",
        orderTotalEnd: "",
        trackingProvider: "",
        isBindSku: "",
        payStatusList:[],
      },

      tableData: [],
      value1: "",
      textareaRemark: "",
      checkList: [],
      advancedSearch: false,
      customTime: "",
      countryVal: "",
      dialogVisibleRemark: false,
      dataTabList: [
        { name: "全部", number: 0, id: "" },
        { name: "已发货退款", number: 0, id: 1 },
        { name: "未发货退款", number: 0, id: 0 },
      ],
      id: "",
      orderDetail: "",
      logisticsAllDetails:[],
      orderDetailSkuInfo:[],
      orderDetailList:[],
      dialogVisibleDetail: false,
      activeTab: 1,
      radioVal: "1",
      isEdit: true,
      logisticValue: "请点右上角「编辑」选择物流方式",
      logisticTypeOptions: [],
      logisticType: "",
      logisticCountryOptions: [],
      logisticCountry: "",
      dialogVisibleRefund: false,
      reasonCodeOptions: [
        {
          value: "1",
          label: "商店无法完成订单，无法发货",
        },
        {
          value: "25",
          label: "物品损坏",
        },
        {
          value: "32",
          label: "项目已返回给发件人 ",
        },
        {
          value: "-1",
          label: "其它 ",
        },
      ],
      reasonCode: "",
      reasonNote: "",
      dialogVisibleReleased: false,
      shopName: "",
      checkAll: false,
      allShop: [],
      allShopList: [],
      shopAccount: [],
      checkedCities: [],
      platformOptions:[],
      tableDataGroup:[],
      // platformOptions: [
      //   {
      //     value: "",
      //     label: "请选择",
      //   },
      //   {
      //     value: "wish",
      //     label: "wish",
      //   },
      //   {
      //     value: 'lazada',
      //     label: 'lazada'
      //   }
      // ],
      platformValue: "wish",
      syncPollingVisible: false,
      syncBatchCode: "",
      activeName: "second",
      dialogVisibleOrderDetail: false,
      checkAllCountry1: false,
      checkAllCountry2: false,
      gridData: [],
      platformOrderIds: [],
      pickerOptions: {
        disabledDate: (time) => {
          return this.dealDisabledDate(time);
        },
      },
    };
  },
  components: {
    leftMenu,
    topCrumbs,
    syncPollingTemplate,
    productBindingDialog,
  },
  methods: {
    //根据路由选择侧边栏类型
    leftActive(path) {
      switch (path) {
        case "/order/orderList":
          this.secondCrumbs = "全部订单";
          this.listParams.isVirtualDelivery = null;
          this.listParams.payStatus = null;
          break;
        case "/order/waitSend":
          this.secondCrumbs = "待虚拟发货";
          this.listParams.isVirtualDelivery = 0;
          this.listParams.payStatusList = null;
          break;
        case "/order/successSend":
          this.secondCrumbs = "发货成功";
          this.listParams.isVirtualDelivery = 1;
          this.listParams.payStatusList = null;
          break;
        case "/order/failSend":
          this.secondCrumbs = "发货失败";
          this.listParams.isVirtualDelivery = 2;
          this.listParams.payStatusList = null;
          break;
        case "/order/refunded":
          this.secondCrumbs = "已退款";
          this.listParams.isVirtualDelivery = null;
          this.listParams.payStatusList = [210,220];

          break;
        default:
          break;
      }
      this.getOrderList();
    },
    //查询国家列表  虚拟发货用  已废弃
    getCountryList() {
      this.axios({
        url: "assistant/dictionary/countryList",
        data: {},
        method: "get",
      }).then((res) => {
        if (res.success) {
          this.countryList = res.module;
        }
      });
    },
    //获取国家列表信息-用于搜索
    getCountry() {
      this.axios({
        url: "assistant/info/get/selectCountryInfo",
        data: {},
        method: "post",
      }).then((res) => {
        if (res.success) {
          res.module.map((item) => {
            this.dataContinent.push({ name: item.name, id: item.id });
            if (item.id == this.activeContinent) {
              this.specificCountry = item.children;
            }
            if (item.id == 1632) {
              this.allCountry = item.children;
            }
          });
          this.countryAllData = res.module;
        }
      });
    },
    //查询平台订单列表
    getOrderList() {
      let { listParams, chooseCountryData } = this;
      listParams.buyerCountry = JSON.stringify(chooseCountryData);
      let url = "assistant/ecOrders/pageEcOrder"
      console.log('listParams',listParams)
      this.axios({
        url,
        data: listParams,
        method: "post",
      }).then((res) => {
        if (res.success) {
          let data = res.module;
          this.tableData = data.result;
          this.listParams.total = data.total;
        }
      });
    },
    //点击查询条件触发
    searchActive(value, type) {
      switch (type) {
        case 1://选择平台
          this.listParams.authCode=''
          if(this.listParams.agentCode != value){//平台渠道不一致 重新获取店铺列表
            this.dataAccount = [{name:'全部',id:''}];
            if(!value){
              this.allShopList.map((item)=>{
                item.shopList.map((item2)=>{
                this.dataAccount.push({name:item2.authCode,id:item2.authCode})
                })
              })
            }else{
              this.allShopList.filter(x=>x.agentCode.indexOf(value)>-1)
              .map((item)=>{
              item.shopList.map((item2)=>{
                this.dataAccount.push({name:item2.authCode,id:item2.authCode})
                })
              })
             }
             this.listParams.agentCode = value;
          }
          break;
        case 2://选择店铺
          this.listParams.authCode = value;
          break;
        case 3://选择国家
          this.activeCountry = value;
          if (value != 0) {
            this.chooseCountryData.splice(0, 1, value);
          } else {
            this.chooseCountryData = [];
          }
          break;
        case 4://选择绑定系统产品-全选
          let currentAccount = [];
          this.checkData.map((item) => {
            currentAccount.push(item.id);
          });
          this.checkIsBindList = value ? currentAccount : [];
          this.listParams.isBindSku = "";
          break;
        case 5://选择绑定系统产品-勾选
            let checkedCount = value.length;
            this.checkAllisBind = checkedCount === this.checkData.length;
            if (value.length == 2) {
              this.listParams.isBindSku = "";
            } else {
              this.listParams.isBindSku = value.join(",");
            }
          break;
        case 6://选择排序
          this.listParams.sort = value;
          this.listParams.isAsc = !this.listParams.isAsc;
          break;
        case 7://搜索类型搜索
          this.listParams.searchType = value;
          break;
        case 8://高级搜索-日期搜索
          this.listParams.collectTime = value;
          break;
        default:
          break;
      }
      this.getOrderList();
    },
    //搜索国家-更多-选择国家区域
    checkCountryArea(value){
      this.activeContinent = value;
          this.countryAllData.map((item) => {
            if (item.id == value) {
              this.specificCountry = item.children;
            }
      });
      this.checkAllCountry1 = false
      this.checkAllCountry2 = false
    },
    //搜索国家-更多-输入框搜索国家
    searchCountryClick(val) {
      this.specificCountry = [];
      this.allCountry.map((item) => {
        if (item.name.indexOf(val) > -1 && val) {
          this.specificCountry.push(item);
        }
      });
      if (!val) {
        this.specificCountry = this.allCountry;
      }
    },
    //搜索国家-更多-选中国家
    checkCurrentCountry(val) {
      this.chooseCountryData.splice(0, 1, val.value);
      this.dataCountry.push({ name: val.name, value: val.value });
      this.activeCountry = val.value;
      this.isShow = false;
      this.getOrderList();
    },
    //搜索国家-多选-选择确认
    sureCheckBoxClick() {
      (this.checkBoxShow = false), (this.showCheckResult = true);
      this.chooseCountryData = this.checkList.map((item) => {
        return item.value;
      });
      this.getOrderList();
    },
    //搜索国家-多选-选择确认-清除
    clearCheckCountry(val){
      this.showCheckResult = false;
      this.chooseCountryData = [];
      this.checkList = [];
      this.activeCountry = 0;
      this.checkAllCountry1 = false;
      this.checkAllCountry2 = false;
      this.getOrderList();
    },

    handleClickBatch(command) {
      const { platformOrderIds } = this;
      if (command == 1) {
        if (platformOrderIds.length == 0) {
          this.$message.error("请至少选中一个订单");
          return;
        }
      }
      switch (command) {
        case "1":
          this.syncPClick();
          break;
        case "2":
          break;
        default:
          break;
      }
    },

    syncPClick(platformOrderId,agentCode,authCode){
      let platformOrderIds
      if(platformOrderId){
        // platformOrderIds=platformOrderId.split(',')
        platformOrderIds= [{
          platformOrderId,agentCode,authCode
        }]
      }else{
        platformOrderIds=this.platformOrderIds
      }
      this.axios({
        url:'assistant/ecOrderSync/syncByPlatformOrderId',
        data:{
          orderIdReqDTOS:JSON.stringify(platformOrderIds),
        },
        method: "post"
      }).then(res => {
        if(res.success){
          this.$message({
            message: '同步中请稍后查询结果',
            type: 'success'
          });
          this.getOrderList()
        }
      })

    },
    dealDisabledDate(time) {
      if (new Date(time).getTime() > new Date().getTime()) {
        return time.getTime() >= new Date().getTime();
      } else {
        return time.getTime() < Date.now() - 15 * 8.64e7;
      }
    },
    handleClick() {
      console.log(this.activeName);
    },
    handlePlatformChange(val){
      this.platformValue = val;
      this.allShopList.map((item)=>{
        if(item.agentCode.indexOf(val)>-1 && val!==""){
          this.shopAccount = [];
          item.shopList.map((item2)=>{
            this.shopAccount.push({name:item2.authCode,id:item2.authCode})
          })
        }
      })
    },
    handleCheckAllChange(val) {
      let newArry = [];
      if (val) {
        this.shopAccount.map((item) => {
          newArry.push(item.id);
        });
      }
      this.checkedCities = newArry;
    },
    handleShopChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.shopAccount.length;
    },
    searchShopClick(val) {
      let shopArry = [];
      let platformValue = this.platformValue;
      this.allShop.map((item) => {
        if (item.name.indexOf(val) > -1 && item.agentCode==platformValue) {
          shopArry.push(item);
        }
      });
      this.shopAccount = shopArry;
    },
    //同步店铺订单
    closeSync(val) {
      this.syncPollingVisible = val;
      this.getOrderList();
      this.syncBatchCode = "";
    },
    handleSelectionChange(val) {
      this.platformOrderIds = val.map((item) => {
        return {
          platformOrderId: item.platformOrderId,
          agentCode: item.agentCode,
          authCode: item.authCode
        }
      });
    },
    // chooseShopClick() {
    //   let { checkedCities, customTime, currentType } = this;
    //   let url;
    //   if (currentType == 1) {
    //     if (checkedCities.length > 5) {
    //       this.$message({
    //         message: "最多只能选择5个店铺哦~",
    //         type: "warning",
    //       });
    //       return;
    //     }
    //     url = "assistant/updateOrderStatus";
    //   } else {
    //     url = "assistant/syncOrder";
    //   }
    //   this.axios({
    //     url,
    //     data: {
    //       platformOrderDateStart: customTime[0],
    //       platformOrderDateEnd: customTime[1],
    //       shopIds: JSON.stringify(checkedCities),
    //     },
    //     method: "post",
    //   }).then((res) => {
    //     if (res.success) {
    //       this.dialogVisibleReleased = false;
    //       this.checkAll = false;
    //       this.checkedCities = [];
    //       this.shopName = "";
    //       this.shopAccount = this.allShop;
    //       this.syncBatchCode = res.module.batchCode;
    //       this.syncPollingVisible = true;
    //       this.$refs.syncFunction.pollingQuery();
    //     }
    //   });
    // },

    showMatching() {
      console.log("---------", this.$refs.productBindingDialogRef);
      this.$refs.productBindingDialogRef.onshow(this.productBindingDialogData);
      console.log("2", this.productBindingDialogData);
    },
    chooseShopClick(){
      let {checkedCities,customTime,currentType}=this
      let url,data = {},agentWithAuthListReqDTOs = []
      if(this.platformValue == 'lazada'){
        if(currentType==1){
          if(checkedCities.length>5){
            this.$message({
              message: '最多只能选择5个店铺哦~',
              type: 'warning'
            });
            return
          }
        }
        agentWithAuthListReqDTOs.push({platformOrderDateStart:customTime[0],platformOrderDateEnd :customTime[1],authCodeList:checkedCities,agentCode:this.platformValue})
        data ={agentWithAuthListReqDTOs: agentWithAuthListReqDTOs}
        url='assistant/ecOrderSync/sync'
        this.getJSONPost(url,data)

      }else{
        if(currentType==1){
          if(checkedCities.length>5){
            this.$message({
              message: '最多只能选择5个店铺哦~',
              type: 'warning'
            });
            return
          }
          data= {platformOrderDateStart:customTime[0],platformOrderDateEnd :customTime[1],shopIds:JSON.stringify(checkedCities)}
          url='assistant/updateOrderStatus'
          this.getPost(url,data)
        }else{
          data= {platformOrderDateStart:customTime[0],platformOrderDateEnd :customTime[1],shopIds:JSON.stringify(checkedCities)}
          url='assistant/syncOrder'
          this.getPost(url,data)
        }
      }
    },
    getPost(url,data){
      this.axios({
        url:url,
        data: data,
        method: "post"
      }).then(res => {
        if(res.success){
          this.dialogVisibleReleased=false
          this.checkAll=false
          this.checkedCities=[]
          this.shopName=''
          this.shopAccount=this.allShop
          this.syncBatchCode=res.module.batchCode;
          this.syncPollingVisible=true;
          this.$refs.syncFunction.pollingQuery();
        }
      })
    },
    getJSONPost(url,data){
      this.axios({
        url:url,
        data: data,
        transformRequest: [(data) => JSON.stringify(data)],
        headers: {"Content-Type": "application/json; charset=UTF-8"},
        method: "post"
      }).then(res => {
        if(res.success){
          this.dialogVisibleReleased=false
          this.checkAll=false
          this.checkedCities=[]
          this.shopName=''
          this.shopAccount=this.allShop
          this.syncBatchCode=res.module.batchCode;
          this.syncPollingVisible=true;
          this.$refs.syncFunction.pollingQuery();
        }
      })
    },


    getBindInfo(id) {
      this.axios({
        url: "assistant/bindSkuInfo",
        params: {
          id,
        },
        method: "get",
      }).then((res) => {
        if (res.success) {
          this.gridData = res.module;
        }
      });
    },
    //查看详情
    detailClick(id, status) {
      this.id = id;
      this.logisticsAllDetails=[];
      this.orderDetailSkuInfo=[];
      this.orderDetailList=[];
      this.axios({
        url: "assistant/getInfo",
        params: {
          id,
        },
        method: "get",
      }).then((res) => {
        if (res.success) {
          let orderDetail = res.module;
          this.orderDetail=res.module;
          this.orderDetailList.push(res.module);
          if(orderDetail.ecOrderInfoSkuRespDTOS){
            this.orderDetailSkuInfo= res.module.ecOrderInfoSkuRespDTOS;
          }
          if(orderDetail.logisticsTrackingDetailsRespDTOS){
            this.logisticsAllDetails=orderDetail.logisticsTrackingDetailsRespDTOS.map((item)=>{
              return {
                buyerChooseLogistics:orderDetail.buyerChooseLogistics,
                trackingProvider:item.trackingProvider,
                trackingNumber:item.trackingNumber,
                packageFreight:item.packageFreight,
                packageWeight:item.packageWeight,
                details:item.logisticsDetails,
              };
            })
          }else{
            this.logisticsAllDetails.push({
              buyerChooseLogistics:orderDetail.buyerChooseLogistics,
              trackingProvider:orderDetail.trackingProvider,
              trackingNumber:orderDetail.trackingNumber,
              packageFreight:'-',
              packageWeight:'-',
              details:[],
            });
          }
        }
      });
      this.dialogVisibleOrderDetail = true;
    },
    //编辑物流方式保存
    saveLogisticClick() {
      const { id, logisticType, orderDetail, logisticCountry } = this;
      this.isEdit = true;
      this.axios({
        url: "assistant/deliver",
        data: {
          id,
          trackingProvider: logisticType,
          trackingNumber: orderDetail.trackingNumber,
          originCountryCode: logisticCountry,
        },
        method: "post",
      }).then((res) => {
        if (res.success) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getOrderList();
          this.textareaRemark = "";
          this.dialogVisibleRemark = false;
        }
        this.logisticValue = logisticType + "(" + logisticCountry + ")";
      });
    },
    refundClick() {
      this.activeTab = 1;
      this.dialogVisibleRefund = true;
    },
    gotoBinding(sku, id) {
      this.axios({
        url: "assistant/bindSkuInfo",
        params: {
          id,
          skuIdOnly: true,
        },
        method: "get",
      }).then((res) => {
        let platformProductSkuIdList = [];
        if (res.success && res.module.length) {
          console.log("-----", res.module);
          platformProductSkuIdList = res.module.map((x) => x.id);
        }
        this.dialogVisibleSku = true;
        this.productBindingDialogData = {
          inputPlatform: sku,
          valuePlatform: "platformSku",
          platformProductSkuIdList: platformProductSkuIdList,
        };
      });
    },
    cancelClick() {
      this.activeTab = 1;
      this.dialogVisibleDetail = false;
      this.isEdit = true;
      this.dialogVisibleOrderDetail = false;
    },
    checkNum(val, type) {
      console.log(val, type);
      if (val < 0) {
        this.$set(this.listParams, type, Math.abs(val));
      }
    },
    searchAdvanced() {
      this.getOrderList();
    },
    changePlatformOrderDate(value) {
      if (value) {
        this.listParams.platformOrderDateStart = value[0];
        this.listParams.platformOrderDateEnd = value[1];
      } else {
        this.listParams.platformOrderDateStart = "";
        this.listParams.platformOrderDateEnd = "";
      }
    },
    changeTransactionDate(value) {
      if (value) {
        this.listParams.transactionDateStart = value[0];
        this.listParams.transactionDateEnd = value[1];
      } else {
        this.listParams.transactionDateStart = "";
        this.listParams.transactionDateEnd = "";
      }
    },
    changeShippingDate(value) {
      if (value) {
        this.listParams.shippingDateStart = value[0];
        this.listParams.shippingDateEnd = value[1];
      } else {
        this.listParams.shippingDateStart = "";
        this.listParams.shippingDateEnd = "";
      }
    },
    resetClick() {
      this.listParams.platformOrderDateStart = "";
      this.listParams.platformOrderDateEnd = "";
      this.listParams.transactionDateStart = "";
      this.listParams.transactionDateEnd = "";
      this.listParams.orderTotalStart = "";
      this.listParams.orderTotalEnd = "";
      this.listParams.shippingDateStart = "";
      this.listParams.shippingDateEnd = "";
      this.listParams.collectTime = "";
      this.listParams.trackingProvider = "";
      this.listParams.platformOrderTime = "";
      this.listParams.transactionTime = "";
      this.listParams.shippingTime = "";
      this.getOrderList();
    },
    iscancelClick() {
      this.resetClick();
      this.advancedSearch = false;
    },
    reasonChange() {
      this.getTrackingProviderList();
    },
    //订单退款
    sureRefunedClick() {
      const { id, reasonCode, reasonNote } = this;
      this.axios({
        url: "assistant/refund",
        data: {
          id,
          reasonCode,
          reasonNote,
        },
        method: "post",
      }).then((res) => {
        if (res.success) {
          this.$message({
            message: "退款成功",
            type: "success",
          });
          this.dialogVisibleRefund = false;
          this.dialogVisibleDetail = false;
        }
      });
    },
    remarkClick(id) {
      this.dialogVisibleRemark = true;
      this.id = id;
    },
    remarkSure() {
      const { id, textareaRemark } = this;
      this.axios({
        url: "assistant/remark",
        data: {
          id,
          remark: textareaRemark,
        },
        method: "post",
      }).then((res) => {
        if (res.success) {
          this.$message({
            message: "备注成功",
            type: "success",
          });
          this.getOrderList();
          this.textareaRemark = "";
          this.dialogVisibleRemark = false;
        }
      });
    },


    searchInputClick() {
      this.getOrderList();
    },

    getOnlineNum(listParams) {
      this.axios({
        url: "assistant/queryRefundOrderCount",
        data: listParams,
        method: "post",
      }).then((res) => {
        if (res.success) {
          let data = res.module;
          this.$set(this.dataTabList[0], "number", data.all);
          this.$set(this.dataTabList[1], "number", data.isDeliveryCount);
          this.$set(this.dataTabList[2], "number", data.unDeliveryCount);
        }
      });
    },
    chooseTabs(value) {
      this.listParams.isVirtualDelivery = value;
      this.getOrderList();
    },
    currentChange(val) {
      this.listParams.currentPage = val;
      this.getOrderList();
    },
    sizeChange(val) {
      this.listParams.pageSize = val;
      this.getOrderList();
    },

    getCommonfCountry() {
      this.axios({
        url: "assistant/queryCountry",
        data: {},
        method: "post",
      }).then((res) => {
        if (res.success) {
          this.dataCountry = this.dataCountry.concat(res.module);
        }
      });
    },
    copyUrl(data) {
      util.copyUrl(data);
    },
    //物流提供商列表查询
    getTrackingProviderList() {
      this.axios({
        url: "assistant/info/get/trackingProviderList",
        data: {},
        method: "get",
      }).then((res) => {
        if (res.success) {
          this.logisticTypeOptions = res.module;
        }
      });
    },

    getPlatformChannelsList(agentList){//根据登录账号获取平台渠道列表
      this.agentCodeList=[];
      this.agentCodeList.push({name:'全部',id:''})
      agentList.map((item)=>{
        this.agentCodeList.push({name:item.agentCode,id:item.agentCode})
        this.platformOptions.push({value:item.agentCode,lable:item.agentCode});
      })
    },
    //通过登录用户查询信息
    getAccountDetail(type){
      let user = JSON.parse(localStorage.getItem("user"));
      this.axios({
        url:'assistant/user/findByAccountId',
        params:{
          id:user.id,
        },
        method: "get"
      }).then(res => {
        if(res.success && res.module!=null){
          let data=res.module
          this.allShopData=[]
          if(type==1){
            this.account=data.account
            this.name=data.name
            this.roleList=data.roleList
            this.checkList=[]
            this.roleList.map((item)=>{
              if(item.checked){
                this.checkList.push(item.id)
              }
            })
          }
          data.agentList.map((item)=>{
            let checkArry=[]
            let checkAllArry=[]
            let isCheck=false
            item.shopList.map((v)=>{
              checkAllArry.push(v.authCode)
            })
            let newItem=Object.assign({},item,{isCheck,checkArry,checkAllArry})
            this.allShopData.push(newItem)
          })
          this.allShopList=JSON.parse(JSON.stringify(this.allShopData))//同步弹窗搜索是用到
          this.getPlatformChannelsList(JSON.parse(JSON.stringify(this.allShopData)));
          this.getDefualtPlatformChannelShop(JSON.parse(JSON.stringify(this.allShopData)));
        }
      })
    },
    getDefualtPlatformChannelShop(allShopData){//打开页面默认一个平台下的所有店铺
      allShopData.map((item)=>{
        item.shopList.map((item2)=>{
          this.dataAccount.push({name:item2.authCode,id:item2.authCode})
          this.allShop.push({name:item2.authCode,id:item2.authCode,agentCode: item.agentCode})
        })
      })
    },
    getChildSkus(skuDetail) {
      this.tableDataGroup = skuDetail;
    },
    searchShop(val) {
      this.dataAccount = [{ name: "全部", id: 0 }];
      this.listParams.authCode = '';
      this.allShop.map((item)=>{
        if (this.listParams.agentCode == 0){
          if(item.name.indexOf(val)>-1){
            this.dataAccount.push(item)
          }
        }else {
          if(item.name.indexOf(val)>-1 && this.listParams.agentCode == item.agentCode){
            this.dataAccount.push(item)
          }
        }
      })
    },
    showMoreShops() {
      this.showAllShops = !this.showAllShops;
    },
    // 运单状态全选
    handleCheckAllCountry() {
      this.checkAllCountry1 = !this.checkAllCountry1
      this.checkAllCountry2 = !this.checkAllCountry2
      this.checkList = this.checkAllCountry2 ? this.specificCountry : [];
    },
    handleCheckedAllCountryChange() {
      const flag = this.checkList.length !== 0
      this.checkAllCountry1 = flag
      this.checkAllCountry2 = flag
    },
  },
  mounted() {
    this.leftActive(this.$route.path);
    this.getAccountDetail()//通过登录用户获取信息

    this.getCountry();
    this.getCommonfCountry();
    this.getCountryList();
    this.getTrackingProviderList();
  },
  watch: {
    $route: function () {
      this.leftActive(this.$route.path);
    },
  },
};
</script>

<style lang="less" scoped>
.shop-list {
  display: flex;
  margin: 20px 5px;
  flex-wrap: wrap;
  // justify-content:space-between;
  max-height: 300px;
  overflow: auto;
  clear: both;
  .current-shop {
    width: 120px;
    overflow: hidden;
  }
}
.content-right {
  .content-top {
    background: #ffffff;
    .border-b {
      border-bottom: 1px solid #ccc;
      overflow: hidden;
    }
    .btn {
      display: inline-block;
      vertical-align: middle;
      height: 34px;
      width: 80px;
      // margin-right: 10px;
      font-size: 13px;
    }
    .container-o-box {
      .default {
        margin: 0;
        width: 100%;
      }
      .com-block {
        border: 1px solid #ccc;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 0 0;
        border-top: none;
        .productSearchGroup input[type="text"] {
          display: inline-block;
          width: 410px;
          vertical-align: middle;
          margin-right: 10px;
          padding-right: 90px;
        }
        .search-tab {
          padding: 5px;
          .border-dashed-top1 {
            border-top: 1px dashed #ccc !important;
          }
          table {
            width: 100%;
            tbody > tr > td {
              padding: 2px 5px;
              line-height: 34px;
              vertical-align: top;
            }
            tbody > tr > td:first-child {
              width: 80px;
              min-width: 80px;
              max-width: 100px;
              text-align: left;
              color: #a0a3a6;
            }
            table > tbody > tr > td:nth-child(2) {
              padding: 5px;
            }
            tbody > tr > td .tab-in > a {
              padding: 0 3px;
              cursor: pointer;
            }
            tbody > tr > td > a {
              float: left;
              margin: 5px 20px 5px 0;
              padding: 0 3px;
            }
            .choosed-country {
              overflow: auto;
              display: inline-block;
              background: #f2f2f2;
              float: left;
              line-height: 24px;
              width: 80%;
              padding-left: 10px;
            }
            a {
              color: #367EE2;
              text-decoration: none;
            }
            a.myj-aFocus {
              display: flex;
              padding: 2px 2px;
              line-height: 18px;
              vertical-align: middle;
            }
            a.country-tabs {
              margin: 5px 20px 5px 0;
              padding: 2px 5px;
              background-color: #fff;
              color: #333;
              display: inline-block;
            }
            .country-choose {
              border: 1px solid #199ed8;
              background-color: #f2f2f2;
              width: 770px;
              // height: 174px;
              float: left;
              .tit {
                margin: 5px 0;
                padding: 0 10px;
              }
              .content {
                background-color: #fff;
                padding: 10px;
                height: 126px;
                overflow: auto;
                .specific-country {
                  width: 80px;
                  line-height: 26px;
                  display: inline-block;
                  margin-right: 20px;
                  vertical-align: middle;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color: #367EE2;
                  cursor: pointer;
                }
              }
            }
            .country-choose-checkbox {
              // height: 261px
            }
            .show-more {
              display: inline-block;
              width: 78px;
              height: 25px;
              border: 1px solid #ddd;
              color: #333;
              line-height: 25px;
              text-align: center;
              float: right;
              margin-left: 10px;
              cursor: pointer;
            }
            .tp24 {
              padding-top: 4px;
            }
            .myj-active {
              background-color: #367EE2 !important;
              color: #fff !important;
            }
            .m-right15 {
              margin-right: 15px !important;
            }
            .p-right0 {
              padding-right: 0 !important;
            }
            .gray-c {
              color: #737679 !important;
            }
            .account-list {
              display: inline-block;
              max-height: 100px;
              overflow: hidden;
            }
            .account-list-all {
              display: inline-block;
              overflow: auto;
            }
          }
        }
      }
    }
    .pull-right {
      float: right !important;
    }
    .post_divA {
      padding-left: 19px;
      background: url(../../assets/img/arrowgreen1.png) no-repeat left -128px;
    }
    .post_crawl .p_style3 {
      background-position-y: -3px !important;
      background: #e4e4e4 url(../../assets/img/arrowgreen1.png) no-repeat 100.2%
        0;
      color: #666;
    }
    .post_divA p,
    .post_divB p {
      margin: 0;
      height: 31px;
      line-height: 21px;
      font-size: 12px;
      float: left;
      text-align: center;
      width: 25%;
    }
    .w120 {
      width: 120px !important;
    }
    .h25 {
      height: 25px !important;
    }
    .m-bottom10 {
      margin-bottom: 10px !important;
    }
    .lh15-imp {
      line-height: 25px !important;
    }
    .post_crawl .p_style4A {
      background-position-y: -67px !important;
      background: #e4e4e4 url(../../assets/img/arrowgreen1.png) no-repeat 100.2% -65px;
      color: #666;
    }
    .border4 {
      border: 1px solid #ccc !important;
      clear: both;
    }
    .tab-content > .active {
      display: block;
      visibility: visible;
    }
    .form-control {
      display: block;
      width: 100%;
      height: auto;
      padding: 6px 12px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }
    .form-control2 {
      display: inline-block;
      width: 170px;
      height: 34px;
      padding: 6px 12px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
      -o-transition: border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }
    .p30 {
      padding: 38px 10px;
    }
    .btn-determine {
      font-size: 13px;
      border-color: #367EE2;
      color: #fff;
      background-color: #367EE2;
    }
    .btn-gray {
      border-color: #d0d3d6;
      font-size: 13px;
      color: #434649;
      background-color: #f2f2f2;
    }
    .m-left8 {
      margin-left: 8px !important;
    }

    .content-button {
      display: flex;
      flex-direction: row-reverse;
      margin-bottom: 10px;
      .el-button--primary {
        background-color: #367EE2;
        border-color: #367EE2;
      }
    }
  }
}
.search-group-senior {
  margin-top: 10px;
  padding: 10px;
  width: 605px;
  background-color: #eee;
  table tbody > tr > td[data-v-26d277f0]:first-child {
    width: 100px;
  }
  .form-control {
    display: inline-block;
    width: 170px;
    height: 34px;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s,
      -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  }
}
.variant-input-control {
  text-align: center;
  background-color: #f2f2f2;

  .variant-update-input {
    padding: 6px;
    width: 100%;
    height: 24px;
    line-height: 24px;
    display: inline-block;
  }
  .btn-edit-enter {
    margin-right: 2px;
    border-radius: 2px;
    padding: 0;
    width: 40px;
    height: 20px;
    line-height: 18px;
    background-color: #5399d5;
    color: #fff;
  }
  .btn-edit-restart {
    border-radius: 2px;
    padding: 0;
    width: 40px;
    height: 20px;
    line-height: 18px;
    background-color: #5399d5;
    color: #fff;
  }
}
.stand-handle {
  border-radius: 2px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background-color: #f40;
  display: inline-block;
  margin-top: 10px;
}
.detail-flex {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  height: 50px;
  align-items: center;
  padding: 5px;
}
.logistic-detail {
  border: 1px solid #ccc;
  min-height: 100px;
  .logistic-title {
    background-color: #eee;
    text-align: center;
    padding: 5px 0;
  }
  .logistic-btn {
    background-color: #367EE2;
    border: none;
    color: #fff;
    width: 130px;
    height: 34px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
  }
  .logistic-btn-white {
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    cursor: pointer;
  }
}
.border5 {
  clear: both;
  .el-table--border,
  .el-table--group {
    border: 1px solid #ccc !important;
  }
  .el-table thead {
    color: #333;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #367EE2;
    font-size: 13px;
  }
  .squareSpan {
    display: inline-block;
    margin-right: 5px !important;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background-color: #361c93;
  }
  .table-content {
    display: flex;
    .table-content-right {
      text-align: left;
      padding-left: 10px;
      line-height: 16px;
      .sku-number {
        display: inline-block;
        min-width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #999;
        color: #fff;
        text-align: center;
        padding: 5px;
      }
    }
  }
  .imgCss {
    width: 58px;
    height: 58px;
  }
  .control-heightOpen {
    overflow: hidden;
  }
  .control-heightUp {
    max-height: 100px;
    overflow: hidden;
  }
  .variant-input-control {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    background-color: #f2f2f2;
    z-index: 1;
    width: 100px;
    .variant-update-input {
      padding: 6px;
      width: 100%;
      height: 24px;
      line-height: 24px;
      display: inline-block;
    }
    .btn-edit-enter {
      margin-right: 2px;
      border-radius: 2px;
      padding: 0;
      width: 29px;
      height: 20px;
      font-size: 12px;
      line-height: 18px;
      background-color: #5399d5;
    }
    .btn-edit-restart {
      border-radius: 2px;
      padding: 0;
      width: 29px;
      height: 20px;
      font-size: 12px;
      line-height: 18px;
      background-color: #5399d5;
    }
  }
  .custom-table-title {
    span {
      width: 80px;
      display: inline-block;
      padding-top: 7px;
    }
  }
  .custom-table {
    border-bottom: 1px solid #ebeef5;
    span {
      width: 80px;
      display: inline-block;
      cursor: pointer;
    }
    span:first-child {
      cursor: auto;
    }
    .activeInput {
      background: #ccc;
    }
  }
  .custom-table:last-child {
    border: none;
  }
  .unfold-show {
    color: #367EE2;
    text-align: right;
    font-size: 13px;
  }
}
.more-btn {
  float: right;
  border: 1px solid #dcdfe6;
}
.shop-search {
  float: right;
  margin-bottom: 5px;
  margin-left: 5px;
}
</style>

