<template>
  <div class="app-container">
    <el-card>
      <div slot="header" style="display: flex;justify-content: space-between;padding-right: 0px">
        <div>
          <el-page-header @back="goBack" content="详情页面"></el-page-header>
        </div>
        <div>
          <el-button type="primary" plain round @click="subCard">子卡管理<i class="el-icon-bank-card el-icon--right"></i></el-button>
          <el-button type="primary" plain round>会员码</el-button>
        </div>
      </div>
      <div>基础资料</div>
      <div style="display: flex;margin-top: 20px">
        <div class="left">
          <div>
            <img v-if="form.avatar" :src="form.avatar" style="width: 80px;height: 80px">
            <img v-else src="@/assets/images/avatar.png" style="width: 80px;height: 80px">
          </div>
          <el-button type="warning" plain round size="mini" style="margin: 10px">绑定实体卡</el-button><br>
          <el-button type="primary" icon="el-icon-bank-card" round style="margin: 10px;width: 50%;height: 40px">会员充值</el-button>
        </div>
        <div class="right">
          <el-descriptions>
            <el-descriptions-item label="手机号">{{form.mobile}}
              <el-tag size="mini" @click="replaceMobile">更换</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="会员昵称">{{form.name}}</el-descriptions-item>
            <el-descriptions-item label="实体卡号">{{form.idcard}}</el-descriptions-item>
            <el-descriptions-item label="绑定信息"></el-descriptions-item>
            <el-descriptions-item label="会员状态">
              <dict-tag :options="dict.type.zhzt" :value="form.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="加油次数">{{form.consumeNum}}</el-descriptions-item>
            <el-descriptions-item label="加油总金额">{{form.refuelMoney}}</el-descriptions-item>
            <el-descriptions-item label="所属油站">{{ store.name }}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{form.createTime}}</el-descriptions-item>
            <el-descriptions-item label="关联副卡">
              <span style="color: #00afff" @click="secondCard">副卡管理</span>
            </el-descriptions-item>
            <el-descriptions-item label="会员等级">
              <span style="color: #00afff" @click="userGrade">{{ grade.name }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="储值优惠"></el-descriptions-item>
            <el-descriptions-item label="每日笔数">
              <span style="color: #00afff" @click="configuration">跟随全局总配置</span>
            </el-descriptions-item>
            <el-descriptions-item label="固定等级">
              <span style="color: #00afff" @click="level">
              <dict-tag :options="dict.type.zcrzdj" :value="form.fixingLevel"/></span>
            </el-descriptions-item>
            <el-descriptions-item label="备注信息">{{ form.description }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <el-card style="margin: 20px 0">
      <div>会员资产</div>
      <div>
        <template>
          <div>
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :value="form.point"
                    title="累计积分"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :value="form.refuelMoney"
                    title="加油金">
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="form.balance"
                    title="账户余额"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="form.literCard"
                    title="升数卡余额"
                  ></el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
    </el-card>

    <el-card>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="加油订单" name="refuelOrder">
            <el-table ref="tables" v-loading="loading" :data="list">
              <el-table-column label="所属油站" prop="id" align="center"/>
              <el-table-column label="订单时间" align="center"/>
              <el-table-column label="交易终端" align="center" prop="userNo"/>
              <el-table-column label="油品/油枪" align="center" prop="name" />
              <el-table-column label="订单金额" align="center" prop="mobile"/>
              <el-table-column label="优惠金额" align="center" prop="gradeId"/>
              <el-table-column label="实付金额" align="center" prop="balance"/>
              <el-table-column label="付款类型" align="center" prop="balance"/>
              <el-table-column label="订单号" align="center" prop="balance"/>
              <el-table-column label="订单类型" align="center" prop="point"/>
            </el-table>

            <pagination
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane label="商品订单" name="shopOrder">
            <el-table ref="tables" v-loading="loading" :data="list">
              <el-table-column label="所属油站" prop="id" align="center"/>
              <el-table-column label="订单时间" align="center"/>
              <el-table-column label="订单金额" align="center" prop="userNo"/>
              <el-table-column label="商品数量" align="center" prop="name" />
              <el-table-column label="储值卡" align="center" prop="mobile"/>
              <el-table-column label="实付金额" align="center" prop="balance"/>
              <el-table-column label="付款类型" align="center" prop="balance"/>
              <el-table-column label="订单号" align="center" prop="balance"/>
              <el-table-column label="订单类型" align="center" prop="point"/>
            </el-table>

            <pagination
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane label="余额记录" name="balanceRecord">
<!--            <el-tabs v-model="balanceRecord" type="card" @tab-click="handleClick">-->
<!--              <el-tab-pane label="储值卡记录" name="first">储值卡记录</el-tab-pane>-->
<!--              <el-tab-pane label="升数卡记录" name="second">升数卡记录</el-tab-pane>-->
<!--            </el-tabs>-->
            <el-radio-group v-model="tabPosition" size="mini" style="margin-bottom: 30px;">
              <el-radio-button label="giftCard">储值卡记录</el-radio-button>
              <el-radio-button label="literCard">升数卡记录</el-radio-button>
            </el-radio-group>
            <div v-if="tabPosition=='giftCard'">
              <el-table ref="tables" v-loading="loading" :data="list">
                <el-table-column prop="date" label="所属油站"/>
                <el-table-column prop="date" label="变动账户"/>
                <el-table-column prop="date" label="类型"/>
                <el-table-column label="详细信息">
                  <el-table-column prop="name" label="变动金额"/>
                  <el-table-column prop="address" label="变动前余额"/>
                  <el-table-column prop="address" label="变动后余额"/>
                </el-table-column>
                <el-table-column prop="date" label="订单号"/>
                <el-table-column prop="date" label="描述"/>
                <el-table-column prop="date" label="变动时间"/>
              </el-table>

              <pagination
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
            <div v-else>
              <el-table ref="tables" v-loading="loading" :data="list">
                <el-table-column label="所属油站" prop="id" align="center"/>
                <el-table-column label="变动账户" align="center"/>
                <el-table-column label="类型" align="center" prop="userNo"/>
                <el-table-column label="变动升数" align="center" prop="name" />
                <el-table-column label="订单号" align="center" prop="balance"/>
                <el-table-column label="描述" align="center" prop="balance"/>
                <el-table-column label="变动时间" align="center" prop="point"/>
              </el-table>

              <pagination
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="积分记录" name="pointRecord">
            <el-table ref="tables" v-loading="loading" :data="list">
              <el-table-column label="所属油站" prop="id" align="center"/>
              <el-table-column label="变动时间" align="center"/>
              <el-table-column label="类型" align="center" prop="userNo"/>
              <el-table-column label="变动积分" align="center" prop="name" />
              <el-table-column label="描述" align="center" prop="balance"/>
            </el-table>

            <pagination
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane label="卡券列表" name="cardList">
            <el-radio-group v-model="cardList" size="mini" style="margin-bottom: 30px;">
              <el-radio-button label="notUse">未使用</el-radio-button>
              <el-radio-button label="used">已使用</el-radio-button>
              <el-radio-button label="expired">已过期</el-radio-button>
              <el-radio-button label="whole">全部</el-radio-button>
            </el-radio-group>
            <div>
              <el-table ref="tables" v-loading="loading" :data="list">
                <el-table-column prop="date" label="所属油站"/>
                <el-table-column prop="date" label="优惠券名称"/>
                <el-table-column prop="date" label="卡券类型"/>
                <el-table-column prop="date" label="满减金额"/>
                <el-table-column prop="date" label="券面额"/>
                <el-table-column prop="date" label="适用油品"/>
                <el-table-column prop="date" label="状态"/>
                <el-table-column label="卡券可用规则">
                  <el-table-column prop="name" label="有效期"/>
                  <el-table-column prop="address" label="周期与时段"/>
                </el-table-column>
                <el-table-column prop="date" label="领取时间"/>
                <el-table-column prop="date" label="描述"/>
              </el-table>

              <pagination
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="成长值记录" name="growthValue">
            <el-radio-group v-model="growthValue" size="mini" style="margin-bottom: 30px;">
              <el-radio-button label="whole">全部</el-radio-button>
              <el-radio-button label="gasoline">汽油成长值</el-radio-button>
              <el-radio-button label="diesel">柴油成长值</el-radio-button>
              <el-radio-button label="naturalGas">天然气成长值</el-radio-button>
            </el-radio-group>
            <div>
              <el-table ref="tables" v-loading="loading" :data="list">
                <el-table-column label="所属油站" prop="id" align="center"/>
                <el-table-column label="变动时间" align="center"/>
                <el-table-column label="类型" align="center" prop="userNo"/>
                <el-table-column label="变动成长值" align="center" prop="name" />
                <el-table-column label="描述" align="center" prop="balance"/>
              </el-table>

              <pagination
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="加油金记录" name="refuelMoney">
            <el-table ref="tables" v-loading="loading" :data="list">
              <el-table-column label="所属油站" prop="id" align="center"/>
              <el-table-column label="变动时间" align="center"/>
              <el-table-column label="类型" align="center" prop="userNo"/>
              <el-table-column label="变动数据" align="center" prop="name" />
              <el-table-column label="记录单号" align="center" prop="name" />
              <el-table-column label="变动描述" align="center" prop="balance"/>
              <el-table-column label="场景来源" align="center" prop="balance"/>
            </el-table>

            <pagination
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>


<!--    更换手机号对话框-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openMobile" style="margin-top: 200px" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="新手机号" prop="mobile" style="width: 420px">
              <el-input v-model="form.mobile" placeholder="请输入新手机号" maxlength="30" />
              <span style="font-size: 12px;color: grey">
                手机号更换后,旧手机号将无法使用,更换后实时生效
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

<!--    副卡管理-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openSecondCard" width="60%" append-to-body>
      <div style="display: flex;justify-content: space-between;margin: 10px 0">
        <div style="font-size: 16px">副卡账户</div>
        <el-button type="primary">创建副卡账户</el-button>
      </div>
      <div>
        <el-alert
          type="error"
          title="关于副卡"
          :closable="false">
          <p v-for="(item,index) in aboutSecondCard" :id="index">
            {{item}}
          </p>
        </el-alert>
      </div>
      <div>
        <el-table ref="tables" v-loading="loading" :data="list">
          <el-table-column prop="date" label="账户ID"/>
          <el-table-column prop="date" label="账户名称"/>
          <el-table-column label="余额">
            <el-table-column prop="name" label="储值卡"/>
            <el-table-column prop="address" label="升数卡"/>
          </el-table-column>
          <el-table-column label="会员等级">
            <el-table-column prop="name" label="汽油"/>
            <el-table-column prop="address" label="柴油"/>
          </el-table-column>
          <el-table-column label="统计">
            <el-table-column prop="name" label="可用积分"/>
            <el-table-column prop="address" label="消费次数"/>
          </el-table-column>
          <el-table-column prop="date" label="实体卡号"/>
          <el-table-column prop="date" label="状态"/>
          <el-table-column prop="date" label="创建时间"/>
        </el-table>

        <pagination
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>

<!--    会员成长值-->
    <el-dialog :close-on-click-modal="false" width="60%" :title="title" :visible.sync="openUserGrade" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div style="display: flex;justify-content: center">
              <div>
                <img v-if="form.avatar" :src="form.avatar">
                <img v-else src="@/assets/images/avatar.png">
              </div>
              <div style="height: 64px;line-height: 32px;width: 100px;margin-left: 20px;margin-bottom: 20px">
                <div style="color: #00afff">{{form.name}}</div>
                {{form.mobile}}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="当前成长值" prop="mobile">
              <e-row>
                <el-col :span="8">
                  <el-form-item prop="gasoline">
                    <el-input v-model="grade.gasoline" placeholder="1" disabled>
                      <template slot="prepend">汽油</template>
                      <template slot="append">成长值</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </e-row>
              <e-row>
                <el-col :span="8">
                  <el-form-item prop="dieselOil">
                    <el-input v-model="grade.dieselOil" placeholder="1" disabled>
                      <template slot="prepend">柴油</template>
                      <template slot="append">成长值</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </e-row>
              <e-row>
                <el-col :span="8">
                  <el-form-item prop="naturalGas">
                    <el-input v-model="grade.naturalGas" placeholder="1" disabled>
                      <template slot="prepend">天然气</template>
                      <template slot="append">成长值</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </e-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="操作类型" prop="type">
              <el-radio-group v-model="type">
                <el-radio label="add">增加</el-radio>
                <el-radio label="reduce">减少</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="变动数值" prop="type">
              <template>
                <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

<!--    子卡管理-->
    <el-dialog :close-on-click-modal="false" width="60%" :title="title" :visible.sync="openSubCard" append-to-body>
      <el-tabs v-model="subCardActive" @tab-click="handleClick">
        <el-tab-pane label="子卡管理" name="subCardManage">
          <div style="display: flex;justify-content: space-between;margin: 10px 0">
            <div style="font-size: 16px">会员信息：{{form.mobile}}</div>
            <el-button type="primary">新增子卡</el-button>
          </div>
          <div>
            <el-table ref="tables" v-loading="loading" :data="list">
              <el-table-column prop="date" label="子卡卡号"/>
              <el-table-column label="基础信息">
                <el-table-column prop="name" label="子卡姓名"/>
                <el-table-column prop="address" label="手机号"/>
                <el-table-column prop="address" label="车牌号"/>
              </el-table-column>
              <el-table-column label="额度管理">
                <el-table-column prop="name" label="配额额度"/>
                <el-table-column prop="address" label="已用额度"/>
                <el-table-column prop="address" label="可用额度"/>
              </el-table-column>
              <el-table-column prop="date" label="状态"/>
              <el-table-column prop="date" label="操作"/>
            </el-table>

            <pagination
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
          <el-alert
            title="关于子卡"
            type="info"
            description="子卡为会员子母卡功能,子卡共享母卡的储值额度及信息,子卡为实体会员卡信息,消费需在PC或手持机中才可进行使用">
          </el-alert>
        </el-tab-pane>
        <el-tab-pane label="子卡消费记录" name="consumption">
          <div style="display: flex;justify-content: space-between;margin: 10px 0">
            <div style="font-size: 16px">
              <el-form ref="form" :model="subCardList" :rules="rules" label-width="120px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="子卡卡号" prop="userNo">
                      <el-input
                        v-model="subCardList.idCard"
                        placeholder="请输入卡号信息"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="关联单号">
                      <el-input
                        v-model="subCardList.orderId"
                        placeholder="关联单号信息"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-button type="primary">新增子卡</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div>
            <el-table ref="tables" v-loading="loading" :data="list">
              <el-table-column prop="date" label="子卡卡号"/>
              <el-table-column prop="date" label="消费金额"/>
              <el-table-column label="消费信息">
                <el-table-column prop="name" label="关联单号"/>
                <el-table-column prop="address" label="描述信息"/>
              </el-table-column>
              <el-table-column prop="date" label="消费时间"/>
            </el-table>

            <pagination
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
          <el-alert
            title="关于子卡"
            type="info"
            description="当前会员的所有子卡消费记录信息,可根据对应子卡卡号进行检索查询">
          </el-alert>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

<!--    每日交易次数-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openConfig" style="margin-top: 200px" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div style="margin-bottom: 20px">
              {{transaction}}
            </div>
            <el-input v-model="config" />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

<!--    固定等级-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openLevel" style="margin-top: 200px" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="当前认证" prop="level" style="width: 420px">
<!--              <dict-tag :options="dict.type.zcrzdj" :value="form.fixingLevel"/>-->
              <el-input v-model="form.fixingLevel" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="变更认证" prop="level" style="width: 420px">
              <el-select
                v-model="form.fixingLevel"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.zcrzdj"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getUser, updateUser} from "@/api/staff/user/user";
import {ljStoreInfo} from "@/api/staff/store";
import {getUserGrade} from "@/api/staff/user/usergrade";
import {getSysConfig} from "@/api/staff/user/sysconfig";

export default {
  dicts: ['official','zhzt','zcrzdj'],
  data(){
    return{
      // 每日交易介绍
      transaction:"",
      config:'-1',
      num:1,
      // 操作类型
      type:'add',
      title:'',
      // 是否显示修改对话框
      openMobile: false,
      openSecondCard:false,
      openUserGrade:false,
      openSubCard:false,
      openConfig:false,
      openLevel:false,
      growthValue:'whole',
      cardList:'notUse',
      tabPosition: 'giftCard',
      balanceRecord: 'first',
      // 关于副卡信息
      aboutSecondCard:[],
      // 遮罩层
      loading: false,
      id:'',
      // 会员信息
      form:{},
      // 店铺信息
      store:'',
      // 会员等级信息
      grade:'',
      activeName: 'refuelOrder',
      subCardActive:'subCardManage',
      tableData:[],
      total:0,
      queryParams: {
        page: 1,
        pageSize: 10,
        mobile: '',
        id: '',
        name: '',
        status: '',
      },
      subCardList:[],
      list: [],
      // 表单校验
      rules: {
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        type: [{ required: true, message: "请选择操作类型", trigger: "blur" }],
      }
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getUserInfo();
    this.getInformation();
  },
  methods: {
    // 更换手机号
    replaceMobile(){
      this.openMobile = true;
      this.title = '更换手机号'
    },
    // 副卡管理
    secondCard(){
      this.openSecondCard = true;
      this.title = this.form.secondCard+'-副卡账户管理'
    },
    // 会员等级成长值
    userGrade(){
      this.openUserGrade = true;
      this.title = '更换手机号'
    },
    // 子卡管理
    subCard(){
      this.openSubCard = true;
      this.title = '子卡管理'
    },
    // 每日笔数
    configuration(){
      this.openConfig = true;
      this.title = '每日交易次数'
    },
    // 固定等级
    level(){
      this.openLevel = true;
      this.title = '固定等级(原专车认证)'
    },
    // 获取副卡信息
    getInformation(){
      getSysConfig('second_card').then(response => {
        this.aboutSecondCard = response.data.split(";")
      });
      getSysConfig('transaction').then(response => {
        this.transaction = response.data
      });
    },
    getList(){

    },
    // 获取详情
    getUserInfo(){
      let _this = this;
      // 获取会员详情
      getUser(this.id).then(response => {
        this.form = response.data;
        this.getGrade(response.data.gradeId);
      });
      // 获取店铺详情
      ljStoreInfo().then(response => {
        this.store = response.data;
      });
    },
    getGrade(id){
      getUserGrade(id).then(response => {
        this.grade = response.data;
      });
    },
    // 提交按钮
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openMobile = false;
              this.getUserInfo();
            });
          } else {
            // addUser(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.form= {}
    },
    // 取消按钮
    cancel() {
      this.openMobile = false;
      this.openUserGrade = false;
      this.openConfig = false;
      this.openLevel = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange(value) {
      console.log(value);
    },
    // 返回
    goBack() {
      this.$router.back(-1);
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    width: 100%;
    height: 100%;
    background: #f6f8f9;
  }
  .left{
    width: 20%;
    display: table-cell;
    /*垂直居中 */
    vertical-align: middle;
    /*水平居中*/
    text-align: center;
  }
  .right{
    flex: 1;
  }
  .sta{
    height: 100px;
    margin-top: 10px;
    padding-top: 30px;
  }
</style>
