<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form ref="queryForm" :inline="true" :model="listQuery" label-width="100px">
        <el-row>
          <el-form-item label="手机号">
            <el-input v-model.number="listQuery.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model.number="listQuery.realName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="注册终端">
            <el-select class="filter-item" v-model="listQuery.channel" placeholder="请选注册终端">
              <el-option :key="undefined" label="全部" :value="undefined"></el-option>
              <el-option v-for="(val,index) in mobileList " :key="index" :label="val.name"
                         :value="val.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员类型">
            <el-select class="filter-item" v-model="listQuery.memberLevel" placeholder="请选会员类型">
              <el-option :key="undefined" label="全部用户" :value="undefined"></el-option>
              <el-option v-for="(val,index) in queryMemberLevelList " :key="index" :label="val.name"
                         :value="val.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户身份">
            <el-select class="filter-item" v-model="listQuery.postionState" placeholder="选择会员身份">
              <el-option :key="undefined" label="全部" :value="undefined"></el-option>
              <el-option v-for="(val,index) in postionStatelList " :key="index" :label="val.name"
                         :value="val.id"></el-option>
            </el-select>
          </el-form-item>


          <!--            <el-form-item label="注册时间" prop="bookDateRange">-->
          <!--              <el-date-picker-->
          <!--                v-model="listQuery.registrationDate "-->
          <!--                type="daterange"-->
          <!--                :editable="true"-->
          <!--                format="yyyy-MM-dd"-->
          <!--                placeholder="请选择注册时间范围">-->
          <!--              </el-date-picker>-->
          <!--            </el-form-item>-->

          <el-form-item label="注册时间">
            <el-date-picker
              v-model="listQuery.registrationTimeBegin"
              type="date"
              :editable="true"
              format="yyyy-MM-dd"
              placeholder="选择日期"
            ></el-date-picker>
            ~
            <el-date-picker
              v-model="listQuery.registrationTimeEnd"
              type="date"
              :editable="true"
              format="yyyy-MM-dd"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用户来源">
            <el-select class="filter-item" v-model="listQuery.source" placeholder="请选用户来源">
              <el-option :key="undefined" label="全部" :value="undefined"></el-option>
              <el-option v-for="(val,index) in sourceList" :key="index" :label="val.name"
                         :value="val.id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="delete" @click="cleaningQuery">清除搜索条件</el-button>
      <!--      <el-button class="filter-item"  style="margin-left: 10px;" @click="newMember"-->
      <!--                 type="primary" icon="edit">新增会员-->
      <!--      </el-button>-->

      <!--      <el-button class="filter-item"  style="margin-left: 10px;" @click="bulkUpload"-->
      <!--                 type="primary" icon="edit">批量导入会员-->
      <!--      </el-button>-->
    </div>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
              style="width: 100%">
      <el-table-column align="center" label="用户id" width="150">
        <template scope="scope">
          <span>{{scope.row.userId}}</span>
        </template>
      </el-table-column>
      <el-table-column width="130" align="center" label="手机号">
        <template scope="scope">
          <span>{{scope.row.username}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="注册终端">
        <template scope="scope">
          <span>{{scope.row.channel}}</span>
        </template>
      </el-table-column>
      <el-table-column width="90" align="center" label="来源">
        <template scope="scope">
          <span>{{scope.row.source}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="真实姓名">
        <template scope="scope">
          <span>{{scope.row.realName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="会员类型">
        <template scope="scope">
          <span>{{scope.row.memberName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="用户身份">
        <template scope="scope">
          <span>{{scope.row.positionName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="130" align="center" label="上级/电话">
        <template scope="scope">
          <span>{{getSuperiorInformation(scope.row.nameOfSuperior,scope.row.superiorMobileNumber,1)}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="加入时间">
        <template scope="scope">
          <span>{{scope.row.timeOfMembership}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="免费总天数">
        <template scope="scope">
          <span>{{scope.row.totalNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="剩余天数">
        <template scope="scope">
          <span>{{scope.row.rentFreeDays}}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column width="200" align="center" label="会员">-->
      <!--        <template scope="scope">-->
      <!--          <span>{{scope.row.updName}}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column align="center" label="操作" width="400" fixed="right">
        <template scope="scope">
           <el-button size="small" class="el-button el-button--text el-button--small" v-show="!scope.row.nameOfSuperior || !scope.row.superiorMobileNumber" @click="setHigher(scope.row)">
            设置上级
          </el-button>
          <el-button size="small" class="el-button el-button--text el-button--small" @click="viewDetails(scope.row)">
            查看详情
          </el-button>
          <el-button size="small" class="el-button el-button--text el-button--small" v-if="admin_btn_user_postion_put"
                     @click="peopleSetting(scope.row)">身份设置
          </el-button>
          <el-button class="el-button el-button--text el-button--small" v-if="scope.row.status!=1&&userList_btn_edit"
                     size="small" @click=" setMember(scope.row)">设置会员信息
          </el-button>
          <el-button class="el-button el-button--text el-button--small" v-if="scope.row.status!=1" size="small"
                     @click="userOrder(scope.row)">用户订单
          </el-button>
          <el-button v-if="scope.row.status!=1&&userList_btn_forbidden" size="small"
                     class="el-button el-button--text el-button--small" style="color:red" @click="disable(scope.row)">
            设为禁用
          </el-button>
          <el-button v-if="scope.row.status==1&&userList_btn_unmute" size="small"
                     class="el-button el-button--text el-button--small" style="color:red" @click="available(scope.row)">
            取消禁用
          </el-button>
          <el-button class="el-button el-button--text el-button--small" style="color:red" size="small"
                     v-if="userList_btn_del" @click="deleteUser(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="设置上级" :visible.sync="setPop" @close='closeSet'>
       <!-- <el-form-item label="上级电话">
        <el-input placeholder="请输入上级电话"></el-input>
      </el-form-item> -->
      <el-input v-model="phone" placeholder="请输入上级手机号" style="width:300px"></el-input>
      <div style="margin-top:20px">
        <el-button type="primary" @click="setHeighterBtn">确定</el-button>
        <el-button type="primary" @click="setPop = false">取消</el-button>
      </div>
    </el-dialog>


    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--    用户详细信息窗口-->
    <el-dialog title="用户详情" :visible.sync="detailsDialogFormVisible" type="text" label-width="95px"
               class="user-list-dialog">
      <el-form>
        <el-row>
          <el-form-item label="基础信息">
            <span v-if="userDetails.status!=1">(状态-正常)</span>
            <span v-if="userDetails.status==1">(状态-已禁用)</span>
          </el-form-item>
        </el-row>
        <el-row style="border-bottom: 1px dashed #ccc;padding: 10px 0;">
          <el-col :span="3">
            <div class="demo-type">
              <img :src="userDetails.headimgurl" style="width: 80px;border-radius: 50%;"/>
            </div>
          </el-col>
          <el-col :span="18">
            <el-row>
              <el-col :span="6">
                <el-form-item label="用户Id:">
                  <span>{{userDetails.userId}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="昵称:">
                  <span>{{userDetails.nickName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号:">
                  <span>{{userDetails.username}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="注册终端:">
                  <span>{{userDetails.channel == 1 ? 'app' : '小程序'}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="注册时间:">
                  <span>{{!!userDetails.createTime ? timestamp(new Date(userDetails.createTime*1000)) : ''}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="最近登录时间:">
                  <span>{{!!userDetails.lastTime ? timestamp(new Date(userDetails.lastTime)): ''}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="实名认证状态">
            <span v-if="!statusBoolean">(状态-未认证)</span>
            <span v-if="statusBoolean">(状态-已认证)</span>
          </el-form-item>
        </el-row>
        <el-row style="border-bottom: 1px dashed #ccc;padding-bottom: 10px;">
          <el-col :span="6">
            <el-form-item label="真实姓名: ">
              <span>{{userDetails.realName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号: ">
              <span>{{userDetails.idNumber}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别: ">
              <span>{{userDetails.sex == 1 ? '女' : '男'}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div style="margin: 20px 0;"><span style="font-size: 16px;font-weight: bold;">会员信息</span></div>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="会员类型:">
              <span>{{userDetails.memberName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="有效期:">
              <span>{{userDetails.validTime == '0' ? '永久' : '无'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="充值次数:">
              <span>{{!!userDetails.buyCount ? userDetails.buyCount+'次' : ''}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="加入时间:">
             <span>{{!!userDetails.timeOfMembership ? timestamp(new Date(userDetails.timeOfMembership)) :''}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border-bottom: 1px dashed #ccc;padding-bottom: 10px;">
          <el-col :span="12">
            <el-form-item label="最近充值时间:">
              <span>{{userDetails.recentRecharge}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="赠送总天数:">
              <span>{{userDetails.totalNumber}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="剩余总天数:">
              <span>{{userDetails.rentFreeDays}}</span>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <div style="margin: 20px 0;"><span style="font-size: 16px;font-weight: bold;">用户来源</span></div>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="来源:">
              <span>{{userDetails.source == 0 ? '自来' : '用户邀请'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邀请人账号:">
              <span>{{userDetails.inviter}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属地区:">
              <span>{{userDetails.cityName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上级:">
              <span>{{getSuperiorInformation(userDetails.nameOfSuperior,userDetails.superiorMobileNumber,2)}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeMembershipWindow">确 定</el-button>
      </div>
    </el-dialog>


    <!--    设置会员信息窗口-->
    <el-dialog title="设置会员信息" @change="change" :visible.sync="setMemberArea" class="member">
      <el-form :model="userMembershipInformation" :rules="rules" ref="userMembership" label-width="100px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="会员等级" prop="memberLevel">
              <el-select class="filter-item" v-model="userMembershipInformation.memberLevel" placeholder="请选择会员等级">
                <!--                <el-option :key="undefined" label="无" :value="undefined"></el-option>-->
                <el-option v-for="(val,index) in setMemberLevelList " :key="index" :label="val.name"
                           :value="val.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="有效期" prop="validTime">
              <el-radio-group v-model="validityType">
                <!--                <el-radio-button style="margin-bottom: 10px;" label="无"></el-radio-button>-->
                <el-radio-button style="margin-bottom: 10px;" label="永久"></el-radio-button>
                <el-radio-button style="margin-bottom: 10px;" label="自定义"></el-radio-button>
              </el-radio-group>
              <dir></dir>
              <div class="block" v-if="validityType=='自定义'">
                <el-date-picker
                  v-model="validTime"
                  type="datetime"
                  placeholder="请选择会员有效期">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="充值次数/次" prop="buyCount">
              <el-input type="number" :disabled="true" v-model="userMembershipInformation.buyCount"
                        placeholder="请填写充值次数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="总天数" prop="totalNumber">
              <el-input type="number" v-model="userMembershipInformation.totalNumber" min="0" placeholder="请填写总天数"
                        v-enterNumber></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="剩余天数" prop="rentFreeDays">
              <el-input type="number" v-model="userMembershipInformation.rentFreeDays" min="0" v-enterNumber
                        placeholder="请填写剩余天数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelSetMemberArea('userMembership')">取消</el-button>
        <el-button type="primary" @click="saveMember('userMembership')">确 定</el-button>
      </div>
    </el-dialog>

    <!--身份设置窗口-->
    <el-dialog title="身份设置" :visible.sync="peopleSettingModal" width="10%">
      <el-form :model="peopleSettingObject" ref="" label-width="100px">
        <el-form-item label="身份类型">
          <el-radio v-model="peopleSettingObject.positionId" :label='item.id' v-for="(item,index) in settingList"
                    :key="index">{{item.name}}
          </el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelPeopleSetting">取消</el-button>
        <el-button type="primary" @click="setPeopleSetting">确 定</el-button>
      </div>
    </el-dialog>

    <!--    新建会员窗口-->
    <el-dialog title="新建会员" :visible.sync="newMemberArea" width="10%">
      <el-form :model="newMemberObject" :rules="newMemberObjectVerify" ref="nmo" label-width="100px">
        <el-form-item label="会员等级">
          <el-select class="filter-item" v-model="newMemberObject.memberLevel" placeholder="选择会员等级">
            <el-option :key="undefined" label="无" :value="undefined"></el-option>
            <el-option v-for="(val,index) in setMemberLevelList " :key="index" :label="val.name"
                       :value="val.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" placeholder="手机号" prop="phone">
          <el-input size="small " type="text" v-model="newMemberObject.phone"></el-input>
        </el-form-item>
        <el-form-item label="免费天数" placeholder="免费天数" prop="totalNumber">
          <el-input size="small " type="text" v-model="newMemberObject.totalNumber" v-enterNumber></el-input>
        </el-form-item>
        <el-form-item label="剩余天数" placeholder="剩余天数" prop="rentFreeDays">
          <el-input size="small " type="text" v-model="newMemberObject.rentFreeDays" v-enterNumber></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelNewMemberArea('nmo')">取消</el-button>
        <el-button type="primary" @click="setNewMemberObject('nmo')">确 定</el-button>
      </div>
    </el-dialog>


    <!--    用户订单窗口-->
    <el-dialog title="用户订单详情" :visible.sync="userOrderForm">
      <div class="filter-container">
        <el-form ref="queryForm" :model="orderQuery" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单类型">
                <el-select class="filter-item" v-model="orderQuery.type" placeholder="请选订单状态">
                  <el-option :key="undefined" label="所有订单" :value="undefined"></el-option>
                  <el-option v-for="(val,index) in orderTypeList " :key="index" :label="val.name"
                             :value="val.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-select class="filter-item" v-model="orderQuery.status" placeholder="请选会员类型">
                  <el-option :key="undefined" label="所有订单" :value="undefined"></el-option>
                  <el-option v-for="(val,index) in orderStatusList " :key="index" :label="val.name"
                             :value="val.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button class="filter-item" type="primary" v-waves icon="search" @click="userOrder"
                         style="margin-left: 10px;">搜索
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--      <el-form :model="userOrderMessage" ref="alterUserOrder" label-width="100px">-->

      <el-table
        :data="orderData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="no"
          label="订单号"
          style="width: 100%" align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="订单类型"
          width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态" align="center">
        </el-table-column>
        <el-table-column
          prop="crtTime"
          label="下单时间" align="center">
        </el-table-column>
        <el-table-column
          prop="updTime"
          label="修改时间" align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template scope="scope">
            <span style="color: #13CE66;cursor: pointer;" @click="handleOrderDetail(scope.row)">订单详情</span>
          </template>
        </el-table-column>
      </el-table>
      <!--      </el-form>-->
      <div v-show="!orderListLoading" class="pagination-container">
        <el-pagination @size-change="orderSizeChange" @current-change="orderCurrentChange"
                       :current-page.sync="orderQuery.page" :page-sizes="[10,20,30, 50]" :page-size="orderQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="orderTotal"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelOrder('alterUserOrder')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 订单详情 -->
    <rentOrderDetailModal :form="form" :rentCostDetail="rentCostDetail" v-if="rentDialogVisible"
                          v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>

    <tourOrderDetailModal :tourRow="tourRow" :insureDetail="insureDetail" v-if="tourDialogVisible"
                          :tourCostDetail="tourCostDetail"
                          v-on:tourOrderDetailDialogEvent="tourOrderDetailDialogEvent"></tourOrderDetailModal>


    <memberOrderDetailModal :memberRow="memberRow" :memberCostDetail="memberCostDetail" v-if="memberDialogVisible"
                            v-on:memberOrderDetailDialogEvent="memberOrderDetailDialogEvent"></memberOrderDetailModal>
  </div>
</template>

<script>
  import {
    appPage,
    seveObj,
    setDisable,
    setAvailable,
    deleteUser,
    userPosition,
    getOne
  } from 'src/api/admin/userManagement/index';
  import {getToken} from 'src/utils/auth';
  import {mapGetters} from 'vuex';
  import {getUserMemberByUserId} from 'src/api/admin/baseUserMember/index';
  import {timestamp2Date} from 'src/utils/dateUtils';
  import {page} from 'src/api/order/memeber';
  import {
    UploadMembershipList,
    saveNewMemberObject
  } from 'src/api/admin/UserMember/index';
  import {
    getrewardSetting
  } from 'api/purseManage';
  import {formatDate} from "../../../utils/dateFormattor";
  import {getMembers,setBind} from "src/api/admin/member/index"
  import tourOrderDetailModal from "src/views/userManagement/model/tourOrderDetailModal";//旅游订单
  import rentOrderDetailModal from "src/views/userManagement/model/rentOrderDetailModal";//租车订单详情
  import memberOrderDetailModal from "src/views/userManagement/model/memberOrderDetailModal";//会员订单详情

  export default {
    name: 'appUser',
    components: {
      rentOrderDetailModal,
      tourOrderDetailModal,
      memberOrderDetailModal
    },
    data() {
      return {
        setPop:false,
        activeId:'',//id
        tourCostDetail: '',
        memberCostDetail: '',
        rentCostDetail: '',
        serviceCost: 0,
        inline: true,
        peopleSettingModal: false,
        orderData: [],
        validTime: '',
        userMembershipInformation: {
          memberLevel: undefined,
          validTime: '',
          buyCount: undefined,
          totalNumber: undefined,
          rentFreeDays: undefined,
          id: undefined,
          userId: undefined
        },
        peopleSettingObject: {
          id: '',
          positionId: undefined
        },
        saveUserId: undefined,
        validityType: '无',
        userOrderMessage: {},
        mobileList: [{id: 1, name: 'app'}, {id: 2, name: "小程序"}],
        queryMemberLevelList: [{id: -1, name: '全部会员'}],
        postionStatelList: [
          {
            id: 6,
            name: '普通用户'
          }, {
            id: 1,
            name: '非普通用户'
          }
        ],
        setMemberLevelList: [],
        sourceList: [{id: 1, name: '自来'}, {id: 2, name: '用户邀请'}],
        orderStatusList: [
          {id: 1, name: '删除'},
          {id: 2, name: '创建订单'},
          {id: 3, name: '取消'},
          {id: 4, name: '待付款'},
          {id: 5, name: '待出行'},
          {id: 6, name: '出行中'},
          {id: 7, name: '已完成'}
        ],
        orderTypeList: [
          {id: 1, name: '租车'},
          {id: 2, name: '旅游'},
          {id: 3, name: '会员订单'}
        ],
        BASE_API: process.env.BASE_API,
        userDetails: {},
        limitNum: 1,
        formLabelWidth: '80px',
        fileForm: {
          file: ''
        },
        rentDialogVisible: false,
        tourDialogVisible: false,
        memberDialogVisible: false,
        insureDetail: '',
        fileList: [],
        errorHandler: true,
        list: null,
        total: null,
        orderTotal: null,
        listLoading: true,
        orderListLoading: true,
        phone:null,//上级电话
        newMemberObject: {
          phone: undefined,
          memberLevel: undefined,
          totalNumber: undefined,
          rentFreeDays: undefined
        },
        orderQuery: {
          limit: 10,
          page: 1,
          userId: undefined,
          type: undefined,
          status: undefined
        },
        form: {
          couponAmount: undefined,
          crtHost: undefined,
          crtName: undefined,
          crtTime: undefined,
          crtUser: undefined,
          detailId: undefined,
          endCompanyName: undefined,
          goodsAmount: undefined,
          hasDiscount: undefined,
          hasMemberRight: undefined,
          hasPay: undefined,
          id: undefined,
          name: undefined,
          realName: undefined,
          no: undefined,
          orderAmount: undefined,
          orderOrigin: undefined,
          orderVehicleCrosstownDto: {
            licenseIdCard: "",
            licenseImg: "",
            licenseName: "",
            licensePhone: ""
          },
          orderRentVehicleDetail: {
            bookRecordId: undefined,
            costDetail: undefined,
            crtTime: undefined,
            dayNum: undefined,
            deposit: undefined,
            driverType: undefined,
            endAddr: undefined,
            endCity: undefined,
            endCityName: undefined,
            endCompanyId: undefined,
            endTime: undefined,
            freeDays: undefined,
            handelViolation: undefined,
            id: undefined,
            modelId: undefined,
            myDriverIds: undefined,
            orderId: undefined,
            score: undefined,
            startAddr: undefined,
            startCity: undefined,
            startCityName: undefined,
            startCompanyId: undefined,
            startTime: undefined,
            stime: undefined,
            suserid: undefined,
            updTime: undefined,
            vehicleId: undefined,
          },
          payOrigin: undefined,
          picture: undefined,
          realAmount: undefined,
          refundStatus: undefined,
          startCompanyName: undefined,
          status: undefined,
          ststusName: undefined,
          telephone: undefined,
          type: undefined,
          updTime: undefined,
          userId: undefined,
          username: undefined,
          vehicleNumberPlat: undefined,
          version: undefined
        },
        tourRow: {},
        memberRow: {},
        rules: {
          totalNumber: [this.integerValidator()],
          rentFreeDays: [this.integerValidator()]
        },
        newMemberObjectVerify: {
          phone: [
            {
              required: true,
              message: '手机号',
              trigger: 'blur'
            },
          ],
          memberLevel: [
            {
              required: true,
              message: '会员等级',
              trigger: 'blur'
            },
          ],
          totalNumber: [
            {
              required: true,
              message: '免费天数',
              trigger: 'blur'
            },
          ],
          rentFreeDays: [
            {
              required: true,
              message: '剩余总天天数',
              trigger: 'blur'
            },
          ],
        },

        listQuery: {
          page: 1,
          limit: 20,
          mobileList: undefined,
          mobile: undefined,
          memberLevel: undefined,
          source: undefined,
          channel: undefined,
          registrationTimeEnd: undefined,
          registrationTimeBegin: undefined,
          postionState: undefined,
          realName:undefined,
        },
        sexObj: {
          1: '女',
          2: '男'
        },
        source: {
          0: '自来',
          1: '用户邀请'
        },
        terminal: {
          1: 'app',
          2: '小程序'
        },
        orderStatus: {
          0: '删除',
          1: '创建订单',
          2: '取消',
          3: '待付款',
          4: '待出行',
          5: '出行中',
          6: '已完成',
        },
        orderType: {
          1: '租车',
          2: '旅游',
          3: '会员'
        },
        detailsDialogFormVisible: false,
        setMemberArea: false,
        newMemberArea: false,
        userOrderForm: false,
        bulkUploadMember: false,
        dialogStatus: '',
        userManager_btn_del: false,
        statusBoolean: false,
        myGroups: [],
        loading: false,
        HeaderWithToken: undefined,
        tableKey: 0,
        selectedAccItem: undefined,
        userList_btn_edit: false,//编辑
        userList_btn_forbidden: false,//禁用
        userList_btn_unmute: false,//取消禁用
        userList_btn_del: false,//删除
        admin_btn_user_postion_put: false,//身份设置
        settingList: [],
        costDetail:{
          key:undefined,
          val:undefined,
          children:[
            {
              key:undefined,
              detail:undefined,
              val:undefined
            }
          ]
        },
      }
    },
    created() {
      let t = this;
      this.userList_btn_edit = this.elements['userList:btn_edit'];//编辑
      this.userList_btn_forbidden = this.elements['userList:btn_forbidden'];//禁用
      this.userList_btn_unmute = this.elements['userList:btn_unmute'];//取消禁用
      this.userList_btn_del = this.elements['userList:btn_del'];//删除
      this.admin_btn_user_postion_put = this.elements['admin:btn:user_postion:put'];//身份设置
      let query =  localStorage.getItem("userList");
      if(query !="null" && query){
        let queryJson = JSON.parse(query);
        if(queryJson.page){
          t.listQuery.page = queryJson.page;
        }
        if(queryJson.limit){
          t.listQuery.limit = queryJson.limit;
        }
        if(queryJson.mobileList){
          t.listQuery.mobileList = queryJson.mobileList;
        }
        if(queryJson.mobile){
          t.listQuery.mobile = queryJson.mobile;
        }
        if(queryJson.realName){
          t.listQuery.realName = queryJson.realName;
        }
        if(queryJson.memberLevel){
          t.listQuery.memberLevel = queryJson.memberLevel;
        }
        if(queryJson.source){
          t.listQuery.source = queryJson.source;
        }
        if(queryJson.channel){
          t.listQuery.channel = queryJson.channel;
        }
        if(queryJson.registrationTimeEnd){
          t.listQuery.registrationTimeEnd = queryJson.registrationTimeEnd;
        }
        if(queryJson.registrationTimeBegin){
          t.listQuery.registrationTimeBegin = queryJson.registrationTimeBegin;
        }
        if(queryJson.postionState){
          t.listQuery.postionState = queryJson.postionState;
        }
      }
      this.getList();
      this.getMembersLevel();
    }
    ,
    computed: {
      ...
        mapGetters([
          'elements'
        ]),
      /**
       * 获取token
       */


      getHeaderWithToken() {
        return {Authorization: getToken()};
      },

    },
    methods: {
      //设置上级弹窗
      setHigher(val){   
        this.setPop = true;
        this.activeId = val.userId;
      },
      //时间戳转换
      timestamp(now) { 
        var year=now.getFullYear(); 
        var month=now.getMonth()+1; 
        var date=now.getDate(); 
        var Hours = now.getHours();
        var Minutes = now.getMinutes();
        var Seconds = now.getSeconds();
        month = month.toString().length == 1 ? '0'+ month : month;
        date = date.toString().length == 1 ? '0'+ date : date;
        Hours = Hours.toString().length == 1 ? '0'+ Hours : Hours;
        Minutes = Minutes.toString().length == 1 ? '0'+ Minutes : Minutes;
        Seconds = Seconds.toString().length == 1 ? '0'+ Seconds : Seconds;
        return year+"-"+month+"-"+date+' '+ Hours+':'+Minutes+":"+Seconds
      },
      //设置上级
      setHeighterBtn(){
        if (!!this.phone) {
           setBind({"phone":this.phone,"userId":this.activeId}).then(data=>{
            if (data.status == 200) {
              this.$message.success('设置成功')
              this.setPop = false
               this.getList();
            }else{
              this.$message.error(data.message)
            }
          })
        }else{
          this.$message.error('请输入上级手机号')
        }
      },
      //设置上级弹窗关闭
      closeSet(){
        this.phone = null
      },
      handleOrderDetail(row) {


        if (row.type == "租车") {

          this.form = row;
          this.form.orderRentVehicleDetail.startTime =this.form.orderRentVehicleDetail.startTime?timestamp2Date(this.form.orderRentVehicleDetail.startTime):''
          this.form.orderRentVehicleDetail.endTime = this.form.orderRentVehicleDetail.endTime?timestamp2Date(this.form.orderRentVehicleDetail.endTime):''
          if(this.form.orderRentVehicleDetail.costDetail){
            try {
              this.costDetail = JSON.parse(this.form.orderRentVehicleDetail.costDetail)
              var cost = '';
              if (this.costDetail.children) {
                this.costDetail.children.forEach(function (a) {
                  var detail = a.detail == undefined ? '' : a.detail
                  cost += a.key + ":" + detail + " "
                })
              }
            }catch (e) {
              this.templateModel()
            }

          }

          this.rentCostDetail = cost
          if (this.form.orderRentVehicleDetail.driverType == 1) {
            this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
          }
          this.rentDialogVisible = true;
        }
        if (row.type == "旅游") {
          this.tourRow = row
          this.tourDialogVisible = true;
        }
        if (row.type == "会员") {
          this.memberRow = row;
          this.memberDialogVisible = true;
        }


      },
      /**
       * 租车订单详情弹框关闭
       * */
      rentOrderDetailDialogEvent(e) {
        this.rentDialogVisible = false;
      },
      /**
       * 会员详情弹框关闭
       * */
      memberOrderDetailDialogEvent(e) {
        this.memberDialogVisible = false;
      },
      /**
       * 旅游订单详情弹框关闭
       * */
      tourOrderDetailDialogEvent(e) {
        this.tourDialogVisible = false;
      },

      getMembersLevel() {
        var _this = this;
        getMembers().then(res => {
            let members = res.data
            // console.log('getMembersLevel:{}'+JSON.stringify(members))
            // debugger
            members.map(function (ele) {

              _this.queryMemberLevelList.push({id: ele.level, name: ele.name})
              _this.setMemberLevelList.push({id: ele.level, name: ele.name})
            })
            // console.log('this.queryMemberLevelList'+JSON.stringify(this.queryMemberLevelList))
          }
        )
      },

      /**
       *  上传
       */
      upLoad(file) {
        var form = new FormData();
        // 文件对象
        form.append("file", file.file);
        UploadMembershipList(form)
          .then(res => {
            if (res.rel) {
              this.$notify.success({
                title: '上传成功',
                message: `success`
              })
            } else {
              this.$notify.warning({
                title: '上传失败',
                message: `failed`
              })
            }
            this.getList();
          })
      },
      //excel上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
        this.$notify.warning({
          title: '警告',
          message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
        });
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        console.log('change')
        console.log(file)
        this.fileForm.file = file.raw
        console.log(this.fileForm.file)
        console.log(fileList)
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
        console.log('before upload')
        console.log(file)
        let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
        let size = file.size / 1024 / 1024
        if (extension !== 'xlsx') {
          this.$notify.warning({
            title: '警告',
            message: `只能上传Excel 2007以上版本（即后缀是.xlsx）的文件`
          });
        }
        if (size > 10) {
          this.$notify.warning({
            title: '警告',
            message: `文件大小不得超过10M`
          });
        }
      },
      /**
       *  弹出导入窗体
       */
      bulkUpload() {
        this.bulkUploadMember = true
      },
      /**
       * 获取用户列表
       */
      getList() {
        let query = JSON.parse(JSON.stringify(this.listQuery))
        query.source = query.source ? query.source - 1 : ''
        // console.log('handleFilterStatus:this.listQuery=' + JSON.stringify(this.listQuery))
        query.registrationTimeBegin = this.listQuery.registrationTimeBegin
          ? (new Date(query.registrationTimeBegin).getTime()) / 1000 : undefined
        query.registrationTimeEnd = this.listQuery.registrationTimeEnd
          ? (new Date(query.registrationTimeEnd).getTime()) / 1000 : undefined
        //
        // console.log('handleFilterEnd:this.listQuery=' + JSON.stringify(this.listQuery))
        // console.log('query================' + JSON.stringify(query))
        appPage(query)
          .then(response => {
            for (let listKey of response.data.list) {

              listKey = this.getListKey(listKey)
            }
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
          })
      },
      /**
       * 处理返回的列表的参数
       */
      getListKey(listKey) {
        listKey.timeOfMembership = listKey.timeOfMembership ? timestamp2Date(listKey.timeOfMembership) : '';
        listKey.recentRecharge = listKey.recentRecharge ? timestamp2Date(listKey.recentRecharge) : '';
        listKey.lastTime = listKey.lastTime ? timestamp2Date(listKey.lastTime) : '';
        listKey.createTime = listKey.createTime ? timestamp2Date(listKey.createTime * 1000) : '';
        listKey.buyCount = listKey.buyCount ? listKey.buyCount : 0;
        listKey.channel = this.terminal[listKey.channel];
        listKey.source = this.source[listKey.source];
        listKey.validTime = listKey.validTime ? ((listKey.validTime == 0) ? '永久' : listKey.validTime) : '无';
        listKey.visible2 = false

        listKey.sex = (listKey.sex + 1) ? this.sexObj[(listKey.sex + 1)] : ''
      },

      /**
       *查询
       */
      handleFilter() {
        this.listQuery.page = 1;
        if(this.listQuery){
          localStorage.setItem("userList", JSON.stringify(this.listQuery));
        }
        this.getList();
      }
      ,
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      }
      ,
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
      ,
      handleCreate() {
        this.dialogStatus = 'create';
        // this.dialogFormVisible = true;
      },
      /**
       * 查看会员详细信息
       * @param row
       */
      viewDetails(row) {
        getOne(row.userId).then(res=>{
          this.userDetails=res.data
          this.detailsDialogFormVisible = true
          this.getBoolean(this.userDetails.certificationStatus)
        })
      }
      ,
      /**
       * 显示设置会员窗口
       * @param row
       */
      setMember(row) {
        this.userMembershipInformation = {
          memberLevel: undefined,
          validTime: '',
          buyCount: undefined,
          totalNumber: undefined,
          rentFreeDays: undefined,
          id: undefined,
          userId: row.userId
        };

        this.saveUserId = row.userId
        getUserMemberByUserId(row.userId).then(response => {

          if (response.data) {
            if (response.data.validTime == 0) {
              this.validityType = '永久'
            } else if (response.data.validTime && response.data.validTime != -1) {
              this.validityType = '自定义'
              response.data.validTime = timestamp2Date(response.data.validTime)
            }
            // else if (response.data.validTime == -1) {
            //   this.validityType = '无'
            // }
            this.validTime = response.data.validTime;
            this.userMembershipInformation.memberLevel = response.data.memberLevel ? response.data.memberLevel : '';
            this.userMembershipInformation.validTime = response.data.validTime;
            this.userMembershipInformation.totalNumber = response.data.totalNumber;
            this.userMembershipInformation.rentFreeDays = response.data.rentFreeDays;
            this.userMembershipInformation.buyCount = response.data.buyCount;
            this.userMembershipInformation.id = response.data.id;
            // this.userMembershipInformation.memberLevel= this.userMembershipInformation.memberLevel?this.userMembershipInformation.memberLevel:undefined
          }
          this.setMemberArea = true
        })
        // console.log('this.userMembershipInformation:' + JSON.stringify(this.userMembershipInformation))
        this.userMembershipInformation.userId = this.saveUserId
      },
      /**
       * 提交会员修改
       * @param formName
       */
      saveMember(formName) {
        // if (this.$utils.isInteger(this.userMembershipInformation.totalNumber) ||
        //    this.$utils.isInteger(this.userMembershipInformation.rentFreeDays) ||
        //   (this.userMembershipInformation.totalNumber && this.userMembershipInformation.rentFreeDays)) {

        if (Number(this.userMembershipInformation.totalNumber) < Number(this.userMembershipInformation.rentFreeDays)) {
          this.$notify({
            title: '警告',
            message: '剩余天数不能大于总天数',
            type: 'warning',
            duration: 2000
          });
          return false
        }
        if (this.validityType == '永久') {
          this.userMembershipInformation.validTime = 0
        } else if (this.validityType == '自定义') {
          let date = new Date(this.validTime);
          this.userMembershipInformation.validTime = date.getTime()
        }
        // else {
        //   this.userMembershipInformation.validTime = -1
        // }

        this.userMembershipInformation.userId = this.saveUserId
        this.userMembershipInformation.buyCount = undefined;
        // console.log('userMembershipInformation:' + JSON.stringify(this.userMembershipInformation))
        seveObj(this.userMembershipInformation).then(res => {
          if (res.rel) {
            this.$notify.success({
              title: '修改成功',
              message: `success`
            })
          } else {
            this.$notify.warning({
              title: '修改失败',
              message: `failed`
            })
          }
          this.setMemberArea = false
          this.$refs[formName].resetFields()
          this.getList();
        })
        // }
      },
      /**
       * 显示新增会员窗口
       * @param row
       */
      newMember() {
        this.newMemberArea = true
      },
      /**
       * 提交新增会员
       *
       */
      setNewMemberObject(formName) {
        saveNewMemberObject(this.newMemberObject)
          .then(res => {
              if (res.rel) {
                this.$notify.success({
                  title: '新增成功',
                  message: `success`
                })
              } else {
                this.$notify.warning({
                  title: '新增失败',
                  message: `failed`
                })
              }
              this.newMemberArea = false
              this.$refs[formName].resetFields()
              this.getList();
            }
          )

      },
      create(formName) {
        const set = this.$refs;
        if (!this.form.state2 || this.form.state2 == "全部") {
          this.form.companyId = undefined;
        }
        set[formName].validate(valid => {
          if (valid) {
            addObj(this.form)
              .then(() => {
                // this.dialogFormVisible = false;
                this.getList();
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                });
              })
          } else {
            return false;
          }
        });
      }
      ,
      /**
       * 关闭窗口,清除批量上传
       */
      cancelNotDeleteForm() {
        this.bulkUploadMember = false;
        this.$refs.uploadExcel.clearFiles();
      },
      closeMembershipWindow() {
        this.detailsDialogFormVisible = false;
      },
      cancelPeopleSetting() {
        this.peopleSettingModal = false;
      },
      setPeopleSetting() {
        userPosition(this.peopleSettingObject).then(response => {
          if (response.status == 200) {
            this.$notify({
              title: '成功',
              message: '设置成功',
              type: 'success',
              duration: 2000
            });
            this.peopleSettingModal = false;
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      peopleSetting(row) {
        var that = this;
        this.peopleSettingObject.id = row.userId;
        getrewardSetting().then(response => {
          this.settingList = response.data;
          response.data.forEach(function (item) {
            if (row.positionName) {
              if (row.positionName == item.name) {
                that.peopleSettingObject.positionId = item.id;
              }
            } else {
              that.peopleSettingObject.positionId = 1;
            }
          })
        })
        this.peopleSettingModal = true;
      },
      /**
       * 关闭窗口,需要清除表单
       */
      //设置会员
      cancelSetMemberArea(formName) {
        this.setMemberArea = false
        this.validityType = '永久'
        this.$refs[formName].resetFields();
      },
      //新增会员
      cancelNewMemberArea(formName) {
        this.newMemberArea = false
        this.$refs[formName].resetFields();
      },
      /**
       * 获取用户订单列表
       */
      userOrder(row) {
        this.saveUserId = row.userId ? row.userId : this.saveUserId
        this.orderQuery.userId = this.saveUserId
        let query = JSON.parse(JSON.stringify(this.orderQuery))
        query.status = query.status ? query.status - 1 : null

        page(query).then(
          res => {

            this.disposeOrderList(res.data.data)
            this.orderData = res.data.data
            this.orderTotal = res.data.totalCount
            this.userOrderForm = true;
            this.orderListLoading = false
          })
      },
      /**
       * 点击确定按钮,关闭订单列表
       */
      cancelOrder(formName) {
        this.userOrderForm = false
        if (!this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
      /**
       * 处理响应数据
       */
      disposeOrderList(data) {
        if (data) {
          for (let key of data) {
            key.type = key.type ? this.orderType[key.type] : '/';
            key.status = key.status ? this.orderStatus[key.status] : '/';
          }
          return null;
        }
      },
      orderSizeChange(val) {
        this.orderQuery.limit = val;
        this.userOrder(this.orderQuery);
      },
      orderCurrentChange(val) {
        this.orderQuery.page = val;
        this.userOrder(this.orderQuery);
      },
      disable(obj) {
        setDisable(obj.userId).then(res => {
          if (res.rel) {
            this.$notify.success({
              title: '成功',
              message: `success`
            })
          } else {
            this.$notify.warning({
              title: '失败',
              message: `failed`
            })
          }
          this.getList()


        })
      },
      /**
       * 设置为禁用取消禁用
       */
      available(obj) {
        setAvailable(obj.userId).then(res => {
          if (res.rel) {
            this.$notify.success({
              title: '成功',
              message: `success`
            })
          } else {
            this.$notify.warning({
              title: '失败',
              message: `failed`
            })
          }
          this.getList()
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex / 2 == 0) {
          return 'warning-row';
        }
        return '';
      },
      getBoolean(bool) {
        if (bool === '1') {
          this.statusBoolean = true
        }
      },
      setDate() {
        if (!this.validTime) {
          let date = new Date();
          this.validTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        }
      },
      cleaningQuery() {
        this.listQuery.page = 1
        this.listQuery.limit = 20
        this.listQuery.mobileList = undefined
        this.listQuery.mobile = undefined
        this.listQuery.memberLevel = undefined
        this.listQuery.source = undefined
        this.listQuery.channel = undefined
        this.listQuery.registrationTimeEnd = undefined
        this.listQuery.registrationTimeBegin = undefined
        this.listQuery.postionState = undefined
        this.listQuery.realName =undefined
        if(this.listQuery){
          localStorage.setItem("userList", JSON.stringify(this.listQuery));
        }
        this.getList();

      },
      change() {
        this.$forceUpdate()
      },
      deleteUser(row) {
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser(row.userId).then(
            res => {
              if (res.rel) {
                this.$notify.success({
                  title: '删除成功',
                  message: `success`
                })
              } else {
                this.$notify.warning({
                  title: '删除失败',
                  message: `failed`
                })
              }
              this.getList()
            })
        })
      },
      integerValidator: function () {
        return {
          validator: (rule, value, callback) => {
            if (this.$utils.isUndefined(value) || this.$utils.isNull()) {
              return callback();
            }
            if (!this.$utils.isInteger(value)) {
              return callback(new Error('必须为整数'));
            }
            callback();
          },
          trigger: 'blur'
        };
      },
      /**
       * 根据拼接上级信息
       */
      getSuperiorInformation(name,mobile,type){

        if (type==1&&name && mobile) {
          return name+'/'+mobile;
        }
        if (type==2&&name && mobile) {
          return name+'  '+mobile;
        }
        return '';
      },
      templateModel(){
        this.costDetail= {
          key: undefined,
          val: undefined,
          children: [
            {
              key: undefined,
              detail: undefined,
              val: undefined
            }
          ]
        }
      }
    }
  }
</script>
<style>
  .member .el-dialog--small {
    width: 500px;
  }

  .user-list-dialog .el-form-item {
    margin-bottom: 0px;
  }
</style>

