<template>
    <hc-dialog
        v-model="isShow"
        ui="hc-project-tree-tree-form"
        :title="type"
        widths="500px"
        @close="dialogClose"
    >
        <el-scrollbar>
            <el-form
                ref="formRef"
                :model="formModel"
                :rules="formRules"
                label-position="top"
                label-width="auto"
            >
                <el-form-item label="节点名称：" prop="nodeName">
                    <el-input
                        v-model="formModel.nodeName"
                        placeholder="请输入节点名称"
                    />
                </el-form-item>
                <el-form-item label="岗位类型：" prop="postType">
                    <el-select
                        v-model="formModel.postType"
                        filterable
                        block
                        placeholder="请选择岗位类型"
                    >
                        <el-option
                            v-for="item in JobTypeList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="节点类型：" prop="nodeType">
                    <el-select
                        v-model="formModel.nodeType"
                        filterable
                        block
                        placeholder="请选择节点类型"
                    >
                        <el-option label="关联电子原生文件" :value="1" />
                        <el-option label="数字化上传文件" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工程类型：" prop="projectType">
                    <el-select
                        v-model="formModel.projectType"
                        filterable
                        block
                        placeholder="请选择工程类型"
                    >
                        <el-option label="水利水电工程" :value="1" />
                        <el-option label="公路工程" :value="2" />
                        <el-option label="全部" :value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="formModel.nodeType === 1"
                    label="储存类型："
                    prop="storageType"
                >
                    <el-select
                        v-model="formModel.storageType"
                        filterable
                        block
                        placeholder="请选择储存类型"
                    >
                        <el-option label="普通" :value="1" />
                        <el-option label="竣工图" :value="2" />
                        <el-option label="计量" :value="3" />
                        <el-option label="质检" :value="4" />
                        <el-option label="声像" :value="5" />
                        <el-option label="隐蔽" :value="6" />
                        <el-option label="原材试验" :value="7" />
                        <el-option label="管理文件" :value="8" />
                        <el-option label="变更令" :value="9" />
                    </el-select>
                </el-form-item>
                <template v-if="formModel.nodeType === 2">
                    <el-form-item label="存储节点：" prop="isStorageNode">
                        <el-select
                            v-model="formModel.isStorageNode"
                            filterable
                            block
                            placeholder="请选择是否存储节点"
                        >
                            <el-option label="是" :value="1" />
                            <el-option label="否" :value="2" />
                        </el-select>
                    </el-form-item>
                    <template v-if="formModel.isStorageNode === 1">
                        <el-form-item label="储存类型：" prop="storageType">
                            <el-select
                                v-model="formModel.storageType"
                                filterable
                                block
                                placeholder="请选择储存类型"
                            >
                                <el-option label="普通" :value="1" />
                                <el-option label="竣工图" :value="2" />
                                <el-option label="计量" :value="3" />
                                <el-option label="质检" :value="4" />
                                <el-option label="声像" :value="5" />
                                <el-option label="隐蔽" :value="6" />
                                <el-option label="原材试验" :value="7" />
                                <el-option label="管理文件" :value="8" />
                                <el-option label="变更令" :value="9" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接口节点：" prop="isInterfaceNode">
                            <el-select
                                v-model="formModel.isInterfaceNode"
                                filterable
                                block
                                placeholder="请选择是否接口节点"
                            >
                                <el-option label="是" :value="1" />
                                <el-option label="否" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            v-if="formModel.isInterfaceNode === 1"
                            label="接口类型："
                            prop="interfaceType"
                        >
                            <el-select
                                v-model="formModel.interfaceType"
                                filterable
                                block
                                placeholder="请选择接口类型"
                            >
                                <el-option label="试验接口" :value="1" />
                                <el-option label="计量接口" :value="2" />
                            </el-select>
                        </el-form-item>
                    </template>
                </template>
                <template v-if="formModel.nodeType === 1">
                    <el-form-item label="关联类型：" prop="associationType">
                        <el-select
                            v-model="formModel.associationType"
                            filterable
                            block
                            placeholder="请选择关联类型"
                        >
                            <el-option label="质检资料" :value="1" />
                            <el-option label="试验资料" :value="2" />
                            <el-option label="影像资料" :value="3" />
                            <el-option label="台账资料" :value="4" />
                            <el-option label="首件资料" :value="5" />
                            <el-option label="日志文件" :value="6" />
                        </el-select>
                    </el-form-item>
                    <template v-if="formModel.associationType === 1">
                        <el-form-item
                            label="业内资料类型："
                            prop="majorDataType"
                        >
                            <el-checkbox-group
                                v-model="formModel.majorDataType"
                            >
                                <el-checkbox
                                    v-for="item in majorDataTypeList"
                                    :key="item.value"
                                    :value="item.value"
                                    name="type"
                                    >{{ item.label }}</el-checkbox
                                >
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item
                            label="显示层级："
                            prop="displayHierarchy"
                        >
                            <el-select
                                v-model="formModel.displayHierarchy"
                                filterable
                                block
                                placeholder="请选择显示层级"
                            >
                                <el-option
                                    v-for="item in displayHierarchyList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                    <el-form-item
                        v-if="formModel.associationType === 2"
                        label="文件类型："
                        prop="expDataType"
                    >
                        <el-checkbox-group v-model="formModel.expDataType">
                            <el-checkbox
                                v-for="item in fileTypeList"
                                :key="item.value"
                                :value="item.value"
                                >{{ item.label }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </el-form-item>
                </template>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <el-button hc-btn @click="dialogClose">取消</el-button>
            <el-button
                hc-btn
                type="primary"
                :loading="submitLoading"
                @click="dialogSubmit"
                >提交</el-button
            >
        </template>
    </hc-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import {
    deepClone,
    formValidate,
    getArrValue,
    getObjValue,
    isNullES,
} from "js-fast-way";
import { getDictionaryData } from "~uti/tools";
import mainApi from "~api/project/tree";
import roleApi from "~api/system/role";

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    data: {
        type: Object,
        default: () => ({}),
    },
    node: {
        type: Object,
        default: () => ({}),
    },
    type: {
        type: String,
        default: "新增",
    },
});

//事件
const emit = defineEmits(["finish", "close"]);

//双向绑定
const isShow = defineModel("modelValue", {
    default: false,
});

//监听可否编辑
const formInfo = ref(props.info);
const dataInfo = ref(props.data);
const nodeInfo = ref(props.node);
watch(
    () => [props.info, props.data, props.node],
    ([info, data, node]) => {
        formInfo.value = getObjValue(info);
        dataInfo.value = getObjValue(data);
        nodeInfo.value = getObjValue(node);
    },
    { immediate: true, deep: true }
);

//监听显示
watch(isShow, (val) => {
    if (val) getInfoData();
});

//获取数据详情
const getInfoData = () => {
    const data = getObjValue(dataInfo.value);
    if (props.type === "新增") {
        formModel.value = {
            parentId: data.id,
            postType: data.postType,
            projectId: formInfo.value.id,
        };
    } else {
        getTreeDetail(data.id);
    }
    getRoleData();
    getMajorData();
    getDisplayList();
};

//节点详情
const getTreeDetail = async (id) => {
    const { data } = await mainApi.treeDetail({ id });
    const res = getObjValue(data);
    formModel.value = {
        ...res,
        id: id,
        nodeName: res.fullName,
        // expDataType: isNullES(res.expDataType)
        //     ? []
        //     : res.expDataType.split(","),
        // majorDataType: isNullES(res.majorDataType)
        //     ? []
        //     : res.majorDataType.split(","),
    };
    if (!isNullES(res.expDataType)) {
        let arr = data.expDataType.split(",");
        const numberArray = Array.from(arr, Number);
        formModel.value.expDataType = numberArray; //文件类型
    } else {
        formModel.value.expDataType = [];
    }
    if (!isNullES(res.majorDataType)) {
        let arr = data.majorDataType.split(",");
        const numberArray = Array.from(arr, Number);
        formModel.value.majorDataType = numberArray;
    } else {
        formModel.value.majorDataType = [];
    }
    if (!isNullES(res.displayHierarchy)) {
        formModel.value.displayHierarchy = Number(res.displayHierarchy);
    }
};

//岗位类型
const JobTypeList = ref([]);
const getRoleData = async () => {
    const { data } = await roleApi.roleTree();
    JobTypeList.value = getArrValue(data);
};

//内页资料类型
const majorDataTypeList = ref([]);
const getMajorData = async () => {
    majorDataTypeList.value = await getDictionaryData("major_data_type", true);
};

//显示层级
const displayHierarchyList = ref([]);
const getDisplayList = async () => {
    displayHierarchyList.value = await getDictionaryData(
        "display_hierarchy",
        true
    );
};

//文件类型
const fileTypeList = [
    { label: "配合比", value: 1 },
    { label: "原材", value: 2 },
    { label: "汇总", value: 3 },
    { label: "设备", value: 4 },
    { label: "外委(第三方)", value: 5 },
];

//基础表单
const formRef = ref(null);
const formModel = ref({});
const formRules = {
    nodeName: { required: true, trigger: "blur", message: "请输入节点名称" },
    postType: { required: true, trigger: "blur", message: "请选择岗位类型" },
    nodeType: { required: true, trigger: "blur", message: "请选择节点类型" },
    isStorageNode: {
        required: true,
        trigger: "blur",
        message: "请选择存储节点",
    },
    isInterfaceNode: {
        required: true,
        trigger: "blur",
        message: "请选择接口节点",
    },
    interfaceType: {
        required: true,
        trigger: "blur",
        message: "请选择接口类型",
    },
    associationType: {
        required: true,
        trigger: "blur",
        message: "请选择关联类型",
    },
    majorDataType: {
        required: true,
        trigger: "blur",
        message: "请选择业内资料类型",
    },
    displayHierarchy: {
        required: true,
        trigger: "blur",
        message: "请选择显示层级",
    },
    projectType: { required: true, trigger: "blur", message: "请选择工程类型" },
    storageType: { required: true, trigger: "blur", message: "请选择储存类型" },
    expDataType: { required: true, trigger: "blur", message: "请选择文件类型" },
};

//提交
const submitLoading = ref(false);
const dialogSubmit = async () => {
    const isForm = await formValidate(formRef.value);
    if (!isForm) return;
    const data = getObjValue(dataInfo.value);
    const form = deepClone(formModel.value);
    if (data.postType !== form.postType) {
        window.$message.warning("岗位类型必须和父级节点岗位类型一致");
        return;
    }
    submitLoading.value = true;
    if (formModel.value.majorDataType) {
        form.majorDataType = form.majorDataType.join(",");
    }
    if (formModel.value.expDataType) {
        form.expDataType = form.expDataType.join(",");
    }

    //发起请求
    let res = {};
    if (props.type === "新增") {
        res = await mainApi.treeAdd(form);
    } else {
        res = await mainApi.treeUpdate(form);
    }
    const { isRes } = getObjValue(res);
    submitLoading.value = false;
    if (!isRes) return;
    window.$message.success("操作成功");
    dialogClose();
    emit("finish");
};

//关闭弹窗
const dialogClose = () => {
    isShow.value = false;
    submitLoading.value = false;
    formModel.value = {};
    emit("close");
};
</script>

<style lang="scss">
.el-overlay-dialog
    .el-dialog.hc-new-dialog.hc-project-tree-tree-form
    .el-dialog__body {
    height: 680px;
    padding: 12px 0;
}
</style>
