<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>
          <a-divider type="vertical" />
          <a @click="editDrawer(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" v-show="iCardShow">
          <p>
            身份证号：<Input
              :value="orderInfo.idCard"
              :label="orderInfo.idCard"
              v-model="orderInfo.idCard"
              class="idCard"
              ref="idCardValue"
              @change="idCardValue"
            />
          </p>
        </a-col>
        <a-col :span="12" v-show="iCardShow01">
          <p>身份证号：{{ orderInfo.idCard }}</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-col :span="12" v-show="statusShow">
          <p>
            订单状态：
            <a-select
              @change="statusData"
              class="statusData"
              v-model="orderInfo.orderStatus"
              default-value="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-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>
          </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-row>
        <a-col :span="12">
      <a-button type="primary" v-show="iCardShow" @click="editBtn">
        确定
      </a-button>
        </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,
  editOrder,
} 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,
      statusShow: false,
      iCardShow: false,
      iCardShow01: 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: "",
        idCard: "",
      },
      orderInfo: {},
      columns: [
        { dataIndex: "orderId", width: 200, title: "智能平台" }, //dataIndex:列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法
        { 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) {
            //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: 180,
          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: {
    // 身份证号
    idCardValue(e) {
      this.orderInfo.idCard = this.$refs.idCardValue.value;
      console.log(this.$refs.idCardValue.value);
    },
    // 编辑下拉
    statusData(value) {
      this.orderInfo.orderStatus = value;
      //修改数据
    },
    editBtn(){
        editOrder({
          id: this.orderInfo.id,
          idCard: this.orderInfo.idCard,
          orderStatus: this.orderInfo.orderStatus,
        }).then((res) => {
          console.log(res);
          if (res.state == "success") {
            this.$message.success(res.data ? res.data : "修改成功！", 5);
            this.search();
            return null;
          }
          this.$message.error(res.data ? res.data : "修改失败！", 5);
        });
      this.visible = false;
    },
    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: "",
        orderStatus: "", //订单状态
        id: "",
        idCard: "",
      };

      this.visible = false;
    },
    showDrawer(data) {
      this.iCardShow01 = true;
      this.iCardShow = false;
      this.statusShow = false;
      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,
        orderStatus: data.orderStatus, //订单状态
        id: data.id,
        idCard: data.idCard,
      };
      this.visible = true;
    },
    // 编辑
    editDrawer(data) {
      console.log(data);
      this.iCardShow = true;
      this.iCardShow01 = false;
      this.statusShow = true;
      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,
        orderStatus: data.orderStatus,
        id: data.id,
        idCard: data.idCard,
      };
      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>
.statusData {
  width: 100px !important;
}
</style>