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

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

                <!-- 公司业绩 -->
                <el-table
                    stripe
                    style="width: 100%"
                    :data="companyPerformanceList"
                    v-if="companyPerformanceList.length > 0"
                >
                    <el-table-column label="序号" width="55" type="index" />
                    <el-table-column align="center" label="项目名称" prop="label" show-overflow-tooltip />
                    <el-table-column align="center" label="电压等级" prop="voltage" show-overflow-tooltip />
                    <el-table-column align="center" label="变电站座数" show-overflow-tooltip />
                    <el-table-column align="center" label="线路建设规模(折单公里)" show-overflow-tooltip />
                    <el-table-column align="center" label="竣工日期" show-overflow-tooltip />
                    <el-table-column align="center" label="承包范围" show-overflow-tooltip />
                    <el-table-column align="center" label="业主单位" show-overflow-tooltip />
                    <el-table-column align="center" label="业主单位联系方式" show-overflow-tooltip />
                    <el-table-column align="center" label="操作">
                        <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">添加</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.name === ''"
                                @click="selectCompanyKeyPerson(scope.$index)"
                            >
                                选择
                            </el-button>

                            <span v-else>
                                {{ scope.row.name }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="职称" prop="title" show-overflow-tooltip />
                    <el-table-column align="center" label="职业资格证书/身份证" prop="idCard" show-overflow-tooltip />
                    <el-table-column align="center" label="在本施工队伍中的职责分工">
                        <template slot-scope="{ row }">
                            <el-input placeholder="请输入" v-model="row.duty" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="计划入场时间">
                        <template slot-scope="{ row }">
                            <el-date-picker
                                type="date"
                                clearable
                                v-model="row.planEnterTime"
                                style="width: 100%"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="计划退场时间" prop="planLeaveTime">
                        <template slot-scope="{ row }">
                            <el-date-picker
                                type="date"
                                clearable
                                v-model="row.planLeaveTime"
                                style="width: 100%"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="近年同类工程业绩">
                        <template slot-scope="{ row }">
                            {{ row.performance }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" show-overflow-tooltip>
                        <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 icon="el-icon-circle-plus" type="text" @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="{ row }">
                            <el-input placeholder="请输入" v-model="row.title" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="姓名">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="mini"
                                v-if="scope.row.name === ''"
                                @click="selectCompanyOtherPerson(scope.$index)"
                            >
                                选择
                            </el-button>

                            <span v-else>
                                {{ scope.row.name }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="职称" show-overflow-tooltip />
                    <el-table-column align="center" label="证书名称" show-overflow-tooltip />
                    <el-table-column align="center" label="级别" show-overflow-tooltip />
                    <el-table-column align="center" label="证号" show-overflow-tooltip />
                    <el-table-column align="center" label="专业" show-overflow-tooltip />
                    <el-table-column align="center" label="操作">
                        <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">添加</el-button>
                </div>

                <div class="subcontractor-box" v-if="subcontractorList.length > 0">
                    <div v-for="(item, index) in subcontractorList" :key="item.key" class="subcontractor-item-box">
                        <div class="subcontractor-item">
                            <span>
                                {{ item.label }}
                            </span>
                            <el-button
                                type="text"
                                style="color: #f56c6c"
                                icon="el-icon-delete"
                                @click="deleteSubcontractor(index)"
                            />
                        </div>
                        <!-- 分包商业绩添加 -->
                        <div class="title-box-subcontractor">
                            <div> 公司业绩 </div>
                            <el-button
                                icon="el-icon-circle-plus"
                                type="text"
                                @click="addSubcontractorPerformance(index)"
                            >
                                添加
                            </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"
                                label="项目名称(按合同)"
                                prop="label"
                                show-overflow-tooltip
                            />
                            <el-table-column align="center" label="电压等级" prop="voltage" show-overflow-tooltip />
                            <el-table-column align="center" label="建设单位" prop="company" show-overflow-tooltip />
                            <el-table-column
                                align="center"
                                label="分包合同额"
                                prop="contractAmount"
                                show-overflow-tooltip
                            />
                            <el-table-column align="center" label="开竣工日期" prop="startDate" show-overflow-tooltip />
                            <el-table-column align="center" label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        type="text"
                                        icon="el-icon-delete"
                                        style="color: #f56c6c"
                                        @click="deleteSubcontractorPerformance(index, scope.$index)"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="title-box-subcontractor">
                            <div> 拟派人员 </div>
                            <el-button icon="el-icon-circle-plus" type="text">添加</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <el-form-item>
                <el-row style="text-align: right; border-top: 1px solid #e5e5e5; padding-top: 10px">
                    <el-button size="mini" @click="onCancel">取消</el-button>
                    <el-button type="primary" size="mini" @click="onConfirm">确定</el-button>
                </el-row>
            </el-form-item>
        </el-form>

        <!-- 选择业绩等业务弹框 -->
        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
            <template slot="outerContent">
                <!-- 关键人员和公司业绩选择 -->
                <template
                    v-if="dialogConfig.outerTitle === '拟派人员选择' || dialogConfig.outerTitle === '公司业绩选择'"
                >
                    <div class="title" v-if="dialogConfig.outerTitle === '拟派人员选择'"> 拟派人员 </div>
                    <el-select
                        clearable
                        filterable
                        v-model="personSelectValue"
                        placeholder="请选择拟派人员"
                        v-if="dialogConfig.outerTitle === '拟派人员选择'"
                        @change="onChangePerson"
                    >
                        <el-option
                            v-for="item in personList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <div class="title" v-if="dialogConfig.outerTitle === '拟派人员选择'"> 拟派人员业绩选择 </div>
                    <el-form :model="personPerformanceForm" label-width="0" inline>
                        <el-row>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-input
                                        v-model="personPerformanceForm.projectName"
                                        placeholder="项目名称"
                                        clearable
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-input
                                        v-model="personPerformanceForm.voltageLevel"
                                        placeholder="电压等级"
                                        clearable
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <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="4">
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        v-model="value1"
                                        placeholder="选择日期"
                                        style="width: 100%"
                                        value-format="yyyy-MM-dd"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="0.5" style="text-align: center">
                                <el-form-item> 至 </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        clearable
                                        v-model="value1"
                                        placeholder="选择日期"
                                        style="width: 100%"
                                        value-format="yyyy-MM-dd"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="3.5">
                                <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="['待选列表', '已选列表']">
                            <div slot-scope="{ option }" class="transfer-item">
                                <span>
                                    {{ option.label }}
                                </span>
                                <span style="margin-left: 18px">
                                    {{ option.voltage }}
                                </span>
                                <span style="margin-left: 6px"> {{ option.startDate }} 至{{ option.endDate }} </span>
                            </div>
                        </el-transfer>
                    </div>
                </template>
                <!-- 其他人员选择 -->
                <template v-else-if="dialogConfig.outerTitle === '其他人员选择'">
                    <el-form :model="personPerformanceForm" label-width="0" inline>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item>
                                    <el-input placeholder="姓名" clearable> </el-input>
                                </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>

                    <el-table :data="personList" stripe @selection-change="onSelectionChange" ref="singleTable">
                        <el-table-column label="序号" width="55" type="index" align="center" />
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="姓名" prop="label" align="center" />
                        <el-table-column label="身份证号" prop="idCard" align="center" />
                    </el-table>

                    <pagination
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getOtherPersonList"
                    />
                </template>

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

                <!-- 分包商业绩选择 -->

                <template v-else-if="dialogConfig.outerTitle === '分包商业绩选择'">
                    <el-form :model="personPerformanceForm" label-width="0" inline>
                        <el-row>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-input
                                        v-model="personPerformanceForm.projectName"
                                        placeholder="项目名称"
                                        clearable
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-input
                                        v-model="personPerformanceForm.voltageLevel"
                                        placeholder="电压等级"
                                        clearable
                                    >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <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="4">
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        v-model="value1"
                                        placeholder="选择日期"
                                        style="width: 100%"
                                        value-format="yyyy-MM-dd"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="0.5" style="text-align: center">
                                <el-form-item> 至 </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        clearable
                                        v-model="value1"
                                        placeholder="选择日期"
                                        style="width: 100%"
                                        value-format="yyyy-MM-dd"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="3.5">
                                <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
                            :data="waitSubcontractorPerformanceData"
                            v-model="selectSubcontractorPerformanceData"
                            :titles="['待选列表', '已选列表']"
                        >
                            <div slot-scope="{ option }" class="transfer-item">
                                <span>
                                    {{ option.label }}
                                </span>
                                <span style="margin-left: 18px">
                                    {{ option.voltage }}
                                </span>
                                <span style="margin-left: 6px"> {{ option.startDate }} 至{{ option.endDate }} </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 UploadImg from '@/components/UploadImg'
import DialogModel from '@/components/DialogModel/index'
export default {
    components: {
        UploadImg,
        DialogModel,
    },
    props: {
        // 1新增 2详情 3编辑
        formType: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            personSelectValue: '',
            dialogConfig: {
                outerTitle: '新增',
                innerTitle: false,
                outerWidth: '80%',
                outerVisible: false,
                innerVisible: false,
            },
            addAndEditForm: {
                name: '', // 姓名
            },
            addAndEditRules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                ],
            },
            personList: [
                { label: '张三1', value: 1, idCard: '9996', title: '监理' },
                { label: '张三2', value: 2, idCard: '9996', title: '总监' },
                { label: '张三3', value: 3, idCard: '9996', title: '元帅' },
            ],

            // 待选列表查询条件
            personPerformanceForm: {
                projectName: '',
                age: '',
                voltageLevel: '',
            },
            waitSelectData: [], // 待选列表
            selectData: [], // 已选列表
            companyPerformanceList: [], // 公司业绩列表 ---- 外层表格
            companyKeyPersonList: [], // 公司关键人员列表
            companyOtherPersonList: [], // 公司其他人员列表
            subcontractorList: [], // 分包商列表
            companyPerformanceInnerList: [
                {
                    key: 10,
                    label: '安徽送变电工程1',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                },
                {
                    key: 11,
                    label: '湖南送变电工程2',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                },
                {
                    key: 12,
                    label: '南网送变电工程3',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                },
            ], // 公司业绩列表  ---- 内层穿梭框显示的
            companyPerformanceInnerSelectList: [], // 公司业绩列表  ---- 内层穿梭框选择后只有ID数据源
            keyPersonPerformanceInnerList: [
                {
                    key: 10,
                    label: '安徽送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '新疆工程取得完美收官',
                },
                {
                    key: 11,
                    label: '湖南送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '湖南（xx工程）工程取得完美收官',
                },
                {
                    key: 12,
                    label: '南网送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '日本（xx工程）工程取得完美收官',
                },
                {
                    key: 13,
                    label: '宁夏送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '校花工程取得完美收官',
                },
            ], // 关键人员业绩列表  ---- 内层穿梭框显示的
            keyPersonPerformanceInnerSelectList: [], // 关键人员业绩列表  ---- 内层穿梭框选择后只有ID数据源

            keyTableCurrentIndex: 0,
            otherTableCurrentIndex: 0,
            selectedPerson: null,
            selectSubcontractorData: [], // 分包商已选列表
            waitSubcontractorSelectData: [
                {
                    key: 1,
                    label: '川东电力集团有限公司',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    companyPerformanceList: [],
                },
                {
                    key: 2,
                    label: '川西电力集团有限公司',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    companyPerformanceList: [],
                },
                {
                    key: 3,
                    label: '川南电力集团有限公司',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    companyPerformanceList: [],
                },
            ], // 分包商待选列表

            // subcontractorList: [], // 分包商外层显示列表
            selectSubcontractorPerformanceData: [], // 分包商业绩已选列表 ---- 内层穿梭框选择后只有ID数据源
            waitSubcontractorPerformanceData: [
                {
                    key: 10,
                    label: '安徽送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '新疆工程取得完美收官',
                },
                {
                    key: 11,
                    label: '湖南送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '湖南（xx工程）工程取得完美收官',
                },
                {
                    key: 12,
                    label: '南网送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '日本（xx工程）工程取得完美收官',
                },

                {
                    key: 13,
                    label: '宁夏送变电工程',
                    disabled: false,
                    voltage: '110kv',
                    startDate: '2020-01-01',
                    endDate: '2020-01-01',
                    performance: '校花工程取得完美收官',
                },
            ], // ---- 内层穿梭框显示的
            subcontractorPerformanceInnerList: [], // 分包商业绩列表
            subcontractorPersonInnerList: [], // 分包商人员列表
            subcontractorPerformanceCurrentIndex: 0, // 分包商业绩当前操作的index
        }
    },
    methods: {
        onCancel() {
            this.$emit('closeDialogOuter')
        },
        onConfirm() {
            this.$refs.addAndEditFormRef.validate((valid) => {
                if (valid) {
                    console.log(this.addAndEditForm)
                }
            })
        },
        // 添加公司业绩
        addCompanyPerformance() {
            console.log('添加公司业绩')
            this.dialogConfig.outerTitle = '公司业绩选择'
            this.waitSelectData = this.companyPerformanceInnerList
            if (this.companyPerformanceList.length > 0) {
                this.selectData = this.companyPerformanceList.map((item) => item.key)
            } else {
                this.selectData = []
            }
            this.dialogConfig.outerVisible = true
        },
        // 添加公司关键人员
        addCompanyKeyPerson() {
            console.log('添加公司关键人员')
            this.companyKeyPersonList.push({
                name: '',
                title: '',
                idCard: '',
                performance: '',
                duty: '',
                planEnterTime: '',
                planLeaveTime: '',
            })
        },
        // 添加公司其他人员
        addCompanyOtherPerson() {
            console.log('添加公司其他人员')
            this.companyOtherPersonList.push({
                name: '',
                title: '',
                idCard: '',
            })
        },
        // 添加分包商
        addSubcontractor() {
            console.log('添加分包商')
            this.dialogConfig.outerTitle = '分包商选择'
            this.dialogConfig.outerVisible = true
        },
        // 查询
        searchPersonPerformance() {
            console.log('查询')
        },
        // 关闭弹窗
        closeDialogOuter() {
            this.dialogConfig.outerVisible = false
        },
        // 取消
        onCancelInner() {
            this.dialogConfig.outerVisible = false
        },
        // 确定
        onConfirmInner() {
            if (this.dialogConfig.outerTitle === '其他人员选择') {
                if (!this.selectedPerson) {
                    this.$modal.msgError('请选择人员')
                    return false
                } else {
                    this.companyOtherPersonList[this.otherTableCurrentIndex].name = this.selectedPerson.label
                    this.companyOtherPersonList[this.otherTableCurrentIndex].idCard = this.selectedPerson.idCard
                }
            } else if (this.dialogConfig.outerTitle === '分包商选择') {
                if (this.selectSubcontractorData.length < 1) {
                    this.$modal.msgError('右侧已选列表为空，请操作后再确认')
                    return false
                } else {
                    this.subcontractorList = this.waitSubcontractorSelectData.filter((item) =>
                        this.selectSubcontractorData.includes(item.key),
                    )
                }
            } else if (this.dialogConfig.outerTitle === '分包商业绩选择') {
                if (this.selectSubcontractorPerformanceData.length < 1) {
                    this.$modal.msgError('右侧已选列表为空，请操作后再确认')
                    return false
                } else {
                    this.subcontractorPerformanceList = this.waitSubcontractorPerformanceData.filter((item) =>
                        this.selectSubcontractorPerformanceData.includes(item.key),
                    )

                    this.subcontractorList[this.subcontractorPerformanceCurrentIndex].companyPerformanceList =
                        this.subcontractorPerformanceList
                }
            } else {
                if (this.selectData.length < 1) {
                    this.$modal.msgError('右侧已选列表为空，请操作后再确认')
                    return false
                }
                if (this.dialogConfig.outerTitle === '公司业绩选择') {
                    this.companyPerformanceList = this.waitSelectData.filter((item) =>
                        this.selectData.includes(item.key),
                    )
                } else if (this.dialogConfig.outerTitle === '拟派人员选择') {
                    this.keyPersonPerformanceInnerSelectList = this.waitSelectData.filter((item) =>
                        this.selectData.includes(item.key),
                    )

                    this.companyKeyPersonList[this.keyTableCurrentIndex].performance =
                        this.keyPersonPerformanceInnerSelectList.map((item) => item.performance).join(',')
                }
            }

            this.personSelectValue = ''
            this.dialogConfig.outerVisible = false
        },
        // 删除公司业绩
        deleteCompanyPerformance(index) {
            this.companyPerformanceList.splice(index, 1)
        },
        // 删除公司关键人员
        deleteCompanyKeyPerson(index) {
            this.companyKeyPersonList.splice(index, 1)
        },
        // 选择公司关键人员
        selectCompanyKeyPerson(index) {
            this.keyTableCurrentIndex = index
            this.dialogConfig.outerTitle = '拟派人员选择'
            this.waitSelectData = this.keyPersonPerformanceInnerList
            // if (this.keyPersonPerformanceInnerSelectList.length > 0) {
            //     this.selectData = this.keyPersonPerformanceInnerSelectList.map((item) => item.key)
            // }
            this.keyPersonPerformanceInnerSelectList = []
            this.selectData = []
            this.dialogConfig.outerVisible = true
        },
        onChangePerson(value) {
            const rowInfo = this.personList.find((item) => item.value === value)
            const { label, idCard, title } = rowInfo
            this.companyKeyPersonList[this.keyTableCurrentIndex].name = label
            this.companyKeyPersonList[this.keyTableCurrentIndex].idCard = idCard
            this.companyKeyPersonList[this.keyTableCurrentIndex].title = title
        },

        // 选择公司其他人员
        selectCompanyOtherPerson(index) {
            this.otherTableCurrentIndex = index
            this.dialogConfig.outerTitle = '其他人员选择'
            this.dialogConfig.outerVisible = true
        },
        // 选择其他人员
        onSelectionChange(selection) {
            console.log(selection)

            if (selection.length > 1) {
                const lastSelected = selection[selection.length - 1]
                this.$refs.singleTable.clearSelection() // 清空所有选中
                this.$refs.singleTable.toggleRowSelection(lastSelected, true) // 重新选中最后一个
            }
            this.selectedPerson = selection[0] || null // 存储当前选中项
        },
        getOtherPersonList() {
            console.log('查询')
        },
        deleteCompanyOtherPerson(index) {
            this.companyOtherPersonList.splice(index, 1)
        },
        deleteSubcontractor(index) {
            this.subcontractorList.splice(index, 1)
        },
        addSubcontractorPerformance(index) {
            this.subcontractorPerformanceCurrentIndex = index
            this.dialogConfig.outerTitle = '分包商业绩选择'
            this.dialogConfig.outerVisible = true
            console.log('添加分包商业绩')
        },
        deleteSubcontractorPerformance(index, performanceIndex) {
            this.subcontractorList[index].companyPerformanceList.splice(performanceIndex, 1)
        },
    },
}
</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 {
        margin-right: 10px;
        font-size: 14px;
    }
}

.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;
}
</style>
