<template>
    <div class="car_add opcar_add">
        <div>
            <div class="communal-title">
                <div>OP费用填写明细</div>
            </div>
        </div>
        <el-popover width="1600" class="oprompts" placement="right" trigger="hover">
            <el-table height="700" :data="budgeting" border>
                <el-table-column width="100" property="date" label="日期"></el-table-column>
                <el-table-column width="70" label="车费用">
                    <template slot-scope="scope">
                        {{ townum(scope.row.carFee) + '\n' + bizhong }}
                    </template>
                </el-table-column>
                <el-table-column width="70" label="车型">
                    <template slot-scope="scope">
                        {{ scope.row.carType }}
                    </template>
                </el-table-column>
                <el-table-column width="70" label="司机工资">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.driverFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="司机小费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.driverTipsFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="司机餐补">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.driverMealSubsidy) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="司机超时费用">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.driverOvertimeFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="导游费用">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="导游超时费用">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideOvertimeFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="导游餐补">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideMealSubsidy) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="导游房补">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideRoomSubsidy) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column property="carType" width="70" label="导游交通费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideCarFare) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="导游景点费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideSpotFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="导游小费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.guideTipsFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="早餐费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.breakfast) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="午餐费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.lunch) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="晚餐费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.dinner) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="门票费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.ticketFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="门票描述">
                    <template slot-scope="scope">
                        {{ scope.row.ticketRemark }}
                    </template>
                </el-table-column>
                <el-table-column width="70" label="零用金">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.spentCash) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="领队费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.leadersFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="会务活动费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.officialActivitiesFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="公务翻译费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.officialTransFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="邀请函费用">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.invitationFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="会务费">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.activitiesFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="饮料零食水果">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.drinksSnacksFruitFee) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="70" label="出行物资">
                    <template slot-scope="scope">
                        <span style="white-space: pre-wrap;text-align: center;">
                            {{ townum(scope.row.travelSupplies) + '\n' + bizhong }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" class="oprompt" slot="reference">移上提示成本</el-button>
        </el-popover>
        <el-skeleton :rows="28" animated :loading="loading">
            <div style="display: flex;">
                <div style="width: 78%;display: flex;">
                    <div style="width: 35%;margin-right: 10px;">
                        <el-select v-model="diId" placeholder="团组选择" clearable filterable style="width: 100%;"
                            :disabled="true">
                            <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="width: 35%;">
                        <el-select v-model="currency" placeholder="币种选择" clearable filterable style="width: 70%;">
                            <el-option v-for="item in currencyList" :key="item.currencyId"
                                :label="item.currencyName + '(' + item.currencyCode + ')'" :value="item.currencyId">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div style="width: 50%;display: flex">
                    <div style="display: flex;justify-content: center;align-items: center">
                        超支币种：
                    </div>

                    <div>
                        <el-select v-model="rate.toCurr" placeholder="币种选择" clearable filterable style="width: 95%;">
                            <el-option v-for="item in currencyList" :key="item.currencyId"
                                :label="item.currencyName + '(' + item.currencyCode + ')'" :value="item.currencyId">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <el-input-number type="text" placeholder="汇率" v-model="rate.rate"
                            :controls="false"></el-input-number>
                    </div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin: 10px 0;" class="checkbox-style">
                <el-checkbox-group v-model="checkList" @change="checkBoxChange">
                    <el-checkbox :class="item.includes('超') ? 'myRedCheckBox' : ''"
                        :style="item.includes('超') ? 'color:red;' : ''" v-for="(item, index) in checkItems" :key="index"
                        :label=item></el-checkbox>
                </el-checkbox-group>
            </div>
            <div style="margin:10px 0;color:#706266;font-size:15px;">
                <span style="font-weight: bold;">团队名称：</span>
                <span style="color:#706266;">{{ delegationInfo.teamName }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;">客户：</span>
                <span style="color:#706266;">{{ delegationInfo.clientName }}&nbsp;&nbsp;&nbsp; </span>
                <span style="font-weight: bold;">出访国家：</span>
                <span style="color:#706266;">{{ delegationInfo.visitCountry }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;">起止日期：</span>
                <span style="color:#706266;">{{ delegationInfo.visitDate }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;">天数/人数：</span>
                <span style="color:#706266;">{{ delegationInfo.visitDays }}天/{{
                    delegationInfo.visitPNumber }}人</span>
            </div>
            <hr style='background-color:#5555; height:1px; border:none;margin: 10px 0px;' />
            <div>
                <template>
                    <el-table :data="ContentList" :border=true style="width: 100%" :span-method="objectSpanMethod">
                        <el-table-column prop="num" label="序 号" width="55">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}

                            </template>
                        </el-table-column>
                        <el-table-column :align="'center'" prop="SIdName" label="费用项目" width="120">
                            <template slot-scope="scope">
                                <span style="display: none;">{{ scope.row.sId }}</span>{{ scope.row.sidName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="datePrice" label="日期" width="170">
                            <template slot-scope="scope">
                                <el-date-picker size="small" style="width: 100%;" v-model="scope.row.datePrice"
                                    type="date" :picker-options="startPickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额/币种" width="400">
                            <template slot-scope="scope">
                                <div class="el-input-number-style pice-ys">
                                    <div v-if="showPopoverIds.includes(scope.row.sId)">
                                        <el-popover placement="top-start" title="三公费用" width="300" trigger="hover">
                                            <span style="color: green;">{{nationalTravelFee ? `一人一顿费用
                                                ${Number(nationalTravelFee.foodCost) / 2}
                                                ${nationalTravelFee.currencyStr} (${(Number(nationalTravelFee.foodCost)
                                                    / 2 / rate.rate).toFixed(2)} ${currencyList.filter(x => x.currencyId ==
                                                        currency)[0].currencyCode})` : '暂无'}}</span>
                                            <el-input-number size="small" placeholder="请输入金额" slot="reference"
                                                v-model="scope.row.price" :controls="false"
                                                @change="PriceChange"></el-input-number>
                                        </el-popover>
                                        <el-select size="small" v-model="currency" placeholder="币种选择" clearable
                                            filterable style="width:120px" :disabled="true">
                                            <el-option v-for="item in currencyList" :key="item.currencyId"
                                                :label="item.currencyCode" :value="item.currencyId">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div v-else>
                                        <el-input-number size="small" placeholder="请输入金额" v-model="scope.row.price"
                                            :controls="false" @change="PriceChange"></el-input-number>
                                        <el-select size="small" v-model="currency" placeholder="币种选择" clearable
                                            filterable style="width:120px" :disabled="true">
                                            <el-option v-for="item in currencyList" :key="item.currencyId"
                                                :label="item.currencyCode" :value="item.currencyId">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="100">
                            <template slot-scope="scope">
                                <!-- <el-input size="small" style="width: 100%;" placeholder="数量" v-model="scope.row.count"
                                    @change="PriceChange">
                                </el-input> -->
                                <div class="el-input-number-style">
                                    <el-input-number size="small" placeholder="数量" v-model="scope.row.count"
                                        style="width: 100%;" :controls="false" @change="PriceChange"></el-input-number>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" width="200">
                            <template slot-scope="scope">
                                <!-- <el-input size="small" style="width: 100%;" placeholder="选择单位" v-model="scope.row.units"
                                    @change="PriceChange"></el-input> -->
                                <el-select size="small" v-model="scope.row.units" filterable placeholder="选择单位">
                                    <el-option v-for="item in unitsArr" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="费用明细">
                            <template slot-scope="scope">
                                <el-input type="textarea" :rows="1" placeholder="费用明细"
                                    v-model="scope.row.priceContent"></el-input>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="备注">
                            <template slot-scope="scope">
                                <el-input type="textarea" :rows="1" placeholder="备注" v-model="scope.row.remark"></el-input>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <hr style='background-color:#5555; height:1px; border:none;margin: 10px 0px;' />
                    <el-form :model="OPContenData" ref="OPContenData" :rules="OPContenDataRules" label-width="100px"
                        class="demo-ruleForm">
                        <div style="display: flex;flex-wrap: wrap;">
                            <div style="width: 390px;">
                                <el-form-item label="此次付款百分比:" prop="payPercentage" label-width="160px">
                                    <el-input placeholder="此次付款百分比" v-model="OPContenData.payPercentage">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width:390px;">
                                <el-form-item label="收款方:" prop="payee" label-width="160px">
                                    <el-input placeholder="收款方" v-model="OPContenData.payee">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
                                    <el-select v-model="OPContenData.orbitalPrivateTransfer" clearable filterable
                                        placeholder="费用标识" style="width: 100%;">
                                        <el-option :key=0 :value="0" label="公转"></el-option>
                                        <el-option :key=1 :value="1" label="私转"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="支付方式:" prop="payDId" label-width="160px">
                                    <el-select v-model="OPContenData.payDId" placeholder="支付方式" clearable filterable
                                        style="width:100%">
                                        <el-option v-for="item in payment" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="消费方式:" prop="consumptionPatterns" label-width="160px">
                                    <el-input placeholder="收款方" v-model="OPContenData.consumptionPatterns">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div v-if="OPContenData.payDId == 72" style="width: 390px;">
                                <el-form-item label="卡类型:" prop="ctdid" label-width="160px">
                                    <el-select v-model="OPContenData.ctdid" clearable filterable placeholder="费用标识"
                                        style="width: 100%;">
                                        <el-option v-for="item in bankCard" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div v-if="OPContenData.payDId == 72" style="width: 390px;">
                                <el-form-item label="银行卡号:" prop="bankNo" label-width="160px">
                                    <el-input placeholder="" v-model="OPContenData.bankNo">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div v-if="OPContenData.payDId == 72" style="width: 390px;">
                                <el-form-item label="持卡人姓名:" prop="cardholderName" label-width="160px">
                                    <el-input placeholder="" v-model="OPContenData.cardholderName">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="消费日期:" prop="consumptionDate" label-width="160px">
                                    <el-date-picker style="width: 100%;" value-format="yyyy-MM-dd"
                                        v-model="OPContenData.consumptionDate" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="公司银行账号:" prop="companyBankNo" label-width="160px">
                                    <el-input placeholder="" v-model="OPContenData.companyBankNo">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
                                    <el-input placeholder="" v-model="OPContenData.otherBankName">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
                                    <el-input placeholder="" v-model="OPContenData.otherSideNo">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 390px;">
                                <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
                                    <el-input placeholder="" v-model="OPContenData.otherSideName">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 390px">
                                <el-form-item label="总金额:" label-width="160px">
                                    <el-input placeholder="金额" v-model="countCost" :disabled="true"
                                        style="width: 120px;"></el-input>
                                    <el-select v-model="currency" placeholder="币种选择" clearable filterable
                                        style="width:100px" :disabled="true">
                                        <el-option v-for="item in currencyList" :key="item.currencyId"
                                            :label="item.currencyCode" :value="item.currencyId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                        <div style="width: 100%;text-align: right;">
                            <el-form-item>
                                <el-button type="primary" @click="addBtn" :disabled="saveDisabled">保存</el-button>
                                <el-button @click="EscAdd">取消</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </template>
            </div>
        </el-skeleton>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bizhong: '',
            startPickerOptions: {
            },
            pageId: '',
            token: '',
            cTable: '',
            userId: 0,
            id: '',
            diId: '',
            loading: true,
            currency: 0,
            countCost: 0, //总金额
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            currencyList: [],
            payment: [],
            IsAuditGM: 0,
            ContentList: [],
            OPContenData: {
                diId: '',
                cTGGRId: '',
                orbitalPrivateTransfer: 0,
                payPercentage: '80',
                payee: '',
                payDId: '',
                currency: '',
                OPContentList: [],
                CreateUserId: 0,
                consumptionPatterns: '', //消费方式
                ctdid: 0,//卡类型
                bankNo: '', //银行卡号
                cardholderName: '',//持卡人姓名
                consumptionDate: '',//消费日期
                companyBankNo: '',//公司银行账号
                otherBankName: '',//对方开户行
                otherSideNo: '',//对方银行卡号
                otherSideName: ''//对方姓名

            },
            OPContenDataRules: {
                payPercentage: [
                    { required: true, message: '请输入付款百分比', trigger: ['blur', 'change'] },
                ],
                orbitalPrivateTransfer: [
                    { required: true, message: '请选择费用标识', trigger: ['blur', 'change'] },
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
                ],
                payDId: [
                    { required: true, message: '请选择付款方式', trigger: ['blur', 'change'] },
                ],
                //------------------------
                // ctdId: [
                //     { required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },
                // ],
                // companyBankNo: [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },],
                // otherBankName: [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },],
                // otherSideNo: [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },],
                // otherSideName: [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },],
            },
            unitsArr: [{ id: 0, name: '请选择', remark: '' }],
            checkItems: ["车费", "导游费", "客户午餐费用", "导游景点费", "导游小费", "接送机费", "其他费用", "司机工资", "司机小费", "司机餐补", "车超时费", "导游餐补", "导游房补", "导游交通", "客户早餐费用", "客户晚餐费用", "景点门票费", "饮料/零食/水果", "住补费用", "翻译费", '导游超时费用'],
            checkList: [],
            sourceList: [],
            ListCount: 1,
            budgeting: [],
            saveDisabled: false,
            nationalTravelFee: null,
            showPopoverIds: [989, 93, 988],
            rate: {
                toCurr: 836,
                rate: 1
            },
            bankCard: [],//卡类型下拉框
        }
    },
    methods: {
        //保留两位小数
        townum(val) {
            if (val == 0.00) {
                return '--'
            } else {
                return val.toFixed(2)
            }
        },
        //获取成本提示
        getcostbudgeting() {
            this.budgeting = [];
            this.bizhong = '';
            var url = "/api/Groups/PostGroupCostModulePrompt"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    diId: that.diId,
                    cTable: that.cTable,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.budgeting = res.data.data.modulePromptInfos[0].data;
                    that.bizhong = res.data.data.modulePromptInfos[0].currencyCode;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //初始化下拉框
        initializeSelect() {
            //团组下拉框绑定
            var url = "/api/Groups/CarTouristGuideGroundContentInitialize"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                    id: that.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    //console.log(res)
                    that.delegationInfoList = res.data.data.delegations;
                    for (let index = 0; index < that.delegationInfoList.length; index++) {
                        if (that.delegationInfoList[index].id == that.diId) {
                            that.delegationInfo = that.delegationInfoList[index];
                            break;
                        }
                    }

                    //that.ContentList = res.data.data.carTouristGuides;
                    that.sourceList = res.data.data.carTouristGuides;
                    that.payment = res.data.data.payment;

                    var CreditCardPayment = res.data.data.creditCardPayment;
                    if (CreditCardPayment) {
                        that.OPContenData.payDId = CreditCardPayment.payDId
                        that.OPContenData.payee = CreditCardPayment.payee
                        that.currency = CreditCardPayment.paymentCurrency
                        that.OPContenData.payPercentage = CreditCardPayment.payPercentage
                        that.countCost = CreditCardPayment.payMoney
                        that.OPContenData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer
                        that.IsAuditGM = CreditCardPayment.isAuditGM;

                        //-------------------------------
                        that.OPContenData.consumptionPatterns = CreditCardPayment.consumptionPatterns;
                        that.OPContenData.ctdid = CreditCardPayment.ctdid;
                        that.OPContenData.bankNo = CreditCardPayment.bankNo;
                        that.OPContenData.cardholderName = CreditCardPayment.cardholderName;
                        that.OPContenData.consumptionDate = CreditCardPayment.consumptionDate;
                        that.OPContenData.companyBankNo = CreditCardPayment.companyBankNo;
                        that.OPContenData.otherBankName = CreditCardPayment.otherBankName;
                        that.OPContenData.otherSideNo = CreditCardPayment.otherSideNo;
                        that.OPContenData.otherSideName = CreditCardPayment.otherSideName;
                    }

                    that.unitsArr = that.unitsArr.concat(res.data.data.ssdv);

                    var start = new Date(res.data.data.start).getTime();
                    var end = new Date(res.data.data.end).getTime();
                    that.checkItems = res.data.data.existItem;

                    that.startPickerOptions.disabledDate = (time) => {
                        return time.getTime() < start || time.getTime() > end;
                    }

                    that.checkList = res.data.data.checkedItem;
                    that.checkBoxChange();

                    //that.OpCarTouristGuideGroundContenById()
                    that.nationalTravelFee = res.data.data.nationalTravelFee;
                    that.rate = res.data.data.rate;

                    if (that.rate.rate == 0 && that.rate.toCurr == 0) {
                        that.rate.rate = 1;
                        that.rate.toCurr = that.nationalTravelFee.currency;
                    }

                    that.bankCard = res.data.data.bankCard;

                    if (!that.OPContenData.ctdid && that.bankCard.length > 0) {
                        that.OPContenData.ctdid = that.bankCard[0].id;
                    }

                } else {
                    this.$message.error('初始化失败' + res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("网络错误，请刷新重试!");
            }).finally(() => {
                that.loading = false;
            })
        },
        //获取ctable
        PostPageLinkCTable() {
            var url = "/api/Business/PostPageLinkCTable"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    pageId: that.pageId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.cTable = res.data.data.cTable
                    that.PostGroupTeamRateByDiIdAndCTableId();
                    that.getcostbudgeting();
                }
            })
        },
        //获取团组币种
        PostGroupTeamRateByDiIdAndCTableId() {
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    diId: that.diId,
                    cTable: that.cTable,
                }
            }).then(function (res) {
                //console.log(res)
                if (res.data.code == 200) {
                    that.currencyList = res.data.data.teamRates;
                    if (that.currency == 0) {
                        that.currency = that.currencyList[0].currencyId;
                    }
                }
            })
        },
        // OpCarTouristGuideGroundContenById() {
        //     var url = "/api/Groups/OpCarTouristGuideGroundContentById"
        //     var that = this
        //     this.$axios({
        //         method: 'post',
        //         url: url,
        //         headers: {
        //             Authorization: 'Bearer ' + this.token
        //         },
        //         data: {
        //             id: that.id
        //         }
        //     }).then(function (res) {
        //         if (res.data.code == 200) {

        //             var CarTouristsContent = res.data.data.carTouristsContent;
        //             if (CarTouristsContent.length != 0) {
        //                 CarTouristsContent.forEach(function (item) {
        //                     that.ContentList.forEach(function (item1) {
        //                         if (item.sId == item1.sId) {
        //                             item1.id = item.id
        //                             item1.price = item.price
        //                             item1.priceContent = item.priceContent
        //                             //item1.remark = item.remark
        //                         }

        //                     })
        //                 })
        //             }

        //             that.loading = false
        //         }
        //     })
        // },
        addBtn() {

            if (this.IsAuditGM == 1 || this.IsAuditGM == 3) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (!this.diId) {
                    this.$message.error("请选择团组!");
                    return;
                } else {

                    if (!this.currency) {
                        this.$message.error("请选择币种!");
                        return;
                    }

                    var that = this
                    that.$refs.OPContenData.validate((valid) => {
                        if (valid) {
                            that.OPContenData.diId = that.diId;
                            that.OPContenData.cTGGRId = that.id;
                            that.OPContenData.currency = that.currency;
                            that.OPContenData.CreateUserId = that.userId;
                            that.OPContenData.selectCheck = that.checkList;
                            that.OPContenData.OPContentList = [];
                            that.ContentList.forEach(function (item) {
                                that.OPContenData.OPContentList.push({
                                    id: item.id,
                                    sId: item.sId,
                                    price: item.price,
                                    priceContent: item.priceContent,
                                    datePrice: item.datePrice,
                                    count: item.count,
                                    units: item.units,
                                    //remark: item.remark,
                                })
                            })
                            that.OPContenData.rate = that.rate.rate;
                            that.OPContenData.toCurr = that.rate.toCurr

                            this.saveDisabled = true;
                            var url = "/api/Groups/OpCarTouristGuideGroundContent"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                data: that.OPContenData
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    that.EscAdd();
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            }).finally(() => {
                                that.saveDisabled = false;
                            });

                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },
        EscAdd() {
            this.$router.push({
                path: "/home/CarTouristGuideGroundId",
                query: {
                    diId: this.diId
                }
            })
        },
        PriceChange() {
            var countCost = 0;
            var excludeList = [];//[1452];
            this.ContentList.forEach(function (item) {
                if (item.price && excludeList.indexOf(item.sId) == -1) {
                    countCost += Number(item.price) * Number(item.count)
                }
            })

            this.countCost = countCost.toFixed(2);
        },
        checkBoxChange() {
            this.ContentList = [];
            for (var soure = 0; soure < this.sourceList.length; soure++) {
                for (var item = 0; item < this.checkList.length; item++) {
                    if (this.sourceList[soure].sidName == this.checkList[item]) {
                        this.ContentList.push(this.sourceList[soure]);
                    }
                }
            }
            this.PriceChange();
            var count = 1;
            if (this.ContentList.length > 0) {
                var sid = this.ContentList[0].sId;
                count = this.ContentList.filter(x => x.sId == sid).length;
            }
            this.ListCount = count;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {

                if (row.sId == 1070 || row.sId == 1071) {
                    return {
                        rowspan: 1,
                        colspan: 1
                    };
                }

                if (rowIndex % this.ListCount === 0) {
                    return {
                        rowspan: this.ListCount,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }
    },

    mounted() {
        this.pageId = localStorage.getItem('indexs').split('-')[1];
        //console.log(this.pageId)
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.id = this.$route.query.id
        this.diId = parseInt(this.$route.query.diId)
        this.PostPageLinkCTable();
        this.initializeSelect();
        //this.OpCarTouristGuideGroundContenById();

    }
}
</script>
<style>
.car_add {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 700px;
}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.el-input-number-style .el-input input {
    text-align: left;
}

.pice-ys .el-input-number {
    width: 250px;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 270px !important;
    }
}

.checkbox-style .el-checkbox {
    width: 120px;
    margin: 10px 10px;
}

.opcar_add {
    position: relative;
}

.oprompt {
    position: fixed;
    top: 150px;
    right: 57px;
    z-index: 2;
}

.oprompts .el-button--primary {
    color: #FFF;
    background-color: #007dff;
    border-color: #007dff;
}

/* 设置带边框的checkbox，选中后边框的颜色 */
.myRedCheckBox.is-bordered.is-checked {
    border-color: #FF0000;
}

/* 设置选中后的文字颜色 */
.myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #FF0000;
}

/* 设置选中后对勾框的边框和背景颜色 */
.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #FF0000;
    background-color: #FF0000;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #FF0000;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover {
    border-color: #FF0000;
}
</style>