<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="12" style="height:35px">
                        <a-form-item label="订单创建时间：">
                            <a-range-picker @change="onChange" format="YYYY-MM-DD HH:mm:ss"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12" style="height:35px">
                      <a-form-item label="订单完成时间：">
                        <a-range-picker @change="onSuccessChange" format="YYYY-MM-DD HH:mm:ss"/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="6" style="height:35px">
                        <a-form-item label="客户类型：">
                            <a-select v-model="queryParam.userType" style="width: 120px">
                                <a-select-option value>全部客户</a-select-option>
                                <a-select-option value="1">老用户办理</a-select-option>
                                <a-select-option value="0">新用户办理</a-select-option>
                                <a-select-option value="2">老用户续约</a-select-option>
<!--                                <a-select-option value="3">融合办理</a-select-option>-->
                                <a-select-option value="4">抽奖业务</a-select-option>
<!--                                <a-select-option value="5">单宽业务</a-select-option>-->
                                <a-select-option value="6">羊城通业务</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="4" :sm="12" style="height:35px">
                        <a-form-item label="订单编号：">
                            <a-input placeholder="订单编号" v-model="queryParam.orderNumber"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="6" style="height:35px">
                      <a-form-item label="县份：">
                        <a-select v-model="queryParam.hehuorenArea" style="width: 120px">
                          <a-select-option value>请选择</a-select-option>
                          <a-select-option value="本部">本部</a-select-option>
                          <a-select-option value="白云">白云</a-select-option>
                          <a-select-option value="海珠">海珠</a-select-option>
                          <a-select-option value="荔湾">荔湾</a-select-option>
                          <a-select-option value="东山">东山</a-select-option>
                          <a-select-option value="花都">花都</a-select-option>
                          <a-select-option value="天河">天河</a-select-option>
                          <a-select-option value="黄埔">黄埔</a-select-option>
                          <a-select-option value="番禺">番禺</a-select-option>
                          <a-select-option value="增城">增城</a-select-option>
                          <a-select-option value="从化">从化</a-select-option>
                          <a-select-option value="南沙">南沙</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12" style="height:35px">
                        <a-form-item label="客户姓名：">
                            <a-input placeholder="客户姓名" v-model="queryParam.customerName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12" style="height:35px">
                        <a-form-item label="办理号码：">
                            <a-input placeholder="办理号码" v-model="queryParam.businessNumber"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12" style="height:35px">
                        <a-form-item label="联系号码：">
                            <a-input placeholder="联系号码" v-model="queryParam.contactNumber"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12" style="height:35px">
                        <a-form-item label="合伙人姓名：">
                            <a-input placeholder="合伙人姓名" v-model="queryParam.hehuorenName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12" style="height:35px">
                        <a-form-item label="合伙人学校：">
                            <a-input placeholder="合伙人学校" v-model="queryParam.hehuorenSchool"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="3" :sm="6" style="height:35px">
                        <a-form-item label="状态：">
                            <a-select v-model="queryParam.orderStatus">
                                <a-select-option value>请选择</a-select-option>
                                <a-select-option value="待处理">待处理</a-select-option>
                                <a-select-option value="待选号">待选号</a-select-option>
                                <a-select-option value="待识别">待识别</a-select-option>
                                <a-select-option value="待活体">待活体</a-select-option>
                                <a-select-option value="审核中">审核中</a-select-option>
                                <a-select-option value="待审核">待配送</a-select-option>
                                <a-select-option value="待审核">待审核</a-select-option>
                                <a-select-option value="待受理">待受理</a-select-option>
                                <a-select-option value="已发货">已发货</a-select-option>
                                <a-select-option value="已完成">已完成</a-select-option>
                                <a-select-option value="异常单">异常单</a-select-option>
                                <a-select-option value="待派奖">待派奖</a-select-option>
                                <a-select-option value="已派奖">已派奖</a-select-option>
                                <a-select-option value="重新下单">重新下单</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="8" :sm="12" style="float:right;height:35px">
                        <a-button @click="search()" type="primary">查询</a-button>
                        <a-button @click="handleSubmit" style="margin-left: 10px">导出</a-button>
                        <a-dropdown>
                            <a-menu slot="overlay" @click="handleMenuClick">
                                <a-menu-item key="1"><a-icon type="arrow-up"/>受理单</a-menu-item>
                                <a-menu-item key="2"><a-icon type="arrow-up"/>快递</a-menu-item>
                                <a-menu-item key="3"><a-icon type="arrow-up"/>iccid填号</a-menu-item>
                            </a-menu>
                            <a-button style="margin-left: 8px">导入<a-icon type="down"/></a-button>
                        </a-dropdown>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <!--列表-->
        <s-table
                :columns="columns"
                :data="rowdata"
                bordered
                ref="table"
                size="small"
                class="flex-filling"
                :locale="emptyText"
        >
            <!--拦截器-->
            <template slot="productLastUpdateTime" slot-scope="text">{{ text | dayjs}}</template>
            <!--拦截器-->
            <template slot="productCreateTime" slot-scope="text">{{ text | dayjs}}</template>
            <template slot="text" slot-scope="text">
                <p style="white-space: pre-line;">{{text}}</p>
            </template>

            <template slot="userType" slot-scope="text">
                <span v-if="text=='1'">老用户办理</span>
                <span v-if="text=='0'">新用户办理</span>
                <span v-if="text=='2'">老用户续约</span>
                <span v-if="text=='3'">融合办理</span>
                <span v-if="text=='4'">抽奖业务</span>
                <span v-if="text=='5'">单宽业务</span>
                <span v-if="text=='6'">羊城通业务</span>
            </template>
            <template slot="studentCardCheckStatus" slot-scope="text">
                <span v-if="text=='0'">未审核</span>
                <span v-if="text=='1'">已审核</span>
            </template>
            <template slot="operation" slot-scope="text, record">
                <span>
                  <a @click="showDrawer(record,'1')">查看</a>
                  <a-divider type="vertical" v-if="isAbnormal"/>
                  <a @click="abnormal(record.id)" v-if="isAbnormal">设为异常单</a>

                  <a-divider v-if="record.orderStatus === '待审核'" type="vertical"/>
                  <a v-show="record.orderStatus === '待审核'" @click="reviewStudentIdCard(record)">审核学生证</a>

<!--                  <a-divider type="vertical"/>-->
<!--                  <a @click="showDrawer(record,'2')">编辑</a>-->
                </span>
            </template>
        </s-table>

        <!--抽屉  查看-->
        <a-drawer width="1280" placement="right" :closable="false" @close="onClose" :visible="visible">
          <a-form :form="orderInfo" layout="inline">
            <a-tabs type="card">
              <a-tab-pane tab="订单基本信息" key="1" activeKey>
                <a-divider orientation="left">基础信息</a-divider>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="客户名称：">
                      <p>{{ orderInfo.customerName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="卡品：">
                      <p>{{ orderInfo.kapin }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="用户学校：">
                      <p>{{ orderInfo.userSchool }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="小白卡单号：">
                      <p>{{ orderInfo.xbOrderId }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="资费：">
                      <p>{{ orderInfo.expenses }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="办理号码：">
                      <p>{{ orderInfo.businessNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="创建时间：">
                      <p>{{ orderInfo.createTime | dayjs }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="订单完成时间：">
                      <p>{{ orderInfo.successTime | dayjs }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="学号：">
                      <p>{{ orderInfo.studentNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="班级：">
                      <p>{{ orderInfo.classNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="父母名字：">
                      <p>{{ orderInfo.parentName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="身份证号：">
                      <p>{{ orderInfo.idCard }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="6">
                    <a-form-item label="地址：">
                      <p>{{ orderInfo.address }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="省市县：">
                      <p>{{ orderInfo.site }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="联系电话：">
                      <p>{{ orderInfo.contactNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="订单状态：">
                      <p>{{ orderInfo.orderStatus }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>

                  <a-col :span="12">
                    <a-form-item label="备注：">
                      <p>{{ orderInfo.remarks }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="学生证审核状态：">
                      <p>{{ orderInfo.studentCardCheckStatus }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="预制卡订单号：">
                      <p>{{ orderInfo.orderId }}</p>
                    </a-form-item>
                  </a-col>

                  <a-col :span="6">
                    <a-form-item label="办理标识：">
                      <p>{{ orderInfo.identifyin }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="错误原因：">
                      <p>{{ orderInfo.checkFail }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-divider orientation="left">附件</a-divider>
                <div v-show="!imgShow">无附件</div>
                <div v-show="imgShow" style="margin-bottom: 50px">
                  <a-carousel arrows dotsClass="slick-dots slick-thumb">
                    <a slot="customPaging" slot-scope="props">
                      <img :src="getImgUrl(props.i)"/>
                    </a>
                    <div @click="pictureSize" v-for="item in certificatePhoto.length">
                      <img :style="imgStype" :src="certificatePhoto[item - 1]"/>
                    </div>
                  </a-carousel>
                </div>
                <div>
                  <a-button v-show="orderInfo.sendType == null || orderInfo.sendType == ''" @click="openConfigSendType()" type="primary">配送方式</a-button>
                  <a-button v-show="orderInfo.businessIccid == null || orderInfo.businessIccid == ''" @click="openConfigIccidFun" type="primary">配置iccid</a-button>
                  <a-button @click="showReview()" type="primary">审核学生证</a-button>

                </div>
                <a-divider orientation="left">受理信息</a-divider>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="客户名称：">
                      <p>{{ orderInfo.customerName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="联系电话：">
                      <p>{{ orderInfo.contactNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="现有套餐：">
                      <p>{{ orderInfo.nowPackage }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="升级套餐：">
                      <p>{{ orderInfo.businessPackage }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="受理人：">
                      <p>{{ orderInfo.acceptName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="受理结果：">
                      <p>{{ orderInfo.acceptResult }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="受理意见：">
                      <p>{{ orderInfo.acceptComment }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="受理时间：">
                      <p>{{ orderInfo.acceptDate | dayjs }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane tab="操作日志" key="3">
                <a-list :grid="{  column: 4 }" :dataSource="title">
                  <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-card :title="item.title" :bordered="false">
                      <a-card-grid style="width:100%;" v-for="item in abnormalInfo">
                        <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: 20px">
                          <a-tooltip placement="left">
                            <template slot="title">{{item[index]}}</template>
                            {{ item[index] }}
                          </a-tooltip>
                        </div>
                      </a-card-grid>
                    </a-card>
                  </a-list-item>
                </a-list>
              </a-tab-pane>
            </a-tabs>
          </a-form>
        </a-drawer>
        <a-modal
                title="批量导入"
                :visible="modifyvisible"
                @ok="createfunctionOk"
                @cancel="createfunctionCancel"
                html-type="submit"
                width="400px"
        >
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p style="text-align:center">{{ importTile }}</p>
                </a-col>
            </a-row>
            <import-btn :url="importUrl" :responseFun="doPush">
                <a-tooltip placement="topLeft" title="导入文件" arrowPointAtCenter>
                    <a-row :gutter="24">
                        <a-col :md="24" :sm="12">
                            <p>
                                选择文件：
                                <a-button type="primary">选择文件</a-button>
                            </p>
                        </a-col>
                    </a-row>
                </a-tooltip>
            </import-btn>
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p v-show="YRYMmoBan">
                        模板下载：
                        <a-button type="primary" @click="downloadMoBan">一人一码受理单模板</a-button>
                    </p>
                    <p v-show="KDmoBan">
                        模板下载：
                        <a-button type="primary" @click="downloadMoBanKD">快递清单模板</a-button>
                    </p>
                    <p v-show="YZKmoBan">
                      模板下载：
                      <a-button type="primary" @click="downloadMoBanYZK">预制卡模板</a-button>
                    </p>
                </a-col>
            </a-row>
            <a-row :gutter="24" :v-show="KDmoBan">
                <a-col :md="24" :sm="12">
                    <p>说明：</p>
                    <p>1.批量导入请严格按照模版进行导入;</p>
                </a-col>
            </a-row>
        </a-modal>

        <a-modal
                title="学生证审核"
                :visible="review"
                @ok="reviewOk"
                @cancel="reviewCancel"
                html-type="submit"
                width="1024px"
        >
            <div align="center">
                <img :src="reviewStudentImg"/>
            </div>
            <a-row :gutter="24" style="text-align: right">
                <a-col :md="6" :sm="12">
                    <p>审核状态：</p>
                </a-col>
                <a-col :md="6" :sm="12">
                    <a-radio-group :options="options" v-model="reviewStudent.studentCardCheckStatus"/>
                </a-col>
            </a-row>
            <a-row :gutter="24" style="text-align: right">
                <a-col :md="6" :sm="12">
                    <p>审核不通过原因：</p>
                </a-col>
                <a-col :md="12" :sm="12">
                    <a-input placeholder="审核不通过原因" v-model="reviewStudent.checkFail"></a-input>
                </a-col>
            </a-row>
        </a-modal>
        <a-modal
            title="配送方式"
            :visible="configSendType"
            @ok="configSendTypeOk"
            @cancel="configSendTypeCancel"
            html-type="submit"
            width="256px">
            <div>
                <a-radio-group v-model="reviewSendType.sendType" @change="changeSendType">
                  <a-radio value="快递">快递</a-radio>
                  <a-radio value="送货上门">送货上门</a-radio>
                </a-radio-group>
            </div>
        </a-modal>
        <a-modal
            title="配置iccid"
            :visible="openIccidConfig"
            @ok="iccidConfigOk"
            @cancel="iccidConfigCancel"
            html-type="submit"
            width="256px">
          <div>
              <span>iccid：</span><a-input v-model="iccidParam.businessIccid" placeholder="请输入iccid" />
              <span>办理号码：</span><a-input v-model="iccidParam.businessNumber" placeholder="请输入办理号码" />
          </div>
        </a-modal>

        <a-modal
            title="置为异常单"
            :visible="setAbnormal"
            @ok="setAbnormalOk"
            @cancel="setAbnormalCancel"
            html-type="submit"
            width="1024px"
        >
          <a-row :gutter="24" style="text-align: right">
            <a-col :md="6" :sm="12">
              <p>置为异常单原因：</p>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-input type="hidden" placeholder="获取id" v-model="setAbnormalStr.orderId"></a-input>
              <a-input placeholder="置为异常单原因" v-model="setAbnormalStr.errorMsg"></a-input>
            </a-col>
          </a-row>
        </a-modal>

        <!--抽屉  编辑-->
        <a-drawer width="1280" placement="right" :closable="false" @close="onClose" :visible="edit">
            <a-form :form="orderInfo" layout="inline">
              <a-input type="hidden" placeholder="学号" v-text="orderInfo.id" v-model="orderInfo.id"></a-input>
              <a-tabs type="card">
                <a-tab-pane tab="订单编辑" key="1" activeKey>
                <a-divider orientation="left">基础信息</a-divider>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="客户名称：">
                      <p>{{ orderInfo.customerName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="卡品：">
                      <p>{{ orderInfo.kapin }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="用户学校：">
                      <p>{{ orderInfo.userSchool }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="小白卡单号：">
                      <p>{{ orderInfo.xbOrderId }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="资费：">
                      <p>{{ orderInfo.expenses }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="办理号码：">
                      <p>{{ orderInfo.businessNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="创建时间：">
                      <p>{{ orderInfo.createTime | dayjs }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="订单完成时间：">
                      <p>{{ orderInfo.successTime | dayjs }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="学号：">
                      <a-input placeholder="学号" v-text="orderInfo.studentNumber" v-model="orderInfo.studentNumber"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="班级：">
                      <a-input placeholder="班级" v-text="orderInfo.classNumber" v-model="orderInfo.classNumber"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="父母名字：">
                      <a-input placeholder="父母名字" v-text="orderInfo.parentName" v-model="orderInfo.parentName"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="身份证号：">
                      <p v-if="isEdit === false">{{ orderInfo.idCard }}</p>
                      <a-input v-if="isEdit === true" placeholder="身份证号" v-text="orderInfo.idCard" v-model="orderInfo.idCard"></a-input>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="6">
                    <a-form-item label="地址：">
                      <a-input placeholder="地址" v-text="orderInfo.address" v-model="orderInfo.address"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="省市县：">
                      <a-input placeholder="省市县" v-text="orderInfo.site" v-model="orderInfo.site"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="联系电话：">
                      <a-input placeholder="联系电话" v-text="orderInfo.contactNumber" v-model="orderInfo.contactNumber"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="订单状态：">
                      <a-select :value="orderInfo.orderStatus" v-model="orderInfo.orderStatus">
                        <a-select-option value>请选择</a-select-option>
                        <a-select-option value="待处理">待处理</a-select-option>
                        <a-select-option value="待选号">待选号</a-select-option>
                        <a-select-option value="待识别">待识别</a-select-option>
                        <a-select-option value="待活体">待活体</a-select-option>
                        <a-select-option value="审核中">审核中</a-select-option>
                        <a-select-option value="待审核">待配送</a-select-option>
                        <a-select-option value="待审核">待审核</a-select-option>
                        <a-select-option value="待受理">待受理</a-select-option>
                        <a-select-option value="已发货">已发货</a-select-option>
                        <a-select-option value="已完成">已完成</a-select-option>
                        <a-select-option value="异常单">异常单</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>

                  <a-col :span="12">
                    <a-form-item label="备注：">
                      <a-input placeholder="备注" v-text="orderInfo.remarks" v-model="orderInfo.remarks"></a-input>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="学生证审核状态：">
                      <p>{{ orderInfo.studentCardCheckStatus }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="预制卡订单号：">
                      <p>{{ orderInfo.orderId }}</p>
                    </a-form-item>
                  </a-col>

                  <a-col :span="6">
                    <a-form-item label="办理标识：">
                      <p>{{ orderInfo.identifyin }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="错误原因：">
                      <p>{{ orderInfo.checkFail }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-divider orientation="left">附件</a-divider>
                <div v-show="!imgShow">无附件</div>
                <div v-show="imgShow" style="margin-bottom: 50px">
                  <a-carousel arrows dotsClass="slick-dots slick-thumb">
                    <a slot="customPaging" slot-scope="props">
                      <img :src="getImgUrl(props.i)"/>
                    </a>
                    <div @click="pictureSize" v-for="item in certificatePhoto.length">
                      <img :style="imgStype" :src="certificatePhoto[item - 1]"/>
                    </div>
                  </a-carousel>
                </div>
                <a-button @click="showReview()" type="primary">审核学生证</a-button>
                <a-divider orientation="left">受理信息</a-divider>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="客户名称：">
                      <p>{{ orderInfo.customerName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="联系电话：">
                      <p>{{ orderInfo.contactNumber }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="现有套餐：">
                      <p>{{ orderInfo.nowPackage }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="升级套餐：">
                      <p>{{ orderInfo.businessPackage }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="6">
                    <a-form-item label="受理人：">
                      <p>{{ orderInfo.acceptName }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="受理结果：">
                      <p>{{ orderInfo.acceptResult }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="受理意见：">
                      <p>{{ orderInfo.acceptComment }}</p>
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="受理时间：">
                      <p>{{ orderInfo.acceptDate | dayjs }}</p>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-divider></a-divider>
                <a-row>
                  <a-button @click="editOk()" type="primary">保存</a-button>&nbsp;
                  <a-button @click="onClose()" type="primary">取消</a-button>&nbsp;
                </a-row>
                </a-tab-pane>
              </a-tabs>
            </a-form>
        </a-drawer>
    </div>
</template>

<script>
    import STable from "@/components/table";
    import {
        orderList,
        download,
        abnormal,
        selectOrderHis,
        downloadMoBan,
        downloadMoBanKD,
        downloadMoBanYZK,
        reviewStudentIdCard,
        editOrder,
        updateIccid,
        updateSendType
    } from "../../../api/school-center/orderAPI";
    import {cloneObject, exportFile} from "@/utils/util";
    import moment from "moment";
    import ConstantActivity from "@/constant/ConstantActivity";
    import ImportBtn from "../../../components/sysmanage/ImportBtn";

    const options = [
        {label: "审核通过", value: "1"},
        {label: "审核不通过", value: "0"}
    ];
    export default {
        name: "orderView",
        components: {
            STable,
            ImportBtn
        },
        data() {
            return {
                emptyText: {emptyText: '暂无数据'},
                reviewStudentImg: "",
                reviewStudent: {
                    id: "",
                    checkFail: "",
                    studentCardCheckStatus: ""
                },
                reviewSendType: {
                    id: '',
                    sendType: '',
                },
                openIccidConfig: false,
                iccidParam: {
                  id: '',
                  businessIccid: '',
                  businessNumber: ''
                },
                options,
                review: false,
                imgShow: false,
                configSendType: false,
                imgStype: {width: "300px", heigth: "300px"},
                baseUrl:
                    "https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/",
                certificatePhoto: [],
                childrenDrawer: false,
                YRYMmoBan: false,
                KDmoBan: false,
                YZKmoBan:false,
                importUrl: "",
                importTile: "",
                modifyvisible: false,
                isAbnormal:false,
                isEdit:false,
                setAbnormal:false,
                setAbnormalStr: {
                  orderId:"",
                  errorMsg: "",
                },
                edit:false,
                title: ConstantActivity.title,
                Formtable: this.$form.createForm(this),
                visible: false,
                abnormalInfo: [],
                pStyle: {
                    fontSize: "16px",
                    color: "rgba(0,0,0,0.85)",
                    lineHeight: "24px",
                    display: "block",
                    marginBottom: "16px"
                },
                pStyle2: {
                    marginBottom: "24px"
                },
                apis: '',
                queryParam: {
                    createTimeStart: "",
                    createTimeEnd: "",
                    userType: "",
                    orderNumber: "",
                    customerName: "",
                    businessNumber: "",
                    contactNumber: "",
                    hehuorenSchool: "",
                    hehuorenName: "",
                    hehuorenArea:"",
                    orderStatus: ""
                },
                orderInfo: {},
                columns: [
                    {dataIndex: "customerName", width: 90, title: "客户姓名", fixed: "left"},
                    {dataIndex: "orderStatus", width: 80, title: "订单状态", fixed: "left"},
                    {
                      dataIndex: "userType",
                      width: 100,
                      title: "订单类型",
                      scopedSlots: {customRender: "userType"}
                    },
                    {dataIndex: "businessNumber", width: 120, title: "办理号码"},
                    {dataIndex: "contactNumber", width: 120, title: "联系号码"},
                    {dataIndex: "kapin", width: 160, title: "办理套餐"},
                    {dataIndex: "hehuorenSchool", width: 200, title: "合伙人学校"},

                    {dataIndex: "hehuorenName", width: 90, title: "合伙人姓名"},
                    {dataIndex: "hehuorenPhone", width: 120, title: "合伙人手机"},
                    {
                        dataIndex: "studentCardCheckStatus",
                        width: 100,
                        title: "学生证状态",
                        scopedSlots: {customRender: "studentCardCheckStatus"}
                    },
                    {dataIndex: "businessPackage", width: 120, title: "升级套餐"},
                    {dataIndex: "orderNumber", width: 200, title: "订单编号"},
                    {
                        dataIndex: "operation",
                        width: 180,
                        title: "操作",
                        scopedSlots: {customRender: "operation"},
                        fixed: "right"
                    }
                ],
                rowdata: parameter => {
                    const env = process.env.NODE_ENV; //获取当前环境
                    if (env === 'development') {     //测试环境默认添加前缀
                        this.apis = '/api/';
                    }
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    };

                    let obj = cloneObject(this.queryParam);
                    //表示
                    return orderList(Object.assign(params, obj)).then(res => {
                      this.isAbnormal = res.isAbnormal;
                      this.isEdit = res.isEdit;
                        let data = {};
                        if (res.page.state !== "success") {
                            this.$message.error("查询失败！", 5);
                            this.emptyText.emptyText = '查询失败！'
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            };
                        } else {
                            data = {
                                data: res.page.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.page.data.total
                            };
                        }
                        return data;
                    });
                }
            };
        },
        methods: {
            moment,
            handleMenuClick(e) {
                if (e.key == "1") {
                    this.handleSubmit1();
                }
                if (e.key == "2") {
                    this.handleSubmit2();
                }
                if (e.key == "3") {
                  this.handleSubmit3();
                }
            },
            openConfigIccidFun() {
              this.openIccidConfig = true;
              this.iccidParam.id = this.orderInfo.id;
              this.iccidParam.businessIccid = this.orderInfo.businessIccid;
              this.iccidParam.businessNumber = this.orderInfo.businessNumber;
            },
            iccidConfigOk() {
                let obj = cloneObject(this.iccidParam);
                updateIccid(obj).then(res => {
                  if (res.state == "success") {
                    this.$notification.success({
                      message: "更新成功！",
                      description: "",
                      duration: 4
                    });
                    this.search();
                  } else {
                    this.$notification.error({
                      message: "更新失败！",
                      description: "",
                      duration: 4
                    });
                  }
                });

                this.iccidConfigClear();
            },
            iccidConfigCancel() {
                this.iccidConfigClear();
            },
            iccidConfigClear() {
              this.openIccidConfig = false;
              this.iccidParam.id = '';
              this.iccidParam.businessNumber = '';
              this.iccidParam.businessIccid = '';
            },
            changeSendType(e) {
              this.reviewSendType.sendType = e.target.value;
            },
            configSendTypeOk() {
                // 配置发送
              let obj = cloneObject(this.reviewSendType);
              updateSendType(obj).then(res => {
                if (res.state == "success") {
                  this.$notification.success({
                    message: "更新成功！",
                    description: "",
                    duration: 4
                  });
                  this.search();
                } else {
                  this.$notification.error({
                    message: "更新失败！",
                    description: "",
                    duration: 4
                  });
                }
              });
              this.configSendTypeClear();
            },
            configSendTypeCancel() {
                this.configSendTypeClear();
            },
            configSendTypeClear() {
              this.configSendType = false;
              this.reviewSendType.id = '';
              this.reviewSendType.sendType = '';
            },
            openConfigSendType() {
                this.configSendType = true;
                this.reviewSendType.id = this.orderInfo.id;
                this.reviewSendType.sendType = this.orderInfo.sendType;
            },
            showReview() {
              this.review = true;
            },
            reviewStudentIdCard(res) {
                this.reviewStudentImg = this.apis + res.studentCard;
                /*this.reviewStudentImg =this.baseUrl+'abstract0'+1+'.jpg'*/
                this.reviewStudent.studentCardCheckStatus = res.studentCardCheckStatus;
                this.reviewStudent.checkFail = res.checkFail;
                this.reviewStudent.id = res.id;
                this.review = true;
            },
            reviewOk() {
                this.reviewStudent.id = this.orderInfo.id;
                if (this.reviewStudent.studentCardCheckStatus == "0") {
                    if (
                        this.reviewStudent.checkFail == "" ||
                        this.reviewStudent.checkFail == undefined
                    ) {
                        this.$notification.error({
                            message: "审核不通过必须填写不通过原因！",
                            description: "",
                            duration: 4
                        });
                    }
                } else {
                    if (
                        this.reviewStudent.checkFail != "" &&
                        this.reviewStudent.checkFail != undefined
                    ) {
                        this.$notification.error({
                            message: "审核通过无须填写不通过原因！",
                            description: "",
                            duration: 4
                        });
                    }
                }
                if (
                    this.reviewStudent.checkFail == "" ||
                    this.reviewStudent.checkFail == undefined
                ) {
                    this.reviewStudent.checkFail == "";
                }
                let obj = cloneObject(this.reviewStudent);
                reviewStudentIdCard(Object.assign(obj)).then(res => {
                    if (res.state == "success") {
                        this.$notification.success({
                            message: "审核成功！",
                            description: "",
                            duration: 4
                        });
                        this.search();
                    } else {
                        this.$notification.error({
                            message: "审核失败！",
                            description: "",
                            duration: 4
                        });
                    }
                });
                this.reviewClear();
            },
            reviewCancel() {
                this.reviewClear();
            },
            reviewClear() {
                this.reviewStudentImg = "";
                this.reviewStudent.id = "";
                this.reviewStudent.studentCardCheckStatus = "";
                this.reviewStudent.checkFail = "";
                this.review = false;
            },
            abnormal(orderId) {
              this.setAbnormal = true;
              this.setAbnormalStr.orderId = orderId;
            },
            setAbnormalOk(){
              if(this.setAbnormalStr.errorMsg.length<3){
                this.$notification.error({
                  message: "请输入不小于三个字的操作结果",
                  description: "",
                  duration: 4
                });
              }else{
                let setAbnormalStr = this.setAbnormalStr;
                abnormal(setAbnormalStr).then(res => {
                  if (res.state == "success") {
                    this.search();
                    this.$message.success(res.data, 5);
                  } else {
                    this.$message.error(res.msg, 5);
                  }
                  this.setAbnormalClear();
                });
              }
            },
            setAbnormalCancel(){
                this.setAbnormalClear();
            },
            setAbnormalClear(){
                this.setAbnormalStr.orderId = "";
                this.setAbnormalStr.errorMsg = "";
                this.setAbnormal = false;
            },
            editOk(){
              let orderInfo = this.orderInfo;
              editOrder(orderInfo).then(res => {
                if (res.state == "success") {
                  this.$notification.success({
                    message: "编辑成功！",
                    description: "",
                    duration: 4
                  });
                  this.search();
                } else {
                  this.$notification.error({
                    message: "编辑失败！",
                    description: "",
                    duration: 4
                  });
                }
              });
              this.onClose();
            },
            pictureSize() {
                if (this.imgStype.width == "700px") {
                    this.imgStype = {width: "300px", heigth: "300px"};
                } else {
                    this.imgStype = {width: "700px", heigth: "500px"};
                }
            },
            getImgUrl(i) {
                return this.certificatePhoto[i];
            },
            showChildrenDrawer() {
                this.childrenDrawer = true;
            },
            onChildrenDrawerClose() {
                this.childrenDrawer = false;
            },
            downloadMoBan: function () {
                exportFile(downloadMoBan(), "一人一码受理单.xlsx");
            },
            downloadMoBanKD: function () {
                exportFile(downloadMoBanKD(), "快递清单.xlsx");
            },
            downloadMoBanYZK: function () {
              exportFile(downloadMoBanYZK(), "预制卡批量填号清单.xlsx");
            },
            // 执行上传
            doPush(res) {
                if (!res || !res.response) {
                    this.$message.error("上传文件出错！", 10);
                    return false;
                }
                const response = res.response;
                if (response.state !== "success") {
                    this.$message.error(response.msg ? response.msg : "上传文件出错！", 10);
                    return false;
                }
                this.$message.success("上传成功！" + response.data, 5);
                this.modifyvisible = false;
            },
            createfunctionCancel() {
                this.modifyvisible = false;
                this.clearmodel();
            },
            clearmodel() {
                this.importTile = "";
                this.YRYMmoBan = false;
                this.KDmoBan = false;
                this.YZKmoBan = false;
                this.importUrl = "";
            },
            createfunctionOk() {
                this.modifyvisible = false;
                this.clearmodel();
            },
            handleSubmit1() {
                this.importTile = "批量导入受理单";
                this.YRYMmoBan = true;
                this.importUrl = "manager/ciop/order/importDate";
                this.modifyvisible = true;
            },
            handleSubmit2() {
                this.importTile = "批量导入快递清单";
                this.KDmoBan = true;
                this.importUrl = "manager/ciop/order/importExpressDelivery";
                this.modifyvisible = true;
            },
            handleSubmit3() {
              this.importTile = "预制卡批量填号";
              this.YZKmoBan = true;
              this.importUrl = "manager/ciop/order/importPrefabrication";
              this.modifyvisible = true;
            },
            search() {
                this.$refs.table.refresh({search: true});
            },
            onClose() {
                this.certificatePhoto = [];
                this.orderInfo = {
                    id:"",
                    acceptResult: "",
                    nowPackage: "",
                    businessPackage: "",
                    acceptName: "",
                    acceptComment: "",
                    acceptDate: "",
                    customerName: "",
                    kapin: "",
                    userSchool: "",
                    xbOrderId: "",
                    successTime: "",
                    orderId: "",
                    studentNumber: "",
                    classNumber: "",
                    parentName: "",
                    contactNumber: "",
                    idCard: "",
                    businessNumber: "",
                    createTime: "",
                    address: "",
                    site: "",
                    remarks: "",
                    checkFail: "",
                    expenses: "",
                    identifying: "",
                    netNumber: "",
                    netPassword: "",
                    giftAccount: "",
                    giftPassword: "",
                    kuaidiOrder: "",
                    company: "",
                    studentCardCheckStatus: "",
                    kdOrderId: "",
                    orderStatus: "",
                    sendType: "",
                    businessIccid: ""
                };
                this.visible = false;
                this.edit = false;
            },
            showDrawer(data,type) {
                this.certificatePhoto.push(this.apis + data.idCardz);
                this.certificatePhoto.push(this.apis + data.idCardf);
                this.certificatePhoto.push(this.apis + data.idCardzs);
                this.certificatePhoto.push(this.apis + data.studentCard);
                /* this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')
                          this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')
                          this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')
                          this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')*/
                if (
                    this.certificatePhoto[0] == '/api/null' &&
                    this.certificatePhoto[1] == '/api/null' &&
                    this.certificatePhoto[2] == '/api/null' &&
                    this.certificatePhoto[3] == '/api/null'
                ) {
                    this.imgShow = false;
                } else {
                    this.imgShow = true;
                }
                this.orderInfo = {
                    id:data.id,
                    acceptResult: data.acceptResult,
                    nowPackage: data.nowPackage,
                    businessPackage: data.businessPackage,
                    acceptName: data.acceptName,
                    acceptComment: data.acceptComment,
                    acceptDate: data.acceptDate,
                    customerName: data.customerName,
                    kapin: data.kapin,
                    userSchool: data.userSchool,
                    xbOrderId: data.xbOrderId,
                    successTime: data.successTime,
                    orderId: data.orderId,
                    studentNumber: data.studentNumber,
                    classNumber: data.classNumber,
                    parentName: data.parentName,
                    contactNumber: data.contactNumber,
                    idCard: data.idCard,
                    businessNumber: data.businessNumber,
                    createTime: data.createTime,
                    address: data.address,
                    site: data.site,
                    remarks: data.remarks,
                    checkFail: data.checkFail,
                    expenses: data.expenses,
                    identifying: data.identifying,
                    netNumber: data.netNumber,
                    netPassword: data.netPassword,
                    giftAccount: data.giftAccount,
                    giftPassword: data.giftPassword,
                    kuaidiOrder: data.kuaidiOrder,
                    company: data.company,
                    studentCardCheckStatus: data.studentCardCheckStatus,
                    kdOrderId: data.kdOrderId,
                    orderStatus: data.orderStatus,
                    sendType: data.sendType,
                    businessIccid: data.businessIccid
                };
                this.selectOrderHis(data.id);
                if(type == 1){
                  this.visible = true;
                }else if(type == 2) {
                  this.edit = true;
                }
            },
            //时间事件
            onChange(date, dateString) {
                if (dateString.length == 0) {
                    this.queryParam.createTimeStart = "";
                    this.queryParam.createTimeEnd = "";
                } else {
                    this.queryParam.createTimeStart = dateString[0];
                    this.queryParam.createTimeEnd = dateString[1];
                }
            },
            onSuccessChange(date, dateString) {

              if (dateString.length == 0) {
                this.queryParam.successTimeStart = "";
                this.queryParam.successTimeEnd = "";
              } else {
                this.queryParam.successTimeStart = dateString[0];
                this.queryParam.successTimeEnd = dateString[1];
              }
            },
            handleSubmit() {
                let downqueryParam = this.queryParam;
                download(downqueryParam).then(res => {
                    if (res.state == "success") {
                        this.search();
                        this.$message.success(res.data, 5);
                    } else {
                        this.$message.error(res.msg, 5);
                    }

                })
                /* if (this.callback == true) {
                   this.$message.warn("正在导出中...", 5);
                 }
                 let downqueryParam = this.queryParam;
                 let nowdate = moment().format("YYYY-MM-DD");
                 this.callback = true;
                 exportFile(
                   download(downqueryParam),
                   "订单清单" + nowdate + ".xls",
                   this.downloadstatu
                 );*/
            },
            /*   downloadstatu(exportId) {
                let nowdate = moment().format("YYYY-MM-DD");
                exportFile(
                        uploadExcel({exportId}),
                  "订单清单" + nowdate + ".xls",
                );
               },*/
            selectOrderHis(orderId) {
              this.abnormalInfo = [];
                selectOrderHis({orderId}).then(res => {
                    let liu = res.data;
                    for (let i = 0; i < liu.length; i++) {
                        let resdate = [];
                        resdate.push(liu[i]["operator"]);
                        let startTime = moment(new Date(liu[i]["create_date"])).format(
                            this.YYYY_MM_DD_HH_MI_SS
                        );
                        resdate.push(startTime);
                        resdate.push(liu[i]["status"]);
                        this.abnormalInfo.push(resdate);
                    }
                });
            },
        }
    };
</script>

<style scoped>
    .ant-carousel >>> .slick-dots {
        height: auto;
    }

    .ant-carousel >>> .slick-slide img {
        border: 5px solid #fff;
        display: block;
        margin: auto;
        max-width: 80%;
    }

    .ant-carousel >>> .slick-thumb {
        bottom: -45px;
    }

    .ant-carousel >>> .slick-thumb li {
        width: 60px;
        height: 45px;
    }

    .ant-carousel >>> .slick-thumb li img {
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
    }

    .ant-carousel >>> .slick-thumb li.slick-active img {
        filter: grayscale(0%);
    }
</style>
