<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="700px" draggable>
    <el-form ref="formRef" :model="userForm"  label-width="120px">
      <el-form-item label="用户账号:" prop="account">
       {{userForm.user_account}}
      </el-form-item>
      <el-form-item label="角色:" prop="role">
        {{userForm.role_id}}
      </el-form-item>
      <el-form-item label="关联台站:" prop="stations">
        {{formatData(asInfoForm)}}
      </el-form-item>
      <el-form-item label="用户姓名:" prop="name">
        {{userForm.user_name}}
      </el-form-item>
      <el-form-item label="职务:" prop="post">
        {{userForm.user_job}}
      </el-form-item>
      <el-form-item label="所属单位:" prop="affiliation">
       {{userForm.user_unit}}
      </el-form-item>
      <el-form-item label="联系电话:" prop="phone">
        {{userForm.user_phone}}
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import {useUserStore} from "@/stores/modules/user";
const userStore = useUserStore();
const userForm  = computed(() => userStore.userInfo);
const asInfoForm  = computed(() => userStore.asInfo);
const formatData=(data)=> {
  return data.map(item => `${item.as_name}（${item.as_code}）`).join(', ');
}
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>
