<template>
    <!-- <mx-form-item v-if="disabled" v-model="model[propProvince]" :prop="propProvince" :label="labelProvince" disabled/> -->
    <mx-form-item :prop="propProvince" :label="labelProvince">
        <mx-picker :disabled="disabled" v-model="model[propProvince]" label-prop="dictLabel" value-prop="dictValue" placeholder="请选择省份" :data="provinceList"/>
    </mx-form-item>
</template>

<script setup>
import {getProvinces} from '@/api/modules/system'
import {createPropDefine} from "@/utils";
import {useInjectFormData} from "@/pagesOther/pages/login/components/hooks/useFormDataInjection";
import {useInjectProvince} from "@/pagesOther/pages/login/components/hooks/useProvinceInjection";

defineProps({
    propProvince: createPropDefine('location'),
    labelProvince: createPropDefine('所在省份'),
    disabled: createPropDefine(false, Boolean)
})

const [model] = useInjectFormData()
const {provinceOptions} = useInjectProvince({provinceOptions: []})
console.log(provinceOptions, 333, model)
const provinceList = ref([])
getProvinces().then(res => {
  provinceList.value = res.data
})
</script>

<style scoped>

</style>