<template>
  <div class="w1200px bg-white mt-20px px-100px pb-100px">
    <div class="h-33px"></div>
    <ui-title-devider :title="$t('请设置个人相关信息后进入')"></ui-title-devider>
    <div class="h-14px"></div>
    <user-account-setting-info-item label="头像">
      <div class="pl-20px">
        <img src="/imgs/avatar.png" class="w-80px h-80px" />
      </div>
    </user-account-setting-info-item>
    <user-account-setting-info-item
      label="昵称"
      text="cyt"
    ></user-account-setting-info-item>
    <user-account-setting-info-item
      label="账号"
      text="15486323563@qq.com"
    ></user-account-setting-info-item>
    <user-account-setting-info-item label="密码">
      <div class="pl-20px flex items-center">
        <div v-if="!showPass" class="mr-50px">*********</div>
        <div v-else class="mr-50px">1231asadas</div>
        <div @click="showPass = !showPass">
          <img
            v-if="!showPass"
            src="/imgs/eye_icon.png"
            class="w-30px h-auto cursor-pointer"
          />
          <img
            v-else
            src="/imgs/eye_close_icon.png"
            class="w-30px h-auto cursor-pointer"
          />
        </div>
      </div>
    </user-account-setting-info-item>
    <user-account-setting-info-item :required="true" label="姓名">
      <ui-input v-model="name" class="!w-345px"></ui-input>
    </user-account-setting-info-item>
    <user-account-setting-info-item :required="true" label="电话">
      <ui-input v-model="phone" class="!w-345px">
        <div slot="suffix" class="flex items-center h-full">
          <div class="text-black">+86</div>
          <div class="w-12px"></div>
          <img src="/imgs/menu-arrow.png" class="w-6px h-auto" />
          <div class="w-16px"></div>
        </div> </ui-input
    ></user-account-setting-info-item>
    <user-account-setting-info-item :required="true" label="性别">
      <el-radio-group v-model="gender">
        <el-radio :label="0">女</el-radio>
        <el-radio :label="1">男</el-radio>
      </el-radio-group>
    </user-account-setting-info-item>
    <user-account-setting-info-item label="职业">
      <ui-input v-model="job" class="!w-728px"></ui-input>
    </user-account-setting-info-item>
    <user-account-setting-info-item label="工作单位">
      <ui-input v-model="jobUnit" class="!w-728px"></ui-input>
    </user-account-setting-info-item>
    <user-account-setting-info-item label="地址">
      <ui-input v-model="addr" class="!w-728px"></ui-input>
    </user-account-setting-info-item>
    <div class="flex justify-center">
      <el-button @click="$router.push('/home')" type="primary ">{{ $t("确定") }}</el-button>
    </div>
  </div>
</template>

<script>
import {} from "element-ui";
export default {
  data() {
    return {
      gender: 0,
      name: "陈小婷",
      phone: "18926145678",
      job: "产品经理",
      jobUnit: "广州量子互联科技有限公司",
      addr: "广州市黄埔区联和街道黄埔科学大道112号绿地广场1710室",
      showPass: false,
    };
  },
};
</script>

<style></style>
