<template>
    <div v-loading="loading">
        <!-- 订单详情 -->
        <div v-show="!showSelectClient">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20">
                        <div class="flex-between">
                            <div class="per_title" v-preventReClick @click="goBack()">
                                <i class="el-icon-arrow-left"></i>
                                <span class="per_back">返回</span>
                                <span class="per_school">{{ titlesw }}</span>
                            </div>
                            <el-button v-if="!viewDisabled" type="primary" round class="mag" v-preventReClick
                                       @click="submitOrder">确定
                            </el-button>
                        </div>
                    </el-card>

                    <el-card shadow="hover" class="mgb20">
                        <div>
                            <div class="flex-center mgb20 user_header">
                                <p class="addhr_tag"></p>
                                <span>基本信息</span>
                            </div>
                            <div>
                                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                                    <el-col :span="6" :offset="5">
                                        <el-form-item label="订单编号">
                                            <el-input v-model="form.orderNumber" disabled placeholder="自动生成"></el-input>
                                        </el-form-item>
                                        <el-form-item label="订单时间" prop="createTime">
                                            <el-date-picker
                                                disabled
                                                style="width:100%"
                                                v-model="form.createTime"
                                                type="date"
                                                placeholder="自动生成">
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="省份">
                                            <el-select disabled v-model="form.provinceId" clearable placeholder="请选择省份"
                                                       @change="getCity" @clear="clearprovince()">
                                                <el-option v-for="(item,index) in provinceList" :key="index"
                                                           :label="item.provinceName"
                                                           :value="item.provinceId"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="联系人">
                                            <el-input disabled v-model="form.orderContact"
                                                      placeholder="请输入联系人姓名"></el-input>
                                        </el-form-item>
                                        <el-form-item label="邮箱">
                                            <el-input disabled v-model="form.email" placeholder="请输入邮箱地址"></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6" :offset="2">
                                        <el-form-item prop="customerName" label="订单客户">
                                            <div v-if="!viewDisabled&&!editDisabled&&!renewDisabled" @click="gotoClient"
                                                 style="cursor: pointer">
                                                <el-input v-model="form.customerName" placeholder="请选择客户"></el-input>
                                            </div>
                                            <el-input v-if="viewDisabled||editDisabled||renewDisabled" disabled
                                                      v-model="form.customerName" placeholder="请选择客户"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="orderType" label="订单类型">
                                            <el-select :disabled="viewDisabled || renewDisabled"
                                                       v-model="form.orderType" clearable placeholder="请选择订单类型">
                                                <el-option v-for="(item,index) in orderTypeList" :key="index"
                                                           :label="item.name" :value="item.value"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="城市">
                                            <el-select disabled v-model="form.cityId" placeholder="请选择">
                                                <el-option
                                                    v-for="(item,index) in cityList"
                                                    :key="index"
                                                    :label="item.cityName"
                                                    :value="item.cityId">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="电话">
                                            <el-input disabled v-model="form.phone" placeholder="请输入电话号码"
                                                      maxlength="11"></el-input>
                                        </el-form-item>
                                        <el-form-item label="订单金额(元)" prop="orderAmount">
                                            <el-input disabled
                                                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                                      type="number" v-model="form.orderAmount"
                                                      placeholder="请输入订单金额"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                    <!-- 课程 -->
                    <el-card shadow="hover" class="mgb20">
                        <div>
                            <div class="flex-between mgb20 user_header">
                                <div class="flex-center">
                                    <p class="addhr_tag"></p>
                                    <span>课程权限</span>
                                </div>
                                <el-button v-if="!viewDisabled&&!editDisabled&&!renewDisabled" type="primary" round
                                           class="mag"
                                           @click="addCourseJurisdiction()">添加
                                </el-button>
                            </div>

                            <el-table :data="coursePermissions" class="orderTable" stripe header-align="center">
                                <el-table-column type="index" width="60" label="序号" align="center">
                                </el-table-column>
                                <el-table-column prop="productName" label="课程名称" align="center" min-width="150" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="使用期限" align="center" min-width="190">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input
                                                class="time-input"
                                                      :class="!scope.row.periodOfUse&&whetherSubmit?'red':''"
                                                      :disabled="viewDisabled||editDisabled" maxlength="4"
                                                      @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options, 1)"
                                                      @input="scope.row.periodOfUse = scope.row.periodOfUse.replace(/[^0-9.]/g,'')"
                                                      v-model="scope.row.periodOfUse" placeholder="输入时间"></el-input>
                                                <el-select class="time-select" v-model="scope.row.options" :disabled="viewDisabled||editDisabled" placeholder="请选择" @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options, 1)">
                                                    <el-option label="日" :value="0"></el-option>
                                                    <el-option label="月" :value="1"></el-option>
                                                    <el-option label="年" :value="2"></el-option>
                                                </el-select>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="起止日期" align="center" min-width="240">
                                    <template slot-scope="scope">
                                        <p v-if="!scope.row.startTime">
                                            <el-date-picker
                                                :class="orderRepeat.includes(scope.row.dataOrCourseId) ? 'red' : ''"
                                                style="width:130px"
                                                v-model="scope.row.startTime"
                                                type="date" :disabled="viewDisabled||editDisabled"
                                                @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options, 1)"
                                                placeholder="请选择使用日期">
                                            </el-date-picker>
                                        </p>
                                        <p v-else>
                                            <el-date-picker
                                                :class="orderRepeat.includes(scope.row.dataOrCourseId) ? 'red' : ''"
                                                style="width:130px"
                                                v-model="scope.row.startTime"
                                                type="date" :disabled="viewDisabled||editDisabled"
                                                @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options, 1)"
                                                placeholder="请选择使用日期">
                                            </el-date-picker>
                                            <span v-if="scope.row.startTime"><span v-if='scope.row.endTime'> - </span>{{ scope.row.endTime }}</span></p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="剩余期限" align="center" min-width="110">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input disabled v-model="scope.row.remainingPeriod" placeholder=""
                                                      type="text"></el-input>
                                            <span style="margin-left:5px">天</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="市场价" align="center" min-width="110">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input disabled v-model="scope.row.marketValue" placeholder=""
                                                      type="text"></el-input>
                                            <span style="margin-left:5px">万</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="成交价" align="center" min-width="130">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input :class="scope.row.finalPrice === '' && whetherSubmit?'red':''"
                                                      :disabled="viewDisabled"
                                                      @input="scope.row.finalPrice = scope.row.finalPrice.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                                      @change="[allAmount($event,scope.row),calculateDiscount($event,scope.row)]"
                                                      v-model="scope.row.finalPrice"
                                                      type="text"></el-input>
                                            <span style="margin-left:5px">万</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="折扣率 " align="center" min-width="100">
                                    <template slot-scope="scope">
                                            <el-input disabled v-model="scope.row.discountRate" placeholder=""
                                                      type="text" size="small" style="width: 100%"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="端口地址 " align="center" min-width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="configure(scope.row)">配置</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" width="180">
                                    <template slot-scope="scope">
                                        <div class="flex-c-c">
                                            <el-button
                                                v-if="!editDisabled&&!viewDisabled"
                                                type="text"
                                                @click="delCourseForm(scope.$index)"
                                                style="margin-right:10px;"
                                            >删除</el-button>
                                            <el-switch
                                                style="margin-right:10px;"
                                                v-if='dispose || (!editDisabled&&!viewDisabled)'
                                                v-model="scope.row.ship"
                                                :active-value="1"
                                                :inactive-value="0"
                                                :active-text="scope.row.ship ? '已发货' : '未发货'"
                                                @change="handleDeliver($event,scope.row)">
                                            </el-switch>
                                            <el-switch
                                                v-show="scope.row.ship && editDisabled && !dispose"
                                                :disabled="viewDisabled"
                                                v-model="scope.row.isEnable"
                                                :active-value="1"
                                                :inactive-value="0"
                                                :active-text="scope.row.isEnable ? '启用' : '禁用'"
                                                @change="handleEnable($event,scope.row)">
                                            </el-switch>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>

                    <!-- 数据平台权限 -->
                    <el-card shadow="hover" class="mgb20">
                        <div>
                            <div class="flex-between mgb20 user_header">
                                <div class="flex-center">
                                    <p class="addhr_tag"></p>
                                    <span>数据平台权限</span>
                                </div>
                                <el-button v-if="!viewDisabled&&!editDisabled&&!renewDisabled" type="primary"
                                           round class="mag" @click="addDataJurisdiction()">添加
                                </el-button>
                            </div>

                            <!--:summary-method="getSummaries"-->
                            <el-table :data="dataPlatformPermissions" class="orderTable orderTables" stripe header-align="center">
                                <el-table-column type="index" width="60" label="序号" align="center">
                                </el-table-column>
                                <el-table-column prop="productName" label="产品名称" align="center" min-width="100">
                                </el-table-column>
                                <el-table-column label="使用期限" align="center" min-width="190">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input
                                              class="time-input"
                                              :class="!scope.row.periodOfUse&&whetherSubmit?'red':''"
                                              :disabled="viewDisabled||editDisabled" maxlength="4"
                                              @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options)"
                                              @input="scope.row.periodOfUse = scope.row.periodOfUse.replace(/[^0-9.]/g,'')"
                                              v-model="scope.row.periodOfUse" placeholder="输入时间"></el-input>
                                            <span style="margin-left:5px">
                                                <el-select class="time-select" v-model="scope.row.options" :disabled="viewDisabled||editDisabled" placeholder="请选择" @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options)">
                                                    <el-option label="日" :value="0"></el-option>
                                                    <el-option label="月" :value="1"></el-option>
                                                    <el-option label="年" :value="2"></el-option>
                                                </el-select>
                                            </span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="起止日期" align="center" min-width="240">
                                    <template slot-scope="scope">
                                        <p v-if="!scope.row.startTime">
                                            <el-date-picker
                                                :class="orderRepeat.includes(scope.row.dataOrCourseId) ? 'red' : ''"
                                                style="width:130px"
                                                v-model="scope.row.startTime"
                                                type="date" :disabled="viewDisabled||editDisabled"
                                                @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options, 1)"
                                                placeholder="请选择使用日期">
                                            </el-date-picker>
                                        </p>
                                        <p v-else>
                                            <el-date-picker
                                                :class="orderRepeat.includes(scope.row.dataOrCourseId) ? 'red' : ''"
                                                style="width:130px"
                                                v-model="scope.row.startTime"
                                                type="date" :disabled="viewDisabled||editDisabled"
                                                @change="deadLine(scope.row.periodOfUse,scope.row,scope.row.options, 1)"
                                                placeholder="请选择使用日期">
                                            </el-date-picker>
                                            <span v-if="scope.row.startTime"><span v-if='scope.row.endTime'> - </span>{{ scope.row.endTime }}</span></p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="剩余期限" align="center" min-width="120">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input disabled v-model="scope.row.remainingPeriod" placeholder=""
                                                      type="text"></el-input>
                                            <span style="margin-left:5px">天</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="市场价" align="center" min-width="160">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input disabled v-model="scope.row.marketValue" placeholder=""
                                                      type="text"></el-input>
                                            <span style="margin-left:5px">元&nbsp;/&nbsp;账号</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="成交价" align="center" min-width="170">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input :class="scope.row.finalPrice === '' && whetherSubmit?'red':''"
                                                      :disabled="viewDisabled"
                                                      @input="scope.row.finalPrice = scope.row.finalPrice.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                                      @change="[dealComputers($event,scope.row),calculateDiscount($event,scope.row),userAmount($event,scope.row)]"
                                                      v-model="scope.row.finalPrice"
                                                      type="text"></el-input>
                                            <span style="margin-left:5px">元&nbsp;/&nbsp; 账号</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="折扣率" align="center" min-width="140">
                                    <template slot-scope="scope">
                                        <!-- <div class="discountRate"> -->
                                        <div class="small">
                                            <el-input disabled v-model="scope.row.discountRate" placeholder=""
                                                      type="text"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="账号数" align="center" min-width="120">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input :class="!scope.row.accountNum&&whetherSubmit?'red':''"
                                                      :disabled="viewDisabled"
                                                      @input="scope.row.accountNum = scope.row.accountNum.replace(/[^0-9.]/g,'')"
                                                      v-model="scope.row.accountNum"
                                                      @change="[dealComputers($event,scope.row),dealBargain($event,scope.row),calculateDiscount($event,scope.row)]"
                                                      type="text"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <!-- 金额自动计算，计算方式：账号数*成交价，且可以手动修改，保留两位小数 -->
                                <el-table-column label="总金额(元)" align="center" min-width="180">
                                    <template slot-scope="scope">
                                        <div class="small">
                                            <el-input :class="scope.row.totalAmount === '' && whetherSubmit?'red':''"
                                                      :disabled="viewDisabled||editDisabled"
                                                      @blur="[allAmount($event,scope.row),allAmountChange($event,scope.row),calculateDiscount($event,scope.row)]"
                                                      @input="scope.row.totalAmount = scope.row.totalAmount.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                                      v-model="scope.row.totalAmount"
                                                      type="text"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" width="180">
                                    <template slot-scope="scope">
                                        <div class="flex-c-c">
                                            <el-button
                                                v-if="!editDisabled&&!viewDisabled"
                                                type="text"
                                                @click="delDataForm(scope.$index)"
                                                style="margin-right:10px;"
                                            >删除</el-button>
                                            <el-switch
                                                style="margin-right:10px;"
                                                v-if='dispose || (!editDisabled&&!viewDisabled)'
                                                v-model="scope.row.ship"
                                                :active-value="1"
                                                :inactive-value="0"
                                                :active-text="scope.row.ship ? '已发货' : '未发货'"
                                                @change="handleDeliver($event,scope.row)">
                                            </el-switch>
                                            <el-switch
                                                v-show="scope.row.ship && editDisabled && !dispose"
                                                :disabled="viewDisabled"
                                                v-model="scope.row.isEnable"
                                                :active-value="1"
                                                :inactive-value="0"
                                                :active-text="scope.row.isEnable ? '启用' : '禁用'"
                                                @change="handleEnable($event,scope.row)">
                                            </el-switch>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                    <!-- 合同 -->
                    <el-card shadow="hover" class="mgb20">
                        <div>
                            <div class="flex-center mgb20 user_header">
                                <p class="addhr_tag"></p>
                                <span>合同信息</span>
                            </div>
                            <div>
                                <el-form :disabled="viewDisabled" ref="contract" :model="contract" :rules="rules"
                                         label-width="80px">
                                    <el-col :span="8" :offset="4">
                                        <el-form-item label="合同名称">
                                            <el-input v-model="contract.contractName" placeholder="请输入合同名称"></el-input>
                                        </el-form-item>

                                        <el-form-item label="合同金额" prop="contractInformationSum">
                                            <el-input oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                                      v-model="contract.contractMoney" placeholder="请输入合同金额"></el-input>
                                        </el-form-item>
                                    </el-col>


                                    <el-col :span="8" :offset="2">
                                        <el-form-item label="合同编号">
                                            <el-input v-model="contract.contractNumber"
                                                      placeholder="请输入合同编号"></el-input>
                                        </el-form-item>
                                        <el-form-item label="合同期限">
                                            <div class="contractDate">
                                                <el-date-picker
                                                    v-model="contractTime"
                                                    style="wifth:100%"
                                                    type="daterange"
                                                    value-format="yyyy-MM-dd"
                                                    @change="contractTimeChange"
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期">
                                                </el-date-picker>
                                            </div>
                                        </el-form-item>

                                    </el-col>
                                    <el-col :span="24" :offset="4" class="flex-start">
                                        <el-form-item label="上传合同">
                                            <el-upload
                                                class="contract"
                                                :headers="{token}"
                                                :on-remove="handleRemove"
                                                :on-error="uploadError"
                                                :on-success="uploadSuccess"
                                                :before-upload="beforeAvatarUpload"
                                                :before-remove="beforeRemove"
                                                :limit="1"
                                                :on-exceed="handleExceed"
                                                :action="api.fileupload"
                                                :file-list="uploadList"
                                            >
                                                <el-button size="medium" type="plain" class="uploadTitle">上传</el-button>
                                            </el-upload>
                                        </el-form-item>
                                        <!-- <el-form-item>
                                            <el-button size="medium" type="plain" style="height:40px">重新上传</el-button>
                                        </el-form-item>                   -->
                                    </el-col>
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 添加课程权限弹框-->
            <el-dialog :visible.sync="courseVisible" width="50%" center :close-on-click-modal="false" @close="closeJCourse">
                <div class="flex-between mgb20">
                    <div class="flex-center">
                        <p class="addhr_tag"></p>
                        <span>课程列表</span>
                    </div>
                    <div>
                        <el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model.trim="curriculumName" clearable></el-input>
                    </div>
                </div>
                <el-table v-loading="dataLoading" :data="courseList" stripe header-align="center"
                          @selection-change="handleSelectionChange" row-key="cid">
                    <el-table-column type="selection" :selectable="courseSelectable" width="55"
                                     align="center"></el-table-column>
                    <el-table-column type="index" width="100" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="curriculumName" label="课程名称" align="center">
                    </el-table-column>
                    <el-table-column label="课程类型" align="center">
                        <template slot-scope="scope">
                            <span>{{ curriculumTypeKeys[scope.row.curriculumType] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="配置的实训应用" align="center">
                        <template slot-scope="scope">
                            <span class="ellipsis">{{ scope.row.sysName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expectedCourse" label="预计课时" align="center">
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background layout="total, prev, pager, next" :total="courseTotals"
                                   @current-change="handleCurrentChange" :current-page="coursePage">
                    </el-pagination>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeJCourse">取 消</el-button>
                    <el-button type="primary" v-preventReClick @click="addCourse">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 添加数据平台权限弹框 -->
            <el-dialog :visible.sync="showPlatform" width="50%" center>
                <div class="flex-between mgb20">
                    <div class="flex-center">
                        <p class="addhr_tag"></p>
                        <span>数据产品列表</span>
                    </div>
                    <div>
                        <el-input placeholder="请输入产品名称" prefix-icon="el-icon-search" v-model="productName" clearable></el-input>
                    </div>
                </div>
                <el-table v-loading="dataLoading" :data="platformList" stripe header-align="center"
                          @selection-change="dataPlatformSelection" row-key="id">
                    <el-table-column type="selection" :selectable="dataSelectable" width="55"
                                     align="center"></el-table-column>
                    <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                    <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
                    <el-table-column prop="tableNum" label="数据量（表）" align="center"></el-table-column>
                    <el-table-column prop="userName" label="创建人" align="center"></el-table-column>
                    <el-table-column prop="orderNum" label="订单数量" align="center"></el-table-column>
                    <el-table-column prop="market" label="市场价" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                    <!-- <el-table-column prop="orderNature" label="状态" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.status ? '上架' : '下架'}}</p>
                        </template>
                    </el-table-column> -->
                </el-table>
                <div class="pagination">
                    <el-pagination background layout="total, prev, pager, next" :total="platfromTotals"
                                   @current-change="platfromCurrentChange" :current-page="platfromPage">
                    </el-pagination>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showPlatform = false">取 消</el-button>
                    <el-button type="primary" v-preventReClick @click="addPlatform()">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 选择IP -->
            <el-dialog :visible.sync="ipVisible" width="70%" center>
                <div class="flex-center mgb20">
                    <p class="hr_tag"></p>
                    <span>地址列表</span>
                </div>
                <el-table :data="IPData" stripe header-align="center">
                    <el-table-column type="index" width="100" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="age" label="服务器名称" align="center">
                    </el-table-column>
                    <el-table-column label="IP" align="center">
                        <template slot-scope="scope">
                            <div class="tab_temp">
                                <div class="flex-center">
                                    <label>内网:</label>
                                    <el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input>
                                </div>
                                <div class="flex-center mar10">
                                    <label>外网:</label>
                                    <el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="端口" align="center">
                        <template slot-scope="scope">
                            <div class="tab_temp">
                                <div class="flex-center">
                                    <label>内网:</label>
                                    <el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input>
                                </div>
                                <div class="flex-center mar10">
                                    <label>外网:</label>
                                    <el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="选择" align="center">
                        <template slot-scope="scope">
                            <i class="el-icon-success radio_icon"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="ipVisible = false">取 消</el-button>
                    <el-button type="primary" @click="IPSure()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <!-- 选择客户 -->
        <select-client @back="backToOrder" v-show="showSelectClient" :refresh="showSelectClient"></select-client>
    </div>
</template>

<script>
import selectClient from "./selectClient.vue";

export default {
    components: {
        selectClient
    },
    data() {
        return {
            loading: false,// 页面加载
            isAdd: false, // 是否添加
            viewDisabled: false,// 查看禁用
            editDisabled: false,// 编辑禁用
            renewDisabled: false,// 续费禁用
            dataLoading: false,// 产品弹框加载
            whetherSubmit: false,/* 提交否 */
            dispose:false,
            showSelectClient: false,// 切换展示选择客户页
            form: {// 基本信息
                // orderNumber: '',// 编号
                provinceId: "",// 省份id
                orderContact: "",// 联系人
                email: "",
                customerId: "",// 客户id
                orderType: "",
                cityId: "",
                phone: "",
                orderAmount: 0,
                // orderId: this.$store.state.orderId,
                customerName: ""// 客户名称
            },
            coursePermissions: [],// 课程权限
            dataPlatformPermissions: [],// 数据平台权限
            contract: { // 合同信息
                contractName: "",   // 合同名称
                contractFile: "",  // 合同文件
                contractMoney: "", // 合同金额
                contractNumber: "",// 合同编号
                startTime: "",     // 期限-头
                endTime: ""       // 期限-尾
                // orderId: '',       // 绑定订单id
            },
            value1:'',
            contractTime: [],// 合同起止日期绑定值
            token: "",
            orderOther: {// 订单其他数据
            },
            uploadList: [],
            rules: {
                orderNumber: [
                    { required: true, message: "请输入订单编号", trigger: "blur" }
                ],
                customerName: [
                    { required: true, message: "请选择订单客户", trigger: "change" }
                ],
                orderContact: [
                    { required: true, message: "请输入联系人姓名", trigger: "blur" }
                ],
                orderType: [
                    { required: true, message: "请选择订单类型", trigger: "change" }
                ],
                phone: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    {
                        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur"
                    }
                ],
                email: [
                    { required: true, message: "请输入邮箱地址", trigger: "blur" },
                    {
                        pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                        message: "请输入正确的邮箱",
                        trigger: "blur"
                    }
                ],
                orderAmount: [
                    // { pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
                    { required: true, message: "请输入订单金额", trigger: "blur" }
                    // { pattern: /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/, message: '请输入正确金额格式,可保留两位小数', trigger: 'blur'}
                ]
            },
            orderTypeList: [{
                name: "正式",
                value: 1
            },
                {
                    name: "试用",
                    value: 2
                }],
            provinceList: this.$store.state.provinceList,
            cityList: [],
            schoolList: [],
            yearList: [
                { name: "1个月", value: 30 },
                { name: "2个月", value: 60 },
                { name: "3个月", value: 90 },
                { name: "1年", value: 365 },
                { name: "2年", value: 730 },
                { name: "3年", value: 1095 }
            ],
            // 课程权限弹框
            courseVisible: false,
            courseTotals: 0,
            coursePage: 1,
            courseList: [],
            courseSelection: [],
            curriculumName: "",
            curriculumTypeKeys: {
                0: "理论",
                1: "实训"
            }, // 课程类别
            ipVisible: false,
            IPData: [
                {
                    id: 1,
                    age: "小额贷系统",
                    storeName: "1个月",
                    total: "2019.01.02 11:00",
                    payamount: "2019.01.02 11:00",
                    swtich: true,
                    Intranet: "10.20.202.1",
                    extranet: "10.20.202.1"
                },
                {
                    id: 2,
                    age: "小额贷系统",
                    storeName: "1个月",
                    total: "2019.01.02 11:00",
                    payamount: "2019.01.02 11:00",
                    swtich: true,
                    Intranet: "",
                    extranet: ""
                }
            ],
            curArr: "",
            test: [],
            // 数据平台权限弹框
            showPlatform: false,// 弹框显示
            platfromTotals: 0,// 列表条目
            platfromPage: 1,// 页码
            platformList: [],// 数据平台列表
            platformSelect: [],// 数据平台弹框选中
            productName: "",// 搜索产品名称
            searchTimer: null,
            titlesw:'',
            orderRepeat: [],
            repeatMsg: ''
        };
    },
    watch: {
        curriculumName(n) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.getCourseJurisdiction();
            }, 500);
        },
        productName(n) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.getDataJurisdiction();
            }, 500);
        }
    },
    async created() {
        this.token = sessionStorage.getItem("token");
        // 处理添加状态
        if (this.$route.query.val == 'isAdd') {
            this.titlesw = '新建订单'
            this.isAdd = true;
            this.getCityData();// 取得城市
        }
        // 处于查看状态
        if (this.$route.query.val == 'watch') {
            this.titlesw = '查看订单'
            this.viewDisabled = true;
            await this.getDetail(this.$route.query.orderId);
        }
        // 处于编辑状态
        if (this.$route.query.val == 'edit') {
            if(this.$route.query.orderStatus == 0){
                this.titlesw = '处理订单'
                this.dispose = true;
            }else{
                this.titlesw = '修改订单'
            }
            this.editDisabled = true;
            await this.getDetail(this.$route.query.orderId);
        }
        /* 处于续费状态 */
        if (this.$route.query.val == 'renew') {
            this.titlesw = '订单续费'
            this.renewDisabled = true;
            await this.getDetail(this.$route.query.orderId);
        }
    },
    methods: {
        // 读取页面详情
        getDetail(id) {
            this.$get(this.api.orderDetail, { orderId: +id }).then(res => {
                let form = res.orderDetails.order;// 基本信息
                let contract = res.orderDetails.contractInformation ? res.orderDetails.contractInformation : {}; // 合同
                const { orderOther } = res.orderDetails
                if (orderOther.find(e => e.authority)) {
                    this.$post(this.api.renew, {
                        authority: 1,
                        customerId: form.customerId,
                        productId: orderOther.filter(e => e.authority).map(e => e.dataOrCourseId)
                    }).then(res => {
                        const renewList = res.orderOthers
                        if (orderOther.find(e => !e.authority)) {
                            this.$post(this.api.renew, {
                                authority: 0,
                                customerId: form.customerId,
                                productId: orderOther.filter(e => !e.authority).map(e => e.dataOrCourseId)
                            }).then(res => {
                                renewList.push(...res.orderOthers)
                                this.setStartDate(renewList, contract, form, orderOther)
                            }).catch(err => {})
                        } else {
                            this.setStartDate(renewList, contract, form, orderOther)
                        }
                    }).catch(err => {})
                }
            });
        },
        setStartDate(renewList, contract, form, orderOther) {
            console.log(33, renewList, contract, form)
            let list = orderOther.map(e => {
                const item = renewList.find(n => n.dataOrCourseId === e.dataOrCourseId && n.authority === e.authority)
                if (item) {
                    // 处于续费
                    if (this.renewDisabled) {
                        let end = Date.parse(item.endTime);
                        let now = +new Date();
                        if (now < end) {
                            let time = new Date(item.endTime.split(" ")[0])
                            time = new Date(time.setDate(time.getDate() + 1))
                            e.startTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
                        } else {
                            // 过期
                            e.startTime = "";
                        }
                        e.endTime = "";
                        e.periodOfUse = "";
                    } else if (!this.viewDisabled) { // 如果不是查看
                        e.startTime = item.startTime.split(" ")[0];
                        e.endTime = item.endTime.split(" ")[0];
                    }
                }
                return e;
            });// 俩列表

            if (this.renewDisabled) { // 续费状态下，清空上个订单合同信息
                this.contract = {
                    contractName: "",
                    contractFile: "",
                    contractMoney: "",
                    contractNumber: "",
                    startTime: "",
                    endTime: ""
                };
            } else {
                this.contract = {
                    contractName: contract.contractName,
                    contractMoney: contract.contractMoney,
                    contractNumber: contract.contractNumber,
                    startTime: contract.startTime ? contract.startTime : "",
                    endTime: contract.endTime ? contract.endTime : "",
                    contractId: contract.contractId,
                    uploadList: {
                        name: contract.contractFile ? contract.contractFile.split("/").pop() : "",
                        url: contract.contractFile
                    }
                };
                if (contract.startTime && contract.endTime) {
                    this.contractTime = [contract.startTime, contract.endTime];
                }
            }
            this.form = {
                orderNumber: form.orderNumber,
                createTime: form.createTime,
                provinceId: form.provinceId,
                orderContact: form.orderContact,
                email: form.email,
                customerId: form.customerId,
                customerName: form.customerName,
                orderType: form.orderType,
                cityId: form.cityId,
                phone: form.phone,
                orderAmount: form.orderAmount,
                orderId: form.orderId,
                options: form.options,
            };
            this.coursePermissions = list.filter(i => i.authority === 1);
            this.dataPlatformPermissions = list.filter(i => i.authority === 0);
            this.$nextTick(() => {
                if(this.form.provinceId){
                    this.getCityData()
                }
            });
        },
        // 新增订单
        submitOrder() {
            if (!this.coursePermissions.length && !this.dataPlatformPermissions.length) {
                return this.$message.error("请选择课程权限或数据权限后再确认订单");
            } else {
                // 课程权限参数校验
                if (this.coursePermissions.length) {
                    let courseVerify =
                        this.coursePermissions.some(e => {
                            if (!e.periodOfUse || e.finalPrice === '') {
                                return false;
                            } else {
                                return true;
                            }
                        });
                    if (!courseVerify) {
                        this.whetherSubmit = true;
                        setTimeout(() => {
                            this.whetherSubmit = false;
                        }, 4000);
                        return this.$message.error("请把课程参数输入完整");
                    }
                }
                // 数据平台权限参数校验
                if (this.dataPlatformPermissions.length) {
                    let dataVerify =
                        this.dataPlatformPermissions.some(e => {
                            if (!e.periodOfUse || e.finalPrice === '' || !e.accountNum || e.totalAmount === '') {
                                return false;
                            } else {
                                return true;
                            }
                        });
                    if (!dataVerify) {
                        this.whetherSubmit = true;
                        setTimeout(() => {
                            this.whetherSubmit = false;
                        }, 4000);
                        return this.$message.error("请把产品参数输入完整");
                    }
                }
            }
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.orderRepeat.length) return this.$message.error(this.repeatMsg)
                    let tempArr = [...this.dataPlatformPermissions, ...this.coursePermissions];
                    let renew = tempArr.some(e => e.renew);
                    if (this.renewDisabled || renew) {/* 续费状态下 */
                        this.form.orderNature = 2;
                        if (renew) {
                            tempArr.forEach(e => {
                                if (e.renew) delete e.renew
                            });
                        }
                    }
                    tempArr.forEach(e => {
                      const time = new Date(e.startTime)
                      e.startTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
                    })
                    let param = {
                        contractInformation: this.contract,//合同信息
                        order: this.form,// 订单基本数据
                        orderOther: tempArr//俩列表
                    };
                    this.loading = true;
                    if (this.editDisabled) {
                        this.$post(this.api.orderUpdate, param).then(res => {
                            this.$message.success("修改成功");
                            this.loading = false;
                            this.$router.back();
                        }).catch(err => {
                            this.loading = false;
                        });
                    } else {
                        this.$post(this.api.orderAdd, param).then(res => {
                            this.$message.success("添加订单成功");
                            this.loading = false;
                            this.$router.back();
                        }).catch(err => {
                            this.loading = false;
                        });
                    }
                } else {
                    this.$message("请填上必填项");
                    return false;
                }
            });
        },
        /* 处理0开头的期限 */
        zero(e, row) {
            if (e[0] == "0") {
                row.periodOfUse = e.substring(1);
                this.zero(row.periodOfUse, row);
            }
        },
        // 订单客户框触发选择页面
        gotoClient() {
            this.showSelectClient = !this.showSelectClient;
        },
        // 选择客户返回传值
        backToOrder(val) {
            console.log(val)
            this.showSelectClient = !this.showSelectClient;
            if (val.customerId) {
                this.form.customerName = val.customerName;
                this.form.customerId = val.customerId;
                this.form.phone = val.phone;
                this.form.email = val.email;
                this.form.orderContact = val.name;
                this.$get(this.api.queryCustomerDetails, { customerId: val.customerId }).then(res => {
                    this.form.provinceId = res.result.customer.provinceId;
                    this.form.cityId = res.result.customer.cityId;
                    this.getCityData();
                });
                this.$forceUpdate();
            }
        },
        // 添加课程权限
        addCourseJurisdiction() {
            if (!this.form.customerId) return this.$message.warning("请先选择客户");
            this.courseVisible = true;
            this.getCourseJurisdiction();
        },
        // 获取课程权限列表
        getCourseJurisdiction() {
            let param = {
                pageSize: 10,
                pageNum: this.platfromPage,
                isEnable: 0, // 只获取上架的课程
                curriculumName: this.curriculumName
            };
            this.dataLoading = true;
            this.$post(this.api.curriculumList, param).then(res => {
                this.courseList = res.page.records;
                this.courseTotals = res.page.total;
                this.dataLoading = false;
            }).catch(err => {
                this.dataLoading = false;
            });
        },
        courseSelectable(row, index) { // 禁止勾选已经选过的课程
            let boolean = true;
            this.coursePermissions.length && this.coursePermissions.some(e => {
                if (e.dataOrCourseId === row.cid) {
                    boolean = false;
                }
            });
            return boolean;
        },
        // 课程--弹框列表选中
        handleSelectionChange(val) {
            this.courseSelection = val;
        },
        // 课程弹框--页数变更
        handleCurrentChange(val) {
            this.coursePage = val;
            this.getCourseJurisdiction();
        },
        closeJCourse() { // 关闭课程选择对话框
            this.curriculumName = "";
            this.courseVisible = false;
        },
        async addCourse() {
            if (this.courseSelection.length > 0) {
                let that = this;
                let fn = function(e) {
                    let obj = {
                        dataOrCourseId: e.cid,// id
                        productName: e.curriculumName,// 名称
                        periodOfUse: "",// 使用期限
                        startTime: new Date(),// 开始
                        endTime: "", // 终止
                        remainingPeriod: "",// 剩余期限
                        marketValue: e.marketPrice,// 市场价
                        finalPrice: "",// 成交价
                        discountRate: "",// 折扣率
                        accountNum: "",// 账号数
                        totalAmount: "",// 总价
                        isEnable: 1, // 启用否：1启用，0禁用
                        ship: 0,// 发货否（0未发货，1已发货，默认不发货）
                        authority: 1, // 区分权限 0为数据平台权限，1为课程权限
                        options: 1,
                    };
                    that.coursePermissions.push(obj);
                };
                let idArr = [];
                this.courseSelection.map(e => {// 取得选中的值，进行赋值
                    idArr.push(e.cid);
                    if (this.coursePermissions.length > 0) {
                        // 比对是否存在该id，若存在，不操作，不存在，则进行push操作
                        let find = this.coursePermissions.some(i => e.cid === i.dataOrCourseId);// 判断已有的相同的id不进行处理
                        if (!find) {
                            fn(e);
                        }
                    } else {
                        fn(e);
                    }
                });
                this.courseVisible = false;
                this.curriculumName = "";
                this.platformSelect = [];
                /* 调接口，判断是否为客户已有的课程 */
                let params = {
                    authority: 1,
                    customerId: this.form.customerId,
                    productId: idArr
                };
                await this.$post(this.api.renew, params).then(res => {
                    this.coursePermissions.map(e => {
                        res.orderOthers.map(el => {
                            if (el.dataOrCourseId === e.dataOrCourseId && el.authority) {
                                let time = new Date(el.endTime)
                                time = new Date(time.setDate(time.getDate() + 1))
                                e.startTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
                                e.endTime = "";
                                e.periodOfUse = "";
                                e.renew = true;
                            }
                        });
                    });
                });
            } else {
                return this.$message.warning("请选择课程");
            }
        },
        // 删除课程权限
        delCourseForm(index) {
            this.$confirm("确定要删除吗？", "提示", {
                type: "warning"
            }).then(() => {
                if (this.renewDisabled && this.coursePermissions.length === 1) {
                    return this.$message.warning("续费至少保留一条课程权限");
                } else {
                    this.coursePermissions.splice(index, 1);
                }
            });
        },
        // 添加数据平台权限
        addDataJurisdiction() {
            if (!this.form.customerId) return this.$message.warning("请先选择客户");
            this.showPlatform = true;
            this.getDataJurisdiction();
        },
        // 获取数据权限列表
        getDataJurisdiction() {
            let param = {
                pageSize: 10,
                pageNum: this.platfromPage,
                status: 1,
                productName: this.productName
            };
            this.dataLoading = true;
            this.$post(this.api.listByEntity, param).then(res => {
                this.platformList = res.pageList.records;
                this.platfromTotals = res.pageList.total;
                this.dataLoading = false;
            }).catch(err => {
                this.dataLoading = false;
            });
        },
        dataSelectable(row, index) { // 禁止勾选已经选过的数据平台
            let boolean = true;
            this.dataPlatformPermissions.length && this.dataPlatformPermissions.some(e => {
                if (e.dataOrCourseId === row.id) {
                    boolean = false;
                }
            });
            return boolean;
        },
        // 数据平台--弹框列表选中
        dataPlatformSelection(val) {
            this.platformSelect = val;
        },
        // 数据平台弹框--确定
        async addPlatform() {
            if (this.platformSelect.length > 0) {
                let that = this;
                let fn = function(e) {
                    let obj = {
                        dataOrCourseId: e.id,// id
                        productName: e.productName,// 名称
                        periodOfUse: "",// 使用期限
                        startTime: new Date(),// 开始
                        endTime: "", // 终止
                        remainingPeriod: "",// 剩余期限
                        marketValue: e.market,// 市场价
                        finalPrice: "",// 成交价
                        discountRate: "",// 折扣率
                        accountNum: "",// 账号数
                        totalAmount: "",// 总价
                        isEnable: 1, // 启用否：1启用，0禁用
                        ship: 0,// 发货否（0未发货，1已发货，默认不发货）
                        authority: 0,// 数据平台权限
                        options:1,
                    };
                    that.dataPlatformPermissions.push(obj);
                };
                let idArr = [];
                this.platformSelect.map(e => {// 取得选中的值，进行赋值
                    idArr.push(e.id);
                    if (this.dataPlatformPermissions.length > 0) {
                        // 比对是否存在该id，若存在，不操作，不存在，则进行push操作
                        let find = this.dataPlatformPermissions.some(i => e.id === i.dataOrCourseId);// 判断已有的相同的id不进行处理
                        if (!find) {
                            fn(e);
                        }
                    } else {
                        fn(e);
                    }
                });
                this.showPlatform = false;
                this.productName = "";
                this.platformSelect = [];
                /* 调接口，判断是否为客户已有的产品功能 */
                let params = {
                    authority: 0,
                    customerId: this.form.customerId,
                    productId: idArr
                };
                await this.$post(this.api.renew, params).then(res => {
                    this.dataPlatformPermissions.map(e => {
                        res.orderOthers.map(el => {
                            if (el.dataOrCourseId === e.dataOrCourseId && !el.authority) {
                                let time = new Date(el.endTime)
                                time = new Date(time.setDate(time.getDate() + 1))
                                e.startTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
                                e.endTime = "";
                                e.periodOfUse = "";
                                e.renew = true;
                            }
                        });
                    });
                });
            } else {
                return this.$message.warning("请选择数据");
            }
        },
        // 数据平台弹框--页数变更
        platfromCurrentChange(val) {
            this.platfromPage = val;
            this.getDataJurisdiction();
        },
        // 删除数据平台权限
        delDataForm(index) {
            this.$confirm("确定要删除吗？", "提示", {
                type: "warning"
            }).then(() => {
                if (this.renewDisabled && this.dataPlatformPermissions.length === 1) {
                    return this.$message.warning("续费至少保留一条产品信息");
                } else {
                    this.dataPlatformPermissions.splice(index, 1);
                }
            });
        },
        // 课程/数据平台-启用
        handleEnable(e, row) {

        },
        // 课程/数据平台-发货
        handleDeliver(e, row) {
            if (this.editDisabled) {
                this.$post(this.api.ship,row).then(res => {});
            }
        },
        // 如果非数字，则返回0
        handleNaN(val) {
            return isNaN(val) ? 0 : val
        },
        // 计算折扣率
        calculateDiscount(val, row) {
            if (row.finalPrice)
                row.discountRate = (row.finalPrice / row.marketValue * 100).toFixed(2) + "%";
        },
        // 已知成交和总额，计算账号数目
        userAmount(val, row) {
            if (val && row.totalAmount) {
                // row.accountNum = this.handleNaN(Math.round(row.totalAmount / val))
            }
        },
        //  合同起止日期选择
        contractTimeChange(val) {
            if (val.length > 0) {
                this.contract.startTime = val[0];
                this.contract.endTime = val[1];
            }
        },
        // 新增数据平台权限时，计算总的金额数目
        allAmount($event, row) {
            // 课程权限总价
            let courseArr = [];
            this.coursePermissions.map(e => {
                courseArr.push(+e.finalPrice);
            });
            let courseTotalPrice = courseArr.reduce((a, b) => a + b, 0);
            // 数据权限总价
            let dataArr = [];
            this.dataPlatformPermissions.map(e => {
                dataArr.push(+e.totalAmount);
            });
            let dataTotalPrice = dataArr.reduce((a, b) => a + b, 0);
            this.form.orderAmount = courseTotalPrice * 10000 + dataTotalPrice;
        },
        // 总金额触发--计算账号或市场价
        allAmountChange(val, row) {
            if (row.totalAmount) {
                let all = row.totalAmount;
                if (row.accountNum) {// 若有账号
                    row.finalPrice = this.handleNaN(Math.round(all / row.accountNum).toFixed(2))
                }
                if (row.finalPrice) {// 若有市场价
                    // row.accountNum = Math.floor(all / row.finalPrice);
                    row.accountNum = this.handleNaN(Math.round(all / row.finalPrice))
                }
            }
        },
        // 计算成交总额
        dealComputers(e, row) {
            if (row.finalPrice && row.accountNum) {
                row.totalAmount = this.handleNaN(Math.round((row.finalPrice) * (row.accountNum)).toFixed(2))
            }
            this.allAmount();
        },
        // 计算成交价
        dealBargain(e, row) {
            if (row.accountNum && row.totalAmount) {
                row.finalPrice = this.handleNaN(Math.round(row.totalAmount / row.accountNum).toFixed(2))
            }
        },
        // 使用期限转换以及计算剩余天数
        deadLine(e,row,options, isDate) {
            let optionsData = ''
            if(e > 0){
                if (options == 1){
                    optionsData = e === '12' ? 31536000000 : e*30*24*60*60*1000
                }else if(options == 2){
                    optionsData = e*365*24*60*60*1000
                }else{
                    optionsData = e*24*60*60*1000
                }
            }else{
                optionsData = 0
            }
            let time = new Date(row.startTime).getTime();
            let endTime = time + optionsData
            row.endTime = time + optionsData
            var timestamp =  endTime;
            var dt = new Date(timestamp);    //根据时间戳生成的时间对象
            row.endTime = (dt.getFullYear()) + "-" + (dt.getMonth() + 1) + "-" + (dt.getDate())
            let endYear = timestamp - time
            let endYears = endYear/1000/60/60/24
            row.remainingPeriod = endYears
            // 只有改变了起止日期才需要调接口查询订单，该接口作用是把开始时间传过去，会返回一个提示或者时间，如果是时间，则把时间+1天，如果是提示，则无法保存
            if (isDate) {
                const cId = row.dataOrCourseId
                const date = new Date(row.startTime)
                const orderRepeat = this.orderRepeat
                this.$post(this.api.getOrderOtherTime, {
                    customerId: this.form.customerId,
                    id: row.dataOrCourseId,
                    startTime: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
                    endTime: row.endTime
                }).then(res => {
                    orderRepeat.includes(cId) && orderRepeat.splice(orderRepeat.findIndex(e => e === cId), 1)
                    if (res.endTime) {
                        let time = new Date(res.endTime)
                        time = new Date(time.setDate(time.getDate() + 1))
                        row.startTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
                    }
                }).catch(res => {
                    this.repeatMsg = res.message
                    orderRepeat.includes(cId) || orderRepeat.push(cId)
                })
            }
        },
        // 清除省份
        clearprovince() {
            this.form.cityId = "";
            this.form.customerId = "";
            this.form.orderContact = "";
            this.form.phone = "";
            this.form.email = "";
        },
        // 获取城市
        getCity() {
            this.clearprovince();
            this.getCityData();
        },
        getCityData() {
            let data = {
                provinceId: this.form.provinceId
            };
            return this.$get(this.api.queryCity, data).then(res => {
                this.cityList = res.list;
            }).catch(res => {})
        },
        // 清除城市
        clearcity() {
            this.form.customerId = "";
            this.form.orderContact = "";
            this.form.phone = "";
            this.form.email = "";
        },
        // 获取学校/客户名称
        getSchool() {
            this.clearcity();
            this.getSchoolData();
        },
        getSchoolData() {
            let data = {
                provinceId: this.form.provinceId,
                cityId: this.form.cityId
            };
            this.$get(this.api.queryOrderCustomer, data).then(res => {
                this.schoolList = res.message;
            }).catch(res => {
            });
        },
        clearcustomer() {
            this.form.orderContact = "";
            this.form.phone = "";
            this.form.email = "";
        },
        // 获取学校/客户信息
        getcustomer() {
            let data = {
                customerId: this.form.customerId
            };
            this.$get(this.api.queryOrderCustomerContact, data).then(res => {
                this.form.orderContact = res.message[0].adminName;
                this.form.phone = res.message[0].adminPhone;
                this.form.email = res.message[0].email;
            }).catch(res => {
            });
        },
        discountChange(row) {
            let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
            if (!(reg.test(row.transactionPrice))) {
                this.$message.error("请输入正确金额格式,可保留两位小数");
                row.transactionPrice = "";
            } else {
                row.discount = this.Percentage(row.transactionPrice, row.marketPrice);
            }
        },
        getSummaries(param) { // 自定义的合计计算方法
            const { columns, data } = param;
            var sums = 0;
            data.map(e => {
                sums += Number(e.transactionPrice);
            });
            this.form.orderAmount = sums;
            return sums;
        },
        // 上传文件超出
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择`
            );
        },
        // 上传前
        beforeAvatarUpload(file) {
            const size = file.size / 1024 / 1024 < 10;
            let type = file.name.split(".").pop();
            let str = ["jpg", "jpeg", "gif", "png", "doc", "docx", "pdf"].includes(type.toLowerCase());
            if (!str) {
                this.$message.error("只能上传图片，word文件和pdf文件");
            } else if (!size) {
                this.$message.error("上传头像图片大小不能超过 10MB!");
            }
            return str && size;
        },
        // 上传成功
        uploadSuccess(res, file, fileList) {
            this.contract.contractFile = res.data.filesResult.fileUrl;
        },
        // 上传报错
        uploadError(err, file, fileList) {
            this.$message({
                message: "上传出错，请重试",
                type: "error",
                center: true
            });
        },
        // 删除上传文件前的确认
        beforeRemove(file, fileList) {
            let type = file.name.split(".").pop();
            let str = ["jpg", "jpeg", "gif", "png", "doc", "pdf"].includes(type.toLowerCase());
            const size = file.size / 1024 / 1024 < 10;
            if (!size || !str) {
                return true;
            } else {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
        },
        // 删除文件钩子
        handleRemove(file, fileList) {
            this.contract.contractFile = "";
        },
        configure() {
            this.ipVisible = true;
        },
        IPSure() {
            this.ipVisible = false;
        },
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="scss" scoped>
/deep/ .course-input .el-input__inner {
    width: 100px;
}
.time-input{
  width: 90px !important;
}
/deep/.time-select{
  margin-left: 5px;
  .el-input {
    width: 70px !important;
  }
}
/deep/.orderTables .el-select>.el-input{
    width: 35%;
}
/deep/ .course-input .red .el-input__inner,
/deep/ .small .red .el-input__inner,
/deep/ .red .el-input__inner {
    border: 1px solid red;
}
/deep/ .small .el-input__inner {
    width: 100%;
    margin-right: 5px;
}
/deep/ .discountRate .el-input__inner {
    width: 85px;
}
/deep/ .contractDate .el-date-editor--daterange.el-input__inner {
    width: 100%;
}
.mag {
    margin-right: 20px;
}
.uploadTitle {
    width: 100%;
    height: 40px;
    font-size: 16px;
}
.application_input {
    width: 250px;
}
.contract .el-upload {
    width: 100% !important;
}
.downcol .el-form-item__content {
    margin-left: 0 !important;
}
.down {
    // margin-top: 60px;
    height: 40px;
}
/* 选择IP */
.tab_temp label {
    width: 60px;
}
.mar10 {
    margin-top: 10px;
}
.radio_icon {
    font-size: 26px;
    color: #9278FF;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>