<template>
  <div class="p-2">
    <div v-show="show">
      <el-card shadow="hover" class="mb-[10px]">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" size="default" class="ry_form">
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              :clearable="true"
              :picker-options="pickerOptions"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="会员ID" prop="id">
            <el-input v-model.trim="queryParams.id" placeholder="请输入会员id" clearable />
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model.trim="queryParams.nickname" placeholder="请输入昵称" clearable />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="queryParams.phone" placeholder="请输入手机号码" clearable />
          </el-form-item>
          <el-form-item label="备注" prop="mark">
            <el-select v-model="queryParams.hasMark" clearable>
              <el-option value="1" label="有备注" />
              <el-option value="0" label="无备注" />
            </el-select>
          </el-form-item>
          <el-form-item class="flex_one tr">
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <!--        <el-button :icon="showMoreCondition ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"  @click="showMoreCondition = !showMoreCondition">{{showMoreCondition ? '收起条件' : '展开条件'}}</el-button>-->
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="hover">
        <el-table v-loading="loading" :data="umsMemberList" border empty-text="暂无数据">
          <!--        <el-table-column label="会员ID" prop="id" width="180" />-->
          <el-table-column label="昵称" prop="nickname" width="150" align="center" />
          <el-table-column label="手机号" prop="phoneHidden" width="150" align="center" />
          <el-table-column label="注册日期" prop="createTime" width="150" align="center" />
          <!--        <el-table-column label="钱包" prop="phoneHidden" width="150" />
        <el-table-column label="营收" prop="phoneHidden" width="150" />
        <el-table-column label="积分" prop="integral" width="150" />

        <el-table-column label="实名认证信息" prop="userName" width="150" />
        <el-table-column label="银行卡信息" prop="phoneHidden" width="150" />-->
          <el-table-column label="账号状态" prop="status" width="150" align="center">
            <template v-slot="scope">
              <el-switch
                :model-value="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                inline-prompt
                :before-change="
                  () => {
                    return handleChangeUserStatus(scope.row);
                  }
                "
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="内部账号" prop="userId" width="90" align="center">
            <template v-slot="scope">
              {{ scope.row.userId ? '内部账号' : '外部账号' }}
            </template>
          </el-table-column>
          <el-table-column label="关注数量" prop="followCount" width="100" align="center">
            <template v-slot="scope">
              <el-button text type="primary" icon="user" @click="showUserFansListModal(1, scope.row, true)">{{ scope.row.followCount }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="粉丝数量" prop="fansCount" width="100" align="center">
            <template v-slot="scope">
              <el-button text type="primary" icon="user" @click="showUserFansListModal(2, scope.row, true)">{{ scope.row.fansCount }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="好友数量" prop="friendsCount" width="100" align="center">
            <template v-slot="scope">
              <el-button text type="primary" icon="user" @click="showUserFansListModal(3, scope.row, true)">{{ scope.row.friendsCount }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="推广码" prop="spreadCode" width="150" align="center" />
          <el-table-column label="推广人" prop="spreadUid" width="150" align="center" />
          <el-table-column label="openId" prop="openId" width="150" align="center" />
          <!--        <el-table-column label="注册时间" prop="createTime" width="180">
          <template v-slot="scope">
            <div>{{ parseTime(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="上次登录" prop="createTime">
          <template v-slot="scope">
            <div>{{ parseTime(scope.row.createTime) }}</div>
          </template>
        </el-table-column>-->
          <el-table-column label="备注" align="center">
            <template v-slot="scope">
              <span class="mr10">{{ scope.row.mark }}</span>
              <i class="el-icon-edit pointer" @click="showUpdateMark(scope.row)"></i>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" fixed="right" width="500">
            <template v-slot="scope">
              <el-button size="small" text type="primary" @click="showUserAccountModal(scope.row)">账户数据</el-button>
              <el-button size="small" text type="primary" @click="showUserBankCardInfoModal(scope.row, true)">银行卡 </el-button>
              <el-button size="small" text type="primary" @click="showBlackListInfoModal(scope.row)">黑名单 </el-button>
              <el-button size="small" text type="primary" @click="showUserAccountEditModal(scope.row)">编辑 </el-button>
              <el-button size="small" text type="primary" @click="handleUserDelete(scope.row)">删除 </el-button>
              <el-button size="small" text type="primary" @click="showUserBannedInfoModal(scope.row, true)">封禁记录 </el-button>
              <el-button size="small" text type="primary" @click="showUserLoginInfoModal(scope.row, true)">登录记录 </el-button>
              <el-button size="small" text type="primary" @click="showChargeInfoModal(scope.row, true)">充值记录 </el-button>
              <el-button size="small" text type="primary" @click="goWithdrawInfoPage(scope.row)">提现记录 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" v-model:page="queryParams.current" v-model:limit="queryParams.size" @pagination="getList" />
      </el-card>
    </div>
    <!-- 会员账户详情-->
    <el-dialog :title="userAccountModal.title" v-model="userAccountModal.open" width="500px" append-to-body>
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="钱包">￥{{ userAccountModal.data.wallet || 0 }}</el-descriptions-item>
        <el-descriptions-item label="营收">￥{{ userAccountModal.data.revenue || 0 }}</el-descriptions-item>
        <el-descriptions-item label="积分余额">￥{{ userAccountModal.data.integralBalance || 0 }}</el-descriptions-item>
        <el-descriptions-item label="账户余额">￥{{ userAccountModal.data.moneyBalance || 0 }}</el-descriptions-item>
        <el-descriptions-item label="历史总积分">￥{{ userAccountModal.data.totalIntegralBalance || 0 }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--黑名单信息-->
    <el-dialog title="黑名单" width="800px" v-model="blackListModalInfo.open" append-to-body>
      <el-table v-loading="blackListTableLoading" :data="blackListModalInfo.data" border empty-text="暂无数据">
        <el-table-column label="手机号" prop="phone" width="150" align="center">
          <template v-slot="scope">
            {{ scope.row.blockMember.phone }}
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" align="center">
          <template v-slot="scope">
            {{ scope.row.blockMember.nickname }}
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="avatar" align="center">
          <template v-slot="scope">
            <el-image v-if="scope.row.blockMember.avatar" :src="scope.row.blockMember.avatar" class="small-img circle-img" />
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template v-slot="scope">
            <div v-if="scope.row.blockMember.status == 0">封禁</div>
            <div v-else-if="scope.row.blockMember.status == 1">正常</div>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" align="center">
          <template v-slot="scope">
            <el-tag style="margin-right: 10px">
              {{ getEmulistLabelById(scope.row.blockMember.gender, userSexMap) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生日" prop="birthday" align="center">
          <template v-slot="scope">
            {{ scope.row.blockMember.birthday }}
          </template>
        </el-table-column>
        <el-table-column label="等级" prop="level" align="center">
          <template v-slot="scope">
            {{ scope.row.blockMember.level }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--会员余额变更记录-->
    <el-dialog title="会员余额变更记录" v-model="userBalanceInfoModalVisible" width="900px" append-to-body>
      <el-table v-loading="userBalanceInfoTableLoading" :data="userBalanceInfo.data" border empty-text="暂无数据">
        <el-table-column label="昵称" width="150" align="center">
          <template v-slot="scope">
            {{ userBalanceInfo.record.nickname }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="150" align="center">
          <template v-slot="scope">
            {{ userBalanceInfo.record.phone }}
          </template>
        </el-table-column>
        <el-table-column label="变更前余额" prop="beforeBalance" width="180" align="center" />
        <el-table-column label="变更后余额" prop="afterBalance" align="center" />
        <el-table-column label="变更的金额" prop="changeAmount" width="100" align="center" />
        <el-table-column label="金额来源" prop="source" width="100" align="center" />
      </el-table>
      <pagination
        v-if="userBalanceInfo.total"
        :total="userBalanceInfo.total"
        v-model:page="userBalanceParams.current"
        v-model:limit="userBalanceParams.size"
        @pagination="
          () => {
            showUserBalanceInfoModal(userBalanceInfo.record);
          }
        "
      />
    </el-dialog>

    <!--会员充值记录-->
    <el-dialog title="会员充值记录" v-model="userChargeInfoModalVisible" width="1200px" append-to-body>
      <el-table v-loading="userChargeInfoTableLoading" :data="userChargedrawInfo.data" border empty-text="暂无数据">
        <el-table-column label="充值人" prop="createBy" align="center" />
        <el-table-column label="充值时间" prop="createTime" align="center" />
        <!--        <el-table-column label="提现码" prop="code" />-->
        <el-table-column label="充值金额" prop="money" align="center">
          <template v-slot="scope"> ￥ {{ scope.row.money || '0.00' }} </template>
        </el-table-column>
        <el-table-column label="手续费" prop="fee" align="center">
          <template v-slot="scope"> ￥ {{ scope.row.fee || '0.00' }} </template>
        </el-table-column>

        <el-table-column label="实际充值金额" prop="actualMoney" align="center">
          <template v-slot="scope"> ￥ {{ scope.row.actualMoney || '0.00' }} </template>
        </el-table-column>

        <!--        <el-table-column label="充值方式" prop="method">
          <template v-slot="scope">
            {{ getEmulistLabelById(scope.row.method, userWithdrawMethodMap) }}
          </template>
        </el-table-column>
        <el-table-column label="充值类型" prop="type">
          <template v-slot="scope">
            {{ getEmulistLabelById(scope.row.type, userWithdrawTypeMap) }}
          </template>
        </el-table-column>-->
        <!--        <el-table-column label="提现状态" prop="status">
          <template v-slot="scope">
            {{ getEmulistLabelById(scope.row.status, userWithdrawStatusMap) }}
          </template>
        </el-table-column>
        <el-table-column label="审批状态" prop="auditStatus">
          <template v-slot="scope">
            {{ getEmulistLabelById(scope.row.auditStatus, userWithdrawAuditMap) }}
          </template>
        </el-table-column>-->
        <!--        <el-table-column label="审核人" prop="auditBy" width="100" />
        <el-table-column label="审核时间" prop="auditTime" width="100" />-->
      </el-table>
      <pagination
        v-if="userChargedrawInfo.total"
        :total="userChargedrawInfo.total"
        v-model:page="chargeDataParams.current"
        v-model:limit="chargeDataParams.size"
        @pagination="
          () => {
            showChargeInfoModal(userChargedrawInfo.record);
          }
        "
      />
    </el-dialog>

    <!--用户封禁记录-->
    <el-dialog title="会员封禁信息" v-model="userBannedInfoModalVisible" width="900px" append-to-body>
      <el-table v-loading="userBannedInfoTableLoading" :data="userBannedInfo.data" border empty-text="暂无数据">
        <!--        <el-table-column label="手机号" prop="phone" width="150">
          <template v-slot="scope">
            {{ userBannedInfo.record.nickname }}
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" width="150">
          <template v-slot="scope">
            {{ userBannedInfo.record.nickname }}
          </template>
        </el-table-column>-->
        <el-table-column label="封禁原因" prop="reason" align="center">
          <template v-slot="scope">
            {{ getEmulistLabelById(scope.row.reason, userForbiddenReasonMap) }}
          </template>
        </el-table-column>
        <el-table-column label="封禁次数" prop="times" align="center">
          <template v-slot="scope">
            {{ scope.row.times }}
          </template>
        </el-table-column>
        <el-table-column label="封禁时长" prop="unit" align="center">
          <template v-slot="scope">
            {{ scope.row.duration }}
            {{ getEmulistLabelById(scope.row.unit, userForbiddenUnitMap) }}
          </template>
        </el-table-column>
        <el-table-column label="封禁开始-结束时间" prop="startTime" align="center" min-width="250">
          <template v-slot="scope"> {{ scope.row.startTime }} - {{ scope.row.endTime }} </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="userBannedInfo.total"
        :total="userBannedInfo.total"
        v-model:page="bannedDataParams.current"
        v-model:limit="bannedDataParams.size"
        @pagination="
          () => {
            showUserBannedInfoModal(userBannedInfo.record);
          }
        "
      />
    </el-dialog>
    <!--会员登录信息-->
    <el-dialog title="会员登录信息" v-model="userLoginInfoModalVisible" width="1200px" append-to-body>
      <el-table v-loading="userLoginInfoTableLoading" :data="userLoginInfo.data" border empty-text="暂无数据">
        <el-table-column label="手机号" prop="phone" width="150" align="center" />
        <el-table-column label="IP" prop="nickname" width="150" align="center"></el-table-column>
        <el-table-column label="登陆地点" prop="loginLocation" width="180" align="center" />
        <el-table-column label="浏览器类型" prop="browser" align="center" width="180" />
        <el-table-column label="操作系统" prop="os" align="center" />
        <el-table-column label="登录时间" prop="loginTime" align="center" />
      </el-table>
      <pagination
        v-if="userLoginInfo.total"
        :total="userLoginInfo.total"
        v-model:page="loginDataParams.current"
        v-model:limit="loginDataParams.size"
        @pagination="
          () => {
            showUserLoginInfoModal(userBannedInfo.record);
          }
        "
      />
    </el-dialog>

    <!--会员银行卡信息-->
    <el-dialog title="会员银行卡信息" v-model="userBankCardInfoModalVisible" width="800px" append-to-body>
      <el-table v-loading="userBankCardInfoTableLoading" :data="userBankCardInfo.data" border empty-text="暂无数据">
        <el-table-column label="id" prop="id" align="center" />
        <el-table-column label="编码" prop="code" align="center" />
        <el-table-column label="银行名称" prop="name" align="center"></el-table-column>
        <el-table-column label="开户行地址" prop="address" align="center" />
      </el-table>
      <pagination
        v-if="userBankCardInfo.total"
        :total="userBankCardInfo.total"
        v-model:page="bankCardDataParams.current"
        v-model:limit="bankCardDataParams.size"
        @pagination="
          () => {
            showUserBankCardInfoModal(userBannedInfo.record);
          }
        "
      />
    </el-dialog>

    <!--用户粉丝、关注、好友列表-->
    <el-dialog
      :title="userFansFriendFocusInfo.clickType == 1 ? '关注列表' : userFansFriendFocusInfo.clickType == 2 ? '粉丝列表' : '好友列表'"
      v-model="userFansFriendFocusModalVisible"
      width="1000px"
      append-to-body
    >
      <el-table v-loading="userFansFriendFocusLoading" :data="userFansFriendFocusInfo.data" border empty-text="暂无数据">
        <el-table-column label="手机号" prop="phone" width="150">
          <template v-slot="scope">
            {{ scope.row.fan.phone }}
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" width="150">
          <template v-slot="scope">
            {{ scope.row.fan.nickname }}
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="avatar">
          <template v-slot="scope">
            {{ scope.row.fan.avatar }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="180">
          <template v-slot="scope">
            <div v-if="scope.row.fan.status == 0">封禁</div>
            <div v-else-if="scope.row.fan.status == 1">正常</div>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" width="100">
          <template v-slot="scope">
            {{ scope.row.fan.gender }}
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="loginTime" width="100">
          <template v-slot="scope">
            {{ scope.row.fan.loginTime }}
          </template>
        </el-table-column>
        <el-table-column label="等级" prop="level" width="100">
          <template v-slot="scope">
            {{ scope.row.fan.level }}
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="loginTime" width="100">
          <template v-slot="scope">
            {{ scope.row.fan.loginTime }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="userFansFriendFocusInfo.total"
        :total="userFansFriendFocusInfo.total"
        v-model:page="fansPageParams.current"
        v-model:limit="fansPageParams.size"
        @pagination="
          () => {
            showUserFansListModal(userFansFriendFocusInfo.clickType, {}, false);
          }
        "
      />
    </el-dialog>

    <!--编辑会员基础信息-->
    <el-dialog title="编辑会员信息" v-model="userAccountEditModal.open" width="500px" append-to-body>
      <el-form label-width="auto" :rules="userEditRules" :model="userAccountEditModal.data" ref="editForm" size="default">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model.trim="userAccountEditModal.data.nickname" placeholder="请输入会员昵称" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.trim="userAccountEditModal.data.password" placeholder="请输入会员密码" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="userAccountEditModal.data.phone" placeholder="请输入会员手机号" />
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model.trim="userAccountEditModal.data.mark" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-input v-model.trim="userAccountEditModal.data.birthday" placeholder="请选择生日" />
        </el-form-item>
        <el-form-item label="用户等级" prop="level">
          <el-input v-model.trim="userAccountEditModal.data.level" placeholder="请输入用户等级" />
        </el-form-item>
        <el-form-item label="剩余积分" prop="integral">
          <el-input v-model.trim="userAccountEditModal.data.integral" placeholder="请输入剩余积分" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <!--          暂时先用输入框组件，后续OSS上传功能好了迁移到上传upload组件-->
          <el-input v-model.trim="userAccountEditModal.data.avatar" placeholder="请输入头像" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <AddressSelector :style="{ width: '100%' }" v-model="userAccountEditModal.data.fullArea" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <DictRadio v-model="userAccountEditModal.data.gender" radioData="sys_user_sex" :show-all="'all'" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
            inline-prompt
            v-model="userAccountEditModal.data.status"
          />
        </el-form-item>
        <el-row>
          <el-col :span="12"> </el-col>
          <el-col :span="12">
            <el-button type="danger" @click="closeEditUser">关闭</el-button>
            <el-button type="primary" @click="submitEditUser">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--  统计  -->
    <el-dialog :title="statisticsObj.title" v-model="statisticsObj.open" width="500px" append-to-body>
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="购物车数">{{ statisticsObj.data.cartCount }}</el-descriptions-item>
        <el-descriptions-item label="订单数">{{ statisticsObj.data.orderCount }}</el-descriptions-item>
        <el-descriptions-item label="下单金额">￥{{ statisticsObj.data.orderAmount.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="售后数">{{ statisticsObj.data.aftersaleCount }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog title="修改备注" v-model="remarkModal.visible" width="30%" append-to-body>
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remarkModal.mark" />
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="remarkModal.visible = false">取 消</el-button>
          <el-button type="primary" @click="updateRemark">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  addUmsMember,
  changeAccountStatus,
  decryptedPhone,
  delUmsMember,
  exportUmsMember,
  getUmsMember,
  listUmsMember,
  updateUmsMember,
  updateUmsMemberMark,
  getUserAccountInfo,
  upDateMemberStatus,
  getUserLoginInfoData,
  editUserData,
  getUserFriendsList,
  getUserFocusList,
  getUserFansList,
  getUserBlackList,
  getUserBalanceList,
  deleteUser,
  getUserBannelList,
  getUserBankCardList
} from '@/api/ums/member';
import { getUserChargeList } from '@/api/trade/index.js';
import dateUtil from '@/utils/DateUtil';
import { useUserStore } from '@/store/modules/user';
import AddressSelector from '@/views/components/AddressSelector/index.vue';

export default {
  name: 'UmsMember',
  components: { AddressSelector },
  data() {
    return {
      show: false,
      pickerOptions: {
        shortcuts: dateUtil.getTimeShort()
      },
      remarkModal: {
        visible: false,
        mark: null,
        memberId: null
      },
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会员信息表格数据
      umsMemberList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        nickname: null,
        phone: null,
        status: undefined,
        hasMark: undefined
      },
      // 登录信息分页查询参数
      loginDataParams: {
        current: 1,
        size: 10
      },
      dateRange: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        level: [{ required: true, message: '等级不能为空', trigger: 'blur' }],
        integral: [{ required: true, message: '用户剩余积分不能为空', trigger: 'blur' }]
      },
      showMoreCondition: false,
      statisticsObj: {
        open: false,
        data: {
          cartCount: 0,
          orderCount: 0,
          orderAmount: 0.0,
          aftersaleCount: 0
        },
        title: '用户数据统计'
      },

      // 会员账户信息
      userAccountModal: {
        open: false,
        data: {
          wallet: 0,
          revenue: 0,
          integralBalance: 0.0,
          moneyBalance: 0,
          totalIntegralBalance: 0
        },
        title: '会员账户信息'
      },
      userAccountEditModal: {
        open: false,
        data: {}
      },
      userEditRules: {
        nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        /*password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],*/
        /*  address: [{ required: true, message: '地址不能为空', trigger: 'change' }],*/
        /*  avatar: [{ required: true, message: '头像不能为空', trigger: 'change' }],*/
        /* gendor: [{ required: true, message: '性别不能为空', trigger: 'change' }],*/
        birthday: [{ required: true, message: '生日不能为空', trigger: 'change' }],
        level: [{ required: true, message: '用户等级不能为空', trigger: 'blur' }],
        integral: [{ required: true, message: '积分不能为空', trigger: 'blur' }],
        /*        email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],*/
        phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
      },
      // 会员登录信息信息
      userLoginInfo: {
        total: 0,
        data: [],
        record: {}
      },
      userLoginInfoModalVisible: false,
      userLoginInfoTableLoading: false,
      // 会员粉丝、关注、好友数据
      userFansFriendFocusInfo: {
        total: 0,
        data: [],
        record: {},
        clickType: ''
      },
      // // 会员粉丝、关注、好友分页数据
      fansPageParams: {
        current: 1,
        size: 10
      },
      userFansFriendFocusModalVisible: false,
      userFansFriendFocusLoading: false,
      // 黑名单弹框数据
      blackListModalInfo: {
        open: false,
        data: {}
      },
      blackListTableLoading: false,

      // 会员余额变更记录
      userBalanceInfo: {
        total: 0,
        data: [],
        record: {}
      },
      userBalanceInfoModalVisible: false,
      userBalanceInfoTableLoading: false,
      // 余额弹框分页
      userBalanceParams: {
        current: 1,
        size: 10
      },
      userSexMap: [],

      // 用户封禁记录
      userBannedInfo: {
        total: 0,
        data: [],
        record: {}
      },
      userBannedInfoModalVisible: false,
      userBannedInfoTableLoading: false,
      bannedDataParams: {
        current: 1,
        size: 10
      },
      userForbiddenUnitMap: [],
      userForbiddenReasonMap: [],

      // 用户银行卡信息
      userBankCardInfo: {
        total: 0,
        data: [],
        record: {}
      },
      userBankCardInfoModalVisible: false,
      userBankCardInfoTableLoading: false,
      bankCardDataParams: {
        current: 1,
        size: 10
      },
      // 用户提现记录
      userWithdrawInfo: {
        total: 0,
        data: [],
        record: {}
      },
      userWithdrawInfoModalVisible: false,
      userWithdrawInfoTableLoading: false,
      withdrawDataParams: {
        current: 1,
        size: 10
      },
      userWithdrawMethodMap: [],
      userWithdrawTypeMap: [],
      userWithdrawStatusMap: [],
      userWithdrawAuditMap: [],
      userChargedrawInfo: {
        total: 0,
        data: [],
        record: {}
      },
      userChargeInfoModalVisible: false,
      userChargeInfoTableLoading: false,
      chargeDataParams: {
        current: 1,
        size: 10
      }
    };
  },
  async created() {
    this.show = true;
    this.getList();
    const userSexMap = await this.getDictionaryByKey('sys_user_sex');
    this.userSexMap = userSexMap;
  },
  computed: {
    userId: {
      get() {
        return useUserStore().userId;
      }
    }
  },
  methods: {
    /** 查询会员信息列表 */
    getList() {
      this.loading = true;
      const { current: pageNum, size: pageSize } = this.queryParams;
      let query = { ...this.queryParams, pageNum: undefined, pageSize: undefined };
      const pageReq = { current: pageNum - 1, size: pageSize };
      if (!this.dateRange || this.dateRange.length > 0) {
        query = { ...this.addDateRange2(query, this.dateRange) };
      }
      listUmsMember(query, pageReq).then((response) => {
        const { records = [], total = 0 } = response.data || {};
        this.umsMemberList = records;
        this.total = total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nickname: null,
        password: null,
        phone: null,
        mark: null,
        status: 0,
        avatar: null,
        gender: null,
        city: null,
        province: null,
        country: null,
        remark: null,
        birthday: null,
        spreadUid: null,
        spreadTime: null,
        level: null,
        integral: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = '添加会员信息';
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getUmsMember(id).then((response) => {
        this.form = response;
        this.open = true;
        this.title = '修改会员信息';
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateUmsMember(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.open = false;
              this.getList();
            });
          } else {
            addUmsMember(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除会员信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delUmsMember(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功');
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal
        .confirm('是否确认导出所有会员信息数据项？')
        .then(() => {
          this.exportLoading = true;
          return exportUmsMember(queryParams);
        })
        .then((response) => {
          this.$download.download(response);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    // 更改账户状态
    changeStatus(row) {
      const data = {
        memberId: row.id,
        status: row.status
      };
      changeAccountStatus(data).then((response) => {
        if (response < 1) {
          this.$modal.msgError('操作失败');
          this.getList();
        }
      });
    },
    goOrder(phone) {
      if (phone) {
        decryptedPhone(phone).then((res) => {
          this.$router.push({
            path: '/order/list',
            query: {
              phone: res
            }
          });
        });
      } else {
        this.$router.push({
          path: '/order/list',
          query: {}
        });
      }
    },
    goCart(phone) {
      if (phone) {
        decryptedPhone(phone).then((res) => {
          this.$router.push({
            path: '/member/shoppingCart',
            query: {
              phone: res
            }
          });
        });
      } else {
        this.$router.push({
          path: '/member/shoppingCart',
          query: {}
        });
      }
    },
    // 展示会员账号详情弹框
    showUserAccountModal(record) {
      getUserAccountInfo(record.id).then((response) => {
        this.userAccountModal = {
          open: true,
          data: response.data || {}
        };
      });
    },

    // 编辑会员账号详情弹框
    showUserAccountEditModal(record) {
      this.userAccountEditModal = {
        data: { ...record, gender: String(record.gender) } || {},
        open: true
      };
    },
    submitEditUser() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          const { fullArea } = this.userAccountEditModal.data || {};
          const params = {
            ...this.userAccountEditModal.data
          };
          if (fullArea && fullArea.length) {
            const [province = '', city = '', district = ''] = fullArea;
            params.province = province;
            params.city = city;
            params.district = district;
          }
          editUserData(params).then((response) => {
            this.$modal.msgSuccess('修改成功');
            this.closeEditUser();
            this.getList();
          });
        }
      });
    },
    closeEditUser() {
      this.userAccountEditModal = {
        open: false,
        data: {}
      };
    },

    // 展示用户账户变动记录
    showUserBalanceInfoModal(record, isFirst) {
      const { id } = this.userBalanceInfo.record || {};
      const reqParams = {
        ...this.userBalanceParams,
        memberId: record.id ? record.id : id
      };
      this.userBalanceInfoTableLoading = true;
      getUserBalanceList(reqParams)
        .then((response) => {
          const { records = [], total = 0 } = response.data || {};
          if (isFirst) {
            this.userBalanceInfoModalVisible = true;
          }
          this.userBalanceInfo = {
            total: total,
            data: records || [],
            record: record
          };
          this.userBalanceInfoTableLoading = false;
        })
        .catch(() => {
          this.userBalanceInfoTableLoading = false;
        });
    },

    goWithdrawInfoPage(row) {
      const id = row.id;
      this.$router.push({ path: '/member/userWithdraw', query: { id } });
    },
    // 展示充值记录弹层
    showChargeInfoModal(record, isFirst) {
      const { id } = this.userChargedrawInfo.record || {};
      const reqParams = {
        ...this.chargeDataParams,
        memberId: record.id ? record.id : id
      };
      this.userChargeInfoTableLoading = true;
      /*      if (isFirst) {
        // 获取枚举
        this.getWithdrawEmu();
      }*/
      getUserChargeList(reqParams)
        .then((response) => {
          const { records = [], total = 0 } = response.data || {};
          if (isFirst) {
            this.userChargeInfoModalVisible = true;
          }
          this.userChargedrawInfo = {
            total: total,
            data: records || [],
            record: record
          };
          this.userChargeInfoTableLoading = false;
        })
        .catch(() => {
          this.userChargeInfoTableLoading = false;
        });
    },
    /*    async getWithdrawEmu() {
      const userWithdrawMethodMap = await this.getDictionaryByKey('ums_withdraw_method');
      const userWithdrawTypeMap = await this.getDictionaryByKey('ums_withdraw_type');
      const userWithdrawStatusMap = await this.getDictionaryByKey('ums_withdraw_status');
      const userWithdrawAuditMap = await this.getDictionaryByKey('sys_common_audit');

      this.userWithdrawMethodMap = userWithdrawMethodMap;
      this.userWithdrawTypeMap = userWithdrawTypeMap;
      this.userWithdrawStatusMap = userWithdrawStatusMap;
      this.userWithdrawAuditMap = userWithdrawAuditMap;
    },*/
    // 展示用户封禁记录弹框
    showUserBannedInfoModal(record, isFirst) {
      const { id } = this.userBannedInfo.record || {};
      const reqParams = {
        ...this.bannedDataParams,
        memberId: record.id ? record.id : id
      };
      this.userLoginInfoTableLoading = true;
      if (isFirst) {
        // 获取枚举
        this.getBannedReasonEmu();
      }
      getUserBannelList(reqParams)
        .then((response) => {
          const { records = [], total = 0 } = response.data || {};
          if (isFirst) {
            this.userBannedInfoModalVisible = true;
          }
          this.userBannedInfo = {
            total: total,
            data: records || [],
            record: record
          };
          this.userBannedInfoTableLoading = false;
        })
        .catch(() => {
          this.userBannedInfoTableLoading = false;
        });
    },

    async getBannedReasonEmu() {
      const userForbiddenUnitMap = await this.getDictionaryByKey('ums_forbidden_unit');
      const userForbiddenReasonMap = await this.getDictionaryByKey('ums_member_forbidden');
      this.userForbiddenUnitMap = userForbiddenUnitMap;
      this.userForbiddenReasonMap = userForbiddenReasonMap;
    },

    // 展示登录详情弹框
    showUserLoginInfoModal(record, isFirst) {
      const { id } = this.userLoginInfo.record || {};
      const reqParams = {
        ...this.loginDataParams,
        memberId: record.id ? record.id : id
      };
      this.userLoginInfoTableLoading = true;
      getUserLoginInfoData(reqParams)
        .then((response) => {
          const { records = [], total = 0 } = response.data || {};
          if (isFirst) {
            this.userLoginInfoModalVisible = true;
          }
          this.userLoginInfo = {
            total: total,
            data: records || [],
            record: record
          };
          this.userLoginInfoTableLoading = false;
        })
        .catch(() => {
          this.userLoginInfoTableLoading = false;
        });
    },

    // 展示用户银行卡信息
    showUserBankCardInfoModal(record, isFirst) {
      const { id } = this.userBankCardInfo.record || {};
      const reqParams = {
        ...this.bankCardDataParams,
        memberId: record.id ? record.id : id
      };
      this.userBankCardInfoTableLoading = true;
      getUserBankCardList(reqParams)
        .then((response) => {
          const { records = [], total = 0 } = response.data || {};
          if (isFirst) {
            this.userBankCardInfoModalVisible = true;
          }
          this.userBankCardInfo = {
            total: total,
            data: records || [],
            record: record
          };
          this.userBankCardInfoTableLoading = false;
        })
        .catch(() => {
          this.userBankCardInfoTableLoading = false;
        });
    },

    /** 删除按钮操作 */
    handleUserDelete(row) {
      return this.$modal
        .confirm('是否确认删除当前用户？')
        .then(function () {
          return deleteUser(row.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功');
        })
        .catch(() => {});
    },

    // 展示黑名单弹窗
    showBlackListInfoModal(record) {
      const reqParams = {
        myId: record.id
      };
      this.blackListTableLoading = true;
      getUserBlackList(reqParams)
        .then((response) => {
          const { data = [] } = response.data || {};
          this.blackListModalInfo = {
            open: true,
            data: response.data || []
          };
          this.blackListTableLoading = false;
        })
        .catch(() => {
          this.blackListTableLoading = false;
        });
    },

    // 展示用户的粉丝列表 clickType 1、关注 2、粉丝 3、好友
    showUserFansListModal(clickType, record, isFirst) {
      const { id } = this.userFansFriendFocusInfo.record || {};
      const reqParams = {
        ...this.fansPageParams,
        memberId: record.id ? record.id : id
      };
      this.userFansFriendFocusLoading = true;
      const reqEntity = clickType == 1 ? getUserFocusList : clickType == 2 ? getUserFansList : getUserFriendsList;
      reqEntity(reqParams)
        .then((response) => {
          const { records = [], total = 0 } = response.data || {};
          if (isFirst) {
            this.userFansFriendFocusModalVisible = true;
          }
          this.userFansFriendFocusInfo = {
            total: total,
            data: records || [],
            record: record,
            clickType: clickType
          };
          this.userFansFriendFocusLoading = false;
        })
        .catch(() => {
          this.userFansFriendFocusLoading = false;
        });
    },

    showUpdateMark(record) {
      this.remarkModal = {
        visible: true,
        mark: record.mark,
        memberId: record.id
      };
    },
    updateRemark() {
      updateUmsMemberMark({ id: this.remarkModal.memberId, mark: this.remarkModal.mark }).then((res) => {
        if (res > 0) {
          this.$modal.msgSuccess('修改成功');
          this.remarkModal.visible = false;
          const obj = this.umsMemberList.filter((it) => it.id === this.remarkModal.memberId)[0];
          obj.mark = this.remarkModal.mark;
        } else {
          this.$modal.msgSuccess('修改失败');
        }
      });
    },

    handleChangeUserStatus(row) {
      const text = row.status == '1' ? '禁用' : '启用';
      return this.$modal
        .confirm(`是否确认${text}的用户？`)
        .then(() => {
          upDateMemberStatus({ id: row.id, status: row.status == '1' ? 0 : 1 })
            .then(() => {
              this.getList();
              this.$modal.msgSuccess('会员状态修改成功');
            })
            .catch(() => {
              this.$modal.msgError('会员状态修改失败');
            });
          return true;
        })
        .catch(() => {
          return false;
        });
    },
    showStatistics(memberId) {
      this.$router.push({
        path: '/videoManage/detail',
        query: {
          memberId: memberId
        }
      });
    }
  }
};
</script>
