<template>
  <div id="box">
    <div class="pcAgent" v-if="!isMobile">
      <div class="myInformation top-header">
        <div class="after-icon"></div>
        <span class="title-word">个人信息</span>
        <div class="right-header">
          <div class="item-style">
            <span class="price-word">账户余额:</span>
            <span class="balance-style" @click="$router.push('/customer/rechargeRecord')"> ¥{{ balance }}</span>
          </div>
          <div class="item-style" v-if="false">
            <span class="price-word">支付宝充值: </span>
            <img @click="onffline" src="../../../assets/kyy/编组.svg" style="cursor: pointer" alt="">
          </div>
          <div class="item-style" v-if="false">
            <span class="price-word">对公账户充值: </span>
            <el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
          </div>
        </div>
      </div>
      <div class="essentialInformation">
        <p class="one">基本信息</p>
        <div class="disp_top">
          <div>
            <div class="userImg">{{ nameText }}</div>
          </div>
          <div class="disp userID">
            <div>
              <p>账号昵称</p>
              <p>账号ID</p>
              <p>所属机构</p>
              <p>销售经理名称</p>
            </div>
            <div>
              <div>
                <p>{{ form.fullName }}</p>
              </div>
              <p>{{ userId }}</p>
              <p>{{ form.parentname }}</p>
              <p>{{ form.saleMgrName }}</p>
            </div>
          </div>
          <div class="disp userStatus">
            <div>
              <p>联系电话</p>
              <p>联系邮箱</p>
              <p>地址</p>
            </div>
            <div>
              <div>
                <p>
                  <span v-if="form_tel">
                    {{ form.tel }}
                    <i class="el-icon-edit" @click="form_tel = false"></i>
                  </span>
                  <span v-else>
                    <input type="text" v-model="form.tel"/>
                    <button @click="addZJuser(form.tel)" class="yesBtn">保存</button>
                    <button @click="form_tel = true" class="cancelBtn">取消</button>
                  </span>
                </p>
              </div>
              <div>
                <p>
                  <span v-if="form_email">
                    {{ form.email }}
                    <i class="el-icon-edit" @click="form_email = false"></i>
                  </span>
                  <span v-else>
                    <input type="text" v-model="form.email"/>
                    <button @click="addZJuser(form.email)" class="yesBtn">保存</button>
                    <button @click="form_email = true" class="cancelBtn">取消</button>
                  </span>
                </p>
              </div>
              <div>
                <p>
                  <span v-if="form_address">
                    {{ form.address }}
                    <i class="el-icon-edit" @click="form_address = false"></i>
                  </span>
                  <span v-else>
                    <input type="text" v-model="form.address"/>
                    <button @click="addZJuser(form.address)" class="yesBtn">保存</button>
                    <button @click="form_address = true" class="cancelBtn">取消</button>
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="kong"></div>
      <div class="particular">
        <p>详细信息</p>
        <p>用户业务信息和个人信息配置</p>
        <div>
          <div style="margin-right: 100px">
            <p>财务信息</p>
            <div class="particular_disp">
              <div>
                <p>开户行</p>
                <p>银行账号</p>
                <p>发票抬头</p>
                <p>发票地址</p>
                <p>发票联系电话</p>
                <p>纳税人识别号</p>
                <p>统一社会信用代码</p>
              </div>
              <div>
                <div>
                  <p>
                    <span v-if="form_bankName">
                      {{ form.bankName }}
                      <i class="el-icon-edit" @click="form_bankName = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.bankName"/>
                      <button @click="addZJuser(form.bankName)" class="yesBtn">保存</button>
                      <button @click="form_bankName = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    <span v-if="form_bankAcc">
                      {{ form.bankAcc }}
                      <i class="el-icon-edit" @click="form_bankAcc = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.bankAcc"/>
                      <button @click="addZJuser(form.bankAcc)" class="yesBtn">保存</button>
                      <button @click="form_bankAcc = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    <span v-if="form_identityName">
                      {{ form.identityName }}
                      <i class="el-icon-edit" @click="form_identityName = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.identityName"/>
                      <button @click="addZJuser(form.identityName)" class="yesBtn">保存</button>
                      <button @click="form_identityName = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    <span v-if="form_taxAddress">
                      {{ form.taxAddress }}
                      <i class="el-icon-edit" @click="form_taxAddress = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.taxAddress"/>
                      <button @click="addZJuser(form.taxAddress)" class="yesBtn">保存</button>
                      <button @click="form_taxAddress = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    <span v-if="form_taxTel">
                      {{ form.taxTel }}
                      <i class="el-icon-edit" @click="form_taxTel = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.taxTel"/>
                      <button @click="addZJuser(form.taxTel)" class="yesBtn">保存</button>
                      <button @click="form_taxTel = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    <span v-if="form_taxpayerIdentity">
                      {{ form.taxpayerIdentity }}
                      <i class="el-icon-edit" @click="form_taxpayerIdentity = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.taxpayerIdentity"/>
                      <button @click="addZJuser(form.taxpayerIdentity)" class="yesBtn">保存</button>
                      <button @click="form_taxpayerIdentity = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    <span v-if="form_orgcode">
                      {{ form.orgcode }}
                      <i class="el-icon-edit" @click="form_orgcode = false"></i>
                    </span>
                    <span v-else>
                      <input type="text" v-model="form.orgcode"/>
                      <button @click="addZJuser(form.orgcode)" class="yesBtn">保存</button>
                      <button @click="form_orgcode = true" class="cancelBtn">取消</button>
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div>
            <el-button @click="showTX = !showTX" type="primary" size="small" v-if="false">腾讯相关业务信息</el-button>
            <div v-if="showTX">
              <p>
                腾讯客户信息<span class="hint">提示!:有腾讯相关业务时填写</span>
              </p>
              <div class="particular_disp">
                <div>
                  <p>ak</p>
                  <p>sk</p>
                  <p>腾讯id</p>
                  <p>腾讯appId</p>
                  <p>备注</p>
                  <p>渠道商Id</p>
                </div>
                <div>
                  <div>
                    <p>
                      <span v-if="form_ak">
                        {{ form.ak }}
                        <i class="el-icon-edit" @click="form_ak = false"></i>
                      </span>
                      <span v-else>
                        <input type="text" v-model="form.ak"/>
                        <button @click="addZJuser(form.ak)" class="yesBtn">保存</button>
                        <button @click="form_ak = true" class="cancelBtn">取消</button>
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <span v-if="form_sk">
                        {{ form.sk }}
                        <i class="el-icon-edit" @click="form_sk = false"></i>
                      </span>
                      <span v-else>
                        <input type="text" v-model="form.sk"/>
                        <button @click="addZJuser(form.sk)" class="yesBtn">保存</button>
                        <button @click="form_sk = true" class="cancelBtn">取消</button>
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <span v-if="form_thirdId">
                        {{ form.thirdId }}
                        <i class="el-icon-edit" @click="form_thirdId = false"></i>
                      </span>
                      <span v-else>
                        <input type="text" v-model="form.thirdId"/>
                        <button @click="addZJuser(form.thirdId)" class="yesBtn">保存</button>
                        <button @click="form_thirdId = true" class="cancelBtn">取消</button>
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <span v-if="form_appId">
                        {{ form.appId }}
                        <i class="el-icon-edit" @click="form_appId = false"></i>
                      </span>
                      <span v-else>
                        <input type="text" v-model="form.appId"/>
                        <button @click="addZJuser(form.appId)" class="yesBtn">保存</button>
                        <button @click="form_appId = true" class="cancelBtn">取消</button>
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>
                      <span v-if="form_remark">
                        {{ form.remark }}
                        <i class="el-icon-edit" @click="form_remark = false"></i>
                      </span>
                      <span v-else>
                        <input type="text" v-model="form.remark"/>
                        <button @click="addZJuser(form.remark)" class="yesBtn">保存</button>
                        <button @click="form_remark = true" class="cancelBtn">取消</button>
                      </span>
                    </p>
                  </div>
                  <div>
                    <p>{{ "渠道商id" }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mobileAgent" v-else>
      <el-row class="title" type="flex" justify="center" align="middle">余额信息</el-row>
      <div class="user_account">
        <el-row :gutter="20">
          <el-col class="item_info" :span="12">
            <span class="key">账户余额: </span>
            <span class="val" @click="$router.push('/customer/rechargeRecord')">¥{{ balance }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="false">
          <el-col class="item_info" :span="12">
            <span class="key">支付宝充值: </span>
            <span class="val">
              <el-button type="success" size="mini" @click="onffline">充值</el-button>
            </span>
          </el-col>
          <el-col class="item_info" :span="12">
            <span class="key">对公账户充值: </span>
            <span class="val">
              <el-button type="warning" size="mini" @click="getRechargeCode">充值</el-button>
            </span>
          </el-col>
        </el-row>
      </div>
      <el-row class="title" type="flex" justify="center" align="middle">个人信息</el-row>
      <div class="user_info">
        <el-row :gutter="20">
          <el-col class="item_info" :span="12">
            <span class="key">账号昵称: </span>
            <span class="val">{{ form.fullName }}</span>
          </el-col>
          <el-col class="item_info" :span="12">
            <span class="key">所属机构: </span>
            <span class="val">{{ form.parentname }}</span>
          </el-col>
          <el-col class="item_info" :span="12">
            <span class="key">销售经理名称: </span>
            <span class="val">{{ form.saleMgrName }}</span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">账号ID: </span>
            <span class="val">{{ userId }}</span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">联系电话: </span>
            <span v-if="form_tel">
              {{ form.tel }}
              <i class="el-icon-edit" @click="form_tel = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.tel"/>
              <button @click="addZJuser(form.tel)" class="yesBtn">保存</button>
              <button @click="form_tel = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">联系邮箱: </span>
            <span v-if="form_email">
              {{ form.email }}
              <i class="el-icon-edit" @click="form_email = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.email"/>
              <button @click="addZJuser(form.email)" class="yesBtn">保存</button>
              <button @click="form_email = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">地址: </span>
            <span v-if="form_address">
              {{ form.address }}
              <i class="el-icon-edit" @click="form_address = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.address"/>
              <button @click="addZJuser(form.address)" class="yesBtn">保存</button>
              <button @click="form_address = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
        </el-row>
        <el-row class="title" type="flex" justify="center" align="middle">财务信息</el-row>
        <el-row class="info" type="flex" justify="center" align="middle">用户业务信息和个人信息配置</el-row>
        <el-row class="title" type="flex" justify="center" align="middle" v-if="false">
          <el-button @click="showTX = !showTX" type="primary" size="small">腾讯相关业务信息</el-button>
        </el-row>
      </div>
      <div class="tenct" v-if="showTX">
        <el-row>
          <p>
            腾讯客户信息<span class="hint">提示!:有腾讯相关业务时填写</span>
          </p>
        </el-row>
        <el-row :gutter="20">
          <el-col class="item_info" :span="24">
            <span class="key">ak: </span>
            <span v-if="form_ak">
              {{ form.ak }}
              <i class="el-icon-edit" @click="form_ak = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.ak"/>
              <button @click="addZJuser(form.ak)" class="yesBtn">保存</button>
              <button @click="form_ak = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">sk: </span>
            <span v-if="form_sk">
              {{ form.sk }}
              <i class="el-icon-edit" @click="form_sk = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.sk"/>
              <button @click="addZJuser(form.sk)" class="yesBtn">保存</button>
              <button @click="form_sk = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">腾讯id: </span>
            <span v-if="form_thirdId">
              {{ form.thirdId }}
              <i class="el-icon-edit" @click="form_thirdId = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.thirdId"/>
              <button @click="addZJuser(form.thirdId)" class="yesBtn">保存</button>
              <button @click="form_thirdId = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">腾讯appId: </span>
            <span v-if="form_appId">
              {{ form.appId }}
              <i class="el-icon-edit" @click="form_appId = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.appId"/>
              <button @click="addZJuser(form.appId)" class="yesBtn">保存</button>
              <button @click="form_appId = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">备注: </span>
            <span v-if="form_remark">
              {{ form.remark }}
              <i class="el-icon-edit" @click="form_remark = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.remark"/>
              <button @click="addZJuser(form.remark)" class="yesBtn">保存</button>
              <button @click="form_remark = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">{{ "渠道商id" }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="detailedInformation">
        <el-row :gutter="20">
          <el-col class="item_info" :span="24">
            <span class="key">开户行: </span>
            <span v-if="form_bankName">
              {{ form.bankName }}
              <i class="el-icon-edit" @click="form_bankName = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.bankName"/>
              <button @click="addZJuser(form.bankName)" class="yesBtn">保存</button>
              <button @click="form_bankName = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">银行账号: </span>
            <span v-if="form_bankAcc">
              {{ form.bankAcc }}
              <i class="el-icon-edit" @click="form_bankAcc = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.bankAcc"/>
              <button @click="addZJuser(form.bankAcc)" class="yesBtn">保存</button>
              <button @click="form_bankAcc = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">发票抬头: </span>
            <span v-if="form_identityName">
              {{ form.identityName }}
              <i class="el-icon-edit" @click="form_identityName = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.identityName"/>
              <button @click="addZJuser(form.identityName)" class="yesBtn">保存</button>
              <button @click="form_identityName = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">发票联系电话: </span>
            <span v-if="form_taxAddress">
              {{ form.taxAddress }}
              <i class="el-icon-edit" @click="form_taxAddress = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.taxAddress"/>
              <button @click="addZJuser(form.taxAddress)" class="yesBtn">保存</button>
              <button @click="form_taxAddress = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">纳税人识别号: </span>
            <span v-if="form_taxTel">
              {{ form.taxTel }}
              <i class="el-icon-edit" @click="form_taxTel = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.taxTel"/>
              <button @click="addZJuser(form.taxTel)" class="yesBtn">保存</button>
              <button @click="form_taxTel = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
          <el-col class="item_info" :span="24">
            <span class="key">统一社会信用代码: </span>
            <span v-if="form_taxpayerIdentity">
              {{ form.taxpayerIdentity }}
              <i class="el-icon-edit" @click="form_taxpayerIdentity = false"></i>
            </span>
            <span v-else>
              <input type="text" v-model="form.taxpayerIdentity"/>
              <button @click="addZJuser(form.taxpayerIdentity)" class="yesBtn">保存</button>
              <button @click="form_taxpayerIdentity = true" class="cancelBtn">取消</button>
            </span>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog title="请充值" :visible.sync="onfflineVisible" width="70%" :before-close="handleClose"
               :append-to-body="true">
      <el-form label-width="100px" :model="onfflineForm" ref="onfflineForm">
        <el-form-item label="充值金额:" prop="amount">
          <el-input v-model="onfflineForm.amount" placeholder="充值金额需¥1元以上哦"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" title="充值信息" width="500px" custom-class="get-charge-dialog"
               class="myDialog" :append-to-body="true">
      <div class="warning">注意：请在打款时备注摘里输入正确的充值码！</div>
      <div class="fontSize common-charge-style">
        <span class="font">账户名称： </span>
        <span>开元云（北京）科技有限公司</span>
      </div>
      <div class="fontSize common-charge-style">
        <span class="font">账户： </span>
        <span>755960937210001</span>
      </div>
      <div class="fontSize common-charge-style">
        <span class="font">开户行： </span>
        <span>招商银行北京自贸试验区商务中心区支行</span>
      </div>
      <div class="common-charge-style">
        <span class="font">充值码： </span>
        <span><span
          style="font-weight: bold;margin-right: 5px">{{ mailCode }}</span>(充值码请在当天内使用，过期无效)</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getZJUserInfoAPI, getZJsaveUserAPI} from "@/api/sales/zj_userinfo";
import {myBalanceAPI} from "@/api/finance/customerRechargeManagement";
import {alipayAPI} from '@/api/finance/customerRechargeManagement'
import {editPasswordAPI} from "@/api/login";
import {addCustomerMailcodeAPI, getCustomerMailcodeAPI} from '@/api/customer/rechargeRecord'

export default {
  data() {
    return {
      userAgent: window.navigator.userAgent,
      isMobile: false,
      dialogVisible: false,
      mailCode: '',
      updatePasswordRule: {
        password: [
          {required: true, message: "请输入旧密码", trigger: "blur"},
        ],
        newpassword: [
          {required: true, message: "请输入新密码", trigger: "blur"},
        ],
        configPassword: [
          {required: true, message: "请确认新密码", trigger: "blur"},
        ],
      },
      passwordForm: {
        password: "",
        newpassword: "",
        configPassword: "",
      },
      activeName: 'first',
      onfflineVisible: false,
      onfflineForm: {
        amount: ''
      },
      rules: {
        amount: [{required: true, trigger: "blur", message: '请输入充值金额'}, {
          pattern: /^[+]?(0|([1-9]\d*))?$/,
          message: '请输入数字'
        }],
      },
      balance: null,
      showTX: false,
      form_name: true,
      form_remark: true,
      form_tel: true,
      form_email: true,
      form_address: true,
      form_ak: true,
      form_sk: true,
      form_thirdId: true,
      form_bankName: true,
      form_appId: true,
      form_bankAcc: true,
      form_identityName: true,
      form_taxAddress: true,
      form_taxTel: true,
      form_taxpayerIdentity: true,
      form_orgcode: true,
      userId: sessionStorage.getItem("userId"),
      form: {},
      nameText: "",
      url: ''
    };
  },
  created() {
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);
  },
  mounted() {
    this.getZJUserInfo();
    this.myBalance();
  },
  methods: {
    goPersonal() {
      this.$router.push('/customer/customerInformation')
    },
    getRechargeCode() {
      addCustomerMailcodeAPI({user_id: this.userId}).then(res => {
        if (res.status) {
          this.dialogVisible = true
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getCustomerMailcode()
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    getCustomerMailcode() {
      getCustomerMailcodeAPI({user_id: this.userId}).then(res => {
        if (res.status) {
          this.mailCode = res.data
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    updatePassword() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          if (
            this.passwordForm.newpassword == this.passwordForm.configPassword
          ) {
            let params = {
              id: this.userId,
              password: this.passwordForm.password,
              newpassword: this.passwordForm.newpassword,
            };
            editPasswordAPI(params).then((res) => {
              if (res.status == true) {
                this.$message({
                  message: "密码修改成功",
                  type: "success",
                });
                this.passwordDialog = false;
                this.$router.push({name: "Login"});
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            this.$message({
              message: "新旧密码不一致",
              type: "error",
            });
          }
        }
      });
    },
    onffline() {
      this.onfflineVisible = true
    },
    onsubmit() {
      let pamars = {
        amount: this.onfflineForm.amount,
        userid: this.userId
      }
      this.$refs.onfflineForm.validate((valid) => {
        if (valid) {
          alipayAPI(pamars).then(res => {
            if (res.status == true) {
              this.$refs.onfflineForm.resetFields()
              this.onfflineVisible = false
              this.url = res.url
              window.open(this.url, '_blank');
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          })
        } else {
          this.$message({
            message: "请输入充值金额",
            type: "error",
          });
        }
      })
    },
    handleClose() {
      this.$nextTick(() => {
        this.$refs.onfflineForm.resetFields()
        this.onfflineVisible = false
      })
    },
    handleClose1() {
      this.$nextTick(() => {
        this.$refs.onfflineForm.resetFields()
        this.onfflineVisible = false
      })
    },
    cancel() {
      this.$nextTick(() => {
        this.$refs.onfflineForm.resetFields()
        this.onfflineVisible = false
      })
    },
    getZJUserInfo() {
      var userid = {
        userid: sessionStorage.getItem("userId"),
      };
      getZJUserInfoAPI(userid).then((res) => {
        this.form = res.data;
        this.nameText = this.form.name[0];
        Object.keys(this.form).map((key, item) => {
          if (this.form[key] == "") {
            this.form[key] = "未填写";
          }
        });
      });
    },
    myBalance() {
      myBalanceAPI().then((res) => {
        if (res.data == null) {
          this.balance = 0;
        } else {
          this.balance = res.data;
        }
      });
    },
    addZJuser(index) {
      if (index == "" || index == "未填写") {
        this.getZJUserInfo();
        this.open4();
        return;
      }
      this.form_bankName = true;
      this.form_name = true;
      this.form_tel = true;
      this.form_email = true;
      this.form_address = true;
      this.form_ak = true;
      this.form_sk = true;
      this.form_thirdId = true;
      this.form_appId = true;
      this.form_bankAcc = true;
      this.form_identityName = true;
      this.form_taxAddress = true;
      this.form_taxTel = true;
      this.form_taxpayerIdentity = true;
      this.form_remark = true;
      this.form_orgcode = true;
      this.form.userid = this.userId;

      Object.keys(this.form).map((key, item) => {
        if (this.form[key] == "未填写") {
          this.form[key] = "";
        }
      });
      this.form.supId = 99;
      getZJsaveUserAPI(this.form).then((res) => {
        if (res.status == true) {
          this.open2();
          this.getZJUserInfo();
          return;
        }
        this.getZJUserInfo();
        this.notFindUsers();
      });
    },
    open4() {
      this.$message.error("请您填写正确的信息");
    },
    notFindUsers() {
      this.$message.error("添加失败");
    },
    open2() {
      this.$message({
        showClose: true,
        message: "添加成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";

.aaa {
  background-color: #ff0;
  overflow: scroll !important;
}

#box {
  padding: 0;
  background-color: #f5f5f5;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

i {
  margin-left: 12px;
  color: #409eff;
  cursor: pointer;

  &:hover {
    color: #66b1ff;
  }
}

// 通用按钮样式
.yesBtn {
  margin-left: 10px;
  border: 1px solid #409eff;
  color: #409eff;
  background-color: transparent;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #ecf5ff;
  }
}

.cancelBtn {
  margin-left: 5px;
  border: 1px solid #909399;
  color: #909399;
  background-color: transparent;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #f4f4f5;
  }
}

//个人信息
.myInformation {
  background-color: #ffffff;
  min-width: 1100px;
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.myDialog {
  .warning {
    margin-bottom: 15px;
    color: #e6a23c;
    font-weight: 600;
    font-size: 14px;
  }

  .fontSize {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .font {
    font-weight: 600;
    margin-right: 10px;
  }
}

// 基本信息
.essentialInformation {
  width: 90%;
  max-width: 1200px;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;

  .one {
    margin: 0 0 20px 0;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    font-size: 18px;
    color: #303133;
    border-bottom: 1px solid #ebeef5;
  }

  p {
    line-height: 30px;
    margin: 10px 0;
    font-size: 14px;
    color: #606266;
  }

  //用户图片
  .userImg {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #409eff, #66b1ff);
    color: white;
    font-size: 24px;
    text-align: center;
    margin: 0 60px 0 10px;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  }

  .disp_top {
    display: flex;
    padding: 15px 0;
    align-items: center;
    flex-wrap: nowrap;
  }

  .userID {
    width: 400px;
    margin-right: 50px;

    p {
      font-weight: 500;
    }
  }

  .userStatus {
    width: 400px;

    p {
      font-weight: 500;
    }
  }

  .disp {
    display: flex;

    > div:first-child {
      flex: 0 0 120px;
      color: #909399;
    }

    > div:last-child {
      flex: 1;

      p {
        color: #303133;
      }
    }
  }
}

//详细信息
.particular {
  width: 90%;
  max-width: 1200px;
  font-size: 14px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;

  > div {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  > p:nth-child(1) {
    margin: 0 0 10px 0;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    font-size: 18px;
    color: #303133;
    border-bottom: 1px solid #ebeef5;
  }

  > p:nth-child(2) {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #909399;
  }

  .particular_disp {
    display: flex;
    width: 500px;
    margin-top: 15px;

    > div:nth-child(1) {
      flex: 0 0 120px;
      color: #909399;
    }

    > div:nth-child(2) {
      flex: 1;

      p {
        color: #303133;
        margin-bottom: 15px;
      }
    }
  }
}

.hint {
  font-size: 12px;
  margin-left: 10px;
  color: #e6a23c;
}

.balance-style {
  color: #409eff;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.title-word {
  color: #303133;
  font-weight: 600;
  font-size: 18px;
  margin-left: 15px;
}

.after-icon {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #409eff;
}

.top-header {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.right-header {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-word {
  color: #606266;
  font-size: 14px;
  padding-right: 10px;
  width: 120px;
}

.kong {
  height: 20px;
  width: 100%;
  background-color: #f5f5f5;
}

.common-charge-style {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;

  .font {
    flex: 0 0 80px;
  }
}

.item-style {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

// 移动端优化
.mobileAgent {
  width: 100% !important;
  padding: 15px;
  background-color: #f5f5f5;

  .title {
    font-weight: 600;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    margin: 10px 0;
    color: #303133;
    text-align: center;
  }

  .info {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #909399;
    text-align: center;
  }

  .userpic {
    height: 70px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .userImg {
      width: 70px;
      height: 70px;
      line-height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, #409eff, #66b1ff);
      color: white;
      font-size: 20px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    }
  }

  .user_account,
  .user_info,
  .detailedInformation,
  .tenct {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .hint {
      font-size: 12px;
      margin-left: 10px;
      color: #e6a23c;
    }

    .item_info {
      height: auto;
      line-height: 1.5;
      margin-bottom: 15px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .key {
        font-size: 14px;
        font-weight: 500;
        color: #909399;
        margin-bottom: 5px;
      }

      .val {
        font-size: 15px;
        color: #303133;
        word-break: break-all;
      }

      input {
        width: 100%;
        margin: 5px 0;
        padding: 8px 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 14px;
      }

      .zfb {
        vertical-align: middle;
      }
    }
  }

  .user_info, .detailedInformation {
    .item_info {
      .key, .val {
        display: block;
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .pcAgent {
    display: none;
  }

  .get-charge-dialog {
    width: 90vw !important;
  }
}

@media screen and (min-width: 769px) {
  .mobileAgent {
    display: none;
  }
}
</style>

<style>
.get-charge-dialog {
  padding-bottom: 15px;
}
</style>



