<!-- @format -->

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="媒体" prop="categoryId">
        <el-select
          filterable
          v-model="queryParams.mediaId"
          placeholder="选择媒体"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.mediaList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="领样人" v-if="$store.getters.roles[0] != 'bd'" prop="collectSampleId">
        <el-select
          filterable
          v-model="queryParams.collectSampleId"
          placeholder="人员名称"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.personList"
            :key="item.userId"
            :label="item.nickMame"
            :value="item.userId"
          >
            <div style="display: flex">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background-color: green;
                  position: relative;
                  top: 12px;
                  margin-right: 5px;
                "
                :style="
                  item.status == '0' ? 'backgroundColor:green' : 'backgroundColor:red'
                "
              >{{ item.value }}</span
              ><span>{{ item.nickMame }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品创建人" prop="itemCreateId">
        <el-select
          filterable
          v-model="queryParams.itemCreateId"
          placeholder="人员名称"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.courtshipList"
            :key="item.userId"
            :label="item.nickMame"
            :value="item.userId"
          >
            <div style="display: flex">
              <span
                style="
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background-color: green;
                  position: relative;
                  top: 12px;
                  margin-right: 5px;
                "
                :style="
                  item.status == '0' ? 'backgroundColor:green' : 'backgroundColor:red'
                "
              >{{ item.value }}</span
              ><span>{{ item.nickMame }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="itemTitle">
        <el-input
          placeholder="请输入商品名称"
          style="width: 240px"
          v-model="queryParams.itemTitle"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="商品ID" prop="itemId">
        <el-input
          placeholder="请输入商品ID"
          style="width: 240px"
          v-model="queryParams.itemId"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="达人名称" prop="promoterNickName">
        <el-input
          placeholder="请输入达人名称"
          style="width: 240px"
          v-model="queryParams.promoterNickName"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="达人ID" prop="promoterId">
        <el-input
          placeholder="请输入达人ID"
          style="width: 240px"
          v-model="queryParams.promoterId"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="promoterPhone">
        <el-input
          placeholder="请输入电话号码"
          style="width: 240px"
          v-model="queryParams.promoterPhone"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="收货人"
        prop="consignee"
        v-if="queryParams.collectSampleStatus == '3'"
      >
        <el-input
          placeholder="请输入收货人"
          style="width: 240px"
          v-model="queryParams.consignee"
        >
        </el-input>
      </el-form-item>

      <el-form-item
        label="单号"
        prop="courierNumber"
        v-if="queryParams.collectSampleStatus == '4'"
      >
        <el-input
          placeholder="请输入快递单号"
          style="width: 240px"
          v-model="queryParams.courierNumber"
        >
        </el-input>
      </el-form-item>

      <el-form-item
        v-if="queryParams.collectSampleStatus == '4'"
        label="物流状态"
        prop="collectSampleDesc"
      >
        <el-select
          filterable
          v-model="queryParams.collectSampleDesc"
          placeholder="选择物流状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in collectSampleDescList.descList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-document-add"
          size="mini"
          @click="addNew"
          >新增商品</el-button
        >
      </el-col>
    </el-row> -->
    <el-button
      type="primary"
      plain
      size="mini"
      @click="addNew"
      style="margin-bottom: 15px"
    >导出
    </el-button>
    <el-tabs v-model="queryParams.collectSampleStatus" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.value"
        v-for="(item, index) in queryParamsList.tagList"
        :key="index"
      >
        <el-button
          type="primary"
          plain
          size="mini"
          @click="batchProcess"
          v-if="queryParams.collectSampleStatus == 1"
          style="margin-bottom: 15px"
        >批量审核
        </el-button>
        <el-button
          type="primary"
          plain
          size="mini"
          @click="batchProcessAssignment"
          v-if="queryParams.collectSampleStatus == 6"
          style="margin-bottom: 15px"
        >批量审核作业
        </el-button>

        <el-table
          v-loading="loading"
          :data="typeList"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          :row-key="getRowKeys"
          @sort-change="sortChange"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
            v-show="queryParams.collectSampleStatus == '3'"
          />
          <el-table-column
            label="商品名称"
            align="center"
            prop="itemTitle"
            width="300"
            fixed="left"
          >
            <template slot-scope="scope">
              <div style="display: flex; width: 100%">
                <div style="width: 40%">
                  <img
                    :src="scope.row.itemImgUrl"
                    alt=""
                    style="width: 70px; height: auto"
                  />
                </div>
                <div style="width: 60%" class="item-name-calss">
                  <a
                    style="
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                      width: 100%;
                    "
                    :title="scope.row.itemTitle"
                  >
                    {{ scope.row.itemTitle }}
                  </a>
                  <p>商品Id： {{ scope.row.itemId }}</p>
                  <p>
                    商品单价：
                    {{ scope.row.itemPrice / 100 }}元
                  </p>

                  <p>
                    佣金率：
                    {{
                    scope.row.commissionRate ? scope.row.commissionRate / 10 + "%" : "-"
                    }}
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="达人名称"
            align="center"
            prop="promoterNickName"
            width="300"
          >
            <template slot-scope="scope">
              <div style="display: flex; width: 100%">
                <div style="width: 40%">
                  <el-popover
                    placement="top"
                    title=""
                    trigger="hover"
                    @show="getPromoterInfo(scope.row)"
                  >
                    <el-skeleton
                      style="width: 300px"
                      :loading="loadingPromoterInfo"
                      animated
                    >
                      <template slot="template">
                        <el-skeleton-item
                          variant="image"
                          style="width: 300px; height: 240px"
                        />
                        <div style="padding: 14px">
                          <el-skeleton-item variant="h3" style="width: 50%"/>
                          <div
                            style="
                              display: flex;
                              align-items: center;
                              justify-items: space-between;
                              margin-top: 16px;
                              height: 16px;
                            "
                          >
                            <el-skeleton-item variant="text" style="margin-right: 16px"/>
                            <el-skeleton-item variant="text" style="width: 30%"/>
                          </div>
                        </div>
                      </template>
                      <template>
                        <el-card v-if="promoterInfo">
                          <div style="display: flex; width: 100%">
                            <div style="width: 40%">
                              <img
                                :src="promoterInfo.promoterUrl"
                                alt=""
                                style="width: 100%; height: auto"
                              />
                            </div>
                            <div
                              style="width: 60%; margin-left: 15px; padding: 10px 0"
                              class="item-name-calss"
                            >
                              <a
                                style="
                                  text-overflow: ellipsis;
                                  white-space: nowrap;
                                  overflow: hidden;
                                  width: 100%;
                                "
                                :title="scope.row.promoterNickName"
                              >
                                {{ scope.row.promoterNickName }}
                              </a>
                              <p>达人Id： {{ scope.row.promoterId }}</p>
                            </div>
                          </div>
                          <div class="show-main">
                            <div style="width: 40%">
                              <p class="p-main">
                                {{
                                promoterInfo.orderAmount
                                ? allMoney(promoterInfo.orderAmount / 100)
                                : ""
                                }}
                              </p>
                              <p class="p-title">近30天睿选GMV</p>
                            </div>
                            <div style="width: 40%">
                              <p class="p-main">
                                {{ promoterInfo.operationCompletionRate }}
                              </p>
                              <p class="p-title">作业完成率</p>
                            </div>
                          </div>
                          <div class="show-main">
                            <div style="width: 40%">
                              <p class="p-main">{{ promoterInfo.videoSales }}</p>
                              <p class="p-title">短视频销售额</p>
                            </div>
                            <div style="width: 40%">
                              <p class="p-main">
                                {{ promoterInfo.avgVideoSales }}
                              </p>
                              <p class="p-title">单视频销售额</p>
                            </div>
                          </div>
                        </el-card>
                      </template>
                    </el-skeleton>
                    <img
                      slot="reference"
                      :src="scope.row.promoterUrl"
                      alt=""
                      style="width: 70px; height: auto"
                    />
                  </el-popover>
                </div>
                <div style="width: 60%" class="item-name-calss">
                  <a
                    style="
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;
                      width: 100%;"
                    :title="scope.row.promoterNickName"
                    @click="toIndexDetails(scope.row)"
                  >
                    {{ scope.row.promoterNickName }}
                  </a>
                  <p>达人Id： {{ scope.row.promoterId }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="媒体" align="center" prop="mediaId" width="100px">
            <template slot-scope="scope">
              <div v-if="!!scope.row.mediaId">
                {{ scope.row.mediaId | mediaStatusName }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="领样人"
            align="center"
            prop="collectSampleName"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.collectSampleName">
                {{ scope.row.collectSampleName }}
                <!--<a
                  v-if="
                    $store.getters.roles[0] == 'admin' ||
                    $store.getters.roles[0] == 'associationManager' ||
                    $store.getters.roles[0] == 'bdManager'
                  "
                  style="text-align: center"
                  @click="getUserList(scope.row)"
                >领样换绑</a
                >-->
                <a
                  v-if="scope.row.sampleVoucherStatus == 2"
                  style="text-align: center"
                  @click="
                    lookImageVisible = true;
                    lookImage = scope.row.sampleVoucher;
                  "
                >查看凭证</a
                >
                <a
                  v-if="scope.row.sampleVoucherStatus == 1 && ($store.getters.roles[0] == 'admin' || $store.getters.roles[0] == 'associationManager' || $store.getters.roles[0] == 'bdManager')"
                  style="text-align: center"
                  @click="
                    voucherVisible = true;
                    ids = scope.row.id;
                  "
                >上传凭证</a
                >
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品创建人"
            align="center"
            prop="itemCreateName"
            width="150"
          >
          </el-table-column>
          <el-table-column
            label="收货人"
            align="center"
            prop="consignee"
            width="150"
            v-if="queryParams.collectSampleStatus == '3'"
          >
          </el-table-column>

          <el-table-column
            label="领样备注"
            align="center"
            prop="sampleRequirement"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.sampleRequirement">
                {{ scope.row.sampleRequirement }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="样品数量" align="center" prop="sampleCount" width="150">
            <template slot-scope="scope">
              <div v-if="!!scope.row.sampleCount">
                {{ scope.row.sampleCount }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="快递单号"
            align="center"
            prop="courierNumber"
            width="150"
            v-if="queryParams.collectSampleStatus == '4'"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.courierNumber">
                <div v-if="scope.row.collectSampleDesc == '单号异常'">
                  <span style="color: red">{{ scope.row.courierNumber }}</span>
                </div>
                <div v-else>{{ scope.row.courierNumber }}</div>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="单号更新时间"
            align="center"
            prop="courierNumberTime"
            width="150"
            v-if="queryParams.collectSampleStatus == '4'"
            sortable="custom"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.courierNumberTime">
                {{ scope.row.courierNumberTime | formatDate("yyyy-MM-dd HH:mm:ss") }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>

          <el-table-column
            label="达人单品出单量"
            align="center"
            prop="promoterOrderNum"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.promoterOrderNum">
                {{ scope.row.promoterOrderNum }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="达人出单量"
            align="center"
            prop="validOrderNum"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.validOrderNum">
                {{ scope.row.validOrderNum }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="达人出单金额"
            align="center"
            prop="validAmount"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.validAmount">
                {{ scope.row.validAmount ? allMoney(scope.row.validAmount / 100) : "" }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>

          <!-- <el-table-column label="领样人数" align="center" prop="sampleCount">
            <template slot-scope="scope">
              <div v-if="!!scope.row.sampleCount">
                {{ scope.row.sampleCount }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="领样份数" align="center" prop="sampleCount">
            <template slot-scope="scope">
              <div v-if="!!scope.row.sampleCount">
                {{ scope.row.sampleCount }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column> -->

          <el-table-column
            label="状态"
            align="center"
            prop="collectSampleStatus"
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.collectSampleStatus">
                {{ scope.row.collectSampleStatus | collectSampleStatusName }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            align="center"
            prop="collectSampleDesc"
            width="150"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  !!scope.row.collectSampleDesc &&
                  (scope.row.collectSampleStatus == 2 ||
                    scope.row.collectSampleStatus == 5 ||
                    scope.row.collectSampleStatus == 4 || scope.row.collectSampleStatus == 7)
                "
              >
                {{ scope.row.collectSampleDesc }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="150"
            sortable="custom"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.createTime">
                {{ scope.row.createTime }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>

          <el-table-column
            label="拒绝原因"
            align="center"
            prop="refuseDetail"
            v-if="queryParams.collectSampleStatus == 3"
          >
            <template slot-scope="scope">
              <div v-if="!!scope.row.refuseDetail">
                {{ scope.row.refuseDetail }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="250px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="okInfomation(scope.row)"
                v-if="
                  queryParams.collectSampleStatus == '1' &&
                  ($store.getters.roles[0] == 'admin' ||
                    $store.getters.roles[0] == 'supplyChainAdmin' ||
                    $store.getters.roles[0] == 'courtship' ||
                    $store.getters.roles[0] == 'courtshipManager')
                "
                :disabled="
                  $store.getters.roles[0] != 'admin' &&
                  $store.getters.roles[0] != 'supplyChainAdmin' &&
                  $store.getters.roles[0] != 'courtship' &&
                  $store.getters.roles[0] != 'courtshipManager'
                "
              >通过
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="
                  ids = scope.row.id;
                  refuseInfo = '';
                  refuseVisible = true;
                "
                v-if="
                  (queryParams.collectSampleStatus == '1' ||
                    queryParams.collectSampleStatus == '3') &&
                  ($store.getters.roles[0] == 'admin' ||
                    $store.getters.roles[0] == 'supplyChainAdmin' ||
                    $store.getters.roles[0] == 'courtship' ||
                    $store.getters.roles[0] == 'courtshipManager')
                "
              >拒绝
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="deleteInfomation(scope.row)"
                v-if="
                  queryParams.collectSampleStatus == '1' &&
                  scope.row.collectSampleId == $store.getters.userId
                "
              >作废
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click="handleAddbroadcast(scope.row)"
                v-if="queryParams.collectSampleStatus == '3'"
                :disabled="
                  $store.getters.roles[0] != 'admin' &&
                  $store.getters.roles[0] != 'supplyChainAdmin' &&
                  $store.getters.roles[0] != 'courtship' &&
                  $store.getters.roles[0] != 'courtshipManager'
                "
              >录入单号
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click="toUpdateTask(scope.row)"
                v-if="
                  queryParams.collectSampleStatus == '3' ||
                  queryParams.collectSampleStatus == '4'
                "
              >上传作业
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click="
                  workVisible = true;
                  noticeContent = '';
                  ids = scope.row.id;
                "
                v-if="queryParams.collectSampleStatus == '5'"
                :disabled="
                  $store.getters.roles[0] != 'admin' &&
                  $store.getters.roles[0] != 'supplyChainAdmin' &&
                  $store.getters.roles[0] != 'bdManager' &&
                  $store.getters.roles[0] != 'bd' &&
                  $store.getters.roles[0] != 'association' &&
                  $store.getters.roles[0] != 'associationManager'
                "
              >上传作业
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="
                  workLookVisible = true;
                  ids = scope.row.id;
                  showWork = scope.row.taskFileUrl;
                "
                :disabled="!scope.row.taskFileUrl"
                v-if="
                  queryParams.collectSampleStatus == '6' ||
                  queryParams.collectSampleStatus == '5'
                "
              >查看作业
              </el-button>

              <el-button
                size="mini"
                type="text"
                @click="copyInfomation(scope.row)"
                v-if="queryParams.collectSampleStatus == '3'"
              >复制
              </el-button>
              <el-button
                slot="reference"
                size="mini"
                type="text"
                style="margin-right: 5px"
                @click="updateKd(scope.row)"
                v-if="queryParams.collectSampleStatus == '4'"
                :disabled="
                  $store.getters.roles[0] != 'admin' &&
                  $store.getters.roles[0] != 'supplyChainAdmin' &&
                  $store.getters.roles[0] != 'courtship' &&
                  $store.getters.roles[0] != 'courtshipManager'
                "
              >修改单号
              </el-button>

              <el-popover
                placement="top"
                title=""
                trigger="hover"
                @show="courierNumberInfo(scope.row)"
              >
                <el-skeleton
                  style="width: 500px"
                  :loading="loadingCourierNumber"
                  animated
                >
                  <template slot="template">
                    <div style="padding: 14px">
                      <el-skeleton-item variant="h3" style="width: 50%"/>
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          justify-items: space-between;
                          margin-top: 16px;
                          height: 16px;
                        "
                      >
                        <el-skeleton-item variant="text" style="margin-right: 16px"/>
                        <el-skeleton-item variant="text" style="width: 30%"/>
                      </div>
                    </div>
                  </template>
                  <template>
                    <el-card v-if="courierInfo">
                      <div
                        style="width: 100%; max-height: 500px; overflow: auto"
                        class="item-name-calss dh-data"
                        v-if="
                          !!courierInfo.expressData && courierInfo.expressData.length > 0
                        "
                      >
                        <timeline :reverse="false">
                          <timeline-item
                            v-for="(activity, index) in courierInfo.expressData"
                            :key="index"
                            :timestamp="activity.ftime"
                          >
                            {{ activity.context }}
                          </timeline-item>
                        </timeline>
                      </div>
                      <div v-else>
                        <el-empty description="暂无数据"></el-empty>
                      </div>
                    </el-card>
                    <el-card v-else>
                      <el-empty description="暂无数据"></el-empty>
                    </el-card>
                  </template>
                </el-skeleton>
                <el-button
                  slot="reference"
                  size="mini"
                  type="text"
                  style="margin-right: 5px"
                  v-if="queryParams.collectSampleStatus == '4'"
                >物流详情
                </el-button>
              </el-popover>

              <el-button
                size="mini"
                style="margin-left: 5px"
                type="text"
                @click="toDetail(scope.row)"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 添加直播 -->
    <el-dialog
      title="录入订单"
      :visible.sync="openAllocation"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="formBroadcast"
        :model="formBroadcast"
        :rules="rulesBroadcast"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="选择快递公司" prop="companyCode">
          <el-select v-model="formBroadcast.companyCode" placeholder="请选择">
            <el-option
              v-for="item in superiorList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="courierNumber">
          <el-input
            placeholder="请输入快递单号"
            style="width: 240px"
            v-model.trim="formBroadcast.courierNumber"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormBroadcast" :loading="confirmLoading"
        >确 定
        </el-button>
        <el-button
          @click="
            confirmLoading = false;
            openAllocation = false;
            formBroadcast = {};
          "
        >取 消
        </el-button>
      </div>
    </el-dialog>

    <!-- 审核拒绝 -->
    <el-dialog
      title="拒绝原因"
      :visible.sync="refuseVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-input
        placeholder="请输入拒绝原因"
        style="width: 100%"
        type="textarea"
        :rows="2"
        v-model="refuseInfo"
      >
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRefuse" :loading="refuseLoading"
        >确 定
        </el-button>
        <el-button
          @click="
            refuseLoading = false;
            refuseVisible = false;
            refuseInfo = null;
          "
        >取 消
        </el-button>
      </div>
    </el-dialog>

    <!-- 上传作业 -->
    <el-dialog
      title="上传作业"
      :visible.sync="workVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <uploadEditor
        v-model="noticeContent"
        style="min-height: 100px"
        v-if="workVisible"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="workUpload" :loading="workLoading"
        >确 定
        </el-button>
        <el-button
          @click="
            workLoading = false;
            workVisible = false;
            noticeContent = '';
          "
        >取 消
        </el-button>
      </div>
    </el-dialog>

    <!-- 查看作业 -->
    <el-dialog
      title="查看作业"
      :visible.sync="workLookVisible"
      width="900px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div v-html="showWork" style="width: 100%; overflow: auto"></div>
      <el-dialog
        width="30%"
        title="拒绝原因"
        :visible.sync="innerVisible"
        append-to-body
        center
        :close-on-click-modal="false"
      >
        <el-input
          placeholder="请输入拒绝原因"
          style="width: 100%"
          type="textarea"
          :rows="2"
          v-model="innerInfo"
        >
        </el-input>
        <div
          slot="footer"
          class="dialog-footer"
          v-if="
            $store.getters.roles[0] == 'admin' ||
            $store.getters.roles[0] == 'supplyChainAdmin' ||
            $store.getters.roles[0] == 'courtship' ||
            $store.getters.roles[0] == 'courtshipManager'
          "
        >
          <el-button type="primary" @click="workReject" :loading="workLookLoading"
          >确 定
          </el-button>
          <el-button
            @click="
              innerVisible = false;
              innerInfo = null;
            "
          >取 消
          </el-button>
        </div>
      </el-dialog>
      <div
        slot="footer"
        class="dialog-footer"
        v-if="
          ($store.getters.roles[0] == 'admin' ||
            $store.getters.roles[0] == 'supplyChainAdmin' ||
            $store.getters.roles[0] == 'courtship' ||
            $store.getters.roles[0] == 'courtshipManager') &&
          queryParams.collectSampleStatus == '6'
        "
      >
        <el-button type="primary" @click="workLookUpload" :loading="workLookLoading"
        >通 过
        </el-button>
        <el-button
          @click="
            innerVisible = true;
            innerInfo = null;
          "
        >拒 绝
        </el-button>
      </div>
    </el-dialog>

    <!-- 查看凭证 -->
    <el-dialog
      title="查看凭证"
      :visible.sync="lookImageVisible"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
      @before-close="
        lookImageVisible = false;
        lookImage = undefined;
      "
    >
      <div v-if="!!lookImage" style="display: flex; justify-content: flex-start; flex-flow:row wrap">
        <div
          v-for="(item, index) in lookImage.split(',')"
          :key="index"
          style="width: 200px; height: 200px; margin-right: 20px; margin-top: 20px"
        >
          <el-image
            style="width: 100%; height: 100%"
            :src="item"
            :preview-src-list="lookImage.split(',')"
          >
          </el-image>
        </div>
      </div>
    </el-dialog>
    <!-- 上传作业 -->
    <el-dialog
      title="领样换绑"
      :visible.sync="editUserIdVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="formUser"
        :model="formUser"
        :rules="formUserRules"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="选择人员" prop="userData">
          <el-select
            v-model="formUser.userData"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="item in userList"
              :key="item.code"
              :label="item.userName"
              :value="item.userId + '@' + item.userName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormUser" :loading="confirmLoading"
        >确 定
        </el-button>
        <el-button
          @click="
            confirmLoading = false;
            editUserIdVisible = false;
            formUser = {};
          "
        >取 消
        </el-button>
      </div>
    </el-dialog>

    <!-- 上传作业 -->
    <el-dialog
      title="上传"
      :visible.sync="voucherVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <uploadCvImageVue ref="fileUpload" :multiple="true"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="voucherUpload" :loading="workLoading"
        >确 定
        </el-button
        >
        <el-button
          @click="
            workLoading = false;
            voucherVisible = false;
            noticeContent = '';
            $refs.fileUpload.fileList = [];
          "
        >取 消
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import { refreshCache } from "@/api/system/dict/type";
  import uploadEditor from "./uploadEditor.vue";
  import {downFilePost} from "@/api/supplyChain/supplyChain";
  import Timeline from "./timeline/index.js";
  import TimelineItem from "./timeline-item/index.js";
  import uploadCvImageVue from "./uploadCvImage.vue";
  import {
    getCity,
    checkItem,
    editPreview,
    getList,
    getCompany,
    getPromoterInfo,
    copyInfo,
    courierNumberInfo,
    removePreview,
    updateCourierNumber,
    toUpdateTask,
    batchProcess,
    updatePreview,
    getUserList,
  } from "@/api/goodsManagement/goods";
  import {getSupplyChainUserList} from "@/api/supplyChain/supplyChain";
  import {getSupplyChainCourtshipList} from "@/api/supplyChain/supplyChain";
  import selectTree from "./selectTree.vue";

  export default {
    name: "SamplingList",
    components: {
      selectTree,
      uploadEditor,
      Timeline,
      TimelineItem,
      uploadCvImageVue,
    },
    data() {
      return {
        editUserIdVisible: false,
        userList: [],
        lookImageVisible: false,
        voucherVisible: false,
        lookImage: undefined,
        noticeContent: "",
        workVisible: false,
        workLookVisible: false,
        innerVisible: false,
        innerInfo: null,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: null,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 字典表格数据
        typeList: [],
        //上传文件类型
        fileType: [".doc", ".xls", ".xlsx", ".ppt", ".pdf", ".csv"],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openFp: false,
        formFp: {},
        // 是否可编辑
        edit: false,
        // 分配销售
        openAllocation: false,
        // 选择的销售id
        saleId: undefined,
        // 销售列表
        saleList: [],
        // 分配销售确定loading
        confirmLoadingSale: false,
        // 日期范围
        dateRange: [],
        superiorList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          itemTitle: undefined,
          itemId: undefined,
          promoterNickName: undefined,
          promoterId: undefined,
          collectSampleStatus: "",
          promoterPhone: undefined,
          consignee: undefined,
          itemCreateId: undefined,
          collectSampleId: undefined,
          courierNumber: undefined,
          collectSampleDesc: undefined,
        },
        //页面所有的下拉数据
        queryParamsList: {
          tagList: [
            {value: "", label: "全部"},
            {value: "1", label: "待审核"},
            {value: "3", label: "待录入单号"},
            {value: "4", label: "已发货"},
            {value: "5", label: "待上传作业"},
            {value: "6", label: "待审核作业"},
            {value: "2", label: "审核拒绝"},
            {value: "7", label: "审核通过"},
          ],
          personList: [],
          courtshipList: [],
          mediaList: [
            {value: 2, label: "快手"},
            {value: 1, label: "抖音"},
          ],
        },

        collectSampleDescList: {
          descList: [
            {value: "商品已发货", label: "商品已发货"},
            {value: "单号异常", label: "单号异常"},
            {value: "快递推送订阅成功", label: "快递推送订阅成功"},
          ],
        },

        // 表单参数
        form: {},
        formUserRules: {
          userData: {
            required: true,
            message: "人员必选",
            trigger: "change",
          },
        },
        formUser: {},
        formBroadcast: {},
        //上传报表下拉数据
        formList: {},
        fileList: [],
        accept: "",
        //获取销售线索文件流
        dateFile: new FormData(),
        //销售线索上传loading
        confirmLoading: false,
        // 表单校验
        rules: {},
        rulesBroadcast: {
          companyCode: {
            required: true,
            message: "快递公司必选",
            trigger: "change",
          },
          courierNumber: {
            required: true,
            message: "快递单号必填",
            trigger: "blur",
          },
        },
        // 分配销售展示列表
        ksInfo: null,
        userId: null,
        refuseVisible: false,
        refuseLoading: false,
        workLoading: false,
        workLookLoading: false,
        showWork: null,
        refuseInfo: null,
        itemId: null,
        promoterInfo: null,
        loadingPromoterInfo: true,
        loadingCourierNumber: true,
        courierInfo: null,
        okIds: [],
        updateCourierNumberType: false,
        prop: "t1.create_time",
        sort: "desc",
      };
    },
    activated() {
      this.$nextTick(() => {
        // if (this.$route && this.$route.query.promoterId) {
        //   this.$set(this.queryParams, "promoterId", this.$route.query.promoterId);
        // } else {
        //   this.$set(this.queryParams, "promoterId", undefined);
        // }
        this.getPersonList();
        if (localStorage.getItem("samplingType")) {
          this.$set(
            this.queryParams,
            "collectSampleStatus",
            localStorage.getItem("samplingType")
          );
        } else {
          // this.queryParams.collectSampleStatus = "1";
        }
        this.getList();
      });
    },
    created() {
      this.userId = this.$store.getters.userId;
      this.getPersonList();
      if (this.$route && this.$route.query.promoterId) {
        this.$set(this.queryParams, "promoterId", this.$route.query.promoterId);
      } else {
        this.$set(this.queryParams, "promoterId", undefined);
      }
      this.$nextTick(() => {
        if (localStorage.getItem("samplingType")) {
          this.$set(
            this.queryParams,
            "collectSampleStatus",
            localStorage.getItem("samplingType")
          );
        } else {
          // this.queryParams.collectSampleStatus = "1";
        }
        this.getList();
      });
    },
    filters: {
      activityItemStatusName(status) {
        const statusMap = {
          1: "待审核",
          2: "已上架",
          3: "审核失败（拒绝）",
          4: "活动结束",
          5: "失效",
        };
        return statusMap[status];
      },
      mediaStatusName(status) {
        const mediaMap = {
          1: "抖音",
          2: "快手",
        };
        return mediaMap[status];
      },

      collectSampleStatusName(value) {
        let name = {
          1: "待审核",
          2: "领样申请审核拒绝",
          3: "待录入订单号",
          4: "已发货",
          5: "已签收待上传作业",
          6: "待招商审核",
          7: "审核通过",
        };
        return name[value];
      },
      formatDate: function (value, args) {
        var dt = new Date(value);
        if (args == "yyyy-M-d") {
          // yyyy-M-d
          let year = dt.getFullYear();
          let month = dt.getMonth() + 1;
          let date = dt.getDate();
          return `${year}-${month}-${date}`;
        } else if (args == "yyyy-M-d H:m:s") {
          // yyyy-M-d H:m:s
          let year = dt.getFullYear();
          let month = dt.getMonth() + 1;
          let date = dt.getDate();
          let hour = dt.getHours();
          let minute = dt.getMinutes();
          let second = dt.getSeconds();
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        } else if (args == "yyyy-MM-dd") {
          // yyyy-MM-dd
          let year = dt.getFullYear();
          let month = (dt.getMonth() + 1).toString().padStart(2, "0");
          let date = dt.getDate().toString().padStart(2, "0");
          return `${year}-${month}-${date}`;
        } else {
          // yyyy-MM-dd HH:mm:ss
          let year = dt.getFullYear();
          let month = (dt.getMonth() + 1).toString().padStart(2, "0");
          let date = dt.getDate().toString().padStart(2, "0");
          let hour = dt.getHours().toString().padStart(2, "0");
          let minute = dt.getMinutes().toString().padStart(2, "0");
          let second = dt.getSeconds().toString().padStart(2, "0");
          return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        }
      },
    },
    methods: {
      getUserList(item) {
        getUserList({userId: this.userId})
          .then((res) => {
            this.editUserIdVisible = true;
            this.userList = res.data;
            this.ids = item.id;
          })
          .catch(() => {
          });
      },
      submitFormUser() {
        this.$refs["formUser"].validate((valid) => {
          if (valid) {
            this.confirmLoading = true;
            let params = {};
            params.collectSampleId = this.formUser.userData.split("@")[0];
            params.collectSampleName = this.formUser.userData.split("@")[1];
            params.id = this.ids;
            updatePreview(params).then((res) => {
              this.confirmLoading = false;
              this.editUserIdVisible = false;
              this.formUser = {};
              this.getList();
              this.$modal.msgSuccess("修改成功");
            });
          }
        });
      },
      sortChange(col, prop, order) {
        this.prop =
          col.prop == "createTime"
            ? "t1.create_time"
            : col.prop == "courierNumberTime"
            ? "t1.courier_number_time"
            : "";
        this.sort = !!col.order ? (col.order == "descending" ? "desc" : "asc") : "desc";
        this.handleQuery();
      },
      toIndexDetails(item) {
        let end = new Date();

        let y = end.getFullYear();
        let MM = end.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let dd = end.getDate();
        dd = dd < 10 ? "0" + dd : dd;
        this.$router.replace({
          path: "/supplyChain/indexDetails",
          query: {
            id: item.promoterId,
            name: item.promoterNickName,
            orderStartDate: `${y}-${MM}-${dd}`,
            orderEndDate: `${y}-${MM}-${dd}`,
          },
        });
      },
      getRowKeys(row) {
        return row.id;
      },
      batchProcess() {
        if (this.okIds.length > 0) {
          batchProcess({
            ids: this.okIds,
            status: 3,
            userId: this.$store.getters.userId,
            userName: this.$store.getters.name,
          }).then((res) => {
            this.okIds = [];
            this.handleQuery();
            this.$message.success(res.message);
          });
        } else {
          this.$message.error("请选择领样");
        }
      },

      batchProcessAssignment() {
        if (this.okIds.length > 0) {
          batchProcess({
            ids: this.okIds,
            status: 7,
            userId: this.$store.getters.userId,
            userName: this.$store.getters.name,
          }).then((res) => {
            this.okIds = [];
            this.handleQuery();
            this.$message.success(res.message);
          });
        } else {
          this.$message.error("请选择领样");
        }
      },

      getPersonList() {
        getSupplyChainUserList().then((response) => {
          this.queryParamsList.personList = response.rows;
        });
        getSupplyChainCourtshipList().then((response) => {
          this.queryParamsList.courtshipList = response.rows;
        });
      },
      handleSelectionChange(selection) {
        this.okIds = selection.map((item) => item.id);
      },
      copyInfomation(item) {
        copyInfo({promoterId: item.promoterId}).then((res) => {
          if (navigator.clipboard && window.isSecureContext) {
            //           粉丝量: ${res.data.fansNumber}
            // 总销售额: ${res.data.totalSale}
            navigator.clipboard
              .writeText(
                `
商品标题: ${item.itemTitle}
领样备注: ${item.sampleRequirement}
快手ID: ${item.promoterId}
快手昵称: ${item.promoterNickName}
收件人: ${item.consignee}
手机号: ${item.promoterPhone}
地址: ${item.promoterAddress}
`
              )
              .then(() => {
                this.$message.success("复制成功");
              })
              .catch((err) => {
                this.$message.error("复制失败");
              });
          } else {
            // 创建text area
            const textArea = document.createElement("textarea");
            textArea.value = `
商品标题: ${item.itemTitle}
领样备注: ${item.sampleRequirement}
快手ID: ${item.promoterId}
快手昵称: ${item.promoterNickName}
收件人: ${item.consignee}
手机号: ${item.promoterPhone}
地址: ${item.promoterAddress}
`;
            // 使text area不在viewport，同时设置不可见
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            return new Promise((resolve, reject) => {
              // 执行复制命令并移除文本框
              document.execCommand("copy") ? resolve() : reject(new Error("出错了"));
              textArea.remove();
            }).then(
              () => {
                this.$message.success("复制成功");
              },
              () => {
                this.$message.error("复制失败");
              }
            );
          }
        });
      },
      toDetail(item) {
        localStorage.setItem("samplingType", this.queryParams.collectSampleStatus);
        this.$router.replace({
          path: "/goodsManagement/detail",
          query: {
            id: item.id,
          },
        });
      },
      getPromoterInfo(item) {
        this.loadingPromoterInfo = true;
        getPromoterInfo({promoterId: item.promoterId}).then((res) => {
          if (res.code == 200) {
            this.promoterInfo = res.data;
            this.loadingPromoterInfo = false;
          }
        });
      },
      updateKd(item) {
        this.$nextTick(() => {
          this.ids = item.id;
          this.openAllocation = true;
          this.updateCourierNumberType = true;
          getCompany().then((res) => {
            this.superiorList = res;
          });
        });
      },
      courierNumberInfo(item) {
        this.loadingCourierNumber = true;
        courierNumberInfo({courierNumber: item.courierNumber}).then((res) => {
          if (res.code == 0) {
            this.courierInfo = res.data
              ? {
                ...res.data,
                expressData: JSON.parse(res.data.expressData),
              }
              : null;
            this.loadingCourierNumber = false;
          }
        });
      },
      workReject() {
        if (!!this.innerInfo) {
          var params = {};
          params.id = this.ids;
          params.collectSampleStatus = 5;
          params.collectSampleDesc = this.innerInfo;
          params.userId = this.$store.getters.userId;
          params.userName = this.$store.getters.name;
          editPreview(params)
            .then((res) => {
              this.innerVisible = false;
              this.innerInfo = null;
              this.workLookVisible = false;
              this.showWork = null;
              this.getList();
              this.$modal.msgSuccess("已拒绝");
            })
            .catch(() => {
              this.$message.error("失败");
            });
        } else {
          this.$message.error("请填写拒绝理由");
        }
      },
      workLookUpload() {
        var params = {};
        params.id = this.ids;
        params.collectSampleStatus = 7;
        params.userId = this.$store.getters.userId;
        params.userName = this.$store.getters.name;
        editPreview(params)
          .then((res) => {
            this.innerVisible = false;
            this.innerInfo = null;
            this.workLookVisible = false;
            this.showWork = null;
            this.getList();
            this.$modal.msgSuccess("审核通过");
          })
          .catch(() => {
            this.$message.error("失败");
          });
      },
      voucherUpload() {
        this.workLoading = true;
        updatePreview({
          id: this.ids,
          sampleVoucherStatus: 2,
          sampleVoucher: this.$refs.fileUpload.fileList
            .map((item) => {
              return item.url;
            })
            .join(),
        })
          .then((res) => {
            this.$refs.fileUpload.fileList = [];
            this.voucherVisible = false;
            this.workLoading = false;
            this.getList();
            this.$modal.msgSuccess("上传成功");
          })
          .catch(() => {
            this.$message.error("失败");
          });
      },

      workUpload() {
        this.workLoading = true;
        if (!!this.noticeContent) {
          var params = {};
          params.id = this.ids;
          params.taskFileUrl = this.noticeContent;
          params.userId = this.$store.getters.userId;
          params.userName = this.$store.getters.name;
          editPreview(params)
            .then((res) => {
              this.workLoading = false;
              this.workVisible = false;
              this.getList();
              this.$modal.msgSuccess("上传成功");
            })
            .catch(() => {
              this.$message.error("失败");
            });
        } else {
          this.$message.error("请上传作业");
        }
      },
      submitRefuse(item) {
        this.refuseLoading = true;
        if (!!this.refuseInfo) {
          var params = {};
          params.id = this.ids;
          params.collectSampleStatus = 2;
          params.collectSampleDesc = this.refuseInfo;
          params.userId = this.$store.getters.userId;
          params.userName = this.$store.getters.name;
          editPreview(params)
            .then((res) => {
              this.refuseLoading = false;
              this.refuseVisible = false;
              this.getList();
              this.$modal.msgSuccess("已拒绝");
            })
            .catch(() => {
              this.$message.error("失败");
            });
        } else {
          this.$message.error("请填写拒绝理由");
        }
      },
      deleteInfomation(item) {
        this.$modal
          .confirm(`请确认是否作废该领样？`)
          .then(() => {
            var params = {};
            params.id = item.id;
            removePreview(params)
              .then((res) => {
                this.getList();
                this.$modal.msgSuccess("作废成功");
              })
              .catch(() => {
                this.$message.error("失败");
              });
          })
          .catch(() => {
          });
      },
      toUpdateTask(item) {
        this.$modal.confirm(`请确认是否提交至待上传作业？`).then(() => {
          var params = {};
          params.id = item.id;
          params.collectSampleStatus = 5;
          params.userId = this.$store.getters.userId;
          params.userName = this.$store.getters.name;
          editPreview(params)
            .then((res) => {
              this.getList();
              this.$modal.msgSuccess("审核通过");
            })
            .catch(() => {
              this.$message.error("失败");
            });
        });
      },
      okInfomation(item) {
        this.$modal
          .confirm(`请确认是否审核通过该领样？`)
          .then(() => {
            var params = {};
            params.id = item.id;
            params.collectSampleStatus = 3;
            params.userId = this.$store.getters.userId;
            params.userName = this.$store.getters.name;
            editPreview(params)
              .then((res) => {
                this.getList();
                this.$modal.msgSuccess("审核通过");
              })
              .catch(() => {
                this.$message.error("失败");
              });
          })
          .catch(() => {
          });
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{name: "region"}]);
        }
        if (node.level > 1) return resolve([]);

        console.log(node);
        getCity({province: node.data.id}).then((res) => {
          const data = res.map((item) => {
            return {
              id: item,
              name: item,
            };
          });
          resolve(data);
        });
        //   setTimeout(() => {
        //     const data = [
        //       {
        //         name: "leaf",
        //         leaf: true,
        //       },
        //       {
        //         name: "zone",
        //       },
        //     ];

        //     resolve(data);
        //   }, 500);
      },
      handleNodeClick(val) {
        console.log(val);
        this.$set(this.formBroadcast, "postArea", val.id);
        this.$set(this.formBroadcast, "postAreaName", val.name);
        if (!val.children || val.children.length == 0) {
          this.$refs.selectReport.blur();
        }
      },
      handleClick() {
        this.queryParams.pageNum = 1;
        this.queryParams.consignee = undefined;
        this.prop = "t1.create_time";
        this.sort = "desc";
        this.getList();
      },
      /** 查询字典类型列表 */
      getList() {
        this.loading = true;

        getList({
          userId: this.userId,
          ...this.queryParams,
          collectSampleStatus:
            this.queryParams.collectSampleStatus == 0
              ? ""
              : this.queryParams.collectSampleStatus,
          fieId: this.prop,
          sort: this.sort,
        }).then((response) => {
          this.typeList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.confirmLoading = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.dateFile = null;
        this.resetForm("formBroadcast");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.queryParams.consignee = undefined;
        this.queryParams.courierNumber = undefined;
        this.queryParams.collectSampleDesc = undefined;
        this.queryParams.mediaId = undefined;
        this.handleQuery();
      },
      addNew() {
        if (this.okIds.length > 0) {
          downFilePost("/itemCollectSamples/exportCollectSamples", {
            ids: this.okIds,
          }).then((res) => {
            let blob = new Blob([res], {
              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            });
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = "领样详情.xlsx"; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          });
        } else {
          this.$message.error("请选择领样");
        }
      },
      /** 编辑地址 新增达人*/
      handleAddbroadcast(item) {
        this.$nextTick(() => {
          this.ids = item.id;
          this.openAllocation = true;
          this.updateCourierNumberType = false;
          getCompany().then((res) => {
            this.superiorList = res;
          });
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
      },
      /** 新增直播确定按钮 */
      submitFormBroadcast: function () {
        this.$refs["formBroadcast"].validate((valid) => {
          if (valid) {
            this.confirmLoading = true;
            var params = {...this.formBroadcast};
            params.id = this.ids;
            // params.userId = this.$store.getters.userId;
            // params.userName = this.$store.getters.name;
            if (this.updateCourierNumberType) {
              updateCourierNumber(params)
                .then((res) => {
                  this.confirmLoading = false;
                  this.openAllocation = false;
                  this.formBroadcast = {};
                  this.getList();
                  this.$modal.msgSuccess("修改成功");
                })
                .catch(() => {
                  this.confirmLoading = false;
                  this.$message.error("失败");
                });
            } else {
              editPreview(params)
                .then((res) => {
                  this.confirmLoading = false;
                  this.openAllocation = false;
                  this.formBroadcast = {};
                  this.getList();
                  this.$modal.msgSuccess("修改成功");
                })
                .catch(() => {
                  this.confirmLoading = false;
                  this.$message.error("失败");
                });
            }
          }
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            var fileList = this.$refs.fileUploadDialog.fileList;
            var dapanUrls = this.$refs.fileUpload.fileList;
            var portraitUrls = this.$refs.fileUploadFx.fileList;
            if (fileList.length == 0 && dapanUrls.length == 0 && portraitUrls.length == 0) {
              this.$message.error("直播数据,数据大盘,画像分析必须最少上传一项");
              return;
            } else {
              this.confirmLoading = true;
              let formData = new FormData();
              this.ids;
              formData.append("id", this.ids);
              formData.append("actualGmv", this.delcommafy(this.form.actualGmv));
              formData.append(
                "dapanUrls",
                JSON.stringify(
                  dapanUrls.map((item) => {
                    return item.url;
                  })
                )
              );
              formData.append(
                "portraitUrls",
                JSON.stringify(
                  portraitUrls.map((item) => {
                    return item.url;
                  })
                )
              );
              fileList.forEach((file) => formData.append("files", file.raw));
              dataUpload(formData)
                .then((res) => {
                  this.confirmLoading = false;
                  this.$message.success("上传成功");
                  this.open = false;
                  this.ids = null;
                  this.cancel();
                  this.handleQuery();
                })
                .catch((err) => {
                  this.confirmLoading = false;
                });
            }
            console.log(fileList, dapanUrls, portraitUrls);
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .p-title {
    width: 100%;
    font-size: 10px;
    color: darkgray;
    font-weight: bold;
    text-align: center;
  }

  .p-main {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 16px;
    margin: 20px 0 10px 0;
  }

  .entire-line {
    width: 100%;

    ::v-deep .el-form-item__content {
      width: 60%;
    }
  }

  ::v-deep .el-form-item__label {
    white-space: nowrap;
  }
</style>
<style scoped lang="scss">
  ::v-deep a {
    color: #409eff;
    display: block;
    text-align: left;
  }

  .item-name-calss p {
    margin: 0;
    text-align: left;
  }

  .tableBox {
    width: 100%;
  }

  ::v-deep .el-tabs__content {
    overflow: initial;
  }

  .show-main {
    display: flex;
    width: 100%;
    justify-content: space-around;
  }
</style>
