<template>
    <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
        <el-row>
            <el-col :span="8" v-for="(item, index) in config" :key="index">
                <el-form-item :label="item.label" v-if="item.type == 0">
                    <el-input v-model="formData[item.value].value" clearable :placeholder="'请输入' + item.label" />
                </el-form-item>
                <el-form-item :label="item.label" v-if="item.type == 1">
                    <el-date-picker class="flex-1 !flex" v-model="formData[item.value].value" clearable type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请选择' + item.label" v-if="type == 1">
                    </el-date-picker>
                    <el-date-picker v-else class="flex-1 !flex" v-model="formData[item.value].value" clearable type="date"
                        value-format="YYYY-MM-DD" :placeholder="'请选择' + item.label">
                    </el-date-picker>
                </el-form-item>
                <!-- 部门选择 -->
                <el-form-item :label="item.label" v-if="item.type == 2">
                    <el-select @change="selectChange(item.value)" v-model="formData[item.value].value"
                        :placeholder="'请选择' + item.label" class="flex-1">
                        <el-option :label="item.name" :value="item.id" v-for="item in deptList">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 人员选择 -->
                <el-form-item :label="item.label" v-if="item.type == 3">
                    <el-input v-model="formData[item.value].text" readonly :placeholder="'点击选择' + item.label"
                        @click="userclick(item.value)" />
                </el-form-item>
                <el-form-item :label="item.label" v-if="item.type == 4">
                    <el-input v-model="formData[item.value].value" clearable type="textarea"
                        :placeholder="'请输入' + item.label" />
                </el-form-item>
                <el-form-item :label="item.label" v-if="item.type == 5">
                    <uploadAnnex :form-data="formData"></uploadAnnex>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div v-if="showPerDialog">
        <personnelselector ref="personnel" @confirm="submituser" type="1">
        </personnelselector>
    </div>
</template>

<script setup>
import uploadAnnex from './../uploadAnnex/index.vue'
import { ref, reactive } from 'vue'
import { deptLists } from "@/api/org/department";

const props = defineProps({
    config: {
        type: Array,
        required: true
    },
    formData: {
        type: Object,
        required: true
    },
    type: {
        type: Number,
    }
})

const deptList = ref([])
const getDeptList = async () => {
    const res = await deptLists()
    deptList.value = res.lists
}
getDeptList()
// 表单验证
const formRules = reactive({

});

const showPerDialog = ref(false)
const personnel = ref(null)

let value
const userclick = async (val) => {
    showPerDialog.value = true
    value = val
    await nextTick()
    personnel.value.open()
}
const submituser = (e) => {
    props.formData[value].text = e.name
    props.formData[value].value = e.id
    showPerDialog.value = false
}

const selectChange = (lab) => {
    props.formData[lab].text = deptList.value.find(item => item.id === props.formData[lab].value).name
}

const setKey = () => {
    props.config.forEach(item => {
        props.formData[item.value] = {
            label: item.label,
            value: "",
            text: ""
        }
    })
}
setKey()
</script>