<!-- @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="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.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="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>
        <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-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="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
                >
              </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">
                {{ scope.row.courierNumber }}
              </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.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'"
                >上传作业</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="500px"
      append-to-body
      :close-on-click-modal="false"
      @before-close="
        lookImageVisible = false;
        lookImage = undefined;
      "
    >
      <img :src="lookImage" style="width: 100%; height: auto" alt="" />
    </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>
  </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 {
  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 selectTree from "./selectTree.vue";
export default {
  name: "SamplingList",
  components: {
    selectTree,
    uploadEditor,
    Timeline,
    TimelineItem,
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (!!value && !this.edit) {
        checkItem({ itemId: value }).then((res) => {
          if (res.message == "true") {
            callback();
          } else {
            callback(new Error(res.message));
          }
        });
      } else {
        callback();
      }
    };
    return {
      editUserIdVisible: false,
      userList: [],
      lookImageVisible: 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,
      },
      //页面所有的下拉数据
      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: [],
      },
      // 表单参数
      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];
    },
    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("请选择领样");
      }
    },
    getPersonList() {
      getSupplyChainUserList().then((response) => {
        this.queryParamsList.personList = 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("失败");
        });
    },
    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.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>
