<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="3">融合办理</a-select-option>
                  <a-select-option value="5">单宽业务</a-select-option>
                  <a-select-option value="9">毕业生融合</a-select-option>
                  <!--                                <a-select-option value="3">融合办理</a-select-option>-->
                  <a-select-option value="10">单宽进融</a-select-option>
                  <!--                                <a-select-option value="5">单宽业务</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.orderId"></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="3" :sm="6" style="float:right;height:35px">
              <a-button @click="search()" type="primary">查询</a-button>
              <a-button @click="handleSubmit" style="margin-left: 10px">导出</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <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>
        <!--列表-->
        <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>
                  <a-divider type="vertical"/>
                  <a @click="abnormal(record.id)">设为异常单</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 {
      abnormal,
      broadBandList,
    } from "../../../api/school-center/orderAPI";
    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,
                setAbnormal:false,
                setAbnormalStr: {
                  orderId:"",
                  errorMsg: "",
                },
                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  :'',
                    hehuorenArea: '',
                    orderStatus:'',
                    userType:''
                },
                orderInfo:{},
                columns: [
                    {dataIndex: 'orderId', width: 200, title: '智能平台'},
                    {dataIndex: 'customerName', width: 100, title: '客户名称'},
                    {dataIndex: 'contactNumber', width: 120, title: '联系电话'},
                    {dataIndex: 'orderSetMeal', width: 120, title: '办理套餐'},
                    {dataIndex: 'orderStatus', width: 80, title: '订单状态'},
                    {dataIndex: 'orderNumber', width: 200, title: '订单编号'},
                    {dataIndex: 'orderUniversityName', width: 200, title: '客户学校'},
                    {dataIndex: 'orderRegion', width: 100, title: '客户县分'},
                    {dataIndex: 'ipay', width: 100, title: '支付平台',
                        customRender: function(text, record, index) {
                          if (text == 0) {
                            return "翼支付网厅";
                          }else if (text == 1) {
                            return "支付宝";
                          }else if(text == 2) {
                            return "微信";
                          }else {
                            return "";
                          }
                        }
                    },
                    {dataIndex: 'orderReqtranSeq', width: 240, title: '穗易付订单号'},
                    {dataIndex: 'uptranseq', width: 240, title: '支付平台流水号'},
                    {dataIndex: 'orderDate', width: 200, title: '创建时间',
                        customRender: function(text, record, index) {
                          if (text == null) {
                            return "";
                          }
                          return moment(text).format("YYYY-MM-DD HH:mm:ss");
                       }
                    },
                  /*  {dataIndex: 'productIntroduction', width: 200, title: '产品情况 ', scopedSlots: {customRender: 'text'}},
                    {dataIndex: 'productSetMealIntroduction', width: 200, title: '资费介绍 ', scopedSlots: {customRender: 'text'}},*/
                    {
                        dataIndex: 'operation',
                        width: 140,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)
                    //表示
                    return broadBandList(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.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
                let nowdate = moment().format('YYYY-MM-DD');
                this.callback=true;
                exportFile(download(downqueryParam), "宽带订单清单" + nowdate + ".xls",this.downloadstatu);
            },
            downloadstatu(){
                this.callback=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;
            },
        }
    }
</script>

<style scoped>

</style>