<template>
  <div class="app-container">
    <div class="flexBet searchTop">
      <div class="title flex m20">
        <div class="bar"></div>
        <div class="text">{{ $route.meta.title }}</div>
      </div>
      <el-row :gutter="10" class="mb8">

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div>

    <div class="bg">

      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="76px"
        class="flex form" style="padding:0 20px;position: relative;">
        <!-- <el-form-item label="用户姓名" prop="nickName">
          <el-input size="medium" v-model="queryParams.nickName" placeholder="请输入用户姓名" @keyup.enter.native="handleQuery"
            style="width: 215px;border-color: #E6F1FF;" />
        </el-form-item>
        <el-form-item label="用户手机" prop="phonenumber">
          <el-input size="medium" v-model="queryParams.phonenumber" placeholder="请输入用户手机"
            @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
        </el-form-item> -->
        <el-form-item label="商户名称" prop="storeName">
          <el-input size="small" v-model="queryParams.storeName" placeholder="请输入商户名称" @keyup.enter.native="handleQuery"
            style="width: 180px;border-color: #E6F1FF;" />
        </el-form-item>
        <el-form-item label="商户号" prop="storeNo">
          <el-input size="small" v-model="queryParams.storeNo" placeholder="请输入商户号" @keyup.enter.native="handleQuery"
            style="width: 180px;border-color: #E6F1FF;" />
        </el-form-item>
        <el-form-item label="上级姓名" prop="parentName">
          <el-input size="small" v-model="queryParams.parentName" placeholder="请输入上级名称" @keyup.enter.native="handleQuery"
            style="width: 180px;border-color: #E6F1FF;" />
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker v-model="dateRange" size="small" style="width: 340px; height: 32px; line-height: 12px;" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :unlink-panels="true"
            :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <div class="searchTop flexBet" style="align-items: center;">
            <el-row :gutter="10" class="mb8">
              <el-button type="primary" icon="" size="small" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-row>

            <el-row :gutter="10" class="mb8" style="margin-left:20px">
              <el-col :span="1.5">
                <el-button v-hasPermi="['system:user:saveStoreOragent']" type="primary" plain icon="" size="small" style="height: 32px;"
                  @click="handleAdd('新增代理', 'agent')">新增代理</el-button>
              </el-col> <el-col :span="1.5">
                <el-button v-hasPermi="['system:user:saveStoreOragent']" type="primary" plain icon="" size="small" style="height: 32px;"
                  @click="handleAdd('新增商户', 'store')">新增商户</el-button>
              </el-col>
            </el-row>
          </div>

        </el-form-item>
        <div class="rig flex">
          <div style="height: 32px; line-height: 12px;">
            累计代理：<span class="#197CFE">{{ sum.agentCount }}</span>
          </div>
          <div style="height: 32px; line-height: 12px;">
            累计商户：<span class="#197CFE">{{ sum.storeCount }}</span>
          </div>
        </div>
      </el-form>



      <el-table stripe :data="infoList" v-loading="loading">
        <!-- <el-table-column label='商户Id' align="center" prop="storeId" min-width="160" /> -->

        <!-- <el-table-column label="用户姓名" align="center" prop="nickName" min-width="150" /> -->
        <el-table-column label="登陆账号" align="left" prop="userName" min-width="110">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="用户手机" align="center" prop="phonenumber" min-width="150" /> -->
        <el-table-column label="商户名称" align="left" prop="storeName" min-width="130"/>
        <el-table-column label="用户等级" align="center" prop="userLevel" width="80"/>
        <el-table-column label="用户类型" align="center" prop="userType" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.userType == 'store'
              ? 'success' : 'primary'
              ">
              {{ scope.row.userLevel == 1 ? '平台直属' : '代理下级' }}{{ scope.row.userType == 'store' ? '商户' : '代理商' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column label="商户名称" align="center" prop="storeName" min-width="150">
          <template slot-scope="scope">
            <div class="arl" @click="handleView(scope.row)">{{ scope.row.storeName }}</div>
          </template>
        </el-table-column> -->

        <el-table-column :label="'代理数\n商户数'" align="center" prop="storeNo" width="80">
          <template slot-scope="scope">
            <div>
              {{ scope.row.agentCount }}
            </div>
            <div>
              {{ scope.row.storeCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="'在途资金(元)\n冻结资金(元)'" align="center" prop="storeNo" width="90">
          <template slot-scope="scope">
            <div>
              {{ scope.row.userCapitalAccount.transitCapital }}
            </div>
            <div>
              {{ scope.row.userCapitalAccount.frozenCapital }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="可用资金(元)" align="center" prop="useCapital" width="100">
          <template slot-scope="scope">
            {{ scope.row.userCapitalAccount.useCapital }}
          </template>
        </el-table-column>
        <el-table-column label="上级用户" align="center" prop="parentName" />
<!--        :render-header="renderTestStatusHeader"-->
        <el-table-column label="测试状态" align="center" prop="testStatus" width="100px" >
          <template slot="header">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">测试状态为开启时，创建的代付和代收订单，将不会推送三方系统！</div>
              <span>测试状态<i class="el-icon-question" style="color: #409EFF; margin-left: 5px;"></i></span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-switch v-model="scope.row.testStatus" active-text="开" inactive-text="关" active-value="open"
                       inactive-value="close" @change="changeStoreTestStatus(scope.row)"
                       v-hasPermi="['store:store:updateStore']">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="国家代码" align="center" prop="nationCode" />
        <el-table-column label="国家名称" align="center" prop="nationName" />
        <el-table-column label="国家货币符号" align="center" prop="nationSymbol" min-width="100" />




        <!-- <el-table-column label="商户类型" align="center" prop="storeType" min-width="120">
          <template slot-scope="scope">
            <el-tag :type="
              scope.row.storeType == 'my_store'
                ? 'success'
                : scope.row.storeType == 'directly_under' ? 'primary' : 'danger'
            ">
              {{ scope.row.storeType == 'my_store'
                ? '代理自己商户'
                : scope.row.storeType == 'directly_under' ? '平台直属商户' : '代理下级商户' }}
            </el-tag>
          </template>
        </el-table-column> -->

        <el-table-column label="创建时间" align="center" prop="createTime" min-width="180" />

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="230">
          <template slot-scope="scope">


            <el-button size="small" type="text" icon="el-icon-edit" @click="handleAdd('新增代理', 'agent', scope.row)"
              style="color: #006EFF;" v-if="scope.row.userType != 'store'"
              v-hasPermi="['system:user:saveStoreOragent']">新增下级代理</el-button>
            <el-button size="small" type="text" icon="el-icon-edit" style="color: #006EFF;"
              @click="handleAdd('新增商户', 'store', scope.row)" v-if="scope.row.userType != 'store'"
              v-hasPermi="['system:user:saveStoreOragent']">新增下级商户</el-button>

            <el-button size="small" type="text" style="color: #006EFF;" v-if="scope.row.userType == 'agent'"
              @click="handleView(scope.row)">子钱包</el-button>

            <!-- 商户 -->
            <el-button size="small" v-if="scope.row.userType == 'store'" type="text"
              v-hasPermi="['system:user:assignAgents']" @click="handleAgent('分配代理商', 'divide', scope.row)"
              style="color: #006EFF;">分配代理商</el-button>
            <el-button size="small" type="text" style="color: #006EFF;" @click="handleCode('身份验证', scope.row)"
              v-hasPermi="['system:user:getGoogleCaptcha']">查看密钥</el-button>
            <el-button size="small" type="text" style="color: #006EFF;" @click="handleDelete(scope.row)"
              v-hasPermi="['system:user:remove']">删除</el-button>
            <el-button size="small" type="text" style="color: #006EFF;" @click="handleViewMy(scope.row)"
              v-hasPermi="['store:store:query']" v-if="scope.row.userType == 'store'">详情</el-button><br />

            <el-button size="small" type="text" style="color: #006EFF;" @click="handleViewTo(scope.row)"
              v-hasPermi="['order:rechargeRecord:capitalList']" v-if="scope.row.userType == 'store'">子钱包</el-button>

            <el-button size="small" type="text" style="color: #006EFF;" @click="go('/add', scope.row.storeId)"
              v-if="scope.row.userType == 'store'" v-hasPermi="['store:store:query']">通道</el-button>
            <el-button size="small" type="text" style="color: #006EFF;" @click="go('/rate', scope.row.storeId)"
              v-if="scope.row.userType == 'store'" v-hasPermi="['store:store:query']">费率</el-button>
            <el-button size="small" type="text" style="color: #006EFF;" @click="go('/operate', scope.row.storeId)"
              v-if="scope.row.userType == 'store'" v-hasPermi="['store:store:query']">配置</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">
      </pagination>
    </div>

    <!-- 添加或修改广告文本内容对话框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false"
      :before-close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
        </el-form-item>

        <el-form-item label="账号" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入账号" />
        </el-form-item>


        <el-form-item label="国家" prop="nationCode">
          <el-select v-model="form.nationCode" placeholder="请选择国家" clearable size="medium">
            <el-option v-for="(item, i) in nation" :key="i" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="form.confirmPassword" placeholder="请输入确认密码" />
        </el-form-item>

        <div v-if="form.type == 'store'">
          <el-form-item label="商户名称" prop="storeName">
            <el-input v-model="form.storeName" placeholder="请输入商户名称" />
          </el-form-item>
          <el-form-item label="商户电话" prop="storeTelephone">
            <el-input v-model="form.storeTelephone" placeholder="请输入商户电话" />
          </el-form-item>
          <el-form-item label="商户营业执照号" prop="organizationCode">
            <el-input v-model="form.organizationCode" placeholder="请输入商户营业执照号" />
          </el-form-item>
          <el-form-item label="商户地址" prop="storeAddress">
            <el-input v-model="form.storeAddress" placeholder="请输入商户地址" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 身份校验 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="openCode" width="600px" append-to-body
      :close-on-click-modal="false" :before-close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="谷歌动态验证码" prop="code" v-if="!form.googleCaptcha">
          <el-input v-model="form.code" placeholder="请输入谷歌动态验证码" />
        </el-form-item>
        <div v-else>
          <el-form-item label="Google安全秘钥" prop="code">
            <el-input v-model="form.googleCaptcha" :disabled="true" placeholder="" />
            <span class="updatePassword" @click="updateKey" v-hasPermi="['system:user:upGoogleCaptcha']">更新密钥</span>
          </el-form-item>
          <el-form-item label="密码" prop="">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="提现密码" prop="withdrawalsPwd">
            <el-input v-model="form.withdrawalsPwd" type="password" placeholder="请输入提现密码" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :title="detailTitle" :visible.sync="isShowDetail" width="50%"
      append-to-body>
      <el-form label-width="142px" :label-suffix="':'">
        <div class="card-detail" style="display: flex;justify-content: space-around;">
          <div>
            <el-form-item label="用户编号">
              {{ detailInfoList.userId }}
            </el-form-item>
            <el-form-item label="用户姓名">
              {{ detailInfoList.nickName }}
            </el-form-item>
            <el-form-item label="商户id">
              {{ detailInfoList.storeId }}
            </el-form-item>
            <el-form-item label="登陆账号">
              {{ detailInfoList.userName }}
            </el-form-item>
            <!-- <el-form-item label="用户手机">
              {{ detailInfoList.phonenumber }}
            </el-form-item> -->

            <el-form-item label="用户类型">
              <el-tag :type="detailInfoList.userType == 'store'
                ? 'success' : 'primary'
                ">
                {{ detailInfoList.userLevel == 1 ? '平台直属' : '代理下级' }}{{ detailInfoList.userType == 'store' ? '商户' : '代理商'
                }}
              </el-tag>
            </el-form-item>
            <el-form-item label="用户等级">
              {{ detailInfoList.userLevel }}
            </el-form-item>
            <el-form-item label="国家名称">
              {{ detailInfoList.nationName }}
            </el-form-item>
            <el-form-item label="创建时间">
              {{ detailInfoList.createTime }}
            </el-form-item>
          </div>
          <div>


            <el-form-item label="国家货币符号">
              {{ detailInfoList.nationSymbol }}
            </el-form-item>
            <el-form-item label="商户号">
              {{ detailInfoList.storeNo }} <span v-if="detailInfoList.storeNo" @click="copy(detailInfoList.storeNo)"
                style="cursor: pointer;color:#006EFF;margin-left: 10px;">复制</span>
            </el-form-item>

            <el-form-item label="签名Key">
              {{ detailInfoList.storeKey }} <span v-if="detailInfoList.storeKey" @click="copy(detailInfoList.storeKey)"
                style="cursor: pointer;color:#006EFF;margin-left: 10px;">复制</span>
              <span v-if="detailInfoList.storeKey" @click="updateDetailKey()"
                style="cursor: pointer;color:#006EFF;margin-left: 10px;">更新</span>
            </el-form-item>

            <el-form-item label="代理数">
              {{ detailInfoList.agentCount }}
            </el-form-item>
            <el-form-item label="商户数">
              {{ detailInfoList.storeCount }}
            </el-form-item>
            <el-form-item label="国家代码">
              {{ detailInfoList.nationCode }}
            </el-form-item>

            <!-- <el-form-item label="在途资金(元)">
              {{ transitCapital }}
            </el-form-item>
            <el-form-item label="冻结资金(元)">
              {{ frozenCapital }}
            </el-form-item>
            <el-form-item label="可用资金(元)">
              {{ useCapital }}
            </el-form-item> -->
            <!-- <el-form-item label="商户类型">
              <el-tag :type="
                detailInfoList.storeType == 'my_store'
                  ? 'success'
                  : detailInfoList.storeType == 'directly_under' ? 'primary' : 'danger'
              ">
                {{ detailInfoList.storeType == 'my_store'
                  ? '代理自己商户'
                  : detailInfoList.storeType == 'directly_under' ? '平台直属商户' : '代理下级商户' }}
              </el-tag>
            </el-form-item> -->
            <el-form-item label="上级用户">
              {{ detailInfoList.parentName }}
            </el-form-item>
            <el-form-item label="商户名称">
              {{ detailInfoList.storeName }}
            </el-form-item>
          </div>
          <div>

            <!-- <el-form-item label="商户电话">
              {{ detailInfoList.storeTelephone }}
            </el-form-item> -->
            <!-- <el-form-item label="营业执照">
              {{ detailInfoList.organizationCode }}
            </el-form-item> -->
            <!-- <el-form-item label="商户地址">
              {{ detailInfoList.storeAddress }}
            </el-form-item> -->
            <!-- <el-form-item label="入金状态">
              <el-switch v-model="detailInfoList.statusIn" active-text="开" inactive-text="关" active-value="open"
                inactive-value="close" @change="switchStatusChange('statusIn', detailInfoList)">
              </el-switch>
            </el-form-item>
            <el-form-item label="出金状态">
              <el-switch v-model="detailInfoList.statusOut" active-text="开" inactive-text="关" active-value="open"
                inactive-value="close" @change="switchStatusChange('statusOut', detailInfoList)">
              </el-switch>
            </el-form-item> -->



          </div>
        </div>
      </el-form>
    </el-dialog>


    <!-- 分配用户代理商 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="openAgent" width="600px" append-to-body
      :close-on-click-modal="false" :before-close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="代理商" prop="parentId">
          <el-select v-model="form.parentId" placeholder="请选择代理商" clearable size="medium" @change="change">
            <el-option v-for="(item, i) in allAgent" :key="i" :label="item.userName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormDivide()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 资金列表 -->
    <el-dialog v-dialogDrag title="资金列表" :visible.sync="pkCouponScopeRangeParkingStoreOpen" width="80%" append-to-body
      :close-on-click-modal="false">
      <pkCouponScopeRangeStoreList v-if="pkCouponScopeRangeParkingStoreOpen" :pkCouponStore="pkCouponStore"
        :pkCouponId="pkCouponStoreId">
      </pkCouponScopeRangeStoreList>
    </el-dialog>


    <!-- 子钱包 -->
    <el-dialog v-dialogDrag title="子钱包" :visible.sync="pkCouponScopeRangeParkingStoreOpen2" width="80%" append-to-body
      :close-on-click-modal="false">
      <pkCouponScopeRangeStoreListWallet v-if="pkCouponScopeRangeParkingStoreOpen2" :pkCouponStore="pkCouponStore"
        :pkCouponId="pkCouponStoreId">
      </pkCouponScopeRangeStoreListWallet>
    </el-dialog>

  </div>
</template>

<script>
import {common_api, payAgentUser, payBankPayment} from "@/api/form";
import { resetUserPwd, delUser } from "@/api/system/user";
import Editor from "@/components/Editor";
import { getToken } from "@/utils/auth";
import pkCouponScopeRangeStoreList from "./pkCouponScopeRangeStoreList2";
import pkCouponScopeRangeStoreListWallet from "./pkCouponScopeRangeStoreListWallet";

import pwd from "./pwd";

export default {
  name: "payAgentUserList",
  components: { Editor, pkCouponScopeRangeStoreList, pwd, pkCouponScopeRangeStoreListWallet },
  data() {
    var checkConfirmPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入确认密码'));
      }
      setTimeout(() => {
        if (this.form.password != this.form.confirmPassword) {
          callback(new Error('两次输入密码不同'));
        } else {
          callback();
        }
      }, 1000);
    };
    var checkPhone = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/
      if (!reg.test(value) && value) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 3);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 6);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近两年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 36);
              picker.$emit('pick', [start, end]);
            }
          },
        ]
      },
      // 代理商
      allAgent: [],
      // 国家
      nation: [],
      pkCouponScopeRangeParkingStoreOpen: false,
      pkCouponScopeRangeParkingStoreOpen2: false,
      // 显示详情
      isShowDetail: false,
      dateRange: [],
      // 新增广告图片地址
      imageUrl: "",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 广告表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openCode: false,
      openAgent: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        nickName: null,
        phonenumber: null,
        storeName: null,
        storeNo: null,
        parentName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        nationCode: [
          { required: true, message: "请选择国家", trigger: "blur" },
        ],
        // nickName: [
        //   { required: true, message: "请输入姓名", trigger: "blur" },
        // ],

        phonenumber: [
          { type: 'number', validator: checkPhone, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: checkConfirmPassword, trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: "请输入商户名称", trigger: "blur" },
        ],
        // storeTelephone: [
        //   { required: true, message: "请输入商户电话", trigger: "blur" },
        // ],

        storeTelephone: [
          { type: 'number', validator: checkPhone, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        // organizationCode: [
        //   { required: true, message: "请输入商户营业执照号", trigger: "blur" },
        // ],
        // storeAddress: [
        //   { required: true, message: "请输入商户地址", trigger: "blur" },
        // ],
        code: [
          { required: true, message: "请输入谷歌动态验证码", trigger: "blur" },
        ],
      },

      // 广告类型
      adTypeOption: [],

      // 广告位下拉选择
      adPositionOption: [],
      //   广告终端
      adterminalType: [],
      // 预览
      srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'],

      actionUrl: `${process.env.VUE_APP_BASE_API}`,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      sum: {},
      detailTitle: '',
      detailInfoList: {
        userCapitalAccount: {}
      },
      pkCouponStore: {},
      pkCouponStoreId: '',
    };
  },
  created() {
    this.getList();
    this.init();
  },
  computed: {
    transitCapital() {
      return this.detailInfoList.userCapitalAccount.transitCapital
    },
    frozenCapital() {
      return this.detailInfoList.userCapitalAccount.frozenCapital
    },
    useCapital() {
      return this.detailInfoList.userCapitalAccount.useCapital
    },
  },
  methods: {
    updateDetailKey() {
      payAgentUser
        .upStoreCaptcha({
          storeId: this.detailInfoList.storeId
        })
        .then((response) => {
          this.detailInfoList.storeKey = response.data.storeCaptcha
          this.$forceUpdate()
        });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
        return delUser(userIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    // 查看资金清算资金列表
    handleViewTo(row) {
      this.pkCouponStore = row;
      this.pkCouponStoreId = row.storeId;
      this.pkCouponScopeRangeParkingStoreOpen2 = true;
    },
    // 查看资金列表
    handleView(row) {
      this.pkCouponStore = row;
      this.pkCouponStoreId = row.userId;
      this.pkCouponScopeRangeParkingStoreOpen = true;
    },
    copy(value) {
      this.$copyText(value).then(message => {
        this.$message.success('Copied!')
      }).catch(err => {
        this.$message.error('Copy failed!')
      })
    },
    change() {
      this.$forceUpdate()
    },
    // 出入金状态
    switchStatusChange(val, row) {
      const id = row.storeId;
      if (val == 'statusIn') {
        let type = '';
        row.statusIn == 'close' ? type = 'close' : type = 'open'
        payAgentUser.editStorePay({
          statusIn: type,
          statusOut: '',
          storeId: id,
        }).then((response) => {
          if (response.code === 200) {
            this.getList()
            this.$message.success("编辑成功");
          }
        });
      } else {
        let type = '';
        row.statusOut == 'close' ? type = 'close' : type = 'open'
        payAgentUser.editStorePay({
          statusOut: type,
          statusIn: '',
          storeId: id,
        }).then((response) => {
          if (response.code === 200) {
            this.getList()
            this.$message.success("编辑成功");
          }
        });
      }

    },

    // 查看详情
    handleViewMy(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      payAgentUser.getInfo(row.storeId)
        .then((response) => {
          this.detailInfoList = row;
          this.isShowDetail = true;
          this.detailTitle = "商户代理管理详情";
          this.detailInfoList.storeTelephone = response.data.store.storeTelephone
          this.detailInfoList.organizationCode = response.data.store.organizationCode
          this.detailInfoList.storeAddress = response.data.store.storeAddress
          this.detailInfoList.storeKey = response.data.storePay.storeKey
          this.detailInfoList.statusOut = response.data.storePay.statusOut
          this.detailInfoList.statusIn = response.data.storePay.statusIn
          this.detailInfoList.storeId = response.data.store.id
          this.loading = false;
        }).catch(() => {
          this.loading = false
        })
    },
    go(url, val) {
      this.$router.push({ path: url, query: { type: val } });
    },
    // 更新密钥
    updateKey() {
      payAgentUser
        .upGoogleCaptcha({
          userId: this.form.userId
        })
        .then((response) => {
          this.form.googleCaptcha = response.data.googleCaptcha
        });
    },
    // 商户测试状态有效无效
    changeStoreTestStatus(row) {
      console.log("商户信息:" + JSON.stringify(row));
      var data = {id: row.storeId, testStatus: row.testStatus, storeName: row.storeName}
      payAgentUser.updateStore(data).then((res) => {
          if (res.code === 200) {
            var msg = '【' + data.storeName + '】' + (row.testStatus === 'open' ? '已开启测试模式' : '测试模式已关闭');
            this.$message.success(msg);
            this.getList();
          }
        });
    },
    renderTestStatusHeader(h, { column }) {
      return h('span', [
        column.label,
        h('i', {
          class: 'el-icon-question',
          style: 'color: #409EFF; margin-left: 5px;',
          on: {
            click: this.handleTooltip
          }
        })
      ]);
    },
    handleTooltip() {
      this.$message({ message: '测试状态为开启时，创建的代付和代收订单，将不会推送三方系统！', type: 'info' });
  },
    /** 查询列表 */
    getList() {
      this.loading = true;
      payAgentUser
        .listInfo(this.addSESDateRange(this.queryParams, this.dateRange))
        .then((response) => {
          this.infoList = response.rows;
          this.total = Number(response.total);
          this.loading = false;
        });
    },
    init() {
      // 查询代理商和用户总数
      payAgentUser
        .getAgentUserCount()
        .then((response) => {
          this.sum = response.data
        });
      // 所有国家
      common_api
        .getAllNation()
        .then((response) => {
          this.nation = response.data
        });
      // 所有代理商
      common_api
        .selectAgentListAll()
        .then((response) => {
          this.allAgent = response.data
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openCode = false;
      this.openAgent = false
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        nickName: null,
        phonenumber: null,
        userName: null,
        password: null,
        confirmPassword: null,
        type: null,
        googleCaptcha: null,
        code: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 代理商分配操作 */
    handleAgent(title, type, val) {
      this.reset();
      this.openAgent = true;
      // 添加userid
      if (val) {
        this.form.userId = val.userId
      }
      this.form.parentId = this.allAgent[0].userId
      this.title = title;
    },
    /** 新增按钮操作 */
    handleAdd(title, type, val) {
      this.reset();
      // 添加userid
      if (val) {
        this.form.parentId = val.userId
      }
      this.open = true;
      this.title = title;
      this.form.type = type
    },
    /** 身份验证操作 */
    handleCode(title, val) {
      this.reset();
      console.log(val)
      // 添加userid
      if (val) {
        this.form.userId = val.userId
      }
      this.title = title;
      this.openCode = true;
    },
    // 提交分配代理商
    submitFormDivide() {
      this.$refs["form"].validate((valid) => {
        const loading = this.$loading({
          lock: true,
          // text: `正在${this.form.userId ? "获取" : "添加"}${this.title}`,
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        payAgentUser
          .assignAgents({
            userId: this.form.userId,
            parentId: this.form.parentId,
          })
          .then((response) => {
            if (response.code == 200) {
              this.$message.success(response.msg)
              this.openAgent = false
              this.getList()
            }
            loading.close();

          })
          .catch(() => {
            loading.close();
          });
      });

    },

    /** 提交按钮 */
    submitForm(type) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            // text: `正在${this.form.userId ? "获取" : "添加"}${this.title}`,
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          if (this.form.userId != null) {
            payAgentUser
              .getGoogleCaptcha(this.form)
              .then((response) => {
                loading.close();
                this.form.googleCaptcha = response.data.googleCaptcha
              })
              .catch(() => {
                loading.close();
              });
          }
          if (this.form.googleCaptcha != null) {
            /** 重置密码按钮操作 */
            resetUserPwd(this.form.userId, this.form.password, this.form.withdrawalsPwd).then(response => {
              this.openCode = false;
              this.msgSuccess("修改成功，新密码是：" + this.form.password);
              this.getList();
            });
          }
          if (this.form.userId == null) {
            payAgentUser
              .addInfo(this.form)
              .then((response) => {
                loading.close();
                this.open = false;
                this.msgSuccess("新增成功");
                this.getList();
              })
              .catch((err) => {
                loading.close();
              });
          }

        }
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.el-radio {
  line-height: 2;
}
.el-form-item {
  margin-bottom: 16px;
}
</style>
