<template>
    <div class="add-project-container">
        <div class="add-project-content" v-loading="loading">
            <div class="add-project-header">
                <div class="header-left"></div>
                <div class="header-right">
                    <el-button type="default" @click="backClick">返回</el-button>
                    <template v-if="!loading && !isPreview">
                        <el-button type="primary" @click="saveClick">保存</el-button>
                    </template>
                </div>
            </div>
            <div class="tabs-content">
                <div class="project-tab-content">
                    <div class="tab-content">
                        <el-form :model="formData" :label-width="120" :disabled="isPreview">
                            <el-collapse v-model="activeCollapse">
                                <el-collapse-item title="基本信息" name="基本信息">
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <el-form-item label="项目信息" required>
                                                <el-select v-model="formData.projectId" placeholder="请选择" no-data-text="暂无数据">
                                                    <el-option v-for="item in projectList" :key="item.id"
                                                        :label="item.projectName" :value="item.id"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="项目名称">
                                                <el-input v-model="formData.projectName"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="直属企业">
                                                <el-input v-model="formData.zsqy"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="项目公司全称">
                                                <el-input v-model="formData.xmgsqc"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="境内/外">
                                                <el-select v-model="formData.jnw" placeholder="请选择" no-data-text="暂无数据"
                                                    @change="changeJnw"
                                                >
                                                    <el-option v-for="item in jnwList" :key="item.key"
                                                        :label="item.value" :value="item.key"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="省（境内）/洲际（境外）" :label-width="180">
                                                <el-select v-model="formData.sjnzjjw" placeholder="请选择" no-data-text="暂无数据"
                                                    @change="changeSzj"
                                                >
                                                    <el-option v-for="item in szjList" :key="item.key"
                                                        :label="item.value" :value="item.key"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="地市（境内）/国家（境外）" :label-width="190">
                                                <el-select v-model="formData.dsjngjjw" placeholder="请选择" no-data-text="暂无数据">
                                                    <el-option v-for="item in dsgjList" :key="item.key"
                                                        :label="item.value" :value="item.key"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { reactive, ref, onMounted, getCurrentInstance, h } from "vue";
    import { useRouter, useRoute } from "vue-router";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { useUserStore } from "@/stores/user.js";
    const userStore = useUserStore();
    const router = useRouter();
    const route = useRoute();
    const { proxy } = getCurrentInstance();
    let token = ref("");
    token.value = userStore.authToken || sessionStorage.getItem("authToken") || "";

    const activeCollapse = reactive([
        "基本信息"
    ]);
    let formData = reactive({});
    let loading = ref(false);
    let isPreview = !!route.query.isPreview;
    let riskId = route.query.riskId;
    const getRiskInfo = () => {
        loading.value = true;
        proxy.$post({
            url: "/api/project/getTzkzInfo",
            data: {
                id: riskId
            },
            callback: (res) => {
                loading.value = false;
                Object.assign(formData, res);
            }
        });
    };
    // 项目列表
    let projectList = ref([]);
    const getProjectData = () => {
        proxy.$post({
            url: "/api/project/listProject",
            data: {
                page: 1,
                pagesize: 1000,
                attributes: [],
                menuType: "xmjc"
            },
            callback: (data) => {
                projectList.value = data.rows;
            }
        })
    };
    let jnwList = reactive([]); // 境内/外 // 级联
    let szjList = ref([]); // 省（境内）/洲际（境外） // 级联
    let dsgjList = ref([]); // 地市（境内）/国家（境外） // 级联
    onMounted(() => {
        getProjectData();
        let resourceData = JSON.parse(sessionStorage.getItem("resourceData"));
        jnwList = resourceData.dqlx;
        if (riskId) {
            getRiskInfo();
        }
    });
    const changeJnw = (val) => {
        if (val || val === 0) {
            let selectData = jnwList.filter(item => item.key == val);
            szjList.value = selectData[0] && selectData[0].children || [];
            dsgjList.value = [];
            qxgjList.value = [];
            delete formData.sjnzjjw;
            delete formData.dsjngjjw;
        }
    };
    const changeSzj = (val) => {
        if (val || val === 0) {
            let selectData = szjList.value.filter(item => item.key == val);
            dsgjList.value = selectData[0] && selectData[0].children || [];
            qxgjList.value = [];
            delete formData.dsjngjjw;
        }
    }
    const backClick = () => {
        router.back(-1)
    }
    const saveClick = () => {
        if (!formData.projectId) {
            return ElMessage.warning("请选择项目信息");
        }
        let url = formData.id ? "updateZdfx" : "createZdfx";
        proxy.$post({
            url: "/api/project/" + url,
            data: {
                ...formData
            },
            callback: (data) => {
                router.back(-1)
            }
        });
    }
</script>