<template>
    <div>
        <el-form
            :model="addAndEditForm"
            :rules="addAndEditRules"
            ref="addAndEditFormRef"
            label-width="0px"
            label-position="top"
            :disabled="formType === 2"
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="标书名称" prop="name">
                        <el-input
                            clearable
                            maxlength="30"
                            show-word-limit
                            placeholder="请输入标书名称"
                            v-model="addAndEditForm.name"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="card-box">
                <div class="title-box">
                    <div> 公司业绩 </div>
                    <el-button
                        type="text"
                        v-if="formType !== 2"
                        icon="el-icon-circle-plus"
                        @click="addCompanyPerformance"
                        >添加</el-button
                    >
                </div>

                <!-- 公司业绩 -->
                <el-table stripe style="width: 100%" :data="companyPerformanceList">
                    <el-table-column label="序号" width="55" type="index" />
                    <el-table-column align="center" label="工程名称" prop="proName" show-overflow-tooltip />
                    <el-table-column align="center" label="电压等级" prop="voltage" show-overflow-tooltip />
                    <el-table-column align="center" label="变电站座数" prop="stationNum" show-overflow-tooltip />
                    <el-table-column
                        align="center"
                        label="线路建设规模(折单公里)"
                        prop="lineScale"
                        show-overflow-tooltip
                    />
                    <el-table-column align="center" label="竣工日期" prop="stopTime" show-overflow-tooltip />
                    <el-table-column align="center" label="承包范围" prop="contractRang" show-overflow-tooltip />
                    <el-table-column align="center" label="业主单位" prop="ownerUnit" show-overflow-tooltip />
                    <el-table-column align="center" label="业主单位联系方式" prop="ownerPhone" show-overflow-tooltip />
                    <el-table-column align="center" label="操作" v-if="formType !== 2" width="80">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="color: #f56c6c"
                                icon="el-icon-delete"
                                @click="deleteCompanyPerformance(scope.$index)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="card-box">
                <div class="title-box">
                    <div> 公司关键人员 </div>
                    <el-button
                        icon="el-icon-circle-plus"
                        type="text"
                        @click="addCompanyKeyPerson"
                        v-if="formType !== 2"
                    >
                        添加
                    </el-button>
                </div>

                <!-- 公司关键人员 -->
                <el-table :data="companyKeyPersonList" stripe style="width: 100%">
                    <el-table-column label="序号" width="55" type="index" />
                    <el-table-column align="center" label="姓名">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="mini"
                                v-if="scope.row.userName === ''"
                                @click="selectCompanyKeyPerson(scope.$index)"
                            >
                                选择
                            </el-button>

                            <span v-else>
                                {{ scope.row.userName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="职称" prop="title" show-overflow-tooltip />
                    <el-table-column align="center" label="职业资格证书/身份证" width="200">
                        <template slot-scope="{ row }">
                            <span>
                                {{ row.diploma }}
                            </span>
                            <br />
                            <span>
                                {{ row.idCard }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="在本施工队伍中的职责分工" width="160">
                        <template slot-scope="scope">
                            <el-input
                                clearable
                                maxlength="20"
                                show-word-limit
                                placeholder="请输入"
                                v-if="formType !== 2"
                                v-model="scope.row.postName"
                                :ref="`comKeyPostName_${scope.$index}`"
                            />
                            <span v-else>
                                {{ scope.row.postName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="计划入场时间" width="160">
                        <template slot-scope="scope">
                            <el-date-picker
                                type="date"
                                clearable
                                style="width: 100%"
                                placeholder="选择日期"
                                v-if="formType !== 2"
                                value-format="yyyy-MM-dd"
                                v-model="scope.row.einDate"
                                :ref="`comKeyEinDate_${scope.$index}`"
                                @change="onChangeEinDate(scope.$index, $event)"
                            />
                            <span v-else>
                                {{ scope.row.einDate }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="计划退场时间" width="160">
                        <template slot-scope="scope">
                            <el-date-picker
                                type="date"
                                clearable
                                style="width: 100%"
                                v-if="formType !== 2"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                v-model="scope.row.exitDate"
                                :ref="`comKeyExitDate_${scope.$index}`"
                                @change="onChangeExitDate(scope.$index, $event)"
                            />
                            <span v-else>
                                {{ scope.row.exitDate }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="近年同类工程业绩">
                        <template slot-scope="{ row }">
                            {{ row.proPerf }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" show-overflow-tooltip v-if="formType !== 2" width="80">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="color: #f56c6c"
                                icon="el-icon-delete"
                                @click="deleteCompanyKeyPerson(scope.$index, scope.row.key)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="card-box">
                <!-- 公司其他人员 -->
                <div class="title-box">
                    <div> 公司其他人员 </div>
                    <el-button
                        type="text"
                        v-if="formType !== 2"
                        icon="el-icon-circle-plus"
                        @click="addCompanyOtherPerson"
                    >
                        添加
                    </el-button>
                </div>

                <el-table :data="companyOtherPersonList" stripe style="width: 100%">
                    <el-table-column label="序号" width="55" type="index" />
                    <el-table-column align="center" label="在本次标书中的职务">
                        <template slot-scope="scope">
                            <el-input
                                clearable
                                maxlength="20"
                                show-word-limit
                                placeholder="请输入"
                                v-if="formType !== 2"
                                v-model="scope.row.postName"
                                :ref="`comOtherPostName_${scope.$index}`"
                            />
                            <span v-else>
                                {{ scope.row.postName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="姓名">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="mini"
                                v-if="scope.row.userName === ''"
                                @click="selectCompanyOtherPerson(scope.$index)"
                            >
                                选择
                            </el-button>
                            <span v-else>
                                {{ scope.row.userName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="职称" show-overflow-tooltip prop="title" />
                    <el-table-column align="center" label="证书名称" show-overflow-tooltip prop="diploma" />
                    <el-table-column align="center" label="级别" show-overflow-tooltip prop="level" />
                    <el-table-column align="center" label="证书编号" show-overflow-tooltip prop="diplomaNum" />
                    <el-table-column align="center" label="专业" show-overflow-tooltip prop="major" />
                    <el-table-column align="center" label="操作" v-if="formType !== 2" width="80">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="color: #f56c6c"
                                icon="el-icon-delete"
                                @click="deleteCompanyOtherPerson(scope.$index)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="card-box">
                <!-- 分包商 -->
                <div class="title-box">
                    <div> 分包商 </div>
                    <el-button icon="el-icon-circle-plus" type="text" @click="addSubcontractor" v-if="formType !== 2">
                        添加
                    </el-button>
                </div>

                <div class="subcontractor-box" v-if="subcontractorList.length > 0">
                    <div v-for="(item, index) in subcontractorList" :key="item.id" class="subcontractor-item-box">
                        <div class="subcontractor-item">
                            <span>
                                {{ item.subName }}
                            </span>
                            <el-button
                                type="text"
                                style="color: #f56c6c"
                                v-if="formType !== 2"
                                icon="el-icon-delete"
                                @click="deleteSubcontractor(index)"
                            />
                        </div>
                        <!-- 分包商业绩添加 -->
                        <div class="title-box-subcontractor">
                            <div> 公司业绩 </div>
                            <el-button
                                type="text"
                                v-if="formType !== 2"
                                icon="el-icon-circle-plus"
                                @click="addSubcontractorPerformance(index, item.id)"
                            >
                                添加
                            </el-button>
                        </div>
                        <!-- 分包商公司业绩列表 -->
                        <el-table :data="item.companyPerformanceList" stripe style="width: 100%">
                            <el-table-column label="序号" width="55" type="index" />
                            <el-table-column
                                align="center"
                                prop="proName"
                                label="项目名称(按合同)"
                                show-overflow-tooltip
                            />
                            <el-table-column align="center" label="电压等级" prop="voltage" show-overflow-tooltip />
                            <el-table-column align="center" label="建设单位" prop="consUnit" show-overflow-tooltip />
                            <el-table-column
                                align="center"
                                label="分包合同额（万元）"
                                prop="money"
                                show-overflow-tooltip
                            />
                            <el-table-column align="center" label="开竣工日期" prop="startDate">
                                <template slot-scope="{ row }"> {{ row.startTime }} 至{{ row.endTime }} </template>
                            </el-table-column>
                            <el-table-column align="center" label="操作" v-if="formType !== 2" width="80">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        icon="el-icon-delete"
                                        style="color: #f56c6c"
                                        @click="deleteSubcontractorPerformance(index, scope.$index, scope.row.id)"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="title-box-subcontractor">
                            <div> 拟派人员 </div>
                            <el-button
                                type="text"
                                v-if="formType !== 2"
                                icon="el-icon-circle-plus"
                                @click="addSubcontractorPerson(index, item.id)"
                            >
                                添加
                            </el-button>
                        </div>

                        <!-- 分包人员 -->
                        <el-table :data="item.subcontractorPersonList" stripe style="width: 100%">
                            <el-table-column label="序号" width="55" type="index" />
                            <el-table-column align="center" label="姓名">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        size="mini"
                                        v-if="scope.row.userName === ''"
                                        @click="selectSubcontractorPerson(index, scope.$index)"
                                    >
                                        选择
                                    </el-button>

                                    <span v-else>
                                        {{ scope.row.userName }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="职称" prop="title" show-overflow-tooltip />
                            <el-table-column align="center" label="执业资格证书/身份证" width="200">
                                <template slot-scope="{ row }">
                                    <span>
                                        {{ row.diploma }}
                                    </span>
                                    <br />
                                    <span>
                                        {{ row.idCard }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="在本施工队伍中的职责分工" width="160">
                                <template slot-scope="scope">
                                    <el-input
                                        clearable
                                        maxlength="20"
                                        show-word-limit
                                        placeholder="请输入"
                                        v-if="formType !== 2"
                                        v-model="scope.row.postName"
                                        :ref="`comSubcontractorPostName_${index}_${scope.$index}`"
                                    />
                                    <span v-else>
                                        {{ scope.row.postName }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="近年同类工程业绩">
                                <template slot-scope="{ row }">
                                    {{ row.proPerf }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="操作"
                                show-overflow-tooltip
                                v-if="formType !== 2"
                                width="80"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        style="color: #f56c6c"
                                        icon="el-icon-delete"
                                        @click="deleteSubcontractorPerson(index, scope.$index)"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-form>

        <!-- 操作按钮 -->
        <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
            <el-button @click="onCancel" style="margin-right: 10px">{{ formType !== 2 ? '取消' : '关闭' }}</el-button>
            <el-button type="primary" @click="onConfirm" v-if="formType !== 2">确定</el-button>
        </el-row>

        <!-- 选择业绩等业务弹框 -->
        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
            <template slot="outerContent">
                <!-- 关键人员和公司业绩选择 -->
                <template
                    v-if="dialogConfig.outerTitle === '关键人员选择' || dialogConfig.outerTitle === '公司业绩选择'"
                >
                    <div class="title" v-if="dialogConfig.outerTitle === '关键人员选择'"> 拟派人员 </div>
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-select
                                clearable
                                filterable
                                @change="onChangePerson"
                                placeholder="请选择人员"
                                v-if="dialogConfig.outerTitle === '关键人员选择'"
                                v-model="companyPerformanceQueryParams.personId"
                            >
                                <el-option
                                    :key="item.id"
                                    :value="item.id + ''"
                                    :label="item.userName"
                                    v-for="item in keyPersonList"
                                />
                            </el-select>
                        </el-col>
                    </el-row>
                    <div class="title" v-if="dialogConfig.outerTitle === '关键人员选择'"> 人员业绩选择 </div>
                    <el-form
                        inline
                        label-width="0"
                        ref="companyPerformanceFormRef"
                        :model="companyPerformanceQueryParams"
                    >
                        <el-row :gutter="20">
                            <el-col :span="5">
                                <el-form-item prop="proName">
                                    <el-input
                                        clearable
                                        placeholder="工程名称"
                                        v-model="companyPerformanceQueryParams.proName"
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="voltage">
                                    <el-input
                                        clearable
                                        placeholder="电压等级"
                                        v-model="companyPerformanceQueryParams.voltage"
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="age">
                                    <el-select
                                        placeholder="请选择"
                                        v-model="companyPerformanceQueryParams.age"
                                        clearable
                                    >
                                        <el-option label="近三年" value="3" />
                                        <el-option label="近五年" value="5" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item prop="timeValue">
                                    <el-date-picker
                                        type="daterange"
                                        range-separator="~"
                                        style="width: 100%"
                                        value-format="yyyy-MM-dd"
                                        end-placeholder="结束时间"
                                        start-placeholder="开始时间"
                                        v-model="companyPerformanceQueryParams.timeValue"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search" @click="searchPersonPerformance">
                                        查询
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div>
                        <el-transfer
                            v-model="selectData"
                            :data="waitSelectData"
                            :titles="['待选列表', '已选列表']"
                            :props="{
                                key: 'perfId',
                                label: 'proName',
                            }"
                        >
                            <div slot-scope="{ option }" class="transfer-item">
                                <span>
                                    {{ option.proName }}
                                </span>
                                <span style="margin-left: 18px">
                                    {{ option.voltage }}
                                </span>
                                <span style="margin-left: 6px"> {{ option.startTime }} 至{{ option.endTime }} </span>
                            </div>
                        </el-transfer>
                    </div>
                </template>
                <!-- 其他人员选择 -->
                <template v-else-if="dialogConfig.outerTitle === '其他人员选择'">
                    <el-form :model="otherPersonQueryParams" label-width="0" inline>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input
                                    clearable
                                    placeholder="姓名"
                                    style="width: 100%"
                                    v-model="otherPersonQueryParams.userName"
                                />
                            </el-col>

                            <el-col :span="6">
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search" @click="searchOtherPerson">
                                        查询
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <el-table
                        stripe
                        ref="singleTable"
                        :data="otherPersonList"
                        @selection-change="onSelectionChange"
                        :header-cell-class-name="cellClass"
                    >
                        <el-table-column label="序号" width="55" type="index" align="center" />
                        <el-table-column
                            type="selection"
                            width="55"
                            align="center"
                            :selectable="
                                (row) => {
                                    return !row.disabled
                                }
                            "
                        />
                        <el-table-column label="姓名" prop="userName" align="center" />
                        <el-table-column label="身份证号" prop="idCard" align="center" />
                    </el-table>

                    <pagination
                        :total="otherPersonTotal"
                        @pagination="searchOtherPerson"
                        :page.sync="otherPersonQueryParams.pageNum"
                        :limit.sync="otherPersonQueryParams.pageSize"
                    />
                </template>

                <!-- 分包商选择 -->
                <template v-else-if="dialogConfig.outerTitle === '分包商选择'">
                    <div>
                        <el-transfer
                            filterable
                            v-model="selectSubcontractorData"
                            :data="waitSubcontractorSelectData"
                            :titles="['待选列表', '已选列表']"
                            :props="{
                                key: 'id',
                                label: 'subName',
                            }"
                        />
                    </div>
                </template>

                <!-- 分包商业绩选择 -->
                <template
                    v-else-if="
                        dialogConfig.outerTitle === '分包商业绩选择' || dialogConfig.outerTitle === '分包人员选择'
                    "
                >
                    <div class="title" v-if="dialogConfig.outerTitle === '分包人员选择'"> 拟派人员 </div>
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-select
                                clearable
                                filterable
                                placeholder="请选择人员"
                                @change="onChangeSubcontractorPerson"
                                v-if="dialogConfig.outerTitle === '分包人员选择'"
                                v-model="personPerformanceForm.personId"
                            >
                                <el-option
                                    :key="item.id"
                                    :value="item.id + ''"
                                    :label="item.userName"
                                    v-for="item in subcontractorPersonSelectList"
                                />
                            </el-select>
                        </el-col>
                    </el-row>
                    <div class="title" v-if="dialogConfig.outerTitle === '分包人员选择'"> 人员业绩选择 </div>
                    <el-form inline label-width="0" :model="personPerformanceForm">
                        <el-row :gutter="20">
                            <el-col :span="5">
                                <el-form-item prop="proName">
                                    <el-input clearable placeholder="工程名称" v-model="personPerformanceForm.proName">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="voltage">
                                    <el-input clearable placeholder="电压等级" v-model="personPerformanceForm.voltage">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item prop="age">
                                    <el-select placeholder="请选择" v-model="personPerformanceForm.age" clearable>
                                        <el-option label="近三年" value="3" />
                                        <el-option label="近五年" value="5" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item prop="timeValue">
                                    <el-date-picker
                                        type="daterange"
                                        range-separator="~"
                                        style="width: 100%"
                                        value-format="yyyy-MM-dd"
                                        end-placeholder="结束时间"
                                        start-placeholder="开始时间"
                                        v-model="personPerformanceForm.timeValue"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <el-form-item>
                                    <el-button
                                        type="primary"
                                        icon="el-icon-search"
                                        @click="searchSubcontractorPerformanceData"
                                    >
                                        查询
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div>
                        <!-- 分包商业绩选择框 -->
                        <el-transfer
                            :data="waitSubcontractorPerformanceData"
                            v-model="selectSubcontractorPerformanceData"
                            :titles="['待选列表', '已选列表']"
                            :props="{
                                key: 'perfId',
                                label: 'proName',
                            }"
                        >
                            <div slot-scope="{ option }" class="transfer-item">
                                <span>
                                    {{ option.proName }}
                                </span>
                                <span style="margin-left: 18px">
                                    {{ option.voltage }}
                                </span>
                                <span style="margin-left: 6px"> {{ option.startTime }} 至{{ option.endTime }} </span>
                            </div>
                        </el-transfer>
                    </div>
                </template>

                <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
                    <el-button @click="onCancelInner" style="margin-right: 10px">取消</el-button>
                    <el-button type="primary" @click="onConfirmInner">确定</el-button>
                </el-row>
            </template>
        </DialogModel>
    </div>
</template>

<script>
import moment from 'moment'
import UploadImg from '@/components/UploadImg'
import DialogModel from '@/components/DialogModel/index'
import { getKeyPersonListAPI, getSubKeyPersonListAPI } from '@/api/common'
import { getSubManageListAPI } from '@/api/sub-manage/sub-manage'
import { getOtherPersonListAPI } from '@/api/company-manage/other-person'
import { getSubPersonManageListAPI } from '@/api/sub-manage/sub-person-manage'
import {
    getSubPerformanceManageListAPI,
    getSubPerformanceManageListByPersonIdAPI,
} from '@/api/sub-manage/sub-performance-manage'
import {
    getCompanyPerformanceListAPI,
    getCompanyPerformanceListByPersonIdAPI,
} from '@/api/company-manage/performance-manage'

import { addGwTemplateAPI, getGwTemplateByIdAPI, editGwTemplateAPI } from '@/api/data-create/gw-template'

export default {
    components: {
        UploadImg,
        DialogModel,
    },
    props: {
        // 1新增 2详情 3编辑
        formType: {
            type: Number,
            default: 1,
        },
        // 详情或编辑的id
        queryId: {
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            dialogConfig: {
                outerTitle: '新增',
                innerTitle: false,
                outerWidth: '80%',
                outerVisible: false,
                innerVisible: false,
            },
            addAndEditForm: {
                name: '', // 标书名称
            },
            addAndEditRules: {
                name: [
                    {
                        required: true,
                        message: '请输入标书名称',
                        trigger: 'blur',
                    },
                ],
            },

            waitSelectData: [], // 待选列表 公共  ---- 公司业绩选择 和 关键人员选择 的待选列表
            selectData: [], // 已选列表 公共  ---- 公司业绩选择 和 关键人员选择 的已选列表

            /**
             * 公司业绩需要的数据源----------------------------------------------------------------------------------------------------------------------------------------------------------------
             */

            companyPerformanceList: [], // 公司业绩列表 ---- 外层表格
            // 公司业绩待选列表查询条件
            companyPerformanceQueryParams: {
                age: '3',
                proName: '',
                voltage: '',
                pageNum: 1,
                pageSize: 10000,
                timeValue: [],
                personId: '',
            },

            /**
             * 公司关键人员需要的数据源-------------------------------------------------------------------------------------------------------------------------------------------------------------
             */
            companyKeyPersonList: [], // 公司关键人员列表
            keyTableCurrentIndex: 0, // 公司关键人员当前操作行的索引
            keyPersonList: [], // 关键人员列表

            /**
             * 公司其他人员需要的数据源-------------------------------------------------------------------------------------------------------------------------------------------------------------
             */
            companyOtherPersonList: [], // 公司其他人员列表
            otherTableCurrentIndex: 0, // 公司其他人员当前操作行的索引
            // 其他人员列表查询条件
            otherPersonQueryParams: {
                userName: '',
                pageNum: 1,
                pageSize: 10,
            },
            otherPersonList: [], // 其他人员列表
            otherPersonTotal: 0, // 其他人员列表总条数
            selectedOtherPerson: null, // 其他人员列表选中项

            /**
             * 分包商模块需要的数据源---------------------------------------------------------------------------------------------------------------------------------------------------------------
             */
            subcontractorList: [], // 分包商列表
            selectSubcontractorData: [], // 穿梭框内分包商已选列表
            waitSubcontractorSelectData: [], // 穿梭框内分包商待选列表
            subcontractorPerformanceCurrentIndex: 0, // 分包商业绩当前操作的index
            // 分包商业绩查询条件
            personPerformanceForm: {
                proName: '', //项目名称
                startTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 10000,
                timeValue: [],
                personId: '',
                age: '3',
                subId: '',
            },
            selectSubcontractorPerformanceData: [], // 分包商业绩已选列表 ---- 内层穿梭框选择后只有ID数据源
            waitSubcontractorPerformanceData: [], // 分包商业绩待选列表 ---- 内层穿梭框显示的
            subcontractorPersonCurrentIndex: 0, // 分包商索引
            subcontractorPersonSelectIndex: 0, // 分包商人员当前操作的index
            subcontractorPersonSelectList: [], // 分包商人员下拉数据
        }
    },
    methods: {
        cellClass(row) {
            return 'disabledCheck'
        },
        // 关闭弹框
        async onCancel() {
            this.$emit('closeDialogOuter')
        },
        // 最终确定按钮
        async onConfirm() {
            this.$refs.addAndEditFormRef.validate(async (valid) => {
                if (valid) {
                    // 组装参数
                    const params = {
                        ...this.addAndEditForm,
                        comPerfList: [], // 公司业绩列表
                        comCoreList: [], // 关键人员列表
                        comOtherList: [], // 其他人员列表
                        subList: [], // 分包商列表
                    }

                    let isError = false

                    // 添加校验  ---- 公司关键人员
                    if (this.companyKeyPersonList.length > 0) {
                        this.companyKeyPersonList.forEach((item, index) => {
                            if (!item.userId) {
                                this.$modal.msgError(`公司关键人员第${index + 1}行未选择人员`)
                                // 并使其获得焦点
                                isError = true
                                return false
                            }

                            if (!item.postName) {
                                // this.$modal.msgError(`公司关键人员第${index + 1}行未填写在本施工队伍中的职责分工`)
                                // this.$refs[`comKeyPostName_${index}`].focus()
                                this.$modal.msgError(`公司关键人员第${index + 1}行未填写在本施工队伍中的职责分工`)
                                const inputRef = this.$refs[`comKeyPostName_${index}`]
                                inputRef.focus()
                                // 添加红框样式
                                inputRef.$el.querySelector('.el-input__inner').style.border = '1px solid red'
                                // 可选：监听 blur 事件移除红框
                                inputRef.$el.querySelector('.el-input__inner').addEventListener('blur', function () {
                                    this.style.border = ''
                                })
                                isError = true
                                return false
                            }

                            if (!item.einDate && item.exitDate) {
                                // this.$modal.msgError(`公司关键人员第${index + 1}行未填写计划入场时间`)
                                // this.$refs[`comKeyEinDate_${index}`].focus()
                                this.$modal.msgError(`公司关键人员第${index + 1}行未填写计划入场时间`)
                                const inputRef = this.$refs[`comKeyEinDate_${index}`]
                                inputRef.focus()
                                // 添加红框样式
                                inputRef.$el.querySelector('.el-input__inner').style.border = '1px solid red'
                                // 可选：监听 blur 事件移除红框
                                inputRef.$el.querySelector('.el-input__inner').addEventListener('blur', function () {
                                    this.style.border = ''
                                })
                                isError = true
                                return false
                            }

                            if (!item.exitDate && item.einDate) {
                                // this.$modal.msgError(`公司关键人员第${index + 1}行未填写计划退场时间`)
                                // this.$refs[`comKeyExitDate_${index}`].focus()
                                this.$modal.msgError(`公司关键人员第${index + 1}行未填写计划退场时间`)
                                const inputRef = this.$refs[`comKeyExitDate_${index}`]
                                inputRef.focus()
                                // 添加红框样式
                                inputRef.$el.querySelector('.el-input__inner').style.border = '1px solid red'
                                // 可选：监听 blur 事件移除红框
                                inputRef.$el.querySelector('.el-input__inner').addEventListener('blur', function () {
                                    this.style.border = ''
                                })
                                isError = true
                                return false
                            }
                        })
                    }

                    // 添加校验  ---- 公司其他人员
                    if (this.companyOtherPersonList.length > 0) {
                        this.companyOtherPersonList.forEach((item, index) => {
                            if (!item.userId) {
                                this.$modal.msgError(`公司其他人员第${index + 1}行未选择人员`)
                                isError = true
                                return false
                            }

                            if (!item.postName) {
                                this.$modal.msgError(`公司其他人员第${index + 1}行未填写在本次标书中的职务`)
                                const inputRef = this.$refs[`comOtherPostName_${index}`]
                                inputRef.focus()
                                // 添加红框样式
                                inputRef.$el.querySelector('.el-input__inner').style.border = '1px solid red'
                                // 可选：监听 blur 事件移除红框
                                inputRef.$el.querySelector('.el-input__inner').addEventListener('blur', function () {
                                    this.style.border = ''
                                })
                                isError = true
                                return false
                            }
                        })
                    }

                    // 添加校验  ---- 分包商
                    if (this.subcontractorList.length > 0) {
                        try {
                            this.subcontractorList.forEach((item, index) => {
                                if (item.subcontractorPersonList.length > 0) {
                                    item.subcontractorPersonList.forEach((subcontractorPersonItem, subIndex) => {
                                        if (!subcontractorPersonItem.userId) {
                                            this.$modal.msgError(
                                                `" ${item.subName} "中拟派人员第${subIndex + 1}行未选择人员`,
                                            )
                                            isError = true
                                            throw new Error()
                                        }

                                        if (!subcontractorPersonItem.postName) {
                                            this.$modal.msgError(
                                                `" ${item.subName} "中拟派人员第${
                                                    subIndex + 1
                                                }行未填写在本次施工队伍中的职责分工`,
                                            )

                                            this.$nextTick(() => {
                                                const inputRef =
                                                    this.$refs[`comSubcontractorPostName_${index}_${subIndex}`][0]
                                                inputRef.focus()
                                                // 添加红框样式
                                                inputRef.$el.querySelector('.el-input__inner').style.border =
                                                    '1px solid red'
                                                // 可选：监听 blur 事件移除红框
                                                inputRef.$el
                                                    .querySelector('.el-input__inner')
                                                    .addEventListener('blur', function () {
                                                        this.style.border = ''
                                                    })
                                            })

                                            isError = true
                                            throw new Error()
                                        }
                                    })
                                }
                            })
                        } catch (error) {
                            isError = true
                        }
                    }

                    if (isError) return false

                    // 1. 组装公司业绩列表
                    if (this.companyPerformanceList.length > 0) {
                        this.companyPerformanceList.forEach((item) => {
                            params.comPerfList.push({
                                id: item.perfId,
                            })
                        })
                    }

                    // 2. 组装关键人员列表
                    if (this.companyKeyPersonList.length > 0) {
                        this.companyKeyPersonList.forEach((item) => {
                            params.comCoreList.push({
                                id: item.userId,
                                postName: item.postName,
                                proPerf: item.proPerf,
                                einDate: item.einDate,
                                exitDate: item.exitDate,
                                perfId: item.perfId,
                            })
                        })
                    }

                    // 3. 组装其他人员列表
                    if (this.companyOtherPersonList.length > 0) {
                        this.companyOtherPersonList.forEach((item) => {
                            params.comOtherList.push({
                                id: item.userId,
                                postName: item.postName,
                            })
                        })
                    }

                    // 4. 组装分包商列表
                    if (this.subcontractorList.length > 0) {
                        this.subcontractorList.forEach((item, index) => {
                            params.subList.push({
                                id: item.id,
                                subPerfList: [], // 分包商业绩列表
                                subPersonList: [], // 分包商人员列表
                            })

                            if (item.companyPerformanceList && item.companyPerformanceList.length > 0) {
                                item.companyPerformanceList.forEach((companyPerformanceItem) => {
                                    params.subList[index].subPerfList.push({
                                        id: companyPerformanceItem.perfId,
                                        subId: companyPerformanceItem.subId,
                                    })
                                })
                            }
                            if (item.subcontractorPersonList && item.subcontractorPersonList.length > 0) {
                                item.subcontractorPersonList.forEach((subcontractorPersonItem) => {
                                    params.subList[index].subPersonList.push({
                                        id: subcontractorPersonItem.userId,
                                        postName: subcontractorPersonItem.postName,
                                        proPerf: subcontractorPersonItem.proPerf,
                                    })
                                })
                            }
                        })
                    }

                    const API = this.formType === 1 ? addGwTemplateAPI : editGwTemplateAPI
                    if (this.formType === 3) {
                        params.id = this.queryId
                    }

                    const res = await API(params)

                    if (res.code === 200) {
                        this.$modal.msgSuccess(this.formType === 1 ? '新增成功' : '修改成功')
                        this.$emit('closeDialogOuter', true)
                    } else {
                        this.$modal.msgError(res.message)
                    }
                }
            })
        },

        // 公共查询  ---- 公司业绩选择 和 关键人员选择 的查询
        async searchPersonPerformance() {
            if (this.dialogConfig.outerTitle === '公司业绩选择') {
                this.getCompanyPerformanceData()
            } else {
                if (this.companyPerformanceQueryParams.personId) {
                    this.getCompanyPerformanceListByPersonIdData()
                } else {
                    this.$modal.msgError('请选择人员')
                }
            }
        },
        // 关闭弹窗
        async closeDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        // 关闭弹框
        async onCancelInner() {
            this.dialogConfig.outerVisible = false
        },
        // 穿梭框内的确定按钮
        async onConfirmInner() {
            // 公司业绩选择确定时
            if (this.dialogConfig.outerTitle === '公司业绩选择') {
                this.companyPerformanceList = this.waitSelectData.filter((item) =>
                    this.selectData.includes(item.perfId),
                )
            }

            if (this.dialogConfig.outerTitle === '关键人员选择') {
                if (this.companyPerformanceQueryParams.personId) {
                    const keyPersonPerformanceInnerSelectList = this.waitSelectData.filter((item) =>
                        this.selectData.includes(item.perfId),
                    )
                    this.companyKeyPersonList[this.keyTableCurrentIndex].proPerf = keyPersonPerformanceInnerSelectList
                        .map((item) => item.proName)
                        .join(',')
                    this.companyKeyPersonList[this.keyTableCurrentIndex].perfId = keyPersonPerformanceInnerSelectList
                        .map((item) => item.id)
                        .join(',')
                } else {
                    this.$modal.msgError('请选择人员')
                    return false
                }
            }

            if (this.dialogConfig.outerTitle === '其他人员选择') {
                if (!this.selectedOtherPerson) {
                    this.$modal.msgError('请选择其他人员')
                    return false
                } else {
                    // 选取需要的数据
                    const { id, userName, title, diploma, diplomaNum, major, level } = this.selectedOtherPerson
                    Object.assign(this.companyOtherPersonList[this.otherTableCurrentIndex], {
                        userId: id,
                        userName,
                        title,
                        diploma,
                        diplomaNum,
                        major,
                        level,
                    })
                }
            }

            if (this.dialogConfig.outerTitle === '分包商选择') {
                if (this.subcontractorList.length < 1) {
                    this.subcontractorList = this.waitSubcontractorSelectData.filter((item) =>
                        this.selectSubcontractorData.includes(item.id),
                    )
                } else {
                    const newSubcontractorList = this.waitSubcontractorSelectData.filter(
                        (item) =>
                            this.selectSubcontractorData.includes(item.id) &&
                            !this.subcontractorList.some((subItem) => subItem.id == item.id),
                    )

                    this.subcontractorList.push(...newSubcontractorList)
                }

                this.subcontractorList.forEach((item) => {
                    if (!item.companyPerformanceList) {
                        this.$set(item, 'companyPerformanceList', [])
                    }

                    if (!item.subcontractorPersonList) {
                        this.$set(item, 'subcontractorPersonList', [])
                    }
                    // if (!item.companyPerformanceList) {
                    //     // this.$set(item, 'companyPerformanceList', [])
                    //     item.companyPerformanceList = []
                    // }

                    // if (!item.subcontractorPersonList) {
                    //     // this.$set(item, 'subcontractorPersonList', [])
                    //     item.subcontractorPersonList = []
                    // }
                })
            }

            if (this.dialogConfig.outerTitle === '分包商业绩选择') {
                const subcontractorPerformanceInnerList = this.waitSubcontractorPerformanceData.filter((item) =>
                    this.selectSubcontractorPerformanceData.includes(item.perfId),
                )

                this.subcontractorList[this.subcontractorPerformanceCurrentIndex].companyPerformanceList = JSON.parse(
                    JSON.stringify(subcontractorPerformanceInnerList),
                )
            }

            //   添加近年同类工程业绩
            if (this.dialogConfig.outerTitle === '分包人员选择') {
                const subcontractorPerformanceInnerList = this.waitSubcontractorPerformanceData.filter((item) =>
                    this.selectSubcontractorPerformanceData.includes(item.perfId),
                )

                this.subcontractorList[this.subcontractorPerformanceCurrentIndex].subcontractorPersonList[
                    this.subcontractorPersonSelectIndex
                ].proPerf = subcontractorPerformanceInnerList.map((item) => item.proName).join(',')
            }

            this.dialogConfig.outerVisible = false
        },

        /**
         * 公司业绩模块方法逻辑----------------------------------------------------------------------------------------------------------------------------------------------------------------
         */

        // 添加公司业绩
        async addCompanyPerformance() {
            this.dialogConfig.outerTitle = '公司业绩选择'
            this.initQueryForm()
            this.getCompanyPerformanceData()
            // 获取已选择过的数据 赋值给穿梭框 作回显
        },
        // 获取公司业绩
        async getCompanyPerformanceData() {
            const { age, proName, voltage, pageNum, pageSize, timeValue } = this.companyPerformanceQueryParams

            const queryParams = {
                proName,
                voltage,
                pageNum,
                pageSize,
                startTime: '',
                endTime: '',
            }

            if (age == 3) {
                queryParams.startTime = moment().subtract(3, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }
            if (age == 5) {
                queryParams.startTime = moment().subtract(5, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }

            if (timeValue && timeValue.length > 0) {
                queryParams.startTime = timeValue[0]
                queryParams.endTime = timeValue[1]
            }
            const res = await getCompanyPerformanceListAPI(queryParams)

            this.waitSelectData = res.rows.map((item) => ({
                ...item,
                disabled: false,
                perfId: item.id,
            }))

            if (this.companyPerformanceList.length > 0) {
                this.selectData = this.companyPerformanceList.map((item) => item.perfId)
            } else {
                this.selectData = []
            }
            this.dialogConfig.outerVisible = true
        },
        // 删除公司业绩
        async deleteCompanyPerformance(index) {
            this.companyPerformanceList.splice(index, 1)
        },
        /**
         * 添加公司关键人员模块方法逻辑----------------------------------------------------------------------------------------------------------------------------------------------------------------
         */

        // 添加公司关键人员
        async addCompanyKeyPerson() {
            this.companyKeyPersonList.push({
                userId: '', // 人员id
                perfId: '', // 人员业绩id
                userName: '', // 人员名称
                title: '', // 人员职称
                diploma: '', // 执业资格证书
                idCard: '', // 身份证号
                postName: '', // 本施工队伍中的职责分工
                proPerf: '', // 人员业绩
                einDate: '', // 计划入场事件
                exitDate: '', // 计划退场事件
            })
        },
        // 选择公司关键人员
        async selectCompanyKeyPerson(index) {
            this.getKeyPersonList()
            this.initQueryForm()
            this.keyTableCurrentIndex = index
            this.dialogConfig.outerTitle = '关键人员选择'
            this.waitSelectData = []
            this.selectData = []
            this.dialogConfig.outerVisible = true
        },

        // 删除公司关键人员
        async deleteCompanyKeyPerson(index) {
            this.companyKeyPersonList.splice(index, 1)
        },
        // 获取关键人员列表
        async getKeyPersonList() {
            const { rows: res } = await getKeyPersonListAPI()
            this.keyPersonList = res
        },

        // 获取人员业绩数据
        async getCompanyPerformanceListByPersonIdData() {
            const { age, proName, voltage, pageNum, pageSize, timeValue, personId } = this.companyPerformanceQueryParams

            const queryParams = {
                proName,
                voltage,
                pageNum,
                pageSize,
                startTime: '',
                endTime: '',
                personId,
            }

            if (age == 3) {
                queryParams.startTime = moment().subtract(3, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }
            if (age == 5) {
                queryParams.startTime = moment().subtract(5, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }

            if (timeValue && timeValue.length > 0) {
                queryParams.startTime = timeValue[0]
                queryParams.endTime = timeValue[1]
            }
            const res = await getCompanyPerformanceListByPersonIdAPI(queryParams)
            if (res && res.length > 0) {
                this.waitSelectData = res.map((item) => ({
                    ...item,
                    disabled: false,
                    perfId: item.id,
                }))
            } else {
                this.waitSelectData = []
            }
        },

        // 人员下拉选的change事件
        async onChangePerson(value) {
            if (
                this.companyKeyPersonList.length > 0 &&
                this.companyKeyPersonList.some((item) => item.userId == value)
            ) {
                this.$modal.msgError('当前人员已选择，不可重复添加')
                this.companyPerformanceQueryParams.personId = ''
                return false
            } else {
                const rowInfo = this.keyPersonList.find((item) => item.id == value)
                const index = this.keyTableCurrentIndex
                this.companyKeyPersonList[index].userId = rowInfo.id
                this.companyKeyPersonList[index].title = rowInfo.title
                this.companyKeyPersonList[index].userName = rowInfo.userName
                this.companyKeyPersonList[index].diploma = rowInfo.diploma
                this.companyKeyPersonList[index].idCard = rowInfo.idCard
            }
        },

        // 计划入场时间change事件
        async onChangeEinDate(index, value) {
            // 使用moment.js 判断入场时间不能大于退场时间 否则提示错误
            if (moment(value).isAfter(moment(this.companyKeyPersonList[index].exitDate))) {
                this.$modal.msgError('计划入场时间不能大于计划退场时间')
                this.companyKeyPersonList[index].einDate = ''
                return false
            }
        },
        // 计划退场时间change事件
        async onChangeExitDate(index, value) {
            // 使用moment.js 判断退场时间不能小于入场时间 否则提示错误
            if (moment(value).isBefore(moment(this.companyKeyPersonList[index].einDate))) {
                this.$modal.msgError('计划退场时间不能小于计划入场时间')
                this.companyKeyPersonList[index].exitDate = ''
                return false
            }
        },
        // 初始化查询表单
        async initQueryForm() {
            this.companyPerformanceQueryParams = {
                age: '3',
                proName: '',
                voltage: '',
                pageNum: 1,
                pageSize: 10000,
                timeValue: [],
                personId: '',
            }
        },

        /**
         * 添加公司其他人员模块方法逻辑----------------------------------------------------------------------------------------------------------------------------------------------------------------
         */

        // 添加公司其他人员
        async addCompanyOtherPerson() {
            this.companyOtherPersonList.push({
                userId: '', // 人员id
                userName: '', // 人员名称
                postName: '', // 本次标书中的职务职责分工
                title: '', // 职称
                diploma: '', // 证书名称
                diplomaNum: '', // 证书编号
                major: '', // 专业
                level: '', // 级别
            })
        },
        // 选择公司其他人员
        async selectCompanyOtherPerson(index) {
            this.otherTableCurrentIndex = index
            this.dialogConfig.outerTitle = '其他人员选择'
            this.otherPersonQueryParams.pageNum = 1
            this.otherPersonQueryParams.pageSize = 10
            this.otherPersonQueryParams.userName = ''
            this.searchOtherPerson()
            this.dialogConfig.outerVisible = true
        },
        // 查询其他人员
        async searchOtherPerson() {
            const res = await getOtherPersonListAPI(this.otherPersonQueryParams)
            this.otherPersonList = res.rows
            this.otherPersonTotal = res.total
            this.selectedOtherPerson = null

            // 根据已选的人员 将已选人员的数据增加一个标识 让表格复选框禁用
            if (this.companyOtherPersonList.length > 0) {
                this.otherPersonList.forEach((item) => {
                    if (this.companyOtherPersonList.some((otherItem) => otherItem.userId == item.id)) {
                        item.disabled = true
                    } else {
                        item.disabled = false
                    }
                })
            }
        },
        // 其他人员列表复选框
        async onSelectionChange(selection) {
            if (selection.length > 1) {
                const lastSelected = selection[selection.length - 1]
                this.$refs.singleTable.clearSelection() // 清空所有选中
                this.$refs.singleTable.toggleRowSelection(lastSelected, true) // 重新选中最后一个
            }
            this.selectedOtherPerson = selection[0] || null // 存储当前选中项
        },
        // 删除公司其他人员
        async deleteCompanyOtherPerson(index) {
            this.companyOtherPersonList.splice(index, 1)
        },

        /**
         * 添加分包商模块方法逻辑----------------------------------------------------------------------------------------------------------------------------------------------------------------
         */

        // 添加分包商
        async addSubcontractor() {
            this.dialogConfig.outerTitle = '分包商选择'
            this.getSubcontractorList()
            this.dialogConfig.outerVisible = true
        },

        // 获取分包商列表
        async getSubcontractorList() {
            const res = await getSubManageListAPI({ pageNum: 1, pageSize: 10000 })
            this.waitSubcontractorSelectData = res.rows

            if (this.subcontractorList.length > 0) {
                this.selectSubcontractorData = this.subcontractorList.map((item) => item.id)
            } else {
                this.selectSubcontractorData = []
            }
        },

        // 添加分包商业绩
        async addSubcontractorPerformance(index, subId) {
            this.initSubcontractorPerformanceQueryParams()
            this.subcontractorPerformanceCurrentIndex = index
            this.subcontractorPersonCurrentIndex = index
            this.personPerformanceForm.subId = subId
            this.dialogConfig.outerTitle = '分包商业绩选择'
            this.getSubcontractorPerformanceData()
            this.dialogConfig.outerVisible = true
        },
        // 删除分包商
        async deleteSubcontractor(index) {
            this.subcontractorList.splice(index, 1)
        },
        // 获取分包商业绩数据
        async getSubcontractorPerformanceData() {
            const { age, proName, voltage, pageNum, pageSize, timeValue, subId } = this.personPerformanceForm
            const queryParams = {
                proName,
                voltage,
                pageNum,
                pageSize,
                startTime: '',
                endTime: '',
                subId,
            }

            if (age == 3) {
                queryParams.startTime = moment().subtract(3, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }
            if (age == 5) {
                queryParams.startTime = moment().subtract(5, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }

            if (timeValue && timeValue.length > 0) {
                queryParams.startTime = timeValue[0]
                queryParams.endTime = timeValue[1]
            }
            const res = await getSubPerformanceManageListAPI(queryParams)

            if (res.rows.length > 0) {
                this.waitSubcontractorPerformanceData = res.rows.map((item) => ({
                    ...item,
                    disabled: false,
                    perfId: item.id,
                }))

                const index = this.subcontractorPerformanceCurrentIndex
                const companyPerformanceList = this.subcontractorList[index].companyPerformanceList

                if (companyPerformanceList.length > 0) {
                    this.selectSubcontractorPerformanceData = companyPerformanceList.map((item) => item.perfId)
                }
            } else {
                this.waitSubcontractorPerformanceData = []
            }
        },
        // 初始化分包商业绩查询条件
        async initSubcontractorPerformanceQueryParams() {
            this.personPerformanceForm = {
                age: '3',
                proName: '',
                voltage: '',
                pageNum: 1,
                pageSize: 10000,
                timeValue: [],
                personId: '',
                subId: '',
            }
        },
        // 查询分包商业绩
        async searchSubcontractorPerformanceData() {
            if (this.dialogConfig.outerTitle === '分包商业绩选择') {
                this.getSubcontractorPerformanceData()
            } else {
                if (this.personPerformanceForm.personId) {
                    this.getSubcontractorPerformanceDataByPersonId()
                } else {
                    this.$modal.msgError('请选择人员')
                    return false
                }
            }
        },

        // 删除分包商业绩
        async deleteSubcontractorPerformance(index, performanceIndex, id) {
            this.subcontractorList[index].companyPerformanceList.splice(performanceIndex, 1)

            this.selectSubcontractorPerformanceData = this.selectSubcontractorPerformanceData.filter(
                (item) => item != id,
            )
        },

        // 添加分包商人员
        async addSubcontractorPerson(index, subId) {
            this.initSubcontractorPerformanceQueryParams()
            this.personPerformanceForm.subId = subId
            this.subcontractorPerformanceCurrentIndex = index
            this.subcontractorPersonCurrentIndex = index
            this.subcontractorList[index].subcontractorPersonList.push({
                userId: '',
                userName: '',
                title: '',
                diploma: '',
                idCard: '',
                postName: '',
                proPerf: '',
            })
        },

        // 选择分包商人员
        async selectSubcontractorPerson(index, personIndex) {
            this.dialogConfig.outerTitle = '分包人员选择'
            this.personPerformanceForm.personId = ''
            this.dialogConfig.outerVisible = true
            this.getSubcontractorPersonSelectList()
            this.waitSubcontractorPerformanceData = []
            this.selectSubcontractorPerformanceData = []
            this.subcontractorPersonCurrentIndex = index
            this.subcontractorPersonSelectIndex = personIndex
        },
        // 获取分包商人员下拉列表
        async getSubcontractorPersonSelectList() {
            const res = await getSubKeyPersonListAPI({ subId: this.personPerformanceForm.subId })
            this.subcontractorPersonSelectList = res.rows
        },
        // 删除分包商人员
        async deleteSubcontractorPerson(index, personIndex) {
            this.subcontractorList[index].subcontractorPersonList.splice(personIndex, 1)
        },
        // 分包人员下拉选的change事件
        async onChangeSubcontractorPerson(value) {
            if (
                this.subcontractorList[this.subcontractorPersonCurrentIndex].subcontractorPersonList.length > 0 &&
                this.subcontractorList[this.subcontractorPersonCurrentIndex].subcontractorPersonList.some(
                    (item) => item.userId == value,
                )
            ) {
                this.$modal.msgError('当前人员已选择，不可重复添加')
                this.personPerformanceForm.personId = ''
                return false
            } else {
                const rowInfo = this.subcontractorPersonSelectList.find((item) => item.id == value)
                const index = this.subcontractorPersonCurrentIndex
                const personIndex = this.subcontractorPersonSelectIndex
                this.subcontractorList[index].subcontractorPersonList[personIndex].userId = rowInfo.id
                this.subcontractorList[index].subcontractorPersonList[personIndex].userName = rowInfo.userName
                this.subcontractorList[index].subcontractorPersonList[personIndex].title = rowInfo.title
                this.subcontractorList[index].subcontractorPersonList[personIndex].diploma = rowInfo.diploma
                this.subcontractorList[index].subcontractorPersonList[personIndex].idCard = rowInfo.idCard
            }
        },

        // 根据人员id获取分包商业绩数据
        async getSubcontractorPerformanceDataByPersonId() {
            const { age, proName, voltage, pageNum, pageSize, timeValue, subId, personId } = this.personPerformanceForm
            const queryParams = {
                proName,
                voltage,
                pageNum,
                pageSize,
                startTime: '',
                endTime: '',
                subId,
                personId,
            }

            if (age == 3) {
                queryParams.startTime = moment().subtract(3, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }
            if (age == 5) {
                queryParams.startTime = moment().subtract(5, 'years').format('YYYY-MM-DD')
                queryParams.endTime = moment().format('YYYY-MM-DD')
            }

            if (timeValue && timeValue.length > 0) {
                queryParams.startTime = timeValue[0]
                queryParams.endTime = timeValue[1]
            }
            const res = await getSubPerformanceManageListByPersonIdAPI(queryParams)

            if (res.length > 0) {
                this.waitSubcontractorPerformanceData = res.map((item) => ({
                    ...item,
                    disabled: false,
                    perfId: item.id,
                }))
            } else {
                this.waitSubcontractorPerformanceData = []
            }
        },

        // 根据id获取国网模板详情
        async getGwTemplateById(id) {
            const res = await getGwTemplateByIdAPI({ id })
            if (res.code === 200) {
                const { name, comCoreList, comOtherList, comPerfList, subList } = res.data
                this.addAndEditForm.name = name
                // 根据详情回显数据
                // 1. 回显公司业绩数据
                this.companyPerformanceList = comPerfList
                // 2.  回显公司关键人员数据
                this.companyKeyPersonList = comCoreList
                // 3. 回显公司其他人员数据
                this.companyOtherPersonList = comOtherList
                // 4. 回显分包商数据
                if (subList.length > 0) {
                    subList.forEach((item) => {
                        this.subcontractorList.push(
                            JSON.parse(
                                JSON.stringify({
                                    ...item,
                                    companyPerformanceList: item.subPerfList,
                                    subcontractorPersonList: item.subPersonList,
                                }),
                            ),
                        )
                    })
                }
            } else {
                this.$modal.closeDialogOuter()
                this.$modal.msgError('详情获取失败' + res.message)
            }
        },
    },

    watch: {
        queryId: {
            handler(newVal) {
                if (newVal && newVal != '') {
                    this.getGwTemplateById(newVal)
                }
            },
            immediate: true,
            deep: true,
        },
    },
}
</script>

<style scoped lang="scss">
.card-box {
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
}
.title {
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0;
}
.title-box {
    padding: 8px 0;
    display: flex;
    align-items: center;

    div {
        margin-right: 10px;
        font-size: 14px;
        font-weight: 600;
    }
}

.title-box-subcontractor {
    padding-left: 10px;
    display: flex;
    align-items: center;
    div {
        padding: 6px 0;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 600;
    }
}

.subcontractor-item-box {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.subcontractor-item {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #000;
    font-weight: 600;
    font-size: 16px;

    span {
        margin-right: 10px;
    }
}

::v-deep .el-transfer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

::v-deep .el-transfer-panel {
    width: 48%;
}

::v-deep .el-transfer__buttons {
    width: 4%;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

::v-deep .el-button + .el-button {
    margin: 0;
}

// 深度选择器 去掉全选按钮
::v-deep .disabledCheck .cell .el-checkbox {
    display: none !important;
}
</style>
