<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="绑定人" prop="bdUserId"
                    v-if=" this.$store.getters.roles[0] == 'supplyChainAdmin'  || this.$store.getters.roles[0] == 'admin' ||this.$store.getters.roles[0] == 'bdManager'">
        <el-select
          filterable
          v-model="queryParams.bdUserId"
          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="达人ID" prop="promoterId">
        <el-input
          placeholder="请输入达人ID"
          style="width: 240px"
          v-model.number="queryParams.promoterId"
        >
        </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="地址筛选" prop="searchPhone">
        <el-select
          filterable
          v-model="queryParams.searchPhone"
          placeholder="筛选地址"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.searchList"
            :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"
          :disabled="
            $store.getters.roles[0] == 'courtship' ||
            $store.getters.roles[0] == 'courtshipManager'
          "
        >新增达人
        </el-button
        >
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="typeList"
      ref="multipleTable"
      @sort-change="sortChange"
    >
      <el-table-column
        label="达人名称"
        align="center"
        prop="promoterNickName"
        width="300"
      >
        <template slot-scope="scope">
          <div style="display: flex; width: 100%">
            <div style="width: 40%">
              <img
                :src="scope.row.promoterUrl"
                alt=""
                style="width: 70px; height: auto"
              />
            </div>
            <div style="width: 60%" class="item-name-calss">
              <a
                @click="toIndexDetail(scope.row)"
                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>
        </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="ruleName"
        width="150"
      >
        <template slot-scope="scope">
          <div>
            <el-button
              v-if="!!scope.row.imageUrl"
              size="mini"
              type="text"
              @click="
                    lookImageVisible = true;
                    lookImage = scope.row.imageUrl;
                  "

            >查看截图
            </el-button>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleAddbroadcast(scope.row)"
              :disabled="
              $store.getters.roles[0] == 'courtship' ||
              $store.getters.roles[0] == 'courtshipManager'
            "
            >修改地址
            </el-button>
          </div>
        </template>
      </el-table-column>


      <el-table-column label="粉丝数" align="center" prop="fansNumber" width="100px">
      </el-table-column>

      <el-table-column
        label="单视频销售额"
        align="center"
        prop="avgVideoSales"
        sortable="custom"
        width="150px"
      >
        <template slot-scope="scope">
          <div v-if="!!scope.row.avgVideoSales">
            {{ scope.row.avgVideoSales }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        label="短视频销售额"
        align="center"
        prop="videoSales"
        sortable="custom"
        width="150px"
      >
        <template slot-scope="scope">
          <div v-if="!!scope.row.videoSales">
            {{ scope.row.videoSales }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        label="睿选近30日gmv"
        align="center"
        prop="monthDayGmv"
        sortable="custom"
        width="150px"
      >
        <template slot-scope="scope">
          <div v-if="!!scope.row.monthDayGmv">
            {{ allMoney(scope.row.monthDayGmv / 100) }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        label="睿选近30日出单量"
        align="center"
        prop="monthDayOrderNum"
        sortable="custom"
        width="150px"
      >
        <template slot-scope="scope">
          <div v-if="!!scope.row.monthDayOrderNum">
            {{ scope.row.monthDayOrderNum }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column
        label="总销售额"
        align="center"
        prop="totalSale"
        width="150px"
        sortable="custom"
      >
        <template slot-scope="scope">
          <div v-if="!!scope.row.totalSale">
            {{ scope.row.totalSale }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="所属渠道" align="center" prop="userName" width="150px">
        <template slot-scope="scope">
          <div v-if="!!scope.row.userName">
            {{ scope.row.userName }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="绑定时间" align="center" prop="createTime" width="160px">
        <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="commissionRequirement"
        width="150px"
      >
        <template slot-scope="scope">
          <div v-if="!!scope.row.commissionRequirement">
            {{ scope.row.commissionRequirement }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="标签" align="center" prop="labels" width="200px">
        <template slot-scope="scope">
          <div v-if="!!scope.row.labels && scope.row.labels.length > 0">
            <!-- {{
              scope.row.labels
                .map((item) => {
                  return item.labelName;
                })
                .join()
            }} -->
            <el-tag
              v-for="(item, index) in scope.row.labels"
              :key="index"
              style="margin: 5px; color: black"
              :color="'#' + item.labelColour"
            >{{ item.labelName }}
            </el-tag
            >
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        label="跟进记录"
        align="center"
        prop="followUpRecord"
        width="200px"
      >
        <template slot-scope="scope">
          <div
            v-if="!!scope.row.followUpRecord"
            style="
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 100%;
            "
          >
            {{ scope.row.followUpRecord }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="250px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAddbroadcast(scope.row)"
            :disabled="
              $store.getters.roles[0] == 'courtship' ||
              $store.getters.roles[0] == 'courtshipManager'
            "
          >修改地址
          </el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-if="$store.getters.roles[0] == 'bdManager' || $store.getters.roles[0] == 'admin' || $store.getters.roles[0] == 'supplyChainAdmin' || userId == scope.row.userId"

          >删除
          </el-button>
          <el-button
            v-if=" $store.getters.userId == 1  || $store.getters.userId == 60252 || $store.getters.userId == 630127 || $store.getters.userId == 810128 "
            size="mini"
            type="text"
            @click="changeBind(scope.row)"
          >换绑
          </el-button>
          <el-button size="mini" type="text" @click="copyInfomation(scope.row)"
          >复制
          </el-button
          >
          <el-button
            size="mini"
            type="text"
            :disabled="userId != scope.row.userId"
            @click="whiteLog(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-dialog
      :title="!!ids ? '修改地址' : '新增达人'"
      :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"
      >
        <div v-if="!ids">
          <el-form-item label="创建人" prop="userName" style="width: 100%">
            {{ $store.getters.name }}
          </el-form-item>
          <el-form-item label="选择媒体" prop="mediaId" class="entire-line" style="width: 100%">
            <el-radio-group v-model="mediaId">
              <el-radio-button label="2">快手</el-radio-button>
              <el-radio-button label="1">抖音</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="达人ID"
            prop="promoterId"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="请输入达人ID"
              style="width: 240px"
              v-model="formBroadcast.promoterId"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="佣金要求"
            prop="commissionRequirement"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="请输入佣金要求"
              style="width: 240px"
              v-model="formBroadcast.commissionRequirement"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="品类要求"
            prop="categoryRequirement"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="请输入品类要求"
              style="width: 240px"
              v-model="formBroadcast.categoryRequirement"
            >
            </el-input>
          </el-form-item>

          <el-tabs v-model="tabName" @tab-click="handleClick">
            <el-tab-pane label="用户信息" name="1"></el-tab-pane>
            <el-tab-pane label="上传截图" name="2"></el-tab-pane>
          </el-tabs>

          <div v-if="tabName == '1'">
            <el-form-item
              label="收货人"
              prop="consignee"
              style="width: 100%"
              class="entire-line"
            >
              <el-input
                placeholder="请输入收货人"
                style="width: 240px"
                v-model="formBroadcast.consignee"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="联系方式"
              prop="phone"
              style="width: 100%"
              class="entire-line"
            >
              <el-input
                placeholder="请输入联系方式"
                style="width: 240px"
                v-model="formBroadcast.phone"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="发货地址"
              prop="promoterAddress"
              style="width: 100%"
              class="entire-line"
            >
              <el-input
                placeholder="请输入发货地址"
                style="width: 100%"
                type="textarea"
                :rows="2"
                v-model="formBroadcast.promoterAddress"
              >
              </el-input>
            </el-form-item>
          </div>


          <div v-if="tabName == '2'">
            <el-form-item
              label="上传截图"
              prop="promoterAddress"
              style="width: 100%"
              class="entire-line"
            >
              <uploadCvImageVue ref="fileUpload" :multiple="true"/>
            </el-form-item>

          </div>
        </div>
        <div v-else>
          <el-form-item label="达人名称" prop="promoterNickName" style="width: 100%">
            {{ formBroadcast.promoterNickName }}({{ formBroadcast.promoterId }})
          </el-form-item>
          <el-form-item
            label="收货人"
            prop="consignee"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="请输入收货人"
              style="width: 240px"
              v-model="formBroadcast.consignee"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="联系方式"
            prop="phone"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="请输入联系方式"
              style="width: 240px"
              v-model="formBroadcast.phone"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="发货地址"
            prop="promoterAddress"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="请输入发货地址"
              style="width: 100%"
              type="textarea"
              :rows="2"
              v-model="formBroadcast.promoterAddress"
            >
            </el-input>
          </el-form-item>
        </div>
      </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="!!ids ? '换绑' : '换绑'"
      :visible.sync="openChangeBind"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="bindFormBroadcast"
        :model="bindFormBroadcast"
        label-width="100px"
        :inline="true"
      >

        <div>
          <el-form-item
            label="达人ID"
            prop="promoterId"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="达人ID"
              style="width: 240px"
              v-model="bindFormBroadcast.promoterId"
            >
            </el-input>
          </el-form-item>

          <el-form-item
            label="达人名称"
            prop="promoterId"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="达人名称"
              style="width: 240px"
              v-model="bindFormBroadcast.promoterNickName"
            >
            </el-input>
          </el-form-item>

          <el-form-item
            label="绑定人"
            prop="userName"
            style="width: 100%"
            class="entire-line"
          >
            <el-input
              placeholder="绑定人"
              style="width: 240px"
              v-model="bindFormBroadcast.userName"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="换绑人"
            prop="bdUserId"
            style="width: 100%"
            class="entire-line"
          >
            <el-select
              filterable
              v-model="bindFormBroadcast.bdUserId"
              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>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBindFormBroadcast" :loading="confirmLoading"
        >确 定
        </el-button
        >
        <el-button
          @click="
            confirmLoading = false;
            openChangeBind= false;
            bindFormBroadcast = {};
          "
        >取 消
        </el-button
        >
      </div>
    </el-dialog>


    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="text">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
        <el-button
          @click="
            loading = false;
            open = false;
            text = undefined;
          "
        >取 消
        </el-button
        >
      </div>
    </el-dialog>
    <!-- 结算规则列表 -->
    <el-dialog title="结算规则" :visible.sync="ruleVisible" width="800px">
      <el-table :data="ruleList" style="width: 100%">
        <el-table-column label="序号" align="center" prop="sortCount"></el-table-column>
        <el-table-column
          label="起始单数"
          align="center"
          prop="startItemCount"
        ></el-table-column>
        <el-table-column
          label="结束单数"
          align="center"
          prop="endItemCount"
        ></el-table-column>
        <el-table-column
          label="主播奖励金额"
          align="center"
          prop="anchorAmount"
        ></el-table-column>
        <el-table-column
          label="推荐人奖励金额"
          align="center"
          prop="referenceAmount"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 编辑/绑定结算规则 -->
    <el-dialog title="编辑/绑定结算规则" :visible.sync="ruleEditVisible" width="500px">
      <el-form
        ref="formRuleEdit"
        :model="formRuleEdit"
        :rules="ruleEdit"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="结算规则" prop="ruleId">
          <el-select
            filterable
            v-model="formRuleEdit.ruleId"
            placeholder="请选择规则"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in ruleInfo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRuleEdit" :loading="confirmLoading"
        >确 定
        </el-button>
        <el-button
          @click="
            confirmLoading = false;
            ruleEditVisible = false;
            formRuleEdit = {};
          "
        >取 消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="查看截图"
      :visible.sync="lookImageVisible"
      width="800px"
      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>

  </div>
</template>

<script>
import {refreshCache} from "@/api/system/dict/type";
import {
  getPromoterList,
  addPromoter,
  editPromoter,
  editBindUser,
  deleteById,
  getPromoterRuleList,
  getRuleDetailByRuleId,
  addRule,
} from "@/api/promoter/promoter";
import {addFollowUpRecords} from "@/api/label";
import {join} from "path";
import {getSupplyChainUserList} from "@/api/supplyChain/supplyChain";
import uploadCvImageVue from "@/views/goodsManagement/uploadCvImage.vue";

export default {
  name: "account-list",
  components: {uploadCvImageVue},
  data() {
    let validatePhone = (rule, value, callback) => {
      if (this.tabName == '2') {
        callback();
      }
      if (!value) {
        callback(new Error("联系方式不能为空！"));
      }
      //使用正则表达式进行验证手机号码
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机号不正确！"));
      }
      callback();
    };


    let validatPromoterAddress = (rule, value, callback) => {
      if (this.tabName == '2') {
        callback();
      }
      if (!value) {
        callback(new Error("收货地址不能为空！"));
      }

      callback();
    };
    let validateConsignee = (rule, value, callback) => {
      if (this.tabName == '2') {
        callback();
      }
      if (!value) {
        callback(new Error("收货人不能为空！"));
      }

      callback();
    };


    return {
      lookImage: undefined,
      lookImageVisible: false,
      tabName: '1',
      openChangeBind: false,
      personList: [],
      ruleInfo: [],
      rules: {},
      ruleEdit: {
        ruleId: {
          required: true,
          message: "结算规则必选",
          trigger: "change",
        },
      },
      formRuleEdit: {},
      ruleList: [],
      ruleEditVisible: false,
      ruleVisible: false,
      mediaId: "2",
      options: [],
      tagList: [],
      // 遮罩层
      loading: false,
      text: undefined,
      // 选中数组
      ids: null,
      userData: {},
      // 非单个禁用
      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: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        promoterNickName: undefined,
        promoterId: undefined,
      },
      //页面所有的下拉数据
      queryParamsList: {
        mediaList: [
          {value: 2, label: "快手"},
          {value: 1, label: "抖音"},
        ],

        searchList: [
          {value: 1, label: "已填地址"},
          {value: 2, label: "未填地址"},
        ],

      },
      // 表单参数
      form: {},
      formBroadcast: {},
      bindFormBroadcast: {},
      //上传报表下拉数据
      formList: {},
      fileList: [],
      accept: "",
      //获取销售线索文件流
      dateFile: new FormData(),
      //销售线索上传loading
      confirmLoading: false,
      // 表单校验
      rulesBroadcast: {
        promoterId: {
          required: true,
          message: "快手ID必填",
          trigger: "blur",
        },
        consignee: {
          required: true,
          validator: validateConsignee,
          trigger: "blur",
        },
        phone: {
          required: true,
          validator: validatePhone,
          trigger: "blur",
        },
        promoterAddress: [
          {
            required: true,
            //    message: "发货地址必填",
            validator: validatPromoterAddress,
            trigger: "blur",
          },
          {
            min: 5,
            max: 200,
            message: "发货地址最少输入5个字符",
            trigger: "change",
          },
        ],
      },
      // 分配销售展示列表
      ksInfo: null,
      userId: null,
      prop: "",
      sort: "DESC",
      promoterId: undefined,
    };
  },
  created() {
    this.userId = this.$store.getters.userId;
    this.getList();
    this.getPromoterRuleList();
    this.getPersonList();
  },
  filters: {
    mediaStatusName(status) {
      const statusMap = {
        1: "抖音",
        2: "快手",
      };
      return statusMap[status];
    },

  },
  methods: {
    handleClick(tab, event) {
      if (this.tabName == '1') {
        this.$refs.fileUpload.fileList = [];
      }
      if (this.tabName == '2') {
        this.formBroadcast.consignee = undefined;
        this.formBroadcast.promoterAddress = undefined;
        this.formBroadcast.phone = undefined;
      }

      console.log(tab, event);
    },
    submitBindFormBroadcast: function () {
      this.$refs["bindFormBroadcast"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let formData = {
            ...this.bindFormBroadcast,
          };
          formData.id = this.ids;
          console.log(formData)
          editBindUser(formData)
            .then((res) => {
              this.confirmLoading = false;
              this.$message.success("修改成功");
              this.openChangeBind = false;
              this.ids = null;
              this.bindFormBroadcast = {};
              this.cancel();
              this.handleQuery();
            })
            .catch((err) => {
              this.confirmLoading = false;
            });

        }
      });
    },

    changeBind(item) {
      this.openChangeBind = true;
      this.ids = item.id;
      this.$set(this.bindFormBroadcast, "promoterNickName", item.promoterNickName);
      this.$set(this.bindFormBroadcast, "promoterId", item.promoterId);
      this.$set(this.bindFormBroadcast, "userName", item.userName);
    },


    getPersonList() {
      getSupplyChainUserList().then((response) => {
        this.queryParamsList.personList = response.rows;
      });
    },
    submitFormRuleEdit() {
      this.$refs["formRuleEdit"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let params = {};
          params.ruleId = this.formRuleEdit.ruleId;
          params.promoterId = this.ids;
          addRule(params).then((res) => {
            this.confirmLoading = false;
            this.ruleEditVisible = false;
            this.formRuleEdit = {};
            this.getList();
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    getPromoterRuleList() {
      getPromoterRuleList({userId: this.userId}).then((res) => {
        this.ruleInfo = res.data.map((item) => {
          return {
            label: item.ruleName,
            value: item.id,
          };
        });
      });
    },

    lookDetail(item) {
      getRuleDetailByRuleId({ruleId: item.ruleId}).then((res) => {
        this.ruleVisible = true;
        this.ruleList = res.data;
      });
    },

    toIndexDetail(item) {
      this.$router.replace({
        path: "/promoter/detail",
        query: {
          id: item.id,
        },
      });
    },
    sortChange(col, prop, order) {
      this.prop =
        col.prop == "avgVideoSales"
          ? "avg_video_sales"
          : col.prop == "videoSales"
            ? "video_sales"
            : col.prop == "monthDayGmv"
              ? "30day_gmv"
              : col.prop == "monthDayOrderNum"
                ? "30day_order_num"
                : col.prop == "totalSale"
                  ? "total_sale"
                  : "";
      this.sort = !!col.order ? (col.order == "descending" ? "DESC" : "ASC") : "DESC";
      this.handleQuery();
    },
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;

      getPromoterList({
        userId: this.userId,
        ...this.queryParams,
        parameter: this.prop,
        orderBy: 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.queryParams.mediaId = undefined;
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    addNew() {
      this.openAllocation = true;
      this.edit = false;
      this.ids = null;
      this.confirmLoading = false;
      this.tabName = '1';
      this.formBroadcast = {};
      setTimeout(() => {
        this.$refs.formBroadcast.clearValidate();
      }, 0);
    },
    handleDelete(item) {
      this.$modal
        .confirm(`请确认是否解绑此达人？`)
        .then(() => {
          var params = {};
          params.id = item.id;
          params.userId = this.$store.getters.userId;
          deleteById(params)
            .then((res) => {
              this.$modal.msgSuccess("解绑成功");
              this.handleQuery();
            })
            .catch(() => {
              this.$message.error("失败");
              this.loading = false;
            });
        })
        .catch(() => {
        });
    },
    /** 编辑地址 新增达人*/
    handleAddbroadcast(item) {
      this.ids = item.id;
      this.userData.userId = item.userId
      this.userData.userName = item.userName
      this.edit = true;
      this.openAllocation = true;
      this.$set(this.formBroadcast, "consignee", item.consignee);
      this.$set(this.formBroadcast, "phone", item.phone);
      this.$set(this.formBroadcast, "promoterAddress", item.promoterAddress);
      this.$set(this.formBroadcast, "promoterNickName", item.promoterNickName);
      this.$set(this.formBroadcast, "promoterId", item.promoterId);
    },
    whiteLog(item) {
      this.promoterId = item.promoterId;
      this.ids = item.id;
      this.open = true;
      this.title = "跟进记录";
    },
    copyInfomation(item) {
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard
          .writeText(
            `
收货人: ${item.consignee}
手机号: ${item.phone}
收货地址: ${item.promoterAddress}`
          )
          .then(() => {
            this.$message.success("复制成功");
          })
          .catch((err) => {
            this.$message.error("复制失败");
          });
      } else {
        // 创建text area
        const textArea = document.createElement("textarea");
        textArea.value = `
收货人: ${item.consignee}
手机号: ${item.phone}
收货地址: ${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("复制失败");
          }
        );
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
    },
    /** 新增直播确定按钮 */
    submitFormBroadcast: function () {
      this.$refs["formBroadcast"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let formData = {
            ...this.formBroadcast,
          };
          formData.tabName = this.tabName;
          if (this.tabName == '2') {
            formData.imageUrl = this.$refs.fileUpload.fileList.map((item) => {
              return item.url;
            }).join()
          }
          if (!this.ids) {
            formData.userId = this.userId
            formData.userName = this.$store.getters.name
            formData.mediaId = this.mediaId
            addPromoter(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("新增成功");
                this.openAllocation = false;
                this.ids = null;
                this.cancel();
                this.handleQuery();
                this.$refs.fileUpload.fileList = [];
                this.tabName = '1';
              })
              .catch((err) => {
                this.confirmLoading = false;
                this.tabName = '1';
                this.$refs.fileUpload.fileList = [];
              });
          } else {
            formData.id = this.ids;
            formData.userId = this.userData.userId;
            formData.userName = this.userData.userName;
            editPromoter(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("修改成功");
                this.openAllocation = false;
                this.ids = null;
                this.cancel();
                this.handleQuery();
              })
              .catch((err) => {
                this.confirmLoading = false;
              });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      if (!!this.text) {
        this.loading = true;
        addFollowUpRecords({
          promoterId: this.promoterId,
          userId: this.userId,
          txt: this.text,
        }).then((res) => {
          this.open = false;
          this.loading = false;
          this.$message.success("添加成功");
          this.ids = null;
          this.text = undefined;
          this.promoterId = undefined;
          this.cancel();
          this.handleQuery();
        });
      } else {
        this.open = false;
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.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%;
}
</style>
