<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="!isDetail"
    :class="{ 'view': !isDetail }">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" class="w-80!" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="formData.nickname" placeholder="请输入昵称" class="w-80!" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="formData.sex">
            <el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
            <el-radio :label="2">{{ t('profile.user.woman') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入手机号" class="w-80!" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="所在地" prop="areaId">
          <el-cascader v-model="formData.areaId" :options="areaTree" :props="defaultProps" class="w-1/1" clearable
            placeholder="请选择所在地" filterable collapse-tags />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" class="w-80!" />
        </el-form-item>
      </el-col>
    </el-row>
    <div v-if="!isDetail">
      <el-row>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="formData.status">
              <el-option label="停用" :value="0" >停用</el-option>
              <el-option label="在用" :value="1" >在用</el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker v-model="formData.createTime" type="datetime" format="YYYY-MM-DD HH:mm" placeholder="选择日期时间" class="w-80!" />
            <!-- {{ formatDate(formData.createTime, 'YYYY-MM-DD HH:mm') }} -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>

        <el-col :span="12">
          <el-form-item label="最后登录时间" prop="brandId">
            <el-date-picker v-model="formData.loginDate" type="datetime" format="YYYY-MM-DD HH:mm" placeholder="选择日期时间" class="w-80!" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
  <!-- <Form ref="formRef" :labelWidth="120" :rules="rules" :schema="schema">
    <template #status="form">
      <el-select v-model="form['status']">
        <el-option label="在用" :value="1" >在用</el-option>
        <el-option label="停用" :value="0" >停用</el-option>
      </el-select>
    </template>
<template #sex="form">
      <el-radio-group v-model="form['sex']">
        <el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
        <el-radio :label="2">{{ t('profile.user.woman') }}</el-radio>
      </el-radio-group>
    </template>
</Form> -->
  <!-- <div style="text-align: center">
    <XButton :title="t('common.save')" type="primary" @click="submit()" />
    <XButton :title="t('common.reset')" type="danger" @click="init()" />
  </div> -->
</template>
<script lang="ts" setup>
import type { FormRules } from 'element-plus'
import { FormSchema } from '@/types/form'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'

import type { FormExpose } from '@/components/Form'
import {
  getUserProfile,
  updateUserProfile,
  UserProfileUpdateReqVO,
  getUserProfileMember
} from '@/api/system/user/profile'
import { formatDate } from '@/utils/formatTime'

const areaTree = ref([])
onMounted(async () => {
  areaTree.value = await AreaApi.getAreaTree()
})

defineOptions({ name: 'BasicInfo' })
const props = defineProps({
  change: {
    type: Boolean,
    default: false
  }
})
const isDetail = ref(false)
// console.log(props.change)
watch(props, (newValue, oldValue) => {
  // console.log(newValue.change)
  isDetail.value = newValue.change
}, { deep: true })
const formData = ref({});
const { t } = useI18n()
const message = useMessage() // 消息弹窗
// 表单校验
const rules = reactive<FormRules>({
  username: [{ required: true, message: t('profile.rules.username'), trigger: 'blur' }],
  nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
  email: [
    { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
    {
      type: 'email',
      message: t('profile.rules.truemail'),
      trigger: ['blur', 'change']
    }
  ],
  mobile: [
    { required: true, message: t('profile.rules.phone'), trigger: 'blur' },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: t('profile.rules.truephone'),
      trigger: 'blur'
    }
  ]
})

const formRef = ref<FormExpose>() // 表单 Ref

const submit = async() => {
  const data = unref(formData.value)
  console.log(data)
  await updateUserProfile(data)
  message.success('修改成功，重新登陆后生效')
  await init()
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id:0
})

const init = async () => {
  const res = await getUserProfile()
  formData.value = res
  queryParams.id = 247 
  const moreData = await getUserProfileMember(queryParams)
  formData.value.member = moreData.list[0]
  console.log(formData.value.member)
  // console.log(formData.value)

}
defineExpose({
  init, submit
})
onMounted(async () => {
  await init()
})
</script>
<style lang="scss" scoped>
/* 如果是查看状态隐藏星号 */
.view ::v-deep .el-form-item__label::before {
  display: none;
}
/* 如果是查看状态下拉框三角*/
.view ::v-deep .el-input__suffix{
  display: none;
}
/* 查看状态下 label跟text的颜色对调 */
.view ::v-deep .el-form-item__label {
  color: var(--el-disabled-text-color);
}

.view ::v-deep .el-input.is-disabled .el-input__inner {
  color: var(--el-text-color-regular);
  -webkit-text-fill-color: var(--el-text-color-regular);
}

/* 默认状态input不显示边框 只有鼠标经过或者选中时才显示 */
::v-deep .el-input__wrapper {
  box-shadow: none
}

::v-deep .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--el-input-focus-border-color, var(--el-border-color)) inset
}

/* 同理text area区域也是 */
::v-deep .el-textarea__inner {
  box-shadow: none
}

::v-deep .el-textarea__inner:hover {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
}

::v-deep .el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
}

::v-deep .el-row {
  border: 1px solid #ebeef5;
  border-bottom: unset;
}

::v-deep .el-row:last-child {
  border-bottom: 1px solid #ebeef5;
}

::v-deep .el-col {
  border-right: 1px solid #ebeef5;
}

.el-form-item {
  margin-bottom: 0;
  height: 100%;
}

::v-deep(.el-form-item--default .el-form-item__label) {
  height: auto;
  min-height: 47px;
  display: flex;
  align-items: center;
  border-right: 1px solid #ebeef5;
}

.noBorder ::v-deep(.el-form-item .el-form-item__label) {
  border: unset;
}

::v-deep(.el-form-item--default .el-form-item__content) {
  line-height: 47px;
  padding: 10px;
  word-break: break-word;
}

.mobile-elform {
  border: 1px solid #ebeef5;
  margin: 1rem;
  padding-top: .5rem;
}

::v-deep .el-input.is-disabled .el-input__wrapper {
  background-color: unset;
  box-shadow: none;
}

::v-deep .el-form-item__error {
  top: auto;
  bottom: 0;
  left: 11px;
  font-size: 10px;
}

@media screen and (max-width: 768px) {
  .sliderPicUrls ::v-deep .el-form-item__content {
    margin: 0 !important;

    div {
      margin: 0 auto;
    }
  }

  .description ::v-deep .el-form-item__content {
    margin: 0 !important;
  }
}

.view ::v-deep .el-upload {
  display: none;
}
</style>