<template>
  <div class="page flex-col">
    <s-header :name="sys ? sys.title : $t('public.sysName')" :noback="true"></s-header>
    <div class="userPageBox">
      <div class="userBaseBox">
        <div class="baseRow flex-row justify-between">
          <div class="group2 flex-col"></div>
          <span class="baseText">基本信息</span>
        </div>
        <div class="userMessage flex-row justify-between">
          <div class="userId">
            <p class="userText">{{ user.managerId }}</p>
            <p class="userText">系统id</p>
          </div>
          <div class="userLine"></div>
          <div class="userId">
            <p class="userText">{{ user.username }}</p>
            <p class="userText">我的账号</p>
          </div>
          <div class="userLine"></div>
          <div class="userId">
            <p class="userText">{{ user.name }}</p>
            <p class="userText">我的姓名</p>
          </div>
        </div>
        <div class="userInfoBox">
          <div class="userInfo flex-row justify-between">
            <span class="userInfoLeft">地区: </span
            ><span>{{ user.areaId }}</span>
          </div>
          <div class="userInfo flex-row justify-between">
            <span class="userInfoLeft">手机号码: </span
            ><span>{{ user.phone }}</span>
          </div>
          <div class="userInfo flex-row justify-between">
            <span class="userInfoLeft">邮箱: </span
            ><span>{{ user.email }}</span>
          </div>
          <div v-if="!relationType" class="userInfo flex-row justify-between">
            <span class="userInfoLeft">关联上级: </span>
            <van-field
              class="relationClass"
              v-model="relationAdminName"
              name="relationAdminName"
              :placeholder="'请输入关联上级'"
            >
            <template #button>
              <van-button size="small" type="primary" @click="changeRelation()">确认</van-button>
            </template>
            </van-field>
          </div> 
          <div v-if="relationType" class="userInfo flex-row justify-between">
            <span class="userInfoLeft">关联上级: </span>
            <span>{{ relationAdminName }}</span>
            <van-icon name="edit" class="editIcon" @click="changeRelationAdminType()" />
          </div>
        </div>
      </div>
      <div class="lineBox"></div>
      <div class="commonOperBox">
        <div class="baseRow flex-row justify-between">
          <div class="group2 flex-col"></div>
          <span class="baseText">常用操作</span>
        </div>
        <div class="operListBox">
          <div
            v-if="roleCheck()"
            class="taskListRow flex-col"
            @click="pushPageList('/taskMessage')"
          >
            <div class="taskIcon taskMessageIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">任务消息</div>
            </div>
          </div>
          <div
            class="taskListRow flex-col"
            @click="pushPageList('/joinpayMch')"
          >
            <div class="taskIcon joinPayMchIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">提现账号</div>
            </div>
          </div>
          <div class="taskListRow flex-col" @click="pushPageList('/shandeMch')">
            <div class="taskIcon shandeMchIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">备用提现账号</div>
            </div>
          </div>
          <div
            class="taskListRow flex-col"
            @click="pushPageList('/changepassword')"
          >
            <div class="taskIcon changePasswordIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">修改密码</div>
            </div>
          </div>
          <div class="taskListRow flex-col" @click="operUnipay()">
            <div class="taskIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">自充值</div>
            </div>
          </div>
          <div class="taskListRow flex-col" @click="onperExitSys()">
            <div class="taskIcon"></div>
            <div class="taskRight">
              <div class="taskTitle">退出登录</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import navBar from "@/components/NavBar";
import { getLoginUser } from "@/common/js/utils";
import { useRouter } from "vue-router";
import { tAdminGetRelation, tAdminSetRelationAdmin } from "@/service/user";
import { Toast } from 'vant';

export default {
  setup() {
    const user = getLoginUser();
    const router = useRouter();
    const relationAdminName = ref("");
    const relationType = ref(true);
    const sys = ref(null);
    // 初始化页面获取列表
    onMounted(async () => {
      if (localStorage.getItem('loginSys')) {
        const loginSysString = localStorage.getItem('loginSys');
        sys.value = JSON.parse(loginSysString);
      }
      gettAdminGetRelation();
    });
    const gettAdminGetRelation = async () => {
      const { data } = await tAdminGetRelation({
        relationAdminId: user.relationAdminId,
      });
      if (typeof data === 'string') {
        relationAdminName.value = data;
      }
    };
    const operUnipay = () => {
      router.push({ path: "uniPay" });
    };
    const onperExitSys = () => {
      if (sys.value) {
        localStorage.clear();
        router.push({ path: 'login', query:{relation_admin_id: sys.value.relationAdminId} });
      } else {
        localStorage.clear();
        router.push({ path: "login" });
      }
    };
    const pushPageList = (url) => {
      router.push({ path: url });
    };
    const roleCheck = () => {
      if (user.isAdmined) {
        return true;
      } else {
        const menuList = user.menuCodeList.filter((item) => item === "M6");
        return menuList.length > 0;
      }
    };
    const changeRelationAdminType = () => { relationType.value = false; };
    const changeRelation = async () => {
      const { data } = await tAdminSetRelationAdmin({
        adminId: user.id,
        username: relationAdminName.value,
      });
      if (data.code === '00000') {
        Toast('关联上级成功');
        relationType.value = true;
      } else { Toast.fail(data.message); }
    };
    return {
      user,
      operUnipay,
      onperExitSys,
      relationAdminName,
      relationType,
      changeRelationAdminType,
      changeRelation,
      pushPageList,
      roleCheck,
      sys
    };
  },
  components: { sHeader, navBar },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin.less";
.page {
  width: 100%;
  background: url(../assets/user/bg.png) top center no-repeat;
  background-size: 100%;
  position: relative;
  /deep/ .simple-header {
    background: transparent;
  }
  .userPageBox {
    width: 100%;
    height: calc(100% - 100px);
    height: 100%;
    margin-bottom: 100px;
    overflow: auto;
    overflow-x: hidden;
  }
  .userBaseBox {
    width: 100%;
  }
  .baseRow {
    width: 100%;
    height: 20px;
    margin-left: 15px;
    margin-top: 5px;
    justify-content: flex-start;
    .group2 {
      background-color: rgba(128, 150, 236, 1);
      border-radius: 2px;
      width: 4px;
      height: 16px;
      margin-top: 4px;
    }
    .baseText {
      width: 150px;
      height: 20px;
      overflow-wrap: break-word;
      color: rgba(64, 77, 116, 1);
      font-size: 14px;
      font-family: PingFangSC-Medium;
      text-align: left;
      white-space: nowrap;
      line-height: 20px;
      display: block;
      margin-left: 15px;
    }
  }
  .userMessage {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
    line-height: 1.7;
    .userText {
      font-size: 14px;
      font-family: PingFangSC-Medium;
      margin: 0;
    }
    .userLine {
      width: 1px;
      height: 3.5em;
      font-size: 14px;
      background: #e7eaf7;
    }
  }
  .userInfoBox {
    margin-top: 25px;
    padding-bottom: 25px;
    .userInfo {
      width: 87%;
      margin: 0 auto;
      justify-content: flex-start;
      margin-top: 20px;
      position: relative;
      .editIcon { position: absolute; right: 0; font-size: 18px; color: #4d6add; }
      .userInfoLeft {
        width: 76px;
      }
      .relationClass {
        padding: 0;
        /deep/ .van-field__control { width: 65%; }
        /deep/ .van-field__button button { background-color: #4d6add; color: #fff; padding: 0 0.5em; }
      }
    }
  }
  .lineBox {
    width: 100%;
    height: 15px;
    background-color: #f6f7fc;
  }
  .commonOperBox {
    width: 100%;
    background: #fff;
    .operListBox {
      margin-top: 20px;
      .taskListRow {
        width: 100%;
        height: 53px;
        flex-wrap: wrap;
        .taskIcon {
          width: 13%;
          height: 100%;
          position: relative;
          &.taskMessageIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/taskMessageIcon.png") top
              center no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }
          &.joinPayMchIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/joinPayMchIcon.png") top center
              no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }
          &.shandeMchIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/shandeMchIcon.png") top center
              no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }
          &.changePasswordIcon::after {
            content: "";
            position: absolute;
            background: #fff url("../assets/user/changePasswordIcon.png") top
              center no-repeat;
            background-size: 100%;
            width: 0.6rem;
            height: 0.6rem;
            right: 0.15rem;
            top: 0.4rem;
          }
        }
        .taskRight {
          width: 87%;
          height: 100%;
          position: relative;
          border-bottom: 1px solid #e7eaf7;
          &::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 12px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng51122feddbc4a9b3e0b055ed6181d290e60825befaa5c777794f1412ff817e57)
              top center no-repeat;
            background-size: 100%;
            right: 0.55rem;
            top: 0.5rem;
          }
          .taskTitle {
            line-height: 53px;
          }
        }
      }
    }
  }
}
</style>
