<template>
  <div v-loading="loading">
    <div class="title">相关身份</div>
    <el-empty v-if="userData.length == 0" description="暂无数据" :image-size="50"></el-empty>
    <div v-else class="p-10 grid grid-cols-3 gap-10">
      <div v-for="(item, index) in userData" :key="index" class="sfList cursor-pointer" :class="item.checked&&'active'" @click="handleClick(item, index)">
        <el-checkbox v-model="item.checked" @change="handleClick(item)" size="large"></el-checkbox>
        <div class="role inline-block text-left">{{item.tur_role_name}}</div>
        <div class="avatar rounded-8px">
          <img class="w-full h-full rounded-8px" :src="user.user_avatar" alt="" />
        </div>
        <div class="sf-pro text-center">{{user.user_realname}}</div>
        <div class="sf-pro text-center">{{user.user_dept}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { user } from '~/store/index';
const loading = ref(false);

const userData = ref([])
const user_id = user.value?.user_id;
if (user_id) {
  initDetailInfo();
}

async function initDetailInfo(flag) {
  let { code, data } = await request({ url: "/user/main/user_info", data: { user_id: user_id } });
  if (code == 1) {
    if (flag) {
      sessionStorage.setItem("userInfo", JSON.stringify(data));
      location.reload()
    } else if (!flag && data.user_role_id_ext && data.user_role_id_ext != 0) {
      initData(data.user_role_id_ext);
    }
  }
}

const currentIndex = ref(0);
async function initData(user_role_id_ext) {
  let { code, data } = await request({ url: "/txwx/user_role/index", data: { tur_id: user_role_id_ext, limit: "100", M5jxrcL: "" } });
  if (code == 1) {
    userData.value = data.page_data;
  }
  userData.value.map((item, index) => {
    item.checked = false;
    if (user.value.user_role_id_ext_now == item.tur_id) {
      item.checked = true;
      currentIndex.value = index;
    }
  })
}

const handleClick = async (data, index) => {
  if (currentIndex.value == index) {
    return
  }
  loading.value = true;
  userData.value.map((item) => {
    item.checked = false;
  })
  data.checked = true;

  let { code } = await request({ url: "/user/main/change_role", data: { user_role_id_ext_now: data.tur_id, user_id: user_id } });
  if (code == 1) {
    ElMessage.success("切换默认角色成功，即将刷新菜单！");
    setTimeout(() => {
      initDetailInfo(true);
    }, 2000)
  }
}
</script>

<style lang="scss">
.title {
  font-size: 16px;
  font-weight: 400;
  color: var(--el-color-primary);
  line-height: 22px;
}
.sfList {
  border: 1px solid #bbe6ff;
  padding: 8px 5px 20px 8px;
  position: relative;
  &.active {
    border: 1.5px solid #00a3ff;
    box-shadow: 0px 1px 5px 0px rgba(0, 163, 255, 0.6);
  }
  .el-checkbox {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
  }
  .role {
    background: #00a3ff;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
  }
  .avatar {
    width: 82px;
    height: 82px;
    // background: #c4c4c4;
    // border-radius: 8px;
    margin: 20px auto 10px;
  }
  .sf-pro {
    line-height: 30px;
  }
}
</style>