<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.name" :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.name" :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.name" :value="item.key"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="投资板块">
                                                <el-tree-select
                                                    v-model="formData.tzbk"
                                                    :data="tzbkList"
                                                    node-key="id"
                                                    :props="tzbkProps"
                                                    placeholder="请选择"
                                                    render-after-expand
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="项目类型" label-width="180">
                                                <el-select v-model="formData.xmlx" placeholder="请选择" no-data-text="暂无数据">
                                                    <el-option v-for="item in xmlxList" :key="item.key"
                                                        :label="item.name" :value="item.key"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="本集团股比（%）" label-width="190">
                                                <el-input-number v-model="formData.bjtgb" :min="0" :max="99999999999.99999999"
                                                    controls-position="right"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                                <el-collapse-item title="已发现或暴露的风险" name="已发现或暴露的风险">
                                    <el-row :gutter="20">
                                        <el-col :span="24">
                                            <el-form-item label="风险处置情况" :label-width="100"></el-form-item>
                                            <div class="tab-handle">
                                                <el-button type="primary" size="small"
                                                    @click="exportTableData" :disabled="!fxczqkData.length"
                                                >导出</el-button>
                                                <el-upload
                                                    ref="uploadRef"
                                                    class="upload-demo"
                                                    action=""
                                                    :auto-upload="false"
                                                    :on-change="importTableData"
                                                    :show-file-list="false"
                                                    accept=".xls, .xlsx"
                                                >
                                                    <template #trigger>
                                                        <el-button type="primary" size="small"
                                                            style="margin: 0 12px;"
                                                        >导入</el-button>
                                                    </template>
                                                </el-upload>
                                                <el-button type="primary" size="small" @click="addFxczqk">新增</el-button>
                                            </div>
                                            <el-table :data="fxczqkData" style="width: 100%" empty-text="暂无数据" border>
                                                <el-table-column type="index" width="60" />
                                                <el-table-column prop="nd" label="年度" width="260">
                                                    <template #default="scope">
                                                        <el-date-picker
                                                            v-model="scope.row.nd"
                                                            type="month"
                                                            placeholder="请选择"
                                                            value-format="YYYY-MM"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="mbfj" label="目标分解" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.mbfj" type="textarea"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="jzqk" label="进展情况" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.jzqk" type="textarea"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="fxdj" label="风险等级" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.fxdj"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="fxfl" label="风险分类" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.fxfl"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="fxgk" label="风险概况" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.fxgk" type="textarea"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="kzcs" label="控制措施" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.kzcs" type="textarea"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="czjz" label="处置进展" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.czjz" type="textarea"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="yjzgwcsj" label="预计整改完成时间" width="260">
                                                    <template #default="scope">
                                                        <el-date-picker
                                                            v-model="scope.row.yjzgwcsj"
                                                            type="datetime"
                                                            placeholder="请选择"
                                                            value-format="YYYY-MM-DD HH:mm:ss"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="fxsjje" label="风险涉及金额" width="260">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.fxsjje" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="cxgl" label="出险概率" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.cxgl"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="fxfxfs" label="风险发现方式" width="240">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.fxfxfs"/>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="操作" width="60" fixed="right">
                                                    <template #default="scope">
                                                        <el-button link type="danger" size="small" @click="deleteFxczqk(scope.$index)">删除</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="可能发生的潜在风险" label-width="140">
                                                <el-input v-model="formData.knfsqzfx" type="textarea" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="是否当期新增">
                                                <el-radio-group v-model="formData.sfdqxz">
                                                    <el-radio :value="1">是</el-radio>
                                                    <el-radio :value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="责任人" label-width="140">
                                                <el-input v-model="formData.zrr" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="联系方式">
                                                <el-input v-model="formData.lxfs" />
                                            </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";
    import { getTableFileData, exportTableFile } from "../../common/tableFileHandle";
    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/getZdfxInfo",
            data: {
                id: riskId
            },
            callback: (res) => {
                loading.value = false;
                Object.assign(formData, {
                    ...res,
                    jnw: res.jnw ? res.jnw.toString() : undefined,
                    sjnzjjw: res.sjnzjjw ? res.sjnzjjw.toString() : undefined,
                    dsjngjjw: res.dsjngjjw ? res.dsjngjjw.toString() : undefined,
                    xmlx: res.xmlx ? res.xmlx.toString() : undefined,
                });
                console.log(formData);
                szjList.value = jnwList.filter(item => item.key == res.jnw)[0]?.children || [];
                dsgjList.value = szjList.value.filter(item => item.key == res.sjnzjjw)[0]?.children || [];
                Object.assign(fxczqkData.value, res.zdfxczs);
            }
        });
    };
    // 项目列表
    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([]); // 地市（境内）/国家（境外） // 级联
    let tzbkList = ref([]); // 投资板块
    let tzbkProps = {
        label: "name"
    };
    let xmlxList = ref([]); //项目类型
    onMounted(() => {
        getProjectData();
        let resourceData = JSON.parse(sessionStorage.getItem("resourceData"));
        jnwList = resourceData.dqlx;
        tzbkList = resourceData.tzbk;
        xmlxList = resourceData["zdfx-type"];
        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 = [];
            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 || [];
            delete formData.dsjngjjw;
        }
    }
    // 风险处置情况
    let fxczqkData = ref([]);
    const addFxczqk = () => {
        fxczqkData.value.push({});
    };
    const deleteFxczqk = (index) => {
        ElMessageBox.confirm("确认删除该项？", "提示",{
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            fxczqkData.value.splice(index, 1);
        })
    }
    const tableColumns = [
        {
            prop: "nd",
            label: "年度"
        },
        {
            prop: "mbfj",
            label: "目标分解"
        },
        {
            prop: "jzqk",
            label: "进展情况"
        },
        {
            prop: "fxdj",
            label: "风险等级"
        },
        {
            prop: "fxfl",
            label: "风险分类"
        },
        {
            prop: "fxgk",
            label: "风险概况"
        },
        {
            prop: "kzcs",
            label: "控制措施"
        },
        {
            prop: "czjz",
            label: "处置进展"
        },
        {
            prop: "yjzgwcsj",
            label: "预计整改完成时间"
        },
        {
            prop: "fxsjje",
            label: "风险涉及金额",
            type: "number"
        },
        {
            prop: "cxgl",
            label: "出险概率"
        },
        {
            prop: "fxfxfs",
            label: "风险发现方式"
        }
    ];

    const importTableData = (file) => {
        getTableFileData(file, tableColumns).then(res => {
            fxczqkData.value = fxczqkData.value.concat(res);
        });

    }
    const exportTableData = () => {
        exportTableFile(fxczqkData.value, tableColumns, "", "风险处置情况")
    };

    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,
                zdfxczs: fxczqkData.value
            },
            callback: (data) => {
                router.back(-1)
            }
        });
    }
</script>
<style lang="less">
    @import "@/styles/manage.less";
    .add-project-header{
        margin-bottom: 10px;
    }
</style>