<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.status" 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-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>
                </span>
            </template>
        </s-table>
        <!----抽屉-->
        <a-drawer width="640" placement="right" :closable="false" @close="onClose" :visible="visible">
            <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.school}}</p>
                </a-col>
                <a-col :span="12">
                    <p>小白卡单号：{{orderInfo.xbOrderId | dayjs}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>订单完成时间：{{orderInfo.successTime}}</p>
                </a-col>
                <a-col :span="12">
                    <p>预制卡单号：{{orderInfo.yzOrderId}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>学号：{{orderInfo.no}}</p>
                </a-col>
                <a-col :span="12">
                    <p>班级：{{orderInfo.class}}</p>
                </a-col>
            </a-row>
            <a-row>
                <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}}</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.znOrderNumber}}</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-divider />

        </a-drawer>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {orderList,download} from "@/api/school-center/orderAPI"
    import {cloneObject,exportFile} from '@/utils/util';
    import moment from 'moment';
    export default {
        name: "orderView",
        components: {
            STable,
        },
        data(){
            return {
                //下载完成状态
                callback:false,
                Formtable: this.$form.createForm(this),
                visible: false,
                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: 'contactNumber', width: 200, title: '联系号码'},
                    {dataIndex: 'businessNumber', width: 200, title: '办理号码'},
                    {dataIndex: 'businessPackage', width: 200, title: '办理套餐'},
                    {dataIndex: 'hehuorenName', width: 200, title: '合伙人姓名'},
                    {dataIndex: 'hehuorenSchool', width: 200, title: '合伙人学校'},
                    {dataIndex: 'hehuorenPhone', width: 200, title: '合伙人手机'},
                    {dataIndex: 'packageId', width: 200, title: '现有套餐'},
                    {dataIndex: 'businessPackage', width: 200, title: '升级套餐'},
                    {dataIndex: 'orderStatus', width: 200, title: '订单状态'},
                    {dataIndex: 'userType', width: 200, title: '订单类型',scopedSlots: {customRender: 'userType'}},
                    {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,
            search() {
                this.$refs.table.refresh({search: true})
            },
            onClose() {
                this.orderInfo={
                    customerName:'',
                    kapin:'',
                    school:'',
                    xbOrderId:'',
                    successTime:'',
                    yzOrderId:'',
                    no:'',
                    class:'',
                    parentName:'',
                    contactNumber:'',
                    idCard:'',
                    businessNumber:'',
                    createTime:'',
                    address:'',
                    site:'',
                    remarks:'',
                    checkFail:'',
                    expenses:'',
                    identifying:'',
                    netNumber:'',
                    netPassword:'',
                    giftAccount:'',
                    giftPassword:'',
                    kuaidiOrder:'',
                    company:'',
                    studentCardCheckStatus:'',
                    kdOrderId:'',
                    znOrderNumber:'',
                    thStatus:''
                }
                this.visible = false;
            },
            showDrawer(data){
                        this.orderInfo={
                            customerName:data.customerName,
                            kapin:data.kapin,
                            school:data.school,
                            xbOrderId:data.xbOrderId,
                            successTime:data.successTime,
                            yzOrderId:data.yzOrderId,
                            no:data.no,
                            class:data.class,
                            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,
                            znOrderNumber:data.znOrderNumber,
                            thStatus:data.thStatus
                        }
                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;
            }
        }
    }
</script>

<style scoped>

</style>