<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="5" :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-input  placeholder="订单编号"  v-model="queryParam.orderseq"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="客户姓名：">
                            <a-input  placeholder="客户姓名"  v-model="queryParam.ordername"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="学校名称：">
                            <a-input  placeholder="学校名称"  v-model="queryParam.orderUniversityName" ></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>
                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="4" :sm="24">
                             <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-col>
                    </span>

                </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="productState" slot-scope="text">
                <span v-if="text=='1'">待提交</span>
                <span v-if="text=='4'">归档</span>
                <span v-if="text=='5'">作废</span>
                <span v-if="text=='6'">待配送</span>
                <span v-if="text=='7'">物流配送中</span>
                <span v-if="text=='8'">配送成功</span>
                <span v-if="text=='3'">受理成功</span>
                <span v-if="text=='9'">已收费</span>
                <span v-if="text=='10'">受理异常</span>
                <span v-if="text=='2'">待受理</span>
                <span v-if="text=='100'">未支付</span>
            </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.orderseq}}</p>
                </a-col>
                <a-col :span="12">
                    <p>下单时间：{{orderInfo.orderdate | dayjs}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p v-if="orderInfo.status=='1'">订单状态：待提交</p>
                    <p v-if="orderInfo.status=='4'">订单状态：归档</p>
                    <p v-if="orderInfo.status=='5'">订单状态：作废</p>
                    <p v-if="orderInfo.status=='6'">订单状态：待配送</p>
                    <p v-if="orderInfo.status=='7'">订单状态：物流配送中</p>
                    <p v-if="orderInfo.status=='8'">订单状态：配送成功</p>
                    <p v-if="orderInfo.status=='3'">订单状态：受理成功</p>
                    <p v-if="orderInfo.status=='9'">订单状态：已收费</p>
                    <p v-if="orderInfo.status=='10'">订单状态：受理异常</p>
                    <p v-if="orderInfo.status=='2'">订单状态：待受理</p>
                    <p v-if="orderInfo.status=='100'">订单状态：未支付</p>
                </a-col>
                <a-col :span="12">
                    <p>产品名称：{{orderInfo.productname }}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>套餐：{{orderInfo.orderSetMeal}}</p>
                </a-col>
                <a-col :span="12">
                    <p>产品价格：{{orderInfo.weborderamount}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>客户姓名：{{orderInfo.ordername}}</p>
                </a-col>
                <a-col :span="12">
                    <p>联系电话：{{orderInfo.orderphone}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>身份证号：{{orderInfo.ordernumber}}</p>
                </a-col>
                <a-col :span="12">
                    <p>学生证号：{{orderInfo.orderCustomerStudentId}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>备注：{{orderInfo.orderCustomerRemarks}}</p>
                </a-col>

            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>多媒体账号：{{orderInfo.orderCustomerAccount}}</p>
                </a-col>
                <a-col :span="12">
                    <p>多媒体密码：{{orderInfo.orderCustomerPwd}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>用户类别：{{orderInfo.orderCustomerType}}</p>
                </a-col>
                <a-col :span="12">
                    <p>县分：{{orderInfo.orderRegion}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>学校：{{orderInfo.orderUniversityName}}</p>
                </a-col>
            </a-row>
            <a-divider />
            <p :style="pStyle">数据信息</p>
            <a-row>
                <a-col :span="12">
                    <p>预留字段1：</p>
                </a-col>
                <a-col :span="12">
                    <p>预留字段2：{{orderInfo.orderRf2 }}</p>
                </a-col>
            </a-row>
            <a-divider />
            <p :style="pStyle">业务信息</p>
            <a-row>
                <a-col :span="12">
                    <p>支付平台：{{orderInfo.ipay}}</p>
                </a-col>
                <a-col :span="12">
                    <p>支付方式：{{orderInfo.paytype }}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>支付时间：{{orderInfo.orderPaymentTime | dayjs}}</p>
                </a-col>
                <a-col :span="12">
                    <p>支付平台流水号：{{orderInfo.uptranseq}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>智能平台订单号：{{orderInfo.orderseqthd}}</p>
                </a-col>
                <a-col :span="12">
                    <p>穗易付订单号	：{{orderInfo.orderreqtranseq}}</p>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <p>接入商：{{orderInfo.customerid}}</p>
                </a-col>
            </a-row>
        </a-drawer>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {orderViewList,download} from "@/api/school-center/productAPI"
    import {cloneObject,exportFile} from '@/utils/util';
    import moment from 'moment';
    export default {
        name: "orderView",
        components: {
            STable,
        },
        data(){
            return {
                emptyText: {emptyText: '暂无数据'},
                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: {
                    startTime :'',
                    endTime  :'',
                    orderseq  :'',
                    orderUniversityName  :'',
                    status  :'',
                    ordername  :''
                },
                orderInfo:{},
                columns: [
                    {dataIndex: 'orderseq', width: 200, title: '订单号码 '},
                    {dataIndex: 'productname', width: 200, title: '产品名称'},
                    {dataIndex: 'orderSetMeal', width: 80, title: '套餐 '},
                    {dataIndex: 'orderUniversityName', width: 200, title: '学校'},
                    {dataIndex: 'ordername', width: 80, title: '姓名 '},
                    {dataIndex: 'orderdate', width: 150, title: '提交时间 ' ,scopedSlots: {customRender: 'productLastUpdateTime'}},
                    {dataIndex: 'status', width: 50, title: '状态 ', scopedSlots: {customRender: 'productState'}},
                    {dataIndex: 'orderRegion', width: 70, title: '县分'},
                    {dataIndex: 'orderCustomerType', width: 80, title: '用户类别 '},
                  /*  {dataIndex: 'productIntroduction', width: 200, title: '产品情况 ', scopedSlots: {customRender: 'text'}},
                    {dataIndex: 'productSetMealIntroduction', width: 200, title: '资费介绍 ', scopedSlots: {customRender: 'text'}},*/
                    {
                        dataIndex: 'operation',
                        width: 50,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)
                    //表示
                    return orderViewList(Object.assign(params,obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.$message.error("查询失败！", 5);
                            this.emptyText.emptyText = '查询失败！'
                            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={
                    orderseq:'',
                    productname:'',
                    orderSetMeal:'',
                    orderUniversityName:'',
                    ordername:'',
                    orderdate:'',
                    status:'',
                    orderRegion:'',
                    ipay:'',
                    paytype:'',
                    weborderamount:'',
                    orderPaymentTime:'',
                    orderreqtranseq:'',
                    customerid:'',
                    orderphone:'',
                    ordernumber:'',
                    orderCustomerType:'',
                    orderCustomerStudentId:'',
                    orderCustomerRemarks:'',
                    orderCustomerAccount:'',
                    orderCustomerPwd:'',
                    uptranseq:'',
                    expenses:'',
                    orderseqthd:'',
                    orderRf2:''
                }
                this.visible = false;
            },
            showDrawer(data){
                        this.orderInfo={
                            orderseq:data.orderseq,
                            productname:data.productname,
                            orderSetMeal:data.orderSetMeal,
                            orderUniversityName:data.orderUniversityName,
                            ordername:data.ordername,
                            orderdate:data.orderdate,
                            status:data.status,
                            orderRegion:data.orderRegion,
                            ipay:data.ipay,
                            paytype:data.paytype,
                            weborderamount:data.weborderamount,
                            orderPaymentTime:data.orderPaymentTime,
                            orderreqtranseq:data.orderreqtranseq,
                            customerid:data.customerid,
                            orderphone:data.orderphone,
                            ordernumber:data.ordernumber,
                            orderCustomerType:data.orderCustomerType,
                            orderCustomerStudentId:data.orderCustomerStudentId,
                            orderCustomerRemarks:data.orderCustomerRemarks,
                            orderCustomerAccount:data.orderCustomerAccount,
                            orderCustomerPwd:data.orderCustomerPwd,
                            uptranseq:data.uptranseq,
                            expenses:data.expenses,
                            orderseqthd:data.orderseqthd,
                            orderRf2:data.orderRf2
                        }
                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>