<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">
                        <a-form-item  label="时间选择：">
                            <a-range-picker @change="onChange" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <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">
                        <a-form-item  label="订单编号：">
                            <a-input  placeholder="订单编号"  v-model="queryParam.orderNumber"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="客户姓名：">
                            <a-input  placeholder="客户姓名"  v-model="queryParam.customerName"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="办理号码：">
                            <a-input  placeholder="办理号码"  v-model="queryParam.businessNumber"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="联系号码：">
                            <a-input  placeholder="联系号码"  v-model="queryParam.contactNumber"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="合伙人姓名：">
                            <a-input  placeholder="合伙人姓名"  v-model="queryParam.hehuorenName" ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="合伙人学校：">
                            <a-input  placeholder="合伙人学校"  v-model="queryParam.hehuorenSchool" ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="状态：">
                        <a-select  v-model="queryParam.orderStatus" style="width: 120px" >
                            <a-select-option value="">请选择</a-select-option>
                            <a-select-option value="1">待提交</a-select-option>
                            <a-select-option value="4">归档</a-select-option>
                            <a-select-option value="5">作废</a-select-option>
                            <a-select-option value="3">受理成功</a-select-option>
                            <a-select-option value="9">已收费</a-select-option>
                            <a-select-option value="10">受理异常</a-select-option>
                            <a-select-option value="2">待受理</a-select-option>
                            <a-select-option value="100">未支付</a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>
                    <a-button @click="search()" type="primary">查询</a-button>
                    <a-button  v-show="!callback" @click="handleSubmit" style="margin-left: 10px">导出</a-button>
                    <a-button v-show="callback" style="margin-left: 10px">导出中<a-spin  style="margin-left: 5px" size="small"/></a-button>
                    <a-button @click="handleSubmit1" style="margin-left: 10px">批量处理</a-button>
                    <a-button   @click="handleSubmit2" style="margin-left: 10px">快递</a-button>
                </a-row>
            </a-form>
           </div>

        <!--列表-->
        <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
            <!--拦截器-->
            <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">
                <p v-if="text=='1'">老用户办理</p>
                <p v-if="text=='0'">新用户办理</p>
                <p v-if="text=='2'">老用户续约</p>
                <p v-if="text=='3'">融合办理</p>
                <p v-if="text=='4'">抽奖业务</p>
                <p v-if="text=='5'">单宽业务</p>
                <p v-if="text=='6'">羊城通业务</p>
            </template>
            <template slot="studentCardCheckStatus" slot-scope="text">
                <p v-if="text=='0'">未审核</p>
                <p v-if="text=='1'">已审核</p>
            </template>
            <template slot="operation" slot-scope="text, record">
                <span>
                  <a @click="showDrawer(record)">查看</a>
                     <a-divider type="vertical"/>
                    <a @click="abnormal(record.id)">设为异常单</a>
                </span>
            </template>
        </s-table>
        <!----抽屉-->

        <a-drawer width="1024" placement="right" :closable="false" @close="onClose" :visible="visible">
            <a-form :form="orderInfo">
                <a-tabs type="card">
                    <a-tab-pane tab="订单基本信息" key="1" activeKey>
                        <p :style="pStyle">基础信息</p>
                        <a-row>
                            <a-col :span="12">
                                <p>客户名称：{{orderInfo.customerName}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>卡品：{{orderInfo.kapin}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>用户学校：{{orderInfo.userSchool}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>小白卡单号：{{orderInfo.xbOrderId}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>订单完成时间：{{orderInfo.successTime | dayjs}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>学号：{{orderInfo.studentNumber}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>班级：{{orderInfo.classNumber}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>父母名字：{{orderInfo.parentName}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>联系电话：{{orderInfo.contactNumber}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>身份证号：{{orderInfo.idCard}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>办理号码：{{orderInfo.businessNumber}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>创建时间：{{orderInfo.createTime | dayjs}}</p>
                            </a-col>
                        </a-row>

                        <a-row>
                            <a-col :span="12">
                                <p>地址：{{orderInfo.address}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>省市县：{{orderInfo.site}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>备注：{{orderInfo.remarks}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>错误原因：{{orderInfo.checkFail}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>资费：{{orderInfo.expenses}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>办理标识：{{orderInfo.identifying}}</p>
                            </a-col>
                        </a-row>

                        <a-row>
                            <a-col :span="12">
                                <p>宽带账号：{{orderInfo.netNumber}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>宽带密码：{{orderInfo.netPassword}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>奖品账号：{{orderInfo.giftAccount}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>奖品密码：{{orderInfo.giftPassword}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>学生证审核状态：{{orderInfo.studentCardCheckStatus}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>宽带订单id：{{orderInfo.kdOrderId}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>智能平台订单号：{{orderInfo.orderId}}</p>
                            </a-col>
                            <a-col :span="12">
                                <p>智能平台订单状态：{{orderInfo.thStatus}}</p>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <p>附件：</p>
                            </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="1024px">
            <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>
                </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>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {orderList,download,abnormal,selectOrderHis,downloadMoBan,downloadMoBanKD} 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";
    export default {
        name: "orderView",
        components: {
            STable,
            ImportBtn,
        },
        data(){
            return {
                YRYMmoBan:false,
                KDmoBan:false,
                importUrl:'',
                importTile:'',
                modifyvisible:false,
                title: ConstantActivity.title,
                callback:false,
                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',
                },
                queryParam: {
                    createTimeStart :'',
                    createTimeEnd  :'',
                    userType  :'',
                    orderNumber  :'',
                    customerName  :'',
                    businessNumber  :'',
                    contactNumber  :'',
                    hehuorenSchool  :'',
                    hehuorenName  :'',
                    orderStatus  :''
                },
                orderInfo:{},
                columns: [
                    {dataIndex: 'customerName', width: 200, title: '客户姓名'},
                    {dataIndex: 'orderNumber', width: 200, title: '订单编号'},
                    {dataIndex: 'businessPackage', width: 200, title: '升级套餐'},
                    {dataIndex: 'orderStatus', width: 200, title: '订单状态'},
                    {dataIndex: 'userType', width: 200, title: '订单类型',scopedSlots: {customRender: 'userType'}},
                    {dataIndex: 'contactNumber', width: 200, title: '联系号码'},
                    {dataIndex: 'businessNumber', width: 200, title: '办理号码'},
                    {dataIndex: 'kapin', width: 200, title: '办理套餐'},
                    {dataIndex: 'hehuorenName', width: 200, title: '合伙人姓名'},
                    {dataIndex: 'hehuorenSchool', width: 200, title: '合伙人学校'},
                    {dataIndex: 'hehuorenPhone', width: 200, title: '合伙人手机'},
                    {dataIndex: 'studentCardCheckStatus', width: 200, title: '学生证审核状态',
                        scopedSlots: {customRender: 'studentCardCheckStatus'}
                    },
                    {
                        dataIndex: 'operation',
                        width: 100,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }

                    let obj = cloneObject(this.queryParam)
                    //表示
                    return orderList(Object.assign(params,obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                }
            }
        },
        methods:{
            moment,
            downloadMoBan: function () {
                exportFile(downloadMoBan(), "一人一码受理单.xlsx");
            },
            downloadMoBanKD: function () {
                exportFile(downloadMoBanKD(), "快递清单.xlsx");
            },
            // 执行上传
            doPush(res) {
                console.log(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);
            },
            createfunctionCancel(){
                this.modifyvisible=false;
                this.clearmodel()
            },
            clearmodel(){
                this.importTile=''
                this.YRYMmoBan=false
                this.KDmoBan=false
            },
            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;
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            onClose() {
                this.orderInfo={
                    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:'',
                    thStatus:''
                }
                this.visible = false;
            },
            showDrawer(data){
                        this.orderInfo={
                            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,
                            thStatus:data.thStatus
                        }
                this.selectOrderHis(data.id)
                this.visible=true;
            },
            //时间事件
            onChange(date, dateString) {
                if(dateString.length==0){
                    this.queryParam.startTime=''
                    this.queryParam.endTime=''
                }else {
                    this.queryParam.startTime=dateString[0]
                    this.queryParam.endTime=dateString[1]
                }
            },
            handleSubmit() {
                let downqueryParam=this.queryParam
                let nowdate = moment().format('YYYY-MM-DD');
                this.callback=true;
                exportFile(download(downqueryParam), "订单清单" + nowdate + ".xls",this.downloadstatu);
            },
            downloadstatu(){
                this.callback=false;
            },
            selectOrderHis(orderId){
                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)
                        }

                })
            },
            abnormal(orderId){
                abnormal({orderId}).then(res => {
                    if (res.state=="success") {
                        this.$message.success( res.data, 5);
                    }else {
                        this.$message.error( res.data, 5);
                    }

                })
            }
        }
    }
</script>

<style scoped>

</style>