<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="ksId">
        <el-select
          v-model="queryParams.ksId"
          placeholder="选择快手昵称"
          clearable
          filterable
          style="width: 240px"
          @change="getQueryAccountList"
        >
          <el-option
            v-for="item in queryParamsList.ksList"
            :key="item.value"
            :label="`${item.label}(${item.value})`"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="账户名称" prop="accountId">
        <el-select
          :disabled="!queryParams.ksId"
          v-model="queryParams.accountId"
          placeholder="选择账户名称"
          clearable
          filterable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.accountList"
            :key="item.label"
            :label="`${item.label}${item.value ? '(' + item.value + ')' : ''}`"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="账户类型" prop="accountType">
        <el-select
          v-model="queryParams.accountType"
          placeholder="选择账户类型"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.accountTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="accountStatus">
        <el-select
          v-model="queryParams.accountStatus"
          placeholder="请选择投放类型"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.accountStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运营" prop="operatorLeaderId">
        <el-select
          v-model="queryParams.operatorLeaderId"
          placeholder="请选择运营"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.operatorLeaderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="销售" prop="saleLeaderId">
        <el-select
          v-model="queryParams.saleLeaderId"
          placeholder="请选择销售"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in queryParamsList.saleLeaderList"
            :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="handleAdd"
          >新增账户</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-document-add"
          size="mini"
          @click="openFp = true"
          >上传账户</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="handleRefreshCache"
          v-hasPermi="['system:dict:remove']"
          >刷新缓存</el-button
        >
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="typeList"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
    >
      <el-table-column label="快手昵称与快手ID" align="center" prop="ksId">
        <template slot-scope="scope">
          {{ scope.row.ksName }}({{ scope.row.ksId }})
        </template>
      </el-table-column>
      <el-table-column label="账户名称(ID)" align="center" prop="accountId">
        <template slot-scope="scope">
          {{ scope.row.accountName
          }}{{ scope.row.accountId ? "(" + scope.row.accountId + ")" : "" }}
        </template>
      </el-table-column>
      <el-table-column label="账户类型" align="center" prop="accountType">
        <template slot-scope="scope">
          {{ scope.row.accountType | accountTypeChinese }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="投放类型" align="center" prop="putType">
        <template slot-scope="scope">
          <div v-if="!!scope.row.putType">
            <span v-for="(item, index) in scope.row.putType.split(',')"
              >{{ item | putTypeChinese
              }}{{
                index == scope.row.putType.split(",").length - 1 ? "" : ","
              }}</span
            >
          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="运营负责人"
        align="center"
        prop="operatorLeader"
      />
      <el-table-column label="销售负责人" align="center" prop="saleLeader" />
      <el-table-column label="设计负责人" align="center" prop="designerLeader">
        <template slot-scope="scope">
          <div v-if="!!scope.row.designerLeader">
            {{ scope.row.designerLeader }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="accountStatus">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAllocationOne(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handlePersonVisible(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="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        :inline="true"
      >
        <el-form-item
          label="账户类型"
          prop="accountType"
          style="width: 100%"
          class="entire-line"
        >
          <el-select
            v-model="form.accountType"
            placeholder="选择账户类型"
            clearable
            style="width: 240px"
            :disabled="edit"
          >
            <el-option
              v-for="(item, index) in queryParamsList.accountTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="快手昵称"
          prop="ksName"
          style="width: 100%"
          class="entire-line"
        >
          <el-input
            placeholder="请输入快手昵称"
            v-model="form.ksName"
            :disabled="edit"
          >
          </el-input>
          <!-- <el-select
            v-model="form.salesLeadsType"
            placeholder="选择类别"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in formList.salesLeadsTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </el-form-item>
        <el-form-item label="快手ID" prop="ksId" class="entire-line">
          <el-input
            placeholder="请输入快手ID"
            v-model="form.ksId"
            :disabled="edit"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="账户名称" prop="accountName" class="entire-line">
          <el-input
            placeholder="请输入账户名称"
            v-model="form.accountName"
            :disabled="edit"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="账户ID"
          :prop="form.accountType == 'cp' ? 'accountIdFalse' : 'accountId'"
          class="entire-line"
        >
          <el-input
            placeholder="请输入账户ID"
            v-model="form.accountId"
            :disabled="edit"
          >
          </el-input>
        </el-form-item>

        <!-- <el-form-item label="投放类型" prop="putType">
          <el-select
            v-model="form.putType"
            placeholder="请选择投放类型"
            clearable
            multiple
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.putTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="运营负责人" prop="operatorLeaderId">
          <el-select
            v-model="form.operatorLeaderId"
            placeholder="请选择运营"
            clearable
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.operatorLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="销售负责人" prop="saleLeaderId">
          <el-select
            v-model="form.saleLeaderId"
            placeholder="请选择销售"
            clearable
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.saleLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设计负责人" prop="designerLeaderId">
          <el-select
            v-model="form.designerLeaderId"
            placeholder="请选择设计负责人"
            clearable
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.designerLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="协作人" prop="collaboratorList">
          <el-select
            v-model="form.collaboratorList"
            placeholder="请选择协作人"
            clearable
            multiple
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.allPersonList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="confirmLoading"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加直播 -->
    <el-dialog
      title="新增直播"
      :visible.sync="openAllocation"
      width="800px"
      append-to-body
    >
      <el-form
        ref="formBroadcast"
        :model="formBroadcast"
        :rules="rulesBroadcast"
        label-width="100px"
        :inline="true"
      >
        <el-form-item
          label="快手昵称"
          prop="ksName"
          style="width: 100%"
          class="entire-line"
        >
          {{ ksInfo ? ksInfo.ksName + "(" + ksInfo.ksId + ")" : "-" }}
        </el-form-item>

        <el-form-item label="账户名称" prop="accountName" class="entire-line">
          {{
            ksInfo
              ? ksInfo.accountName +
                (ksInfo.accountId ? "(" + ksInfo.accountId + ")" : "")
              : "-"
          }}
        </el-form-item>
        <el-form-item label="直播时间" prop="liveTime">
          <el-date-picker
            v-model="formBroadcast.liveTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播间级别" prop="liveLevel">
          <el-select
            v-model="formBroadcast.liveLevel"
            placeholder="请选择投放类型"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.liveLevelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> </el-form-item
        ><br />
        <el-form-item label="主播" prop="anchor">
          <el-input
            placeholder="请输入主播名称"
            style="width: 240px"
            v-model="formBroadcast.anchor"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="操盘手" prop="traderId">
          <el-select
            v-model="formBroadcast.traderId"
            placeholder="请选择操盘手"
            clearable
            multiple
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.operatorLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="中控" prop="centralControlId">
          <el-select
            v-model="formBroadcast.centralControlId"
            placeholder="请选择中控"
            clearable
            multiple
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.operatorLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="场控" prop="fieldControlId">
          <el-select
            v-model="formBroadcast.fieldControlId"
            placeholder="请选择场控"
            clearable
            multiple
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.operatorLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="内容" prop="contentControlId">
          <el-select
            v-model="formBroadcast.contentControlId"
            placeholder="请选择内容"
            clearable
            multiple
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.operatorLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投流" prop="inputControlId">
          <el-select
            v-model="formBroadcast.inputControlId"
            placeholder="请选择投流"
            clearable
            multiple
            value-key="value"
            style="width: 240px"
          >
            <el-option
              v-for="item in queryParamsList.operatorLeaderList"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标GMV" prop="goalGmv">
          <el-input
            placeholder="请输入目标GMV"
            v-model="formBroadcast.goalGmv"
            @focus="uninputMoney($event)"
            @blur="inputMoney($event)"
          >
            <template slot="append">元</template>
          </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;
            reset();
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 上传账户 -->
    <el-dialog
      title="上传账户"
      :visible.sync="openFp"
      width="800px"
      append-to-body
    >
      <el-form ref="formFp" :model="formFp" label-width="100px">
        <el-form-item label="账户上传">
          <file-upload
            ref="fileUploadDialog"
            v-if="openFp"
            :count="1"
          ></file-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitFormFp"
          :loading="confirmLoading"
          >确 定</el-button
        >
        <el-button
          @click="
            openFp = false;
            confirmLoading = false;
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 查看人员 -->
    <el-dialog
      title="查看人员"
      :visible.sync="personVisible"
      width="800px"
      append-to-body
      @close="
        personVisible = false;
        personList = [];
        resetQuery();
      "
    >
      <el-tag
        v-for="tag in personList"
        :key="tag.userId"
        closable
        style="margin-right: 10px"
        @close="deletePerson(tag)"
      >
        {{ tag.name }}{{ " | " + tag.roleName }}
      </el-tag>
    </el-dialog>
  </div>
</template>

<script>
import { refreshCache } from "@/api/system/dict/type";
import vueUpload from "../trader/components/vueUpload";
import FileUpload from "../trader/components/upload";
import {
  getAccountList,
  getQueryRolesList,
  getQueryNicknameList,
  getQueryAccountList,
  addAccount,
  getById,
  editAccount,
  addBroadcast,
  replayAccount,
  getPersonList,
  deletePerson,
} from "@/api/trader/trader";
export default {
  name: "account-list",
  components: {
    vueUpload,
    FileUpload,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否为编辑
      edit: false,
      // 分配销售
      openAllocation: false,
      // 选择的销售id
      saleId: undefined,
      // 销售列表
      saleList: [],
      // 分配销售确定loading
      confirmLoadingSale: false,
      openFp: false,
      personVisible: false,
      personData: null,
      personList: [],
      formFp: {},
      fileType: [".xls", ".xlsx", ".csv"],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ksId: undefined,
        // accountName: undefined,
        accountId: undefined,
        accountType: undefined,
        putType: undefined,
        saleLeaderId: undefined,
        operatorLeaderId: undefined,
        accountStatus: undefined,
      },
      //页面所有的下拉数据
      queryParamsList: {
        ksList: [], //快手昵称下拉
        accountList: [], //账户列表下拉
        accountTypeList: [
          { value: "cljn", label: "磁力金牛" },
          { value: "cljnydd", label: "磁力金牛移动端" },
          { value: "cp", label: "操盘" },
          { value: "xxl", label: "信息流" },
        ], //账户类型下拉
        accountStatusList: [
          { value: "审核中", label: "审核中" },
          { value: "审核通过", label: "审核通过" },
          { value: "待提交", label: "待提交" },
          { value: "审核拒绝", label: "审核拒绝" },
        ],
        putTypeList: [
          { value: "cljn", label: "磁力金牛" },
          { value: "cp", label: "操盘" },
          { value: "fws", label: "服务商" },
        ], //投放类型下拉
        saleLeaderList: [], //销售列表
        operatorLeaderList: [], //运营列表
        designerLeaderList: [], //设计列表
        allPersonList: [], //所有人
        liveLevelList: [
          { value: "S", label: "S" },
          { value: "A", label: "A" },
          { value: "B", label: "B" },
        ], // 直播间级别
      },
      // 表单参数
      form: {},
      formBroadcast: {},
      //上传报表下拉数据
      formList: {
        salesLeadsTypeList: [
          { value: 1, label: "50W低潜" },
          { value: 2, label: "50W中高潜" },
          { value: 3, label: "200W高潜" },
          { value: 4, label: "200W~500W" },
          { value: 5, label: "500W以上" },
        ], //销售线索类型
      },
      fileList: [],
      //获取销售线索文件流
      dateFile: null,
      //销售线索上传loading
      confirmLoading: false,
      // 表单校验
      rules: {
        ksName: [
          { required: true, message: "快手昵称不能为空", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "快手昵称最多50个字,最少3个字",
            trigger: "blur",
          },
        ],
        ksId: [
          { required: true, message: "快手ID不能为空", trigger: "blur" },
          {
            type: "number",
            message: "快手ID只能输入数字",
            trigger: "change",
            transform(value) {
              return +value;
            },
          },
        ],
        accountName: [
          { required: true, message: "快手账户不能为空", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "快手账户最多50个字,最少3个字",
            trigger: "blur",
          },
        ],
        accountId: [
          {
            required: true,
            message: "快手账户ID不能为空",
            trigger: "blur",
          },
          {
            required: false,
            type: "number",
            message: "快手账户ID只能输入数字",
            trigger: "change",
            transform(value) {
              if (!!value) {
                return +value;
              } else {
                return undefined;
              }
            },
          },
        ],
        accountIdFalse: [
          {
            required: false,
            message: "快手账户ID不能为空",
            trigger: "blur",
          },
          {
            required: false,
            type: "number",
            message: "快手账户ID只能输入数字",
            trigger: "change",
            transform(value) {
              if (!!value) {
                return +value;
              } else {
                return undefined;
              }
            },
          },
        ],
        accountType: [
          { required: true, message: "账户类型必选", trigger: "change" },
        ],
        putType: [
          { required: true, message: "投放类型必选", trigger: "change" },
        ],
        saleLeaderId: [
          { required: true, message: "销售负责人必选", trigger: "change" },
        ],
        operatorLeaderId: [
          { required: true, message: "运营负责人必选", trigger: "change" },
        ],
      },
      rulesBroadcast: {
        goalGmv: [
          { required: true, message: "目标GMV不能为空", trigger: "blur" },
        ],
        liveTime: [
          { required: true, message: "直播时间不能为空", trigger: "change" },
        ],
        liveLevel: [
          { required: true, message: "直播级别不能为空", trigger: "change" },
        ],
        traderId: [
          {
            required: true,
            message: "操盘手不能为空",
            trigger: "change",
          },
        ],
      },
      // 分配销售展示列表
      ksInfo: null,
      userId: null,
    };
  },
  created() {
    this.userId = this.$store.getters.userId;
    this.getSaleList();
    this.getOperatorList();
    this.getQueryNicknameList();
    this.getList();
  },
  filters: {
    accountTypeChinese(status) {
      const statusMap = {
        cljn: "磁力金牛",
        cljnydd: "磁力金牛移动端",
        cp: "操盘",
        xxl: "信息流",
      };
      return statusMap[status];
    },
    putTypeChinese(status) {
      const statusMap = {
        cljn: "磁力金牛",
        cp: "操盘",
        fws: "服务商",
        xxl: "信息流",
      };
      return statusMap[status];
    },
  },
  methods: {
    // 获取销售
    getSaleList() {
      getQueryRolesList({ type: 2 })
        .then((res) => {
          this.queryParamsList.saleLeaderList = res.data.map((item) => {
            return {
              value: item.userId,
              label: item.nickName,
            };
          });
        })
        .catch((error) => {});

      getQueryRolesList({ type: 3 })
        .then((res) => {
          this.queryParamsList.designerLeaderList = res.data.map((item) => {
            return {
              value: item.userId,
              label: item.nickName,
            };
          });
        })
        .catch((error) => {});

      getQueryRolesList({ type: null })
        .then((res) => {
          this.queryParamsList.allPersonList = res.data.map((item) => {
            return {
              value: item.userId,
              label: item.nickName,
            };
          });
        })
        .catch((error) => {});
    },
    // 获取运营列表
    getOperatorList() {
      getQueryRolesList({ type: 1 })
        .then((res) => {
          this.queryParamsList.operatorLeaderList = res.data.map((item) => {
            return {
              value: item.userId,
              label: item.nickName,
            };
          });
        })
        .catch((error) => {});
    },
    // 获取快手昵称列表
    getQueryNicknameList() {
      getQueryNicknameList()
        .then((res) => {
          this.queryParamsList.ksList = res.rows.map((item) => {
            return {
              value: item.ksId,
              label: item.ksName,
            };
          });
        })
        .catch((error) => {});
    },
    // 获取快手账户列表
    getQueryAccountList(ksId) {
      this.queryParams.accountId = undefined;
      if (!!ksId) {
        getQueryAccountList({ ksId })
          .then((res) => {
            this.queryParamsList.accountList = res.rows.map((item) => {
              return {
                value: item.accountId,
                label: item.accountName,
              };
            });
          })
          .catch((error) => {});
      } else {
        this.queryParamsList.accountList = [];
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return false;
    },
    /** 删除文件 */
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    /** 上传文件 */
    handlePreview(file) {
      console.log(file);
    },
    /** 上传文件前验证 */
    handleBeforeUpload(file) {
      console.log(file);
      const fileSuffix = ["xlsx", "xls", "csv"];
      const fileName = file.name;
      const fileStrArr = fileName.split(".");
      const suffix = fileStrArr[fileStrArr.length - 1];

      let result = fileSuffix.some((item) => {
        return item === suffix;
      });

      if (!result) {
        this.$message.error("不支持该文件类型");
        this.loadDisabled = false;
        return false;
      }
      this.dateFile = file;
      return false;
    },
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      getAccountList({ ...this.queryParams, userId: this.userId }).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.formBroadcast = {};
      this.dateFile = null;
      this.resetForm("form");
      this.resetForm("formBroadcast");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.uploadDate = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.ids = null;
      this.open = true;
      this.edit = false;
      this.title = "新增账户";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.sellerId);
    },
    /** 编辑 */
    handleAllocationOne(item) {
      getById({ id: item.id })
        .then((res) => {
          var data = res.data;
          this.ids = item.id;
          this.open = true;
          this.edit = true;
          this.title = "编辑账户";
          this.$set(this.form, "accountId", data.accountId);
          this.$set(this.form, "accountName", data.accountName);
          this.$set(this.form, "ksId", data.ksId);
          this.$set(this.form, "ksName", data.ksName);
          this.$set(this.form, "accountType", data.accountType);
          // this.$set(this.form, "putType", data.putType.split(","));
          this.$set(
            this.form,
            "saleLeaderId",
            !!data.saleLeaderId
              ? {
                  value: +data.saleLeaderId,
                  label: data.saleLeader,
                }
              : undefined
          );
          this.$set(
            this.form,
            "collaboratorList",
            data.collaborators.map((i) => {
              return {
                value: +i.userId,
                label: i.name,
              };
            })
          );
          this.$set(
            this.form,
            "designerLeaderId",
            !!data.designerLeaderId
              ? {
                  value: +data.designerLeaderId,
                  label: data.designerLeader,
                }
              : undefined
          );
          this.$set(
            this.form,
            "operatorLeaderId",
            !!data.operatorLeaderId
              ? {
                  value: +data.operatorLeaderId,
                  label: data.operatorLeader,
                }
              : undefined
          );
        })
        .catch((error) => {});
    },
    /** 查看人员 */
    handlePersonVisible(item) {
      this.personVisible = true;
      this.personData = item;
      setTimeout(() => {
        this.getPersonList();
      }, 100);
    },
    deletePerson(item) {
      var params = {};
      params.ksId = +this.personData.ksId;
      params.accountId = this.personData.accountId
        ? +this.personData.accountId
        : null;
      params.role = item.role;
      params.userId = item.userId;
      deletePerson(params)
        .then((res) => {
          this.getPersonList();
        })
        .catch((error) => {});
    },
    getPersonList() {
      // getPersonList, deletePerson;
      var params = {};
      params.ksId = +this.personData.ksId;
      params.accountId = this.personData.accountId
        ? +this.personData.accountId
        : null;
      getPersonList(params)
        .then((res) => {
          this.personList = res.data;
        })
        .catch((error) => {});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
    },
    // 失去焦点金额格式化
    inputMoney(el) {
      let temp = Number(el.target.value) || null;
      this.formBroadcast.goalGmv = this.priceFormat(temp);
    },
    // 获得焦点金额去掉格式
    uninputMoney(el) {
      if (!!el.target.value) {
        this.formBroadcast.goalGmv = this.delcommafy(el.target.value);
      }
    },
    priceFormat(num, n) {
      n = n || 2;
      let symbol = ",";
      if (num === null) return num;
      if (typeof num !== "number")
        throw new TypeError("num参数应该是一个number类型");
      if (n < 0) throw new Error("参数n不应该小于0");
      let hasDot = parseInt(num) != num; //这里检测num是否为小数，true表示小数
      let m = n != undefined && n != null ? n : 1;
      num =
        m == 0
          ? num.toFixed(m) + "."
          : hasDot
          ? n
            ? num.toFixed(n)
            : num
          : num.toFixed(m);
      symbol = symbol || ",";
      num = num
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function (match, p1, p2) {
          return p1 + symbol;
        });
      if (n == 0 || (!hasDot && !n)) {
        //如果n为0或者传入的num是整数并且没有指定整数的保留位数，则去掉前面操作中的小数位
        num = num.substring(0, num.indexOf("."));
      }
      return num;
    },
    //去除千分位中的‘，’
    delcommafy(num) {
      if (!num) return num;
      num = num.toString();
      num = num.replace(/,/gi, "");
      if (num.indexOf(".00") > 0) num = parseInt(num);
      return num;
    },
    submitFormFp() {
      this.$refs["formFp"].validate((valid) => {
        if (valid) {
          var fileList = this.$refs.fileUploadDialog.fileList;
          if (fileList.length == 0) {
            this.$message.error("请上传文件");
            return;
          } else {
            this.confirmLoading = true;
            let formData = new FormData();
            fileList.forEach((file) => formData.append("file", file.raw));
            formData.append("createrId", this.userId);
            replayAccount(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("上传成功");
                this.openFp = false;
                this.ids = null;
                this.cancel();
                this.handleQuery();
              })
              .catch((err) => {
                this.confirmLoading = false;
              });
          }
          console.log(fileList, dapanUrls);
        }
      });
    },

    /** 新增直播确定按钮 */
    submitFormBroadcast: function () {
      this.$refs["formBroadcast"].validate((valid) => {
        if (valid) {
          console.log(this.formBroadcast);
          this.confirmLoading = true;
          let formData = {};
          formData.createrId = this.userId;

          formData.ksId = this.ksInfo.ksId;
          formData.ksName = this.ksInfo.ksName;
          formData.accountId = this.ksInfo.accountId;
          formData.accountName = this.ksInfo.accountName;

          formData.goalGmv = this.delcommafy(this.formBroadcast.goalGmv);
          formData.liveTime = this.formBroadcast.liveTime.join("~");
          formData.startTime = this.formBroadcast.liveTime[0];
          formData.endTime = this.formBroadcast.liveTime[1];

          formData.liveLevel = this.formBroadcast.liveLevel;
          formData.anchor = this.formBroadcast.anchor;

          formData.trader =
            this.formBroadcast.traderId.length > 0
              ? JSON.stringify(
                  this.formBroadcast.traderId.map((item) => {
                    return {
                      id: item.value,
                      name: item.label,
                    };
                  })
                )
              : "[]";

          formData.centralController =
            this.formBroadcast.centralControlId.length > 0
              ? JSON.stringify(
                  this.formBroadcast.centralControlId.map((item) => {
                    return {
                      id: item.value,
                      name: item.label,
                    };
                  })
                )
              : "[]";

          formData.fieldController =
            this.formBroadcast.fieldControlId.length > 0
              ? JSON.stringify(
                  this.formBroadcast.fieldControlId.map((item) => {
                    return {
                      id: item.value,
                      name: item.label,
                    };
                  })
                )
              : "[]";

          formData.contentController =
            this.formBroadcast.contentControlId.length > 0
              ? JSON.stringify(
                  this.formBroadcast.contentControlId.map((item) => {
                    return {
                      id: item.value,
                      name: item.label,
                    };
                  })
                )
              : "[]";

          formData.inputController =
            this.formBroadcast.inputControlId.length > 0
              ? JSON.stringify(
                  this.formBroadcast.inputControlId.map((item) => {
                    return {
                      id: item.value,
                      name: item.label,
                    };
                  })
                )
              : "[]";

          addBroadcast(formData)
            .then((res) => {
              this.confirmLoading = false;
              this.$message.success("新增成功");
              this.openAllocation = false;
              this.cancel();
              this.handleQuery();
            })
            .catch((err) => {
              this.confirmLoading = false;
            });
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.confirmLoading = true;
          let formData = {};
          formData.createrId = this.userId;
          formData.ksId = this.form.ksId;
          formData.ksName = this.form.ksName;
          formData.accountId = this.form.accountId;
          formData.accountName = this.form.accountName;
          formData.accountType = this.form.accountType;
          // formData.putType = this.form.putType.join();
          formData.designerLeaderId = !!this.form.designerLeaderId
            ? this.form.designerLeaderId.value
            : "";
          formData.designerLeader = !!this.form.designerLeaderId
            ? this.form.designerLeaderId.label
            : "";
          formData.operatorLeaderId = this.form.operatorLeaderId.value;
          formData.operatorLeader = this.form.operatorLeaderId.label;
          formData.saleLeaderId = this.form.saleLeaderId.value;
          formData.saleLeader = this.form.saleLeaderId.label;
          formData.collaboratorList = !!this.form.collaboratorList
            ? JSON.stringify(
                this.form.collaboratorList.map((item) => {
                  return {
                    userId: item.value,
                    nickName: item.label,
                  };
                })
              )
            : "[]";
          if (!this.ids) {
            addAccount(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("新增成功");
                this.ids = null;
                this.cancel();
                this.handleQuery();
              })
              .catch((err) => {
                this.confirmLoading = false;
              });
          } else {
            formData.id = this.ids;
            editAccount(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("修改成功");
                this.ids = null;
                this.cancel();
                this.handleQuery();
              })
              .catch((err) => {
                this.confirmLoading = false;
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {},
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/dict/type/export",
        {
          ...this.queryParams,
        },
        `type_${new Date().getTime()}.xlsx`
      );
    },
    /** 刷新缓存按钮操作 */
    handleRefreshCache() {
      refreshCache().then(() => {
        this.$modal.msgSuccess("刷新成功");
      });
    },
  },
};
</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>
