<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"
        >
          <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="liveTimeShow">
        <el-date-picker
          v-model="queryParams.liveTimeShow"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 240px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="直播间级别" prop="liveLevel">
        <el-select
          v-model="queryParams.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>
      <el-form-item label="中控" prop="centralController">
        <el-input
          placeholder="请输入中控名称"
          style="width: 240px"
          v-model="queryParams.centralController"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="场控" prop="fieldController">
        <el-input
          placeholder="请输入场控名称"
          style="width: 240px"
          v-model="queryParams.fieldController"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="投流" prop="inputController">
        <el-input
          placeholder="请输入投流名称"
          style="width: 240px"
          v-model="queryParams.inputController"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="操盘手" prop="trader">
        <el-input
          placeholder="请输入操盘手名称"
          style="width: 240px"
          v-model="queryParams.trader"
        >
        </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-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" 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="直播时间" align="center" prop="liveTime">
      </el-table-column>
      <el-table-column label="直播间级别" align="center" prop="liveLevel">
      </el-table-column>
      <el-table-column label="主播" align="center" prop="anchor">
        <template slot-scope="scope">
          <div v-if="!!scope.row.anchor">
            {{ scope.row.anchor }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="操盘手" align="center" prop="trader">
        <template slot-scope="scope">
          <div v-if="!!scope.row.trader&&scope.row.trader!='[]'">
            <span v-for="(item, index) in JSON.parse(scope.row.trader)">
              {{ item.name
              }}{{
                index == JSON.parse(scope.row.trader).length - 1 ? "" : ","
              }}
            </span>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="中控" align="center" prop="centralController">
        <template slot-scope="scope">
          <div v-if="!!scope.row.centralController&&scope.row.centralController!='[]'">
            <span
              v-for="(item, index) in JSON.parse(scope.row.centralController)"
            >
              {{ item.name
              }}{{
                index == JSON.parse(scope.row.centralController).length - 1
                  ? ""
                  : ","
              }}
            </span>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="场控" align="center" prop="fieldController">
        <template slot-scope="scope">
          <div v-if="!!scope.row.fieldController&&scope.row.fieldController!='[]'">
            <span
              v-for="(item, index) in JSON.parse(scope.row.fieldController)"
            >
              {{ item.name
              }}{{
                index == JSON.parse(scope.row.fieldController).length - 1
                  ? ""
                  : ","
              }}
            </span>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column label="内容" align="center" prop="contentController">
        <template slot-scope="scope">
          <div v-if="!!scope.row.contentController&&scope.row.contentController!='[]'">
            <span
              v-for="(item, index) in JSON.parse(scope.row.contentController)"
            >
              {{ item.name
              }}{{
                index == JSON.parse(scope.row.contentController).length - 1
                  ? ""
                  : ","
              }}
            </span>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column label="投流" align="center" prop="inputController">
        <template slot-scope="scope">
          <div v-if="!!scope.row.inputController&&scope.row.inputController!='[]'">
            <span
              v-for="(item, index) in JSON.parse(scope.row.inputController)"
            >
              {{ item.name
              }}{{
                index == JSON.parse(scope.row.inputController).length - 1
                  ? ""
                  : ","
              }}
            </span>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>

      <el-table-column label="目标GMV" align="center" prop="goalGmv">
      </el-table-column>

      <el-table-column label="GMV完成度" align="center" prop="gmvRoi">
      </el-table-column>
      <el-table-column
        label="本次上传文件/图片数量"
        align="center"
        prop="gmvRoi"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.uploadFileCount }}/{{ scope.row.uploadPictureCount }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAddbroadcast(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleAllocationOne(scope.row, 'data')"
            >上传数据</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleAllocationOne(scope.row, 'fp')"
            >复盘</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">
        <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">
          {{ ksInfo ? ksInfo.liveTime : "-" }}
        </el-form-item>
        <el-form-item label="实际GMV" prop="actualGmv">
          <el-input
            placeholder="请输入实际GMV"
            v-model="form.actualGmv"
            @focus="uninputMoneyGmv($event)"
            @blur="inputMoneyGmv($event)"
            style="width: 300px"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="直播数据">
          <file-upload ref="fileUploadDialog" v-if="open"></file-upload>
        </el-form-item>
        <el-form-item label="数据大盘">
          <vueUpload ref="fileUpload" v-if="open"></vueUpload>
        </el-form-item>
        <el-form-item label="画像分析">
          <vueUpload ref="fileUploadFx" v-if="open"></vueUpload>
        </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"
        >
          <el-select
            v-model="formBroadcast.ksId"
            placeholder="选择快手昵称"
            clearable
            filterable
            style="width: 240px"
            value-key="value"
            @change="getQueryAccountList"
            :disabled="edit"
          >
            <el-option
              v-for="item in queryParamsList.ksList"
              :key="item.value"
              :label="`${item.label}(${item.value})`"
              :value="item"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="账户名称" prop="accountName" class="entire-line">
          <el-select
            :disabled="!formBroadcast.ksId || edit"
            v-model="formBroadcast.accountName"
            placeholder="选择账户名称"
            clearable
            filterable
            value-key="label"
            style="width: 240px"
          >
            <el-option
              v-for="(item, index) in queryParamsList.accountList"
              :key="index"
              :label="`${item.label}${
                item.value ? '(' + item.value + ')' : ''
              }`"
              :value="item"
            />
          </el-select>
        </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;
            formBroadcast = {};
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 复盘 -->
    <el-dialog
      :title="title"
      :visible.sync="openFp"
      width="800px"
      append-to-body
    >
      <el-form ref="formFp" :model="formFp" label-width="100px">
        <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">
          {{ ksInfo ? ksInfo.liveTime : "-" }}
        </el-form-item>
        <el-form-item label="上传图片">
          <vueUpload ref="fileUploadPic" v-if="openFp"></vueUpload>
        </el-form-item>
        <el-form-item label="复盘数据">
          <vueUpload
            ref="fileUploadDialogPic"
            :fileType="fileType"
            :multiple="false"
            uploadType="all"
            listType="text"
            v-if="openFp"
          ></vueUpload>
        </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">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { refreshCache } from "@/api/system/dict/type";
import {
  getList,
  getQueryRolesList,
  getQueryNicknameList,
  getQueryAccountList,
  addAccount,
  getById,
  editAccount,
  addBroadcast,
  getBroadcastList,
  getForEdit,
  editBroadcast,
  dataUpload,
  replay,
} from "@/api/trader/trader";
import FileUpload from "./components/upload";
import vueUpload from "./components/vueUpload";
export default {
  name: "account-list",
  components: {
    FileUpload,
    vueUpload,
  },
  data() {
    return {
      // 遮罩层
      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: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ksId: undefined,
        liveTimeShow: undefined,
        liveLevel: undefined,
        centralController: undefined,
        fieldController: undefined,
        inputController: undefined,
        contentController: undefined,
        trader: undefined,
      },
      //页面所有的下拉数据
      queryParamsList: {
        ksList: [], //快手昵称下拉
        accountList: [], //账户列表下拉
        accountTypeList: [
          { value: "cljn", label: "磁力金牛" },
          { value: "cljnPhone", 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: [],
      accept: "",
      //获取销售线索文件流
      dateFile: new FormData(),
      //销售线索上传loading
      confirmLoading: false,
      // 表单校验
      rules: {
        actualGmv: [
          { required: true, message: "实际GMV不能为空", trigger: "blur" },
        ],
      },
      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: "磁力金牛",
        cljnPhone: "磁力金牛移动端",
      };
      return statusMap[status];
    },
    putTypeChinese(status) {
      const statusMap = {
        cljn: "磁力金牛",
        cp: "操盘",
        fws: "服务商",
      };
      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.$set(this.formBroadcast, "accountName", undefined);
      if (!!ksId) {
        getQueryAccountList({ ksId: ksId.value })
          .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);
    },
    /** 文件状态改变时调用 */
    handChange(file, fileList) {
      this.fileList = fileList;
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    },

    /** 上传文件前验证 */
    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;
      }
      file.forEach((file) => this.dateFile.append("files", file));
      console.log(this.dateFile);
      return false;
    },
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      if (!this.queryParams.liveTimeShow) {
      } else {
        this.queryParams.startTime = this.queryParams.liveTimeShow[0];
        this.queryParams.endTime = this.queryParams.liveTimeShow[1];
      }

      getBroadcastList(this.queryParams).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("form");
      this.resetForm("formBroadcast");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.uploadDate = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 上传数据
    handleAllocationOne(item, type) {
      this.reset();
      this.ids = item.id;
      this.ksInfo = item;
      this.edit = false;
      if (type == "data") {
        this.open = true;
        this.title = "上传数据";
      } else {
        this.openFp = true;
        this.title = "上传复盘数据";
      }
    },
    addNew() {
      this.openAllocation = true;
      this.edit = false;
      this.ids = null;
      this.confirmLoading = false;
      this.formBroadcast = {};
      setTimeout(() => {
        this.$refs.formBroadcast.clearValidate();
      }, 0);
    },
    /** 编辑直播 */
    handleAddbroadcast(item) {
      getForEdit({ id: item.id })
        .then((res) => {
          var data = res.data;
          this.ids = item.id;
          this.edit = true;
          this.openAllocation = true;

          this.$set(this.formBroadcast, "ksId", {
            value: data.ksId,
            label: data.ksName,
          });
          this.$nextTick(() => {
            this.getQueryAccountList(this.formBroadcast.ksId);
            this.$set(this.formBroadcast, "accountName", {
              value: +data.accountId,
              label: data.accountName,
            });
          });
          this.$set(this.formBroadcast, "liveTime", data.liveTime.split("~"));
          this.$set(this.formBroadcast, "liveLevel", data.liveLevel);
          this.$set(this.formBroadcast, "anchor", data.anchor);
          this.$set(
            this.formBroadcast,
            "traderId",
            JSON.parse(data.trader).map((item) => {
              return {
                value: +item.id,
                label: item.name,
              };
            })
          );
          this.$set(
            this.formBroadcast,
            "centralControlId",
            JSON.parse(data.centralController).map((item) => {
              return {
                value: +item.id,
                label: item.name,
              };
            })
          );

          this.$set(
            this.formBroadcast,
            "fieldControlId",
            JSON.parse(data.fieldController).map((item) => {
              return {
                value: +item.id,
                label: item.name,
              };
            })
          );

          this.$set(
            this.formBroadcast,
            "contentControlId",
            JSON.parse(data.contentController).map((item) => {
              return {
                value: +item.id,
                label: item.name,
              };
            })
          );
          this.$set(
            this.formBroadcast,
            "inputControlId",
            JSON.parse(data.inputController).map((item) => {
              return {
                value: +item.id,
                label: item.name,
              };
            })
          );
          this.$set(this.formBroadcast, "goalGmv", data.goalGmv);
          setTimeout(() => {
            this.$refs.formBroadcast.clearValidate();
          }, 0);
        })
        .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);
      }
    },
    // 获得焦点金额去掉格式
    uninputMoneyGmv(el) {
      if (!!el.target.value) {
        this.form.actualGmv = this.delcommafy(el.target.value);
      }
    },
    // 失去焦点金额格式化
    inputMoneyGmv(el) {
      let temp = Number(el.target.value) || null;
      this.form.actualGmv = this.priceFormat(temp);
    },

    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;
    },
    /** 新增直播确定按钮 */
    submitFormBroadcast: function () {
      this.$refs["formBroadcast"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let formData = {};
          formData.createrId = this.userId;

          formData.ksId = this.formBroadcast.ksId.value;
          formData.ksName = this.formBroadcast.ksId.label;
          formData.accountId = !!this.formBroadcast.accountName
            ? this.formBroadcast.accountName.value
            : null;
          formData.accountName = !!this.formBroadcast.accountName
            ? this.formBroadcast.accountName.label
            : null;

          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,
                    };
                  })
                )
              : "[]";

          if (!this.ids) {
            addBroadcast(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("新增成功");
                this.openAllocation = false;
                this.ids = null;
                this.cancel();
                this.handleQuery();
              })
              .catch((err) => {
                this.confirmLoading = false;
              });
          } else {
            formData.id = this.ids;
            editBroadcast(formData)
              .then((res) => {
                this.confirmLoading = false;
                this.$message.success("修改成功");
                this.openAllocation = false;
                this.ids = null;
                this.cancel();
                this.handleQuery();
              })
              .catch((err) => {
                this.confirmLoading = false;
              });
          }
        }
      });
    },
    submitFormFp: function () {
      this.$refs["formFp"].validate((valid) => {
        if (valid) {
          var fileList = this.$refs.fileUploadDialogPic.fileList;
          var dapanUrls = this.$refs.fileUploadPic.fileList;
          if (fileList.length == 0 || dapanUrls.length == 0) {
            this.$message.error("复盘数据,图片必须上传");
            return;
          } else {
            this.confirmLoading = true;
            let formData = new FormData();
            this.ids;
            formData.append("id", this.ids);
            formData.append(
              "replayPictureUrls",
              JSON.stringify(
                dapanUrls.map((item) => {
                  return item.url;
                })
              )
            );
            formData.append(
              "replayFile",
              JSON.stringify(
                fileList.map((item) => {
                  return item.url;
                })[0]
              )
            );
            replay(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);
        }
      });
    },
    /** 提交按钮 */
    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);
        }
      });
    },
    /** 删除按钮操作 */
    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>
