 <template>
  <el-dialog v-model="props.modelValue" title="省市区数据表信息详情" width="900px" @closed="closeDialog" @open="openDialog">
    <el-form ref="formRef" :model="formData" :disabled="true">

      <el-row :gutter="20">
	  
	      <el-col :lg="24">
            <el-form-item  :label-width="labelWidth" label="上级菜单" prop="RegionPid">
              <el-cascader
                class="w100"
                :options="dataList"
                :props="{ checkStrictly: true, value: 'regionId', label: 'regionName', emitPath: false }"
                placeholder="请选择上级菜单"
                clearable
                v-model="formData.regionPid">
                <template #default="{ node, data }">
                  <span>{{ data.regionName }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
        </el-col>

    

          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="区划名称" >
              <el-input v-model="formData.regionName"  />
            </el-form-item>
          </el-col>
    
          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="区划编码" >
              <el-input v-model="formData.regionCode"  />
            </el-form-item>
          </el-col>
    
          <el-col :lg="12">
            <el-form-item :label-width="labelWidth" label="层级(1省级 2市级 3区/县级)" >
              <el-input v-model="formData.regionLevel"  />
            </el-form-item>
          </el-col>






      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from "vue";
import { regionTreeList } from "@/api/business/Custom/Regions/region.js";


// 打开弹窗时回调
const openDialog = async () => {

    await getTreeList()
}

const formData = ref({
  ...props.data,
});
watch(props, async (v) => {
  formData.value = v.data;
});

// -业务参数
const dataList = ref([])

// -业务方法



// 基础参数
const formRef = ref();
const labelWidth = 100;
const { proxy } = getCurrentInstance()
const props = defineProps({
  modelValue: Boolean,
  data: Object,
  done: Function,
});
const emits = defineEmits(["update:modelValue"]);


// -基础方法
async function getTreeList() {
  regionTreeList().then((res) => {
    if (res.code == 200) {
      dataList.value = res.data
    }
  })
}
const closeDialog = () => {
  emits("update:modelValue", false);
};

</script>
