<template>
    <div class="group-progress" v-loading.fullscreen.lock="progressloading">
        <div class="progress-hade">
            <el-form style="display: flex;justify-content: space-between;align-items: center;" :inline="true"
                :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-select filterable @change="GetGroupNameList" v-model="diid" placeholder="团组名称"
                        style="width: 250px;">
                        <el-option :style="item.hasProcess?'color: #409EFF;':''" v-for="(item, index) in AuditStatus"
                            :key="index" :label="item.groupName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <div>
                    <el-form-item label="团队名称:">
                        {{ formInline.name }}
                    </el-form-item>
                    <el-form-item label="客户:">
                        {{ formInline.clientName }}
                    </el-form-item>
                    <el-form-item label="出访国家:">
                        {{ formInline.CountriesVisited }}
                    </el-form-item>
                    <el-form-item label="起止日期:">
                        {{ formInline.StartTime }}
                    </el-form-item>
                    <el-form-item label="天数/人数:">
                        {{ formInline.Days }}天 / {{ formInline.Number }}人
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">商邀报批流程</span>
                </template>
                <div class="process-diagram">
                    <div @click="confirmclick(item,'商邀主管')"
                        :class="item.statusText=='已完成'?'process-diagram-'+activities.length+'s':'process-diagram-'+activities.length"
                        v-for="(item,index) in activities" :key="index">
                        <el-popover v-if="item.nodeDescTips!=''" placement="top-start" title="PS" width="200"
                            trigger="hover" :content="item.nodeDescTips">
                            <div style="white-space: pre-wrap;">{{item.nodeDescTips}}</div>
                            <div slot="reference">
                                <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                                <div>{{item.statusText}}</div>
                                <div>{{item.operator}}</div>
                                <!-- <div>{{item.opeateTime}}</div> -->
                                <div @click.stop="">
                                    <el-date-picker @blur="GroupProcessSetActualDone(item, '商邀主管')" style="width: 100%;"
                                        size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                    </el-date-picker>
                                    <div v-if="item.isEnaPartBtn" @click.stop=""
                                        style="display: flex;align-items: center;margin-top: 5px;">
                                        <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                        <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, '商邀主管')">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <div v-if="item.isEnaAssistBtn" @click.stop=""
                                        style="display: flex;align-items: center;margin-top: 5px">
                                        <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                        <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, '商邀主管')">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                        style="display: flex;align-items: center;margin-top: 5px;">
                                        <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                        <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, '商邀主管')">
                                            <el-radio :label="true">是</el-radio>
                                            <el-radio :label="false">否</el-radio>
                                        </el-radio-group>
                                    </div>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else>
                            <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                            <div>{{item.statusText}}</div>
                            <div>{{item.operator}}</div>
                            <!-- <div>{{item.opeateTime}}</div> -->
                            <div @click.stop="">
                                <el-date-picker @blur="GroupProcessSetActualDone(item, '商邀主管')" style="width: 100%;"
                                    size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                </el-date-picker>
                                <div v-if="item.isEnaPartBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                    <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, '商邀主管')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaAssistBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                    <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, '商邀主管')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                    <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, '商邀主管')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template #title>
                    <div style="display: inline-block;width: 100%;">
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <span style="font-size: 18px; font-weight: bold;">签证流程</span>
                            <el-button @click.stop="Visaclick('签证')" style="margin-right: 20px;" size="mini"
                                type="primary">签证流程保存</el-button>
                        </div>
                    </div>
                </template>
                <div class="progress-table">
                    <el-table :border="true" :header-cell-style="headerCellStyle" :data="tableData" style="width: 100%">
                        <el-table-column prop="a" label="国家" width="150">
                            <template slot-scope="scope">
                                <el-checkbox style="visibility: hidden;"></el-checkbox>
                                <el-input style="width:100%;margin-top: 10px;" size="mini"
                                    v-model="scope.row.countryName" placeholder="请输入国家"></el-input>
                                <el-date-picker style="visibility: hidden;width:100%;margin-top: 10px;"
                                    size="mini"></el-date-picker>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.isHandle1">{{scope.row.nodeName1}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime1" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-date-picker style="visibility: hidden;width:100%;margin-top: 10px;"
                                        size="mini"></el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.isHandle2">{{scope.row.nodeName2}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime2" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-date-picker style="visibility: hidden;width:100%;margin-top: 10px;"
                                        size="mini"></el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.isHandle3">{{scope.row.nodeName3}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime3" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-date-picker style="visibility: hidden;width:100%;margin-top: 10px;"
                                        size="mini"></el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.isHandle4">{{scope.row.nodeName4}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime4" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-date-picker style="visibility: hidden;width:100%;margin-top: 10px;"
                                        size="mini"></el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.isHandle5">{{scope.row.nodeName5}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime5" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-date-picker style="visibility: hidden;width:100%;margin-top: 10px;"
                                        size="mini"></el-date-picker>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度">
                            <template slot-scope="scope">
                                <div class="progress-table-content">
                                    <el-checkbox v-model="scope.row.isHandle6">{{scope.row.nodeName6}}</el-checkbox>
                                    <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.handleTime6" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                    <el-input style="width:100%;margin-top: 10px;" size="mini"
                                        v-model="scope.row.returner" placeholder="请输入归还人"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button style="margin-top: 10px;" size="mini"
                                    @click.native.prevent="deleteRow(scope.$index, tableData,'签证')"
                                    type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 10px; text-align: center;">
                        <el-button @click="addRow('签证')" size="mini" type="primary">添加一行</el-button>
                    </div>
                </div>
                <div class="progress-table-form">
                    <div v-if="tableDataobj.isEnaPartBtn" @click.stop="">
                        <label style="line-height: 1;margin-right: 5px;height: 17px;">是否参与:</label>
                        <el-radio-group v-model="tableDataobj.isPart" @change="GroupProcessSetActualDone(tableDataobj, '签证')">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-if="tableDataobj.isEnaAssistBtn" @click.stop="">
                        <label style="line-height: 1;margin-right: 5px;height: 17px;">财务是否协助:</label>
                        <el-radio-group v-model="tableDataobj.isAssist" @change="GroupProcessSetActualDone(tableDataobj, '签证')">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-if="tableDataobj.isEnaFileUpBtn" @click.stop="">
                        <label style="margin-right: 5px;">是否上传文件:</label>
                        <el-radio-group v-model="tableDataobj.isFileUp" @change="GroupProcessSetActualDone(tableDataobj, '签证')">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </div>
                    <div @click.stop="" style="display: flex;align-items: center;">
                        <label style="line-height: 1;margin-right: 5px;width: 110px;">实际完成时间:</label>
                        <el-date-picker @blur="GroupProcessSetActualDone(tableDataobj, '签证')" style="width: 100%;"
                            size="mini" v-model="tableDataobj.actualDone" type="datetime" placeholder="选择实际完成时间">
                        </el-date-picker>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="3">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">机票流程</span>
                </template>
                <div class="process-diagram">
                    <div @click="confirmclick(item,'机票')"
                        :class="item.statusText=='已完成'?'process-diagram-'+activitiesAir.length+'s':'process-diagram-'+activitiesAir.length"
                        v-for="(item,index) in activitiesAir" :key="index">
                        <el-popover v-if="item.nodeDescTips!=''" placement="top-start" title="PS" width="200" 
                            trigger="hover" :content="item.nodeDescTips">
                            <div style="white-space: pre-wrap;">{{item.nodeDescTips}}</div>
                            <div slot="reference">
                                <div style="font-weight: 600;font-size: 12px;">{{ item.nodeName }}</div>
                                <div>{{ item.statusText }}</div>
                                <div>{{ item.operator }}</div>
                                <!-- <div>{{item.opeateTime}}</div> -->
                                <div @click.stop="">
                                    <el-date-picker @blur="GroupProcessSetActualDone(item, '机票')" style="width: 100%;"
                                        size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                    </el-date-picker>
                                </div>
                                <div v-if="item.isEnaPartBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                    <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, '机票')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaAssistBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                    <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, '机票')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                    <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, '机票')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else>
                            <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                            <div>{{item.statusText}}</div>
                            <div>{{item.operator}}</div>
                            <!-- <div>{{item.opeateTime}}</div> -->
                            <div @click.stop="">
                                <el-date-picker @blur="GroupProcessSetActualDone(item, '机票')" style="width: 100%;"
                                    size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                </el-date-picker>
                            </div>
                            <div v-if="item.isEnaPartBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, '机票')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaAssistBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, '机票')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, '机票')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="4">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">酒店流程</span>
                </template>
                <div class="process-diagram">
                    <div @click="confirmclick(item,'酒店')"
                        :class="item.statusText=='已完成'?'process-diagram-'+activitiesHotel.length+'s':'process-diagram-'+activitiesHotel.length"
                        v-for="(item,index) in activitiesHotel" :key="index">
                        <el-popover v-if="item.nodeDescTips!=''" placement="top-start" title="PS" width="200"
                            trigger="hover" :content="item.nodeDescTips">
                            <div style="white-space: pre-wrap;">{{item.nodeDescTips}}</div>
                            <div slot="reference">
                                <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                                <div>{{item.statusText}}</div>
                                <div>{{item.operator}}</div>
                                <!-- <div>{{item.opeateTime}}</div> -->
                                <div @click.stop="">
                                    <el-date-picker @blur="GroupProcessSetActualDone(item, '酒店')" style="width: 100%;"
                                        size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                    </el-date-picker>
                                </div>
                                <div v-if="item.isEnaPartBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                    <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, '酒店')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaAssistBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                    <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, '酒店')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                    <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, '酒店')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else>
                            <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                            <div>{{item.statusText}}</div>
                            <div>{{item.operator}}</div>
                            <!-- <div>{{item.opeateTime}}</div> -->
                            <div @click.stop="">
                                <el-date-picker @blur="GroupProcessSetActualDone(item, '酒店')" style="width: 100%;"
                                    size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                </el-date-picker>
                            </div>
                            <div v-if="item.isEnaPartBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, '酒店')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaAssistBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, '酒店')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, '酒店')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="5">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">地接流程</span>
                </template>
                <div class="process-diagram">
                    <div @click="confirmclick(item,'OP')"
                        :class="item.statusText=='已完成'?'process-diagram-'+activitiesGuide.length+'s':'process-diagram-'+activitiesGuide.length"
                        v-for="(item,index) in activitiesGuide" :key="index">
                        <el-popover v-if="item.nodeDescTips!=''" placement="top-start" title="PS" width="200"
                            trigger="hover" :content="item.nodeDescTips">
                            <div style="white-space: pre-wrap;">{{item.nodeDescTips}}</div>
                            <div slot="reference">
                                <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                                <div>{{item.statusText}}</div>
                                <div>{{item.operator}}</div>
                                <!-- <div>{{item.opeateTime}}</div> -->
                                <div @click.stop="">
                                    <el-date-picker @blur="GroupProcessSetActualDone(item, 'OP')" style="width: 100%;"
                                        size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                    </el-date-picker>
                                </div>
                                <div v-if="item.isEnaPartBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                    <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, 'OP')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaAssistBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                    <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, 'OP')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                    <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, 'OP')">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else>
                            <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                            <div>{{item.statusText}}</div>
                            <div>{{item.operator}}</div>
                            <!-- <div>{{item.opeateTime}}</div> -->
                            <div @click.stop="">
                                <el-date-picker @blur="GroupProcessSetActualDone(item, 'OP')" style="width: 100%;"
                                    size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                </el-date-picker>
                            </div>
                            <div v-if="item.isEnaPartBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item, 'OP')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaAssistBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item, 'OP')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item, 'OP')">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="6">
                <template #title>
                    <span style="font-size: 18px; font-weight: bold;">费用结算</span>
                </template>
                <div class="process-diagram">
                    <div @click="financeclick(item)"
                        :class="item.statusText=='已完成'?'process-diagram-'+activitiesCost.length+'s':'process-diagram-'+activitiesCost.length"
                        v-for="(item,index) in activitiesCost" :key="index">
                        <el-popover v-if="item.nodeDescTips!=''" placement="top-start" title="PS" width="200"
                            trigger="hover" :content="item.nodeDescTips">
                            <div style="white-space: pre-wrap;">{{item.nodeDescTips}}</div>l
                            <div slot="reference">
                                <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                                <div>{{item.statusText}}</div>
                                <div>{{item.operator}}</div>
                                <!-- <div>{{item.opeateTime}}</div> -->
                                <div @click.stop="">
                                    <el-date-picker @blur="GroupProcessSetActualDone(item)" style="width: 100%;"
                                        size="mini" v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                    </el-date-picker>
                                </div>
                                <div v-if="item.isEnaPartBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                    <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item)">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaAssistBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                    <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item)">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                    style="display: flex;align-items: center;margin-top: 5px;">
                                    <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                    <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item)">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else>
                            <div style="font-weight: 600;font-size: 12px;">{{item.nodeName}}</div>
                            <div>{{item.statusText}}</div>
                            <div>{{item.operator}}</div>
                            <!-- <div>{{item.opeateTime}}</div> -->
                            <div @click.stop="">
                                <el-date-picker @blur="GroupProcessSetActualDone(item)" style="width: 100%;" size="mini"
                                    v-model="item.actualDone" type="datetime" placeholder="选择实际完成时间">
                                </el-date-picker>
                            </div>
                            <div v-if="item.isEnaPartBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否参与:</label>
                                <el-radio-group v-model="item.isPart" @change="GroupProcessSetActualDone(item)">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaAssistBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">财务是否协助:</label>
                                <el-radio-group v-model="item.isAssist" @change="GroupProcessSetActualDone(item)">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="item.isEnaFileUpBtn" @click.stop=""
                                style="display: flex;align-items: center;margin-top: 5px;">
                                <label style="line-height: 1;margin-right: 5px;">是否上传文件:</label>
                                <el-radio-group v-model="item.isFileUp" @change="GroupProcessSetActualDone(item)">
                                    <el-radio :label="true">是</el-radio>
                                    <el-radio :label="false">否</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>

    </div>
</template>
<script>
export default {
    data () {
        return {
            activeNames: ['1','2','3','4','5','6'],
            tableData: [],
            tableDataobj:{},
            tableDataobjs: {
                id: 0,
                processId: 146,
                nodeOrder: 2,
                nodeName: "",
                overallStatus: 2,
                statusText: "",
                operator: "",
                opeateTime: "",
                actualDone: "",
                nodeDescTips: "",
                isEnaAssistBtn: false,
                isAssist: false,
                isEnaFileUpBtn: true,
                isFileUp: true,
                isEnaPartBtn: false,
                isPart: false,
                visaSubNodes: []
            },
            activities:[],
            activitiesAir:[],
            activitiesHotel:[],
            activitiesGuide:[],
            activitiesCost:[],
            visible: false,
            diid:'',
            AuditStatus:[],
            formInline: {
                name: '',
                clientName: '',
                CountriesVisited: '',
                StartTime: '',
                Days: 0,
                Number: 0,
                Status: '',
            },
            token:'',
            userId:'',
            progressloading:false,
            jobName:'',
            visaclickid:'',
        }
    },
    methods: {
        handleChange(val) {
            console.log(val);
        },
        headerCellStyle({ row, column, rowIndex, columnIndex }) {
            console.log(row, column, rowIndex, columnIndex);
            row[0].colSpan = 1;
            row[6].colSpan = 6;
            row[7].colSpan = 1;
            row[1].colSpan = 0;
            row[2].colSpan = 0;
            row[3].colSpan = 0;
            row[4].colSpan = 0;
            row[5].colSpan = 0;
            if (columnIndex < 6 && columnIndex > 0) {
                return { display: 'none' }
            }
        },
        //获取团组id
        GetGroupNameList(){
            this.progressloading=true;
            this.AuditStatus=[];
            var url = "/api/Groups/GroupProcessGroupNames"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.AuditStatus=res.data.data;
                    if (that.diid==='') {
                        that.diid=res.data.data[0].id;
                        
                    }
                    that.PostShareGroupInfo();
                }else{
                    that.progressloading=false;
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取团组详情
        PostShareGroupInfo(){
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                    id: that.diid
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.formInline.name = res.data.data.teamName;
                    that.formInline.clientName = res.data.data.clientName;
                    that.formInline.CountriesVisited = res.data.data.visitCountry;
                    that.formInline.StartTime = res.data.data.visitStartDate.split(' ')[0]+'~'+res.data.data.visitEndDate.split(' ')[0];
                    that.formInline.Days = res.data.data.visitDays;
                    that.formInline.Number = res.data.data.visitPNumber;
                    that.GroupProcessDetails();
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //获取数据
        GroupProcessDetails() {
            var that = this
            var url = "/api/Groups/GroupProcessDetails?groupId=" + that.diid
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    for (let i = 0; i < res.data.data.length; i++) {
                        console.log(res.data.data[i]);
                        if (res.data.data[i].processName == '费用结算') {
                            that.activitiesCost=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '地接') {
                            that.activitiesGuide=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '酒店') {
                            that.activitiesHotel=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '机票') {
                            that.activitiesAir=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '商邀') {
                            that.activities=res.data.data[i].nodes;
                        }
                        if (res.data.data[i].processName == '签证') {
                            that.tableData=res.data.data[i].nodes[0].visaSubNodes;
                            that.tableDataobj=res.data.data[i].nodes[1]?res.data.data[i].nodes[1]:that.tableDataobjs;
                            console.log(res.data.data[i]);
                            console.log(that.tableDataobj);
                            
                            that.visaclickid=res.data.data[i].nodes[0].id;
                        }
                    }
                    that.progressloading=false;
                } else {
                    that.activitiesCost=[];
                    that.activitiesGuide=[];
                    that.activitiesHotel=[];
                    that.activitiesAir=[];
                    that.activities=[];
                    that.tableData=[];
                    that.tableDataobj={};
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //签证添加一行
        addRow(text) {
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.tableData.push({
                countryName: '',
                nodeName1: '收集资料',
                isHandle1: false,
                handleTime1: '',
                nodeName2: '取护照资料',
                isHandle2: false,
                handleTime2: '',
                nodeName3: '填资料',
                isHandle3: false,
                handleTime3: '',
                nodeName4: '送签',
                isHandle4: false,
                handleTime4: '',
                nodeName5: '签+取护照',
                isHandle5: false,
                handleTime5: '',
                nodeName6: '归还护照',
                isHandle6: false,
                handleTime6: '',
                returner: ''
            });
        },
        //签证删除一行
        deleteRow(index, rows,text) {
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.$confirm('此操作将该数据移除并未保存,需要更新数据请点击本流程保存按钮, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                rows.splice(index, 1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消！'
                });
            });
            
        },
        //点击确认
        confirmclick(item,text){
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.progressloading=true;
            var url = "/api/Groups/GroupProcessUpdateNodeStatus"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    nodeId:item.id,
                    currUserId: that.userId
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.GroupProcessDetails();
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var hh = date.getHours();
            hh = hh < 10 ? ('0' + hh) : hh;
            var mm = date.getMinutes();
            mm = mm < 10 ? ('0' + mm) : mm;
            var ss = date.getSeconds();
            ss = ss < 10 ? ('0' + ss) : ss;
            let time = y + '-' + m + '-' + d+' '+hh+':'+mm+':'+ss;
            return time
        },
        //更改实际操作时间
        GroupProcessSetActualDone(item,text){
            if (text==undefined) {
                var qxarr=[187]
                if (!qxarr.includes(this.userId)) {
                    item.actualDone='';
                    this.$message({
                        message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                        type: 'warning'
                    });
                    return
                }
            }
            else if (text!=this.jobName) {
                item.actualDone='';
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.progressloading=true;
            var url = "/api/Groups/GroupProcessSetActualDone"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    nodeId:item.id,
                    isAssist:item.isAssist,
                    isFileUp:item.isFileUp,
                    isPart:item.isPart,
                    actualDone:that.disposeTime(item.actualDone),
                    currUserId: that.userId
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.progressloading=false;
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //财务节点点击确认
        financeclick(item){
            var qxarr=[187]
            if (!qxarr.includes(this.userId)) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.progressloading=true;
            var url = "/api/Groups/GroupProcessUpdateNodeStatus"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    nodeId:item.id,
                    currUserId: that.userId
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.GroupProcessDetails();
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        },
        //签证保存
        Visaclick(text){
            if (text!=this.jobName) {
                this.$message({
                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
                    type: 'warning'
                });
                return
            }
            this.progressloading=true;
            var url = "/api/Groups/GroupProcessUpdateVisaNodeDetails"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    nodeId:that.visaclickid,
                    currUserId:that.userId,
                    visaSubNodes:that.tableData,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.GroupProcessDetails();
                }else{
                    that.$message.error(res.data.msg);
                    that.progressloading=false;
                }
            })
        }
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.jobName = JSON.parse(localStorage.getItem('userinif')).userInfo.jobName;
        this.GetGroupNameList();
        // this.GroupProcessDetails();
    }
}
</script>
<style>
    .group-progress{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        min-height: 830px;
        
    }
    .group-progress .el-collapse-item__content,.el-radio__label{
        font-size: 12px;
    }
    .progress-content{
        display: flex;
        justify-content: space-around;
    }
    .progress-content>div{
        font-size: 17px;
        font-weight: bold;
    }
    .progress-table-content{
        text-align: left;
    }
    .progress-content div{
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .process-diagram{
        color: #606266;
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
    }
    /*6*/
    .process-diagram-6{
        width:12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-6::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-6:not(:last-child)::before{
        position: absolute;
        content: '';
        display: block;
        width: 117%;
        height: 2px;
        background-color: #606266;
        left: 53%;
        top: -26px;
        border-radius: 50%;
    }
    .process-diagram-6s{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-6s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-6s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:117%;
        height:2px;
        background-color: #67C23A;
        left:53%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram>div{
        cursor: pointer;
    }
    .process-diagram .el-popover{
        left: 110%;
        top: -7px;
    }

    /*3*/
    .process-diagram-3{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-3::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-3:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:242%;
        height:2px;
        background-color: #606266;
        left:54%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-3s{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-3s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-3s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:242%;
        height:2px;
        background-color: #67C23A;
        left:54%;
        top:-26px;
        border-radius: 50%
    }
    /*5*/
    .process-diagram-5{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-5::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-5:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:142%;
        height:2px;
        background-color: #606266;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-5s{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-5s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-5s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:142%;
        height:2px;
        background-color: #67C23A;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram .el-radio{
        color: #606266;
        text-align: left;
        font-weight: 500;
        line-height: 1;
        width: 44px;
        cursor: pointer;
        white-space: nowrap;
        outline: 0;
        margin-right:0;
    }
    .progress-table-form .el-radio{
        color: #606266;
        text-align: left;
        font-weight: 500;
        line-height: 1;
        width: 44px;
        cursor: pointer;
        white-space: nowrap;
        outline: 0;
        margin-right:0;
    }
    .progress-table-form>div{
        margin-right: 15px;
    }
    .progress-table-form{
        margin-top: 10px;
    }
    /*2*/
    .process-diagram-2{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-2::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-2:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:368%;
        height:2px;
        background-color: #606266;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-2s{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-2s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-2s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:368%;
        height:2px;
        background-color: #67C23A;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    /*4*/
    .process-diagram-4{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-4::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-4:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:180%;
        height:2px;
        background-color: #606266;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-4s{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-4s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-4s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:180%;
        height:2px;
        background-color: #67C23A;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    /*7*/
    .process-diagram-7{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-7::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-7:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:100%;
        height:2px;
        background-color: #606266;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-7s{
        width: 12%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-7s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-7s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:100%;
        height:2px;
        background-color: #67C23A;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    /*8*/
    .process-diagram-8{
        width: 11%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-8::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #606266;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-8:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:93%;
        height:2px;
        background-color: #606266;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .process-diagram-8s{
        width: 11%;
        text-align: center;
        position: relative;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #0005;
    }
    .process-diagram-8s::after{
        position: absolute;
        content:'';
        display: block;
        width:10px;
        height:10px;
        background-color: #67C23A;
        left: 46%;
        top:-30px;
        border-radius: 50%
    }
    .process-diagram-8s:not(:last-child)::before{
        position: absolute;
        content:'';
        display: block;
        width:93%;
        height:2px;
        background-color: #67C23A;
        left:52.5%;
        top:-26px;
        border-radius: 50%
    }
    .progress-table-form{
        display: flex;
        align-items: center;
    }
</style>   