<!-- Dialog.vue -->
<template>
    <el-dialog :visible.sync="visible" @update:visible="handleUpdateVisible" :title="'信息系统' + title" :width="width"
        :before-close="beforeClose">
        <!-- <MyForm :formData="formData" :labelPosition="'left'" :title="title" :disabled="isDisabled" ref="myFormComponent"
            @update:modelValue="handleFormDataChange"></MyForm> -->

        <div class="block-item">
            <div class="block-title">基本信息</div>
            <div class="block-content">
                <el-form :model="formData" label-width="" :label-position="'right'" :disabled="dialogTitle === '详情'"
                    class="form-detail-inline" :inline="true" :rules="formRules" ref="ruleFormRef">
                    <el-form-item label="序号/标识符" prop="identifier">
                        <el-input v-model="formData.identifier" placeholder="请输入序号/标识符" />
                    </el-form-item>
                    <el-form-item label="信息系统项目名称" prop="misProjectName">
                        <div class="flex-box">
                            <el-input v-model="formData.misProjectName" placeholder="请输入信息系统项目名称"></el-input>
                            <el-select v-model="formData.misProjectName2" placeholder="请选择信息系统项目名称"
                                @change="misProjectNameOptionsChange" :disabled="dialogTitle === '详情'">
                                <el-option v-for="item in dict.type.information_system" :key="item.value"
                                    :label="item.label" :value="item.label" />
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label=" 建设主体单位(部门)" prop="buildDepartment">
                        <el-cascader v-model="formData.buildDepartment" :options="buildDepartmentOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }"
                            placeholder="请选择建设主体单位(部门)" />
                    </el-form-item>
                    <el-form-item label="运行管理单位(部门)" prop="manageDepartmetn">
                        <el-cascader v-model="formData.manageDepartmetn" placeholder="请选择运行管理单位(部门)"
                            :options="buildDepartmentOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }" />
                    </el-form-item>
                    <el-form-item label="开发单位名称" prop="developmentDepartmetn">
                        <el-cascader v-model="formData.developmentDepartmetn" placeholder="请选择开发单位名称"
                            :options="developmentDepartmetnOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }" />
                    </el-form-item>
                    <el-form-item label="运维单位名称" prop="maintainDepartmetn">
                        <el-cascader v-model="formData.maintainDepartmetn" placeholder="请选择运维单位名称"
                            :options="developmentDepartmetnOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }" />
                    </el-form-item>
                    <el-form-item label="批复管理单位(部门)" prop="replyDepartmetn">
                        <el-input v-model="formData.replyDepartmetn" placeholder="请输入批复管理单位(部门)" />
                    </el-form-item>
                    <el-form-item label="项目批复资金(万元)" prop="money">
                        <el-input v-model="formData.money" placeholder="请输入项目批复资金(万元)" />
                    </el-form-item>
                    <el-form-item label="项目建成时间" prop="buildTime">
                        <el-date-picker v-model="formData.buildTime" type="date" placeholder="请选择项目建成时间" />
                    </el-form-item>
                    <el-form-item label="是否升级改造" prop="isUpLevel">
                        <el-radio-group v-model="formData.isUpLevel">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="升级改造完成时间" prop="upLevelTime" v-if="formData.isUpLevel === '是'">
                        <el-date-picker v-model="formData.upLevelTime" type="date" placeholder="请选择升级改造完成时间"
                            style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="升级改造资金(万元)" prop="upLevelMoney" v-if="formData.isUpLevel === '是'">
                        <el-input v-model="formData.upLevelMoney" placeholder="请输入升级改造资金(万元)" />
                    </el-form-item>
                    <el-form-item label="是否上云" prop="isUpCloud" class="textarea-row">
                        <el-radio-group v-model="formData.isUpCloud">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="运维资金(万元)" prop="maintainMoney">
                        <el-input v-model="formData.maintainMoney" placeholder="请输入运维资金(万元)" />
                    </el-form-item>
                    <el-form-item label="使用系统部门" prop="useSystemDepartment">
                        <el-cascader v-model="formData.useSystemDepartment" placeholder="请选择使用系统部门"
                            :options="buildDepartmentOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }" />
                    </el-form-item>
                    <el-form-item label="数据库" prop="database">
                        <el-select v-model="formData.database" placeholder="请选择数据库">
                            <el-option v-for="item in dict.type.database_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 开发环境" prop="environment">
                        <el-select v-model="formData.environment" placeholder="请选择开发环境">
                            <el-option v-for="item in dict.type.dev_env_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系统架构" prop="systemSchema">
                        <el-select v-model="formData.systemSchema" placeholder="请选择系统架构">
                            <el-option v-for="item in dict.type.system_architecture_type" :key="item.value"
                                :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属单位机构名称" prop="belongDepartment">
                        <el-cascader v-model="formData.belongDepartment" placeholder="请选择所属单位机构名称"
                            :options="buildDepartmentOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }" />
                    </el-form-item>
                    <el-form-item label="信息系统简称" prop="systemAbbreviated">
                        <el-input v-model="formData.systemAbbreviated" placeholder="请输入信息系统简称" />
                    </el-form-item>
                    <el-form-item label="信息系统类型" prop="systemType">
                        <el-select v-model="formData.systemType" placeholder="请选择信息系统类型">
                            <el-option v-for="item in dict.type.info_system_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="启用日期" prop="applyTime">
                        <el-date-picker v-model="formData.applyTime" type="date" placeholder="请输入启用日期" />
                    </el-form-item>
                    <el-form-item label=" 运行状态" prop="runType">
                        <el-select v-model="formData.runType" placeholder="请选择运行状态">
                            <el-option v-for="item in dict.type.run_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" 网络环境" prop="internetEnvironment">
                        <el-select v-model="formData.internetEnvironment" placeholder="请选择网络环境">
                            <el-option v-for="item in dict.type.network_env_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用范围" prop="applyScope">
                        <el-select v-model="formData.applyScope" placeholder="请选择应用范围">
                            <el-option v-for="item in dict.type.application_scope" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用领域" prop="applyDomain">
                        <el-input v-model="formData.applyDomain" placeholder="请输入应用领域" />
                    </el-form-item>
                    <el-form-item label="技术责任处室" prop="techDepartment">
                        <el-cascader v-model="formData.techDepartment" placeholder="请选择技术责任处室"
                            :options="buildDepartmentOptions"
                            :props="{ value: 'id', label: 'directoryName', children: 'list' }" />
                    </el-form-item>
                    <el-form-item label="系统负责人" prop="systemResponsibility">
                        <el-input v-model="formData.systemResponsibility" placeholder="请输入系统负责人" />
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入联系方式" />
                    </el-form-item>
                    <el-form-item label="对外提供IP" prop="outwardIp">
                        <el-input v-model="formData.outwardIp" placeholder="请输入对外提供IP" />
                    </el-form-item>

                    <el-form-item label="访问地址" prop="accessAddress">
                        <el-input v-model="formData.accessAddress" placeholder="请输入访问地址" />
                    </el-form-item>
                    <el-form-item label="审批部门" prop="apprivalDepartment">
                        <el-input v-model="formData.apprivalDepartment" placeholder="请输入数据源名称" />
                    </el-form-item>
                    <el-form-item label="审批日期" prop="apprivalTime">
                        <el-date-picker v-model="formData.apprivalTime" placeholder="请选择审批日期" />
                    </el-form-item>
                    <el-form-item label="关联本机构职责目录" prop="isselfDepartment">
                        <el-select v-model="formData.isselfDepartment" placeholder="请选择关联本机构职责目录">
                            <el-option v-for="item in isselfDepartmentOptions" :key="item.id"
                                :label="item.agenciesPrsponsibility" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联其他机构职责目录" prop="otherDepartment">
                        <el-select v-model="formData.otherDepartment" placeholder="无" :disabled="true">
                            <el-option v-for="item in otherDepartmentOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="备注说明" class="textarea-row">
                        <el-input v-model="formData.ps" placeholder="请输入数据源名称" type="textarea" :rows="4" />
                    </el-form-item>
                    <div class="block-title">扩展信息</div>

                    <el-form-item label="是否涉密系统" prop="isSecret">
                        <el-radio-group v-model="formData.isSecret">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否硬件网络" prop="isHardwareInternet">
                        <el-radio-group v-model="formData.isHardwareInternet">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="支深业务类型" prop="businessType">
                        <el-select v-model="formData.businessType" placeholder="请选择支深业务类型">
                            <el-option v-for="item in dict.type.support_deep_business_type" :key="item.value"
                                :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否党纪工团系统" prop="isDjgtSystem">
                        <el-radio-group v-model="formData.isDjgtSystem">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否内部办公系统" prop="isInnerSystem">
                        <el-radio-group v-model="formData.isInnerSystem">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否数据中台" prop="isData">
                        <el-radio-group v-model="formData.isData">
                            <el-radio :label="item.label" :value="item.label" v-for="item in isRadio"
                                :key="item.label">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="建设依据" prop="basis">
                        <el-input v-model="formData.basis" placeholder="请输入建设依据" />
                    </el-form-item>
                    <el-form-item label="支撑业务" prop="supportBusiness">
                        <el-input v-model="formData.supportBusiness" placeholder="请输入支撑业务" />
                    </el-form-item>
                    <el-form-item label="功能模块" prop="module">
                        <el-input v-model="formData.module" placeholder="请输入功能模块" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- <div class="block-item">
      <div class="block-title">扩展信息</div>
      <div class="block-content">
        <el-form :model="formData" label-width="auto" :disabled="props.operationType === 'detail'" inline class="form-detail-inline" ref="ruleFormRef1" :rules="formRules">
          <el-form-item label="是否涉密系统" prop="isSecret">
            <el-radio-group v-model="formData.isSecret">
              <el-radio :label="item.label" :value="item.label" v-for="item in isRadio" :key="item.label">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否硬件网络" prop="isHardwareInternet">
            <el-radio-group v-model="formData.isHardwareInternet">
              <el-radio :label="item.label" :value="item.label" v-for="item in isRadio" :key="item.label">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="支深业务类型" prop="businessType">
            <el-select v-model="formData.businessType" placeholder="请选择支深业务类型">
              <el-option v-for="item in businessTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否党纪工团系统" prop="isDjgtSystem">
            <el-radio-group v-model="formData.isDjgtSystem">
              <el-radio :label="item.label" :value="item.label" v-for="item in isRadio" :key="item.label">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否内部办公系统" prop="isInnerSystem">
            <el-radio-group v-model="formData.isInnerSystem">
              <el-radio :label="item.label" :value="item.label" v-for="item in isRadio" :key="item.label">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否数据中台" prop="isData">
            <el-radio-group v-model="formData.isData">
              <el-radio :label="item.label" :value="item.label" v-for="item in isRadio" :key="item.label">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="建设依据" prop="basis">
            <el-input v-model="formData.basis" placeholder="请输入建设依据" />
          </el-form-item>
          <el-form-item label="支撑业务" prop="supportBusiness">
            <el-input v-model="formData.supportBusiness" placeholder="请输入支撑业务" />
          </el-form-item>
          <el-form-item label="功能模块" prop="module">
            <el-input v-model="formData.module" placeholder="请输入功能模块" />
          </el-form-item>
        </el-form>
      </div>
    </div> -->

        <el-button type="primary" style="margin-bottom: 20px" @click="addDataSource"
            v-if="dialogTitle !== '详情'">创建数据源</el-button>
        <div class="block-item data-source">
            <div class="block-title">数据源</div>
            <el-table :data="dataSourceArr" class="table-new--dialog">
                <el-table-column prop="name" label="源名称"></el-table-column>
                <el-table-column prop="dbType" label="数据库类型"></el-table-column>
                <el-table-column prop="" label="操作">
                    <template #default="{ row, $index }">
                        <el-link type="primary" class="mr10" @click="editDataSource(row, 'detail')">详情</el-link>
                        <el-link type="primary" v-if="dialogTitle !== '详情'" class="mr10"
                            @click="editDataSource(row, 'edit')">编辑</el-link>
                        <el-link type="primary" v-if="dialogTitle !== '详情'"
                            @click="delDataSource(row, $index)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="beforeClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>

        <el-dialog :title="diaTitle" :visible.sync="dataSourceDialogVisible" :before-close="handleDialogClose"
            :append-to-body="true" custom-class="inner-dialog">
            <div class="dialog-block-header">配置数据源信息</div>
            <el-form :model="dataSourceForm" style="width: 100%" class="form-detail-inline-two" :inline="true"
                label-width="auto" :label-position="'top'" :disabled="dataSourceFormDisabled" ref="ruleFormRef1"
                :rules="diaFormRules">
                <el-form-item label="数据源名称" prop="name">
                    <el-input v-model="dataSourceForm.name" placeholder="请输入数据源名称" />
                </el-form-item>
                <el-form-item label="数据源层次" prop="level">
                    <el-input v-model="dataSourceForm.level" placeholder="请输入数据源层次" />
                </el-form-item>
                <el-form-item label="数据源类型" class="textarea-row" prop="dbType">
                    <el-select v-model="dataSourceForm.dbType" placeholder="请选择数据源类型">
                        <el-option :value="item.value" :label="item.label" v-for="item in dbTypeOptions"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用途" class="textarea-row">
                    <el-input v-model="dataSourceForm.description" placeholder="请输入数据源用途" type="textarea" :rows="4" />
                </el-form-item>
                <div class="dialog-block-header">配置数据源信息</div>
                <el-form-item class="textarea-row" label="选择环境" prop="isProd">
                    <el-select v-model="dataSourceForm.isProd" placeholder="请选择环境" class="w100">
                        <el-option :label="item.label" :value="item.value" v-for="item in isProdOptions"
                            :key="item.value" />
                    </el-select>
                </el-form-item>



                <el-form-item label="主机" prop="serverIp">
                    <el-input v-model="dataSourceForm.serverIp" placeholder="请输入主机" />
                </el-form-item>
                <el-form-item label="端口" prop="serverPort">
                    <el-input v-model="dataSourceForm.serverPort" placeholder="请输入端口" />
                </el-form-item>
                <el-form-item class="textarea-row" label="数据库名称" prop="dbName">
                    <el-input v-model="dataSourceForm.dbName" placeholder="请输入数据库名称" />
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="dataSourceForm.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="dataSourceForm.password" placeholder="请输入密码" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDataSourceHandle" v-if="!dataSourceFormDisabled">保存</el-button>
                <el-button type="primary" @click="handleDialogClose">关闭</el-button>
            </div>


        </el-dialog>

    </el-dialog>
</template>

<script>
import { addMis, updateMis, queryMisMsg, addDatabase, updateDatabase, deleteDatabase, queryDatabase, queryMisList, getDirectoryAllLevel, getResponsibilityList } from '@/api/unified-resources/information-system/index.js'

import MyForm from "@/components/MyForm";
export default {
    name: "ConfigDialog",
    dicts: ['database_type',
        'dev_env_type',
        'system_architecture_type',
        'info_system_type',
        'run_type',
        'network_env_type',
        'application_scope',
        'support_deep_business_type',
        'information_system'],
    components: {
        MyForm,
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: "弹窗标题",
        },
        width: {
            type: String,
            default: "85%",
        },
        rowObj: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            visible: this.value,
            // 这是传递给表单组件的数据
            // formData: [
            //     {
            //         fieldName: "dataManner",
            //         label: "接入方式",
            //         type: "input",
            //         value: "",
            //         isRequired: true,
            //         trigger: "blur",
            //     },
            //     {
            //         fieldName: "sixIp",
            //         label: "六统一IP",
            //         type: "input",
            //         value: "",
            //         isRequired: true,
            //         trigger: "blur",
            //     },
            //     {
            //         fieldName: "sixPort",
            //         label: "六统一端口",
            //         type: "input",
            //         value: "",
            //         isRequired: true,
            //         trigger: "blur",
            //     },
            //     {
            //         fieldName: "gatewayIp",
            //         label: "网关IP",
            //         type: "input",
            //         value: "",
            //         isRequired: true,
            //         trigger: "blur",
            //     },
            //     {
            //         fieldName: "gatewayPort",
            //         label: "网关端口",
            //         type: "input",
            //         value: "",
            //         isRequired: true,
            //         trigger: "blur",
            //     },
            //     {
            //         fieldName: "offerSystem",
            //         label: "数据提供方所需信息系统",
            //         // type: "select",
            //         type: "input",
            //         value: "",
            //         isRequired: true,
            //         trigger: "blur",
            //         options: [
            //             { value: "male", label: "男" },
            //             { value: "female", label: "女" },
            //         ],
            //     },
            //     {
            //         fieldName: "receptionSystem",
            //         label: "数据接收方所需信息系统",
            //         // type: "select",
            //         type: "input",
            //         trigger: "blur",
            //         value: "",
            //         isRequired: true,
            //         options: [],
            //     },
            //     {
            //         fieldName: "runTime",
            //         label: "拟运行时间",
            //         type: "picker",
            //         trigger: "blur",
            //         value: "",
            //         isRequired: false,
            //     },
            //     {
            //         fieldName: "status",
            //         label: "状态",
            //         type: "radio",
            //         trigger: "change",
            //         value: "male",
            //         isRequired: false,
            //         options: [
            //             { value: 1, label: "正常" },
            //             { value: 0, label: "停用" },
            //         ],
            //     },
            //     {
            //         fieldName: "userId",
            //         label: "创建人",
            //         type: "input",
            //         value: "",
            //         isRequired: false,
            //     },
            // ],
            formData: {},
            isDisabled: false,
            itemView: {},
            dialogTitle: "",
            buildDepartmentOptions: [],
            developmentDepartmetnOptions: [],
            isRadio: [{ label: '是' }, { label: '否' }],

            isselfDepartmentOptions: [],
            otherDepartmentOptions: [],
            dataSourceArr: [],
            diaTitle: '',
            dataSourceDialogVisible: false,
            dialogEditVisible: false,
            dataSourceFormDisabled: false,
            dataSourceForm: {},
            isProdOptions: [
                { label: '生产环境', value: 1 },
                { label: '开发环境', value: 2 }
            ],
            dbTypeOptions: [
                { label: 'sqlserver', value: 'sqlserver', type: 'DataSourceManage' },
                { label: 'dm8', value: 'dm8', type: 'DataSourceManage' },
                { label: 'kingbase', value: 'kingbase', type: 'DataSourceManage' },
                { label: 'oracle', value: 'oracle', type: 'DataSourceManage' },
                { label: 'postgreSQL', value: 'postgreSQL', type: 'DataSourceManage' },
                { label: 'sftp', value: 'sftp', type: 'FileTransferAgent' }
            ],
            dataSourceForm: {},
            tableData: [],
            formRules: {
                identifier: [{ required: true, message: '请输入序号/标识符', trigger: 'blur' }],
                misProjectName: [{ required: true, message: '请输入信息系统项目名称', trigger: 'blur' }],
                money: [{ required: true, message: '请输入项目批复资金(万元)', trigger: 'blur' }],
                upLevelMoney: [{ required: true, message: '请输入升级改造资金(万元)', trigger: 'blur' }],
                maintainMoney: [{ required: true, message: '请选择所属单位', trigger: 'change' }],
                belongDepartment: [{ required: true, message: '请选择所属单位机构名称', trigger: 'blur' }],
                systemAbbreviated: [{ required: true, message: '请输入信息系统简称', trigger: 'blur' }],
                systemType: [{ required: true, message: '请选择信息系统类型', trigger: 'change' }],
                internetEnvironment: [{ required: true, message: '请选择网络环境', trigger: 'change' }],
                techDepartment: [{ required: true, message: '请选择技术责任处室', trigger: 'change' }],
                systemResponsibility: [{ required: true, message: '请选择技术责任处室', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
                outwardIp: [{ required: true, message: '请输入对外提供IP', trigger: 'blur' }],
                isSecret: [{ required: true, message: '请选择是否涉密系统', trigger: 'change' }],
                isHardwareInternet: [{ required: true, message: '请选择是否硬件网络', trigger: 'change' }],
                businessType: [{ required: true, message: '请选择请选择支深业务类型', trigger: 'change' }]
            },
            diaFormRules: {
                name: [{ required: true, message: '请输入数据源名称', trigger: 'blur' }],
                level: [{ required: true, message: '请输入数据源层次', trigger: 'blur' }],
                dbType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
                isProd: [{ required: true, message: '请选择环境', trigger: 'change' }],
                serverIp: [{ required: true, message: '请输入主机', trigger: 'blur' }],
                serverPort: [{ required: true, message: '请输入端口', trigger: 'blur' }],
                dbName: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        };
    },
    watch: {
        value(newVal) {
            this.visible = newVal;
        },
        visible(newVal) {
            this.$emit("input", newVal);
        },

        title: {
            handler(newVal) {
                this.dialogTitle = newVal;
            },
            deep: true, // 深入监听
            immediate: true,
        },
        rowObj: {
            handler(newVal) {
                this.itemView = newVal;
            },
            deep: true, // 深入监听
            immediate: true,
        },
    },
    mounted() {
        this.getTableListData()
        this.getOrganizationalList()
        this.getRessibilityList()
        // if (this.dialogTitle === "查看") {
        //     this.isDisabled = true;
        // } else {
        //     this.isDisabled = false;
        // }

        if (this.dialogTitle !== "新增") {
            queryMisMsg({ id: this.itemView.id }).then(res => {
                if (+res.code === 200) {
                    res.data[0].buildDepartment = res.data[0].buildDepartment ? res.data[0].buildDepartment?.split(',') : []
                    res.data[0].manageDepartmetn = res.data[0].buildDepartment ? res.data[0].manageDepartmetn?.split(',') : []
                    res.data[0].developmentDepartmetn = res.data[0].buildDepartment ? res.data[0].developmentDepartmetn?.split(',') : []
                    res.data[0].maintainDepartmetn = res.data[0].buildDepartment ? res.data[0].maintainDepartmetn?.split(',') : []
                    res.data[0].useSystemDepartment = res.data[0].buildDepartment ? res.data[0].useSystemDepartment?.split(',') : []
                    res.data[0].belongDepartment = res.data[0].buildDepartment ? res.data[0].belongDepartment?.split(',') : []
                    res.data[0].techDepartment = res.data[0].buildDepartment ? res.data[0].techDepartment?.split(',') : []
                    this.formData = res.data[0]
                    this.dataSourceArr = res.data[0].dataBaseList
                }
            })
        }
        if (this.dialogTitle === "新增" && JSON.parse(sessionStorage.getItem('system-form'))) {
            this.formData = JSON.parse(sessionStorage.getItem('system-form'))
        }

        this.formData.otherDepartment = '无'

    },
    methods: {
        getView(id) {
            // this.formData.forEach((item) => {
            //     item.value = "";
            // });
            // viewTabAccessConfigById(id).then((res) => {
            //     if (+res.code === 200) {
            //         this.formData.forEach((item) => {
            //             item.value = res.data[item.fieldName];
            //         });
            //     }
            // });
        },

        misProjectNameOptionsChange(value) {
            let index = this.tableData.findIndex(item => item.misProjectName === this.formData.misProjectName2)
            if (index === -1) {
                this.formData.misProjectName = this.formData.misProjectName2
            } else {
                this.$message.error('系统名称已存在')
            }
        },

        handleUpdateVisible(val) {
            this.visible = val;
        },

        handleFormDataChange(newFormData) {
            this.formData = newFormData; // 同步表单数据
        },
        beforeClose() {

            if (this.dialogTitle === '新增') {
                console.log('新增');
                console.log(this.formData, 'this.formData');
                // console.log(Object.keys(this.formData).length, 'Object.keys(this.formData).length');
                console.log(Object.keys(this.formData).length, 'Object.keys(this.formData).length');

                if (Object.keys(this.formData).length > 1) {
                    this.$confirm('表单尚未提交，是否暂存已修改的内容？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        sessionStorage.setItem('system-form', JSON.stringify(this.formData))
                        this.$message({
                            type: 'success',
                            message: '暂存成功!'
                        });

                        this.visible = false;
                        this.$emit("before-close",);
                    }).catch(() => {
                        this.formData = {}
                        sessionStorage.removeItem('system-form')
                        this.visible = false;
                        this.$emit("before-close",);
                        this.$message({
                            type: 'info',
                            message: '取消成功'
                        });
                    });

                } else {
                    this.visible = false;
                    this.$emit("before-close",);
                }
            } else {
                this.visible = false;
                this.$emit("before-close",);
            }




        },
        // 取消按钮处理方法
        handleCancel() {
            this.visible = false;

            this.$emit("before-close");
            // 可以在父组件监听 'cancel' 事件
        },

        // 确定按钮处理方法
        async handleConfirm() {
            // 调用子组件的 validateForm 方法进行校验
            await this.$refs.ruleFormRef.validate((valid, fields)=>{
                console.log(valid, "valid");
                if (valid) {
                    // 校验通过，进行后续操作
                    console.log("表单校验通过，进行后续操作");
                    this.handleSave();
                } else {
                    this.$message.error("请完整填写表单");
                    console.log("表单校验失败");
                }
            })
            // Promise.all([this.$refs.
            // 
            // .validateForm()]).then((valid) => {
            //   if (valid.findIndex((val) => val === false) === -1) {
            //     this.handleSave();
            //   } else {
            //     this.$message.error("请完整填写表单");
            //   }
            // });
            // this.$refs.myFormComponent.validateForm();
            // 可以在父组件监听 'confirm' 事件
        },
        handleSave() {
            let pForm = {}
            pForm = { ...this.formData }
            pForm.buildDepartment = pForm.buildDepartment ? pForm.buildDepartment?.join(',') : ''
            pForm.manageDepartmetn = pForm.buildDepartment ? pForm.manageDepartmetn?.join(',') : ''
            pForm.developmentDepartmetn = pForm.buildDepartment ? pForm.developmentDepartmetn?.join(',') : ''
            pForm.maintainDepartmetn = pForm.buildDepartment ? pForm.maintainDepartmetn?.join(',') : ''
            pForm.useSystemDepartment = pForm.buildDepartment ? pForm.useSystemDepartment?.join(',') : ''
            pForm.belongDepartment = pForm.buildDepartment ? pForm.belongDepartment?.join(',') : ''
            pForm.techDepartment = pForm.buildDepartment ? pForm.techDepartment?.join(',') : ''
            console.log(pForm, "pForm");

            let arr = []
            this.dataSourceArr?.forEach(element => {
                arr.push(element.dbId)
            })

            if (this.title === "新增") {
                addMis({ ...pForm, dbId: arr }).then(res => {
                    if (+res.code === 200) {
                        this.$message.success(res.msg)
                        // handleClose()
                        this.$emit("confirm");
                        this.handleCancel();

                        sessionStorage.removeItem('system-form')
                    } else {
                        this.$message.error(res.msg);
                    }
                })


            } else if (this.title === "编辑") {
                updateMis({ ...pForm, dbId: arr }).then(res => {
                    if (+res.code === 200) {
                        this.$message({
                            message: res.msg,
                            type: "success",
                        });
                        this.$emit("confirm");
                        this.handleCancel();
                        sessionStorage.removeItem('system-form')
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }
        },

        // ===================
        getOrganizationalList() {
            getDirectoryAllLevel({ type: '组织机构' }).then(res => {
                if (+res.code === 200) {
                    if (res.data === null) {
                        this.buildDepartmentOptions = []
                    } else {
                        this.removeListForLevel4(res.data[0].list)
                        this.buildDepartmentOptions = res.data[0].list
                        this.removeListForLevel4(res.data[1].list)
                        this.developmentDepartmetnOptions = res.data[1].list
                    }
                }
            })
        },

        removeListForLevel4(data) {
            data.forEach(item => {
                // 如果是 level 4 的项，删除 list 属性
                if (item.level === '4') {
                    delete item.list;
                }
                // 如果当前项有子项（list），递归调用该函数
                if (item.list && item.list.length > 0) {
                    this.removeListForLevel4(item.list);
                }
            });
        },

        getRessibilityList() {
            getResponsibilityList({
                pageNumber: 1,
                pageSize: 999999
            }).then(res => {
                if (+res.code === 200) {
                    this.isselfDepartmentOptions = res.data
                }
            })
        },
        getTableListData() {
            queryMisList({ pageNumber: 1, pageSize: 9999 }).then(res => {
                if (res.data === null) {
                    this.tableData = []
                } else {
                    this.tableData = res.data
                }
            })
        },
        addDataSource() {
            this.diaTitle = '创建数据源'
            this.dataSourceDialogVisible = true
            this.dialogEditVisible = false
            this.dataSourceFormDisabled = false
        },
        editDataSource(row, type) {
            this.dataSourceForm = row

            this.dataSourceDialogVisible = true
            switch (type) {
                case 'detail':
                    this.diaTitle = '数据源详情'
                    this.dataSourceFormDisabled = true
                    break
                case 'edit':
                    this.diaTitle = '编辑数据源'
                    this.dataSourceFormDisabled = false
                    break

                default:
                    break
            }
            // dialogEditVisible.value = false
        },
        delDataSource(row, index) {
            deleteDatabase({ dbIds: row.dbId }).then(res => {
                if (+res.code === 200) {
                    this.$message.success(res.msg)
                    this.dataSourceArr.splice(index, 1)
                }
            })
        },
        addDataSourceHandle() {
            this.diaFormValidate()

        },
        async diaFormValidate() {
            await this.$refs.ruleFormRef1.validate((valid, fields) => {
                let res1
                if (valid) {
                    res1 = valid
                    if (this.diaTitle === '创建数据源') {
                        addDatabase({ ...this.dataSourceForm }).then(res => {
                            if (+res.code === 200) {
                                this.dataSourceArr.push({ dbId: res.data.maskId, ...this.dataSourceForm })
                                this.handleDialogClose()
                            }
                        })
                    } else {
                        updateDatabase({ ...this.dataSourceForm }).then(res => {
                            if (+res.code === 200) {
                                this.$message.success(res.msg)
                                this.dataSourceArr.forEach(element => {
                                    if (element.id === this.dataSourceForm.id) {
                                        element = this.dataSourceForm
                                    }
                                })
                                this.handleDialogClose()
                            }
                        })
                    }
                } else {
                    this.$message.error('请完整输入表单项')
                    return
                }
                return res1
            })
        },
        handleDialogClose() {
            this.dataSourceDialogVisible = false
            this.dataSourceForm = {}
        },

    },
};
</script>

<style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */
.block-title {
    margin-bottom: 20px;
    font-size: 18px;
}

.flex-box {
    display: flex;
}

.el-select__popper.el-popper {
    width: 100% !important;
}

.inner-dialog {
    z-index: 2002 !important;
    /* 设置一个比外层更高的值 */
}
</style>