<template>
  <el-form
    :model="user"
    label-width="100px"
    :inline="true"
    label-suffix="："
    v-loading="loading"
    element-loading-text="正在初始化数据...">
    <el-form-item label="姓名">
      <el-input :prefix-icon="User" v-model="user.name" placeholder="姓名">
      </el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
        <el-radio value="保密">保密</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="电话">
      <el-input
        :prefix-icon="Iphone"
        v-model="user.phone"
        placeholder="电话"></el-input>
    </el-form-item>
    <el-form-item label="所属角色">
      <el-select
        v-model="user.role"
        clearable
        filterable
        placeholder="请选择角色"
        style="width: 230px">
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.name"
          :value="String(item.id)"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="生日">
      <el-date-picker
        format="YYYYH-MM-DD"
        v-model="user.birthday"
        type="date"
        placeholder="生日"
        size="large" />
    </el-form-item>
    <el-form-item label="所在区域">
      <el-cascader
        :options="pcaTextArrData"
        v-model="selectedOptions"
        @change="pcaChange"></el-cascader>
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input
        :prefix-icon="Location"
        v-model="user.address"
        placeholder="请输入详细地址"></el-input>
    </el-form-item>
    <el-form-item label="账号状态">
      <el-switch
        v-model="user.userState"
        :active-value="1"
        :inactive-value="0"
        active-text="启用"
        width="65px"
        inline-prompt
        inactive-text="禁用"></el-switch>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { userType } from "@/types/user";
// @ts-ignore
import { pcaTextArr } from "element-china-area-data";
import { Avatar, Location, Iphone, User } from "@element-plus/icons-vue";
import { roleType } from "@/types/role";
import { roleDataList } from "@/lib/api/publicApiList";

const pcaTextArrData = ref(pcaTextArr);
const selectedOptions = ref([]);
const props = defineProps<{
  data?: userType;
  executeType?: string;
}>();

const emit = defineEmits(["updateData"]);

let loading = ref(true);
let roleList = ref<roleType[]>();
let user = ref<userType>({
  createDate: "",
  name: "",
  sex: "男",
  phone: "",
  userState: 1,
  role: "",
  birthday: "",
  province: "",
  city: "",
  area: "",
  address: "",
});

onMounted(async () => {
  roleList.value = await roleDataList();

  watch(
    () => user,
    (newVal) => {
      emit("updateData", newVal);
    },
    { deep: true }
  );

  loading.value = false;
});

if (props.executeType === "edit") {
  user.value = { ...props.data };
  selectedOptions.value = [
    user.value.province as never,
    user.value.city as never,
    user.value.area as never,
  ];
}

function pcaChange(data: { [key: string]: any }) {
  user.value.province = data[0];
  user.value.city = data[1];
  user.value.area = data[2];
}
</script>
<style lang="scss" scoped>
:deep(.el-input) {
  width: 230px;
}
:deep(.el-form-item) {
  margin-right: 0;
}
</style>
