<template>
  <div>
    <div class="text-right">
      <el-button type="primary" @click="linkTo('grzx_xgmm')">修改密码</el-button>
    </div>
    <div class="jbzlContent">
      <img class="avatar" v-if="ruleForm.user_avatar" :src="ruleForm.user_avatar" />
      <div v-else class="avatar"></div>
      <el-form class="grid grid-cols-2" ref="ruleFormRef" label-position="right" label-width="90px" :model="ruleForm">
        <el-form-item :class="item.class" v-for="(item, index ) in formData" :key="index" :label="item.name+':'" :prop="item.key">
          <div>{{ruleForm[item.key]}}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { user } from '~/store/index';
const user_id = user.value?.user_id;
if (user_id) {
  initDetailInfo();
}

const router = useRouter();
const linkTo = (name) => {
  router.push({ name });
};

const formData = ref([
  {
    name: "账号",
    key: "user_name",
  },
  {
    name: "用户角色",
    key: "role_name",
  },
  {
    name: "姓名",
    key: "user_realname",
  },
  {
    name: "性别",
    key: "genderName",
  },
  {
    name: "事业单位",
    key: "ue_jbxx_ju_sydw",
  },
  {
    name: "职位",
    key: "ue_jbxx_ju_zw",
  },
  {
    name: "所属部门",
    key: "ue_jbxx_ju_bm",
    class: "col-span-full"
  },
  {
    name: "特长",
    key: "ue_jbxx_tea_tc",
    class: "col-span-full"
  },
  {
    name: "联系电话",
    key: "user_phone",
  },
  {
    name: "电子邮件",
    key: "user_email",
  }
])
const ruleForm = ref({
  a: "123145667",
  b: "张大大",
  c: "18866569107",
  d: "",
  e: "",
  f: "",
  m: "特长文字描述内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容"
});
async function initDetailInfo() {
  let { code, data } = await request({ url: "/user/main/user_info", data: { user_id: user_id } });
  if (code == 1) {
    ruleForm.value = data;
    if (data.gender) {
      ruleForm.value.genderName = data.gender == "1" ? "男" : "女";
    }
  }
}
</script>

<style lang="scss">
.jbzlContent {
  width: 600px;
  margin: auto;
  .avatar {
    width: 82px;
    height: 82px;
    // background: #c4c4c4;
    border-radius: 8px;
    margin: 30px auto 50px;
  }
}
</style>