<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="待处理">待处理</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="6" :sm="12">
            <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" @click="handleSubmit" style="margin-left: 10px">
              导出中
              <a-spin style="margin-left: 5px" size="small" />
            </a-button>
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1">
                  <a-icon type="arrow-up" />受理单
                </a-menu-item>
                <a-menu-item key="2">
                  <a-icon type="arrow-up" />快递
                </a-menu-item>
              </a-menu>
              <a-button style="margin-left: 8px">
                导入
                <a-icon type="down" />
              </a-button>
            </a-dropdown>
          </a-col>
        </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>

          <a-divider v-if="record.orderStatus === '待审核' " type="vertical" />
          <a v-show="record.orderStatus === '待审核'" @click="reviewStudentIdCard(record)">审核学生证</a>
        </span>
      </template>
    </s-table>
    <!----抽屉-->

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

            <a-row>
              <a-col :span="6">
                <p>地址：{{ orderInfo.address }}</p>
              </a-col>
              <a-col :span="6">
                <p>省市县：{{ orderInfo.site }}</p>
              </a-col>
              <a-col :span="6">
                <p>资费：{{ orderInfo.expenses }}</p>
              </a-col>
              <a-col :span="6">
                <p>办理标识：{{ orderInfo.identifyin }}</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="6">
                <p>宽带账号：{{ orderInfo.netNumber }}</p>
              </a-col>
              <a-col :span="6">
                <p>宽带密码：{{ orderInfo.netPassword }}</p>
              </a-col>
              <a-col :span="6">
                <p>奖品账号：{{ orderInfo.giftAccount }}</p>
              </a-col>
              <a-col :span="6">
                <p>奖品密码：{{ orderInfo.giftPassword }}</p>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="6">
                <p>学生证审核状态：{{ orderInfo.studentCardCheckStatus }}</p>
              </a-col>
              <a-col :span="6">
                <p>宽带订单id：{{ orderInfo.kdOrderId }}</p>
              </a-col>
              <a-col :span="6">
                <p>智能平台订单号：{{ orderInfo.orderId }}</p>
              </a-col>
              <a-col :span="6">
                <p>智能平台订单状态：{{ orderInfo.thStatus }}</p>
              </a-col>
            </a-row>
            <a-divider orientation="left">附件</a-divider>
            <div v-show="!imgShow">无附件</div>
            <div v-show="imgShow" style="margin-bottom: 50px">
              <a-carousel arrows dotsClass="slick-dots slick-thumb">
                <a slot="customPaging" slot-scope="props">
                  <img :src="getImgUrl(props.i)" />
                </a>
                <div @click="pictureSize" v-for="item in certificatePhoto.length">
                  <img :style="imgStype" :src="certificatePhoto[item - 1]" />
                </div>
              </a-carousel>
            </div>
            <a-divider orientation="left">受理信息</a-divider>
            <a-row>
              <a-col :span="6">
                <p>客户名称 ：{{ orderInfo.customerName }}</p>
              </a-col>
              <a-col :span="6">
                <p>联系电话 ：{{ orderInfo.contactNumber }}</p>
              </a-col>
              <a-col :span="6">
                <p>现有套餐 ：{{ orderInfo.nowPackage }}</p>
              </a-col>
              <a-col :span="6">
                <p>升级套餐 ：{{ orderInfo.businessPackage }}</p>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <p>受理人：{{ orderInfo.acceptName }}</p>
              </a-col>
              <a-col :span="6">
                <p>受理结果 ：{{ orderInfo.acceptResult }}</p>
              </a-col>
              <a-col :span="6">
                <p>受理意见 ：{{ orderInfo.acceptComment }}</p>
              </a-col>
              <a-col :span="6">
                <p>受理时间 ：{{ orderInfo.acceptDate | dayjs }}</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="400px"
    >
      <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>

    <a-modal
      title="学生证审核"
      :visible="review"
      @ok="reviewOk"
      @cancel="reviewCancel"
      html-type="submit"
      width="1024px"
    >
      <div align="center">
        <img :src="reviewStudentImg" />
      </div>
      <a-row :gutter="24" style="text-align: right">
        <a-col :md="6" :sm="12">
          <p>审核状态：</p>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-radio-group :options="options" v-model="reviewStudent.studentCardCheckStatus" />
        </a-col>
      </a-row>
      <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 placeholder="审核不通过原因" v-model="reviewStudent.checkFail"></a-input>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import STable from "@/components/table";
import {
  orderList,
  download,
  abnormal,
  selectOrderHis,
  downloadMoBan,
  downloadMoBanKD,
  reviewStudentIdCard
} 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";
const options = [
  { label: "审核通过", value: "1" },
  { label: "审核不通过", value: "0" }
];
export default {
  name: "orderView",
  components: {
    STable,
    ImportBtn
  },
  data() {
    return {
      reviewStudentImg: "",
      reviewStudent: {
        id: "",
        checkFail: "",
        studentCardCheckStatus: ""
      },
      options,
      review: false,
      imgShow: false,
      imgStype: { width: "300px", heigth: "300px" },
      baseUrl:
        "https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/",
      certificatePhoto: [],
      childrenDrawer: false,
      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: 250,
          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,
    handleMenuClick(e) {
      if (e.key == "1") {
        this.handleSubmit1();
      }
      if (e.key == "2") {
        this.handleSubmit2();
      }
    },
    reviewStudentIdCard(res) {
      this.reviewStudentImg = res.studenCard;
      /*this.reviewStudentImg =this.baseUrl+'abstract0'+1+'.jpg'*/
      this.reviewStudent.studentCardCheckStatus = res.studentCardCheckStatus;
      this.reviewStudent.checkFail = res.checkFail;
      this.reviewStudent.id = res.id;
      this.review = true;
    },
    reviewOk() {
      if (this.reviewStudent.studentCardCheckStatus == "0") {
        if (
          this.reviewStudent.checkFail == "" ||
          this.reviewStudent.checkFail == undefined
        ) {
          this.$notification.error({
            message: "审核不通过必须填写不通过原因！",
            description: "",
            duration: 4
          });
        }
      } else {
        if (
          this.reviewStudent.checkFail != "" &&
          this.reviewStudent.checkFail != undefined
        ) {
          this.$notification.error({
            message: "审核通过无须填写不通过原因！",
            description: "",
            duration: 4
          });
        }
      }
      if (
        this.reviewStudent.checkFail == "" ||
        this.reviewStudent.checkFail == undefined
      ) {
        this.reviewStudent.checkFail == "";
      }
      let obj = cloneObject(this.reviewStudent);
      reviewStudentIdCard(Object.assign(obj)).then(res => {
        if (res.state == "success") {
          this.$notification.success({
            message: "审核成功！",
            description: "",
            duration: 4
          });
          this.search();
        } else {
          this.$notification.error({
            message: "审核失败！",
            description: "",
            duration: 4
          });
        }
      });
      this.reviewClear();
    },
    reviewCancel() {
      this.reviewClear();
    },
    reviewClear() {
      this.reviewStudentImg = "";
      this.reviewStudent.id = "";
      this.reviewStudent.studentCardCheckStatus = "";
      this.reviewStudent.checkFail = "";
      this.review = false;
    },
    pictureSize() {
      if (this.imgStype.width == "700px") {
        this.imgStype = { width: "300px", heigth: "300px" };
      } else {
        this.imgStype = { width: "700px", heigth: "500px" };
      }
    },
    getImgUrl(i) {
      return this.certificatePhoto[i];
    },
    showChildrenDrawer() {
      this.childrenDrawer = true;
    },
    onChildrenDrawerClose() {
      this.childrenDrawer = false;
    },
    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;
      this.importUrl = "";
    },
    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.certificatePhoto = [];
      this.orderInfo = {
        acceptResult: "",
        nowPackage: "",
        businessPackage: "",
        acceptName: "",
        acceptComment: "",
        acceptDate: "",
        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.certificatePhoto.push(data.idCardz);
      this.certificatePhoto.push(data.idCardf);
      this.certificatePhoto.push(data.idCardzs);
      this.certificatePhoto.push(data.studenCard);
      /* this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')
                this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')
                this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')
                this.certificatePhoto.push('http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png')*/
      if (
        this.certificatePhoto[0] == null &&
        this.certificatePhoto[1] == null &&
        this.certificatePhoto[2] == null &&
        this.certificatePhoto[3] == null
      ) {
        this.imgShow = false;
      } else {
        this.imgShow = true;
      }
      this.orderInfo = {
        acceptResult: data.acceptResult,
        nowPackage: data.nowPackage,
        businessPackage: data.businessPackage,
        acceptName: data.acceptName,
        acceptComment: data.acceptComment,
        acceptDate: data.acceptDate,
        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() {
      if (this.callback == true) {
        this.$message.warn("正在导出中...", 5);
      }
      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.search();
          this.$message.success(res.data, 5);
        } else {
          this.$message.error(res.data, 5);
        }
      });
    }
  }
};
</script>

<style scoped>
.ant-carousel >>> .slick-dots {
  height: auto;
}
.ant-carousel >>> .slick-slide img {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 80%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -45px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>