<template>
    <div class="p-2">

        <el-card shadow="hover">
            <el-form style="display: flex;justify-content: space-between;" ref="roleFormRef" :model="form"
                :rules="rules" label-width="11vw">
                <div class="form-left">

                    <el-form-item label="专家姓名：" prop="expertName">
                        <el-input v-model="form.expertName" placeholder="此处输入专家姓名" />
                    </el-form-item>

                    <el-form-item label="性别：" prop="expertName">
                        <el-select v-model="form.gender" placeholder="此处选择性别" clearable>
                            <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="出生日期：" prop="birth">
                        <el-date-picker v-model="form.birth" type="date" placeholder="请选择出生日期" size="default" />
                    </el-form-item>

                    <el-form-item label="联系方式：" prop="expertContact">
                        <el-input v-model="form.expertContact" placeholder="此处输入联系方式" />
                    </el-form-item>

                    <el-form-item label="工作单位：" prop="expertUnit">
                        <el-input v-model="form.expertUnit" placeholder="此处输入工作单位" />
                    </el-form-item>

                    <el-form-item label="职务：" prop="duty">
                        <el-input v-model="form.duty" placeholder="此处输入职务" />
                    </el-form-item>

                    <el-form-item label="政治面貌：" prop="politicsStatus">
                        <el-input v-model="form.politicsStatus" placeholder="此处输入政治面貌" />
                    </el-form-item>

                    <el-form-item label="毕业院校：" prop="graduateSchool">
                        <el-input v-model="form.graduateSchool" placeholder="此处输入毕业院校" />
                    </el-form-item>

                    <el-form-item label="专业：" prop="major">
                        <el-input v-model="form.major" placeholder="此处输入专业" />
                    </el-form-item>

                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="form.email" placeholder="此处输入邮箱" />
                    </el-form-item>

                    <el-form-item label="资格证书取得时间：" prop="certificateGetTime">
                        <el-input v-model="form.certificateName" placeholder="此处输入资格证书名称" />
                        <el-date-picker v-model="form.certifiGetTime" type="date" placeholder="此处选择取得时间" size="default" />
                    </el-form-item>

                    <div class="current-major">
                        <el-form-item label="现从事专业及年限：" prop="currentMajor">
                            <el-input v-model="form.currentMajor" placeholder="此处输入现从事专业" />
                        </el-form-item>

                        <el-form-item prop="currentDuration">
                            <el-input v-model="form.currentDuration" placeholder="年限" />
                            <span>年</span>
                        </el-form-item>
                    </div>

                    <div class="form-buttons">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button type="danger" @click="cancel">取消</el-button>
                    </div>


                </div>


                <!-- 表单左边部分结束 右边部分开始 -->

                <div class="form-right">
                    <!-- 照片 -->
                    <el-form-item label="照片：" prop="photos">
                        <el-upload :limit="1" class="avatar-uploader"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>

                            <template #tip>
                                <div class="text-left el-upload__tip">
                                    <!-- <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                                </div> -->
                                    <span>请选择图片上传：大小128 * 180像素，支持jpg、png等格式，图片需小于10M，仅一张。</span>

                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>



                    <!-- 从事工作或研究领域（可多选） -->
                    <el-form-item label="从事工作或研究领域（可多选）：">
                        <el-checkbox-group v-model="form.researchField">
                            <el-checkbox v-for="(item, index) of fieldOptions" :key="index" :value="item.value"
                                :label="item.label" />
                        </el-checkbox-group>
                    </el-form-item>

                    <!-- 主要工作经历 -->
                    <el-form-item label="主要工作经历：">
                        <el-input v-model="form.mainCareer" maxlength="3000" style="width: 240px"
                            placeholder="此处输入主要工作经历" show-word-limit type="textarea"
                            :autosize="{ minRows: 2, maxRows: 5 }" />
                    </el-form-item>
                    <!-- 社会兼职情况 -->
                    <el-form-item label="社会兼职情况：">
                        <el-input v-model="form.socialPartTimeJob" maxlength="3000" style="width: 240px"
                            placeholder="此处输入社会兼职情况" show-word-limit type="textarea"
                            :autosize="{ minRows: 2, maxRows: 5 }" />
                    </el-form-item>
                    <!-- 主要论著、业绩成果及获奖情况 -->
                    <el-form-item label="主要论著、业绩成果及获奖情况：">
                        <el-input v-model="form.mainAchievementAndPrize" maxlength="3000" style="width: 240px"
                            placeholder="此处输入主要论著、业绩成果及获奖情况" show-word-limit type="textarea"
                            :autosize="{ minRows: 2, maxRows: 5 }" />
                    </el-form-item>


                </div>



            </el-form>
        </el-card>



    </div>
</template>

<script setup name="Role" lang="ts">
// import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from '@/api/system/role';

import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';

import { ExpertInVO, ExpertInForm, ExpertInQuery } from '@/api/expert/in/types';


const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { approval_status } = toRefs<any>(proxy?.useDict('approval_status'));
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));

//静态数据
const expertList = ref<ExpertInVO[]>([
    {
        expertId: '0001',
        expertName: '张三',
        expertContact: '13819178292',
        expertUnit: '信息院公司',
        duty: '高级软件工程师',
        education: '研究生',
        birth: '1987.09.25',
        approvalStatus: '正常'
    },
    {
        expertId: '0002',
        expertName: '李四',
        expertContact: '13819178292',
        expertUnit: '信息院公司',
        duty: '高级软件工程师',
        education: '博士',
        birth: '1987.09.25',
        approvalStatus: '待审批'
    },
    {
        expertId: '0003',
        expertName: '王五',
        expertContact: '13819178292',
        expertUnit: '信息院公司',
        duty: '高级软件工程师',
        education: '博士',
        birth: '1987.09.25',
        approvalStatus: '待审批'
    },
    {
        expertId: '0004',
        expertName: '赵六',
        expertContact: '13819178292',
        expertUnit: '信息院公司',
        duty: '高级软件工程师',
        education: '研究生',
        birth: '1987.09.25',
        approvalStatus: '审批拒绝'
    },
    {
        expertId: '0005',
        expertName: '钱七',
        expertContact: '13819178292',
        expertUnit: '信息院公司',
        duty: '高级软件工程师',
        education: '博士',
        birth: '1987.09.25',
        approvalStatus: '正常'
    },
]);
//   const expertList = ref<ExpertInVO[]>();

const roleList = ref<RoleVO[]>();
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
//   const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const menuOptions = ref<MenuTreeOption[]>([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref<DeptTreeOption[]>([]);
const openDataScope = ref(false);

/** 数据范围选项*/
const dataScopeOptions = ref([
    { value: '1', label: '全部数据权限' },
    { value: '2', label: '自定数据权限' },
    { value: '3', label: '本部门数据权限' },
    { value: '4', label: '本部门及以下数据权限' },
    { value: '5', label: '仅本人数据权限' }
]);

const queryFormRef = ref<ElFormInstance>();
const roleFormRef = ref<ElFormInstance>();
const dataScopeRef = ref<ElFormInstance>();
const menuRef = ref<ElTreeInstance>();
const deptRef = ref<ElTreeInstance>();

const initForm: ExpertInForm = {   //初始表单
    //左边
    expertName: '',//专家姓名
    gender: '',//性别
    birth: '',//出生年月
    expertContact: '',//联系方式
    expertUnit: '',//工作单位
    duty: '',//职务
    politicsStatus: '',//政治面貌
    graduateSchool: '',//毕业院校
    major: '',//专业
    email: '',//邮箱
    certificateName: '',//资格证书名称
    certifiGetTime: '',//资格证书取得时间
    currentMajor: '',//现从事专业
    currentDuration: '',//现从事年限

    //右边
    photos: [],//照片
    researchField: [],//从事工作或研究领域
    mainCareer: '',//主要工作经历
    socialPartTimeJob: '',//社会兼职情况
    mainAchievementAndPrize: '',//主要论著、业绩成果及获奖情况
};
// const initForm: RoleForm = {
//     roleId: undefined,
//     roleSort: 1,
//     status: '0',
//     roleName: '',
//     roleKey: '',
//     menuCheckStrictly: true,
//     deptCheckStrictly: true,
//     remark: '',
//     dataScope: '1',
//     menuIds: [],
//     deptIds: []
// };

const data = reactive<PageData<ExpertInForm, ExpertInQuery>>({
    form: { ...initForm },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        expertName: '',
        expertContact: '',
        expertUnit: '',
        approvalStatus: '',
    },
    rules: {
        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
        roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }]
    }
});
// const data = reactive<PageData<RoleForm, RoleQuery>>({
//     form: { ...initForm },
//     queryParams: {
//         pageNum: 1,
//         pageSize: 10,
//         roleName: '',
//         roleKey: '',
//         status: ''
//     },
//     rules: {
//         roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
//         roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
//         roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }]
//     }
// });
const { form, queryParams, rules } = toRefs(data);

const imageUrl = ref('')

//上传之前
const beforeAvatarUpload = () => {

}

//上传成功
const handleAvatarSuccess = () => {

}
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const fieldOptions = reactive([
    {
        value: 1,
        label: '信息化基础设施建设'
    },
    {
        value: 2,
        label: '网络传输'
    },
    {
        value: 3,
        label: '网络与信息安全'
    },
    {
        value: 4,
        label: '社会管理和公共服务信息'
    },
    {
        value: 5,
        label: '信息资源开发利用'
    },
    {
        value: 6,
        label: '云计算与大数据'
    },
    {
        value: 7,
        label: '移动互联网'
    },
    {
        value: 8,
        label: '信息化项目审计'
    },
    {
        value: 9,
        label: '电子政务'
    },
    {
        value: 10,
        label: '其他领域(需填写)'
    },
]);

/** 重置 */
const resetQuery = () => {
    // dateRange.value = ['', ''];
    queryFormRef.value?.resetFields();
};
/** 重置新增的表单以及其他数据  */
const reset = () => {
    // menuRef.value?.setCheckedKeys([]);
    // menuExpand.value = false;
    // menuNodeAll.value = false;
    // deptExpand.value = true;
    // deptNodeAll.value = false;
    // form.value = { ...initForm };
    // roleFormRef.value?.resetFields();
};

/** 修改角色 */
const handleUpdate = async (row?: RoleVO) => {
    // reset();
    // const roleId = row?.roleId || ids.value[0];
    // const { data } = await getRole(roleId);
    // Object.assign(form.value, data);
    // form.value.roleSort = Number(form.value.roleSort);
    // const res = await getRoleMenuTreeselect(roleId);
    // dialog.title = '修改角色';
    // dialog.visible = true;
    // res.checkedKeys.forEach((v) => {
    //     nextTick(() => {
    //         menuRef.value?.setChecked(v, true, false);
    //     });
    // });
};
/** 根据角色ID查询菜单树结构 */
// const getRoleMenuTreeselect = (roleId: string | number) => {
//     return roleMenuTreeselect(roleId).then((res): RoleMenuTree => {
//         menuOptions.value = res.data.menus;
//         return res.data;
//     });
// };
/** 根据角色ID查询部门树结构 */
// const getRoleDeptTreeSelect = async (roleId: string | number) => {
// const res = await deptTreeSelect(roleId);
// deptOptions.value = res.data.depts;
// return res.data;
// };
/** 树权限（展开/折叠）*/
const handleCheckedTreeExpand = (value: boolean, type: string) => {
    // if (type == 'menu') {
    //     let treeList = menuOptions.value;
    //     for (let i = 0; i < treeList.length; i++) {
    //         if (menuRef.value) {
    //             menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
    //         }
    //     }
    // } else if (type == 'dept') {
    //     let treeList = deptOptions.value;
    //     for (let i = 0; i < treeList.length; i++) {
    //         if (deptRef.value) {
    //             deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
    //         }
    //     }
    // }
};
/** 树权限（全选/全不选） */
const handleCheckedTreeNodeAll = (value: any, type: string) => {
    // if (type == 'menu') {
    //     menuRef.value?.setCheckedNodes(value ? (menuOptions.value as any) : []);
    // } else if (type == 'dept') {
    //     deptRef.value?.setCheckedNodes(value ? (deptOptions.value as any) : []);
    // }
};
/** 树权限（父子联动） */
const handleCheckedTreeConnect = (value: any, type: string) => {
    // if (type == 'menu') {
    //     form.value.menuCheckStrictly = value;
    // } else if (type == 'dept') {
    //     form.value.deptCheckStrictly = value;
    // }
};

/** 提交按钮 */
const submitForm = () => {
    roleFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            // form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
            // proxy?.$modal.msgSuccess('操作成功');
            // dialog.visible = false;
            // getList();
        }
    });
};
/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
};
/** 选择角色权限范围触发 */
const dataScopeSelectChange = (value: string) => {
    if (value !== '2') {
        deptRef.value?.setCheckedKeys([]);
    }
};

/** 提交按钮（数据权限） */
const submitDataScope = async () => {
    // if (form.value.roleId) {
    // await dataScope(form.value);
    // proxy?.$modal.msgSuccess('修改成功');
    // openDataScope.value = false;
    // getList();
    // }
};
/** 取消按钮（数据权限）*/
const cancelDataScope = () => {
    dataScopeRef.value?.resetFields();
    // form.value = { ...initForm };
    openDataScope.value = false;
};

onMounted(() => {
    // getList();
});
</script>

<style lang="scss" scoped>
.p-2 {
    height: 100%;
}

.form-left,
.form-right {
    width: 49%;
    height: 85vh;
    font-size: 2rem;

}

:deep(.el-form-item)  {
    line-height: 4vh;
}

.form-left {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .el-form-item:nth-child(11){
        &>div:nth-child(2){
            
        }
    }
}

.form-right {}

.form-buttons {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

.current-major {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;

    // overflow: hidden;
    .el-form-item:nth-child(1) {
        width: 80%;

        
    }

    .el-form-item:nth-child(2) {
        :deep(.el-form-item__label)  {
            display: none;
        }

        :deep(.el-form-item__content)  {
            margin-left: 0 !important;
            width: 100% !important;
            display: flex !important;
            justify-content: space-around !important;

            &>div {
                width: 60%;
            }
        }
    }

}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

:deep(.el-form-item--default .el-form-item__label)  {
    font-size: 1.2rem;
    height: 4vh;
    line-height: inherit;
}

:deep(.el-form-item__content)  {
    line-height: 4vh;
}

.form-right {
    :deep(.el-form-item__label)  {
        // justify-content: flex-start;
    }
}

:deep(.el-textarea)  {
    width: 100% !important;
}

:deep(.el-upload)  {
    border: 1px dashed #3d3d3d;
}

:deep(.el-textarea__inner)  {
    height: 14vh !important;
    width: 100% !important;
}

:deep(.el-date-editor.el-input) {
    width: 100% ;
}

.el-button {
    width: 6vw;
}


</style>
