<template>
  <el-dialog :model-value="visible" @update:model-value="$emit('update:visible', $event)" title="新增用户" width="700px" destroy-on-close append-to-body class="add-user-dialog">
    <el-form :model="userForm" label-width="90px" class="user-form">
      <div style="display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 30px;">
        <el-upload action="#" :show-file-list="false" :auto-upload="false" :on-change="handleUserAvatarChange">
          <el-avatar :size="80" :src="userForm.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" style="cursor: pointer; border: 2px solid #e4e7ed;" />
        </el-upload>
        <el-button type="primary" link @click="">点击修改头像</el-button>
      </div>

      <div class="form-section-header">基本资料</div>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="录入来源">
            <el-select v-model="userForm.source" style="width: 100%" filterable allow-create default-first-option>
              <el-option label="平台录入" value="平台录入" />
              <el-option label="萌它宠物连锁录入" value="萌它宠物连锁录入" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区域">
            <el-select v-model="userForm.area" style="width: 100%" filterable allow-create default-first-option placeholder="请选择或输入">
              <el-option label="朝阳区" value="朝阳区" />
              <el-option label="海淀区" value="海淀区" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" required><el-input v-model="userForm.name" placeholder="请输入姓名" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" required><el-input v-model="userForm.phone" placeholder="请输入电话" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="userForm.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="form-section-header">居住信息</div>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="所在地区">
            <el-cascader v-model="userForm.region" :options="pcaOptions" placeholder="请选择省/市/区" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细住址"><el-input v-model="userForm.detailAddress" placeholder="请输入街道/门牌号" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋类型">
            <el-radio-group v-model="userForm.houseType">
              <el-radio label="stairs">楼梯</el-radio>
              <el-radio label="elevator">电梯</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入门方式">
            <el-radio-group v-model="userForm.entryMethod">
              <el-radio label="password">密码开门</el-radio>
              <el-radio label="key">钥匙开门</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="userForm.entryMethod === 'password'">
          <el-form-item label="开门密码">
            <el-input v-model="userForm.entryPassword" placeholder="请输入密码" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="userForm.entryMethod === 'key'">
          <el-form-item label="钥匙位置">
            <el-input v-model="userForm.keyLocation" placeholder="如：地毯下" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="form-section-header">其他</div>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="用户标签">
            <el-select v-model="userSelectedTagIds" multiple placeholder="选择标签" style="width: 100%">
              <el-option v-for="tag in allUserTags" :key="tag.id" :label="tag.name" :value="tag.id">
                <el-tag :type="tag.type" effect="light" size="small">{{ tag.name }}</el-tag>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注说明"><el-input type="textarea" v-model="userForm.remark" rows="3" /></el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="text-align: center; margin-top: 20px;">
        <el-button @click="$emit('update:visible', false)" size="large" style="width: 120px;">取消</el-button>
        <el-button type="primary" @click="submit" size="large" style="width: 120px;">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: { type: Boolean, default: false },
  pcaOptions: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:visible', 'success'])

const userSelectedTagIds = ref([])
const allUserTags = [
  { id: 1, name: '优质客户', type: 'success' },
  { id: 2, name: '潜在流失', type: 'warning' },
  { id: 3, name: '黑名单', type: 'danger' }
]

const userForm = reactive({
  id: null, avatar: '', name: '', phone: '', gender: '男', address: '', detailAddress: '', region: [], remark: '',
  houseType: 'elevator', entryMethod: 'password', entryPassword: '', keyLocation: '',
  source: '平台录入', area: ''
})

watch(() => props.visible, (newVal) => {
  if (newVal) {
    userSelectedTagIds.value = []
    Object.assign(userForm, {
      id: null, avatar: '', name: '', phone: '', gender: '男', address: '', detailAddress: '', region: [], remark: '',
      houseType: 'elevator', entryMethod: 'password', entryPassword: '', keyLocation: '',
      source: '平台录入', area: ''
    })
  }
})

const handleUserAvatarChange = (uploadFile) => {
  userForm.avatar = URL.createObjectURL(uploadFile.raw)
}

const submit = () => {
  if (!userForm.name || !userForm.phone) {
    ElMessage.warning('请补全用户必填信息')
    return
  }
  const newUser = {
    id: Date.now(),
    name: userForm.name,
    phone: userForm.phone
  }
  emit('success', newUser)
  emit('update:visible', false)
}
</script>

<style scoped>
.form-section-header { font-weight: bold; margin-bottom: 20px; font-size: 15px; color: #303133; }
</style>
