<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px" class="queryFormInline" size="small">
          <el-form-item label="付款状态" prop="payStatus">
            <el-select v-model="queryParams.payStatus" placeholder="付款状态" size="small">
              <el-option v-for="item in payOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="发货状态" prop="goodsStatus">
            <el-select v-model="queryParams.goodsStatus" placeholder="发货状态" size="small">
              <el-option v-for="item in goodsOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="订单状态" size="small">
              <el-option v-for="item in orderOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名字" prop="GoodsName">
            <el-input
              v-model="queryParams.GoodsName"
              placeholder="请输商品名字"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="订单号" prop="order_sn">
            <el-input
              v-model="queryParams.order_sn"
              placeholder="请输订单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="下单时间" prop="addTimeInterval">
            <el-date-picker
              size="small"
              v-model="queryParams.addTimeInterval"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="收货人名字" prop="shipname">
            <el-input
              v-model="queryParams.shipname"
              placeholder="请输收货人名字"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="Tel">
            <el-input
              v-model="queryParams.Tel"
              placeholder="请输手机号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
           <el-button type="warning" plain icon="el-icon-download" @click="handleExport">导出订单</el-button>
           <el-button type="primary" plain icon="el-icon-position" @click="handleDelivery">批量发货</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table v-loading="loading" :data="orderList" :height="tableHeight" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="商品名称" align="center" width="200">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: space-around;flex-direction: row;">
              <el-image
                v-if="scope.row.Img!=''"
                style="width: 60px; height: 50px"
                :src="scope.row.Img"
                fit="fill"
              ></el-image>
              <span>{{ scope.row.GoodsName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" prop="order_sn"/>
        <el-table-column label="商品ID" align="center" prop="GoodsId"/>
        <el-table-column label="规格" align="center" prop="SpecDes"/>
        <el-table-column label="数量" align="center" prop="Quantity"/>
        <el-table-column label="订单金额" align="center" prop="Money"/>
        <el-table-column label="结算价格" align="center" prop="SellerMoney"/>
<!--        <el-table-column label="来源" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <p v-if="scope.row.Pt==0">供应链中台</p>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!--<el-table-column label="收货人姓名" align="center" prop=""/>-->
        <el-table-column label="收货人信息" align="center" width="300">
          <template slot-scope="scope">
            <div style="width:80%;margin:0 auto; text-align: left;">
              <span ><i class="el-icon-user"></i> {{scope.row.Shipname}}</span>
              <br/>
              <span ><i class="el-icon-phone-outline"></i> {{scope.row.Tel}}</span>
              <br/>
              <i class="el-icon-location-information"></i>
              {{scope.row.Province}}
              {{scope.row.City}}
              {{scope.row.Area}}
              {{scope.row.Town}}
              {{scope.row.Address}}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="付款时间" align="center" prop="Paytime"/>
        <el-table-column label="确认收货" align="center" prop="ConfirmTime"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 0 || scope.row.GoodsStatus == 3"
              size="mini"
              type="text"
              @click="fahuo(scope.row)"
            >去发货
            </el-button>
            <el-divider
              direction="vertical"
              v-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 0 || scope.row.GoodsStatus == 3"
            ></el-divider>
            <el-button
              v-else-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 1 || scope.row.GoodsStatus == 2 && scope.row.DeliverNo"
              size="mini"
              type="text"
              @click="handleWl(scope.row)"
              v-loading="loading"
            >物流
            </el-button>
            <el-divider
              direction="vertical"
              v-else-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 1 || scope.row.GoodsStatus == 2 && scope.row.DeliverNo"
            ></el-divider>
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 详情 -->
      <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body class="order-details" :close-on-click-modal="false">
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>订单信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>

                <tr>
                  <td>
                    <div class="cell">订单编号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.order_sn">{{form.order_sn}}</div>
                  </td>
                  <td>
                    <div class="cell">第三方订单号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.tx_sn">{{form.tx_sn}}</div>
                  </td>
                  <td>
                    <div class="cell">父订单号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.parent_order_sn">{{form.parent_order_sn}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">商品总价格</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.SellerMoney">{{form.SellerMoney}}</div>
                  </td>
                  <td>
                    <div class="cell">商品实付价格</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Money">{{form.Money}}</div>
                  </td>
                  <td>
                    <div class="cell">数量</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Quantity">{{form.Quantity}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">下单时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Addtime">{{form.Addtime}}</div>
                  </td>
                  <td>
                    <div class="cell">付款时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Paytime">{{form.Paytime}}</div>
                  </td>

                </tr>

                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>商品信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">商品图</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Img"><img :src="form.Img" alt="" width="320" height="198"></div>
                  </td>
                  <td>
                    <div class="cell">商品ID</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.GoodsId">{{form.GoodsId}}</div>
                  </td>

                </tr>
                <tr>
                  <td>
                    <div class="cell">商品名</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.GoodsName">{{form.GoodsName}}</div>
                  </td>
                  <td>
                    <div class="cell">商品规格</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.SpecDes">{{form.SpecDes}}</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <!--物流信息-->
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>物流信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">收货人姓名</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Shipname">{{form.Shipname}}</div>
                  </td>
                  <td>
                    <div class="cell">收货人电话</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Tel">{{form.Tel}}</div>
                  </td>
                  <td>
                    <div class="cell">收货人地址</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Address">{{form.Address}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">快递公司</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.DeliverName">{{form.DeliverName}}</div>
                  </td>
                  <td>
                    <div class="cell">快递单号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.DeliverNo">{{form.DeliverNo}}</div>
                  </td>
                  <td>
                    <div class="cell">发货时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Delivertime">{{form.Delivertime}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">运费</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Freight">{{form.Freight}}</div>
                  </td>
                  <td>
                    <div class="cell">查看物流信息</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.DeliverNo">
                      <el-button size="big" type="text" @click="handleWl(form)">点击查看</el-button>
                    </div>
                    <div class="cell" v-else>
                      <el-button size="big" type="text" @click="fahuo(form)">去发货</el-button>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>其他</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">售后时长</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.AftersaleTime">{{form.AftersaleTime}}</div>
                  </td>
                  <td>
                    <div class="cell">售后过期时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.AfterSaleOverTime">{{form.AfterSaleOverTime}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">备注</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Remark">{{form.Remark}}</div>
                  </td>
                  <td>
                    <div class="cell">用户备注</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.UserRemark">{{form.UserRemark}}</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 去发货 -->
      <el-dialog :title="title2" :visible.sync="open2" width="60%" append-to-body v-loading="loading" style="height: 40%">
        <el-form :model="sendGoods" ref="sendGoods" label-width="100px;">
          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="快递公司" prop="deliverName">
                <el-select v-model="sendGoods.deliverName" filterable clearable placeholder="请选择快递公司" @change="selectValue" style="width:70%">
                  <el-option v-for="item in expressList" :key="item.value" :label="item.label" size="small"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="快递单号" prop="deliverNo">
                <el-input
                  v-model="sendGoods.deliverNo"
                  placeholder="请输快递单号"
                  clearable
                  size="small"
                  style="width:70%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :span="24">
            <el-col :span="2" :offset="21">
              <el-form-item>
                <el-button type="primary" @click="submitForm()">提 交</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 物流信息 -->
      <el-dialog :title="title3" :visible.sync="open3" width="60%" append-to-body v-loading="loading">
        <el-timeline :reverse="reverse" style="padding: 10px 60px;">
          <el-timeline-item
            v-loading="loading"
            v-for="(activity, index) in expressInfo"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
          </el-timeline-item>
        </el-timeline>
      </el-dialog>
    </el-card>
<!--  批量发货  -->
    <el-dialog title="批量发货流程" :visible.sync="isDeliveryOpen" width="60%" center>
      <el-steps :active="3" align-center style="width:95%;margin: 0 auto;">
        <el-step title="导出发货Excel表单" description="">
          <template slot="icon">
            <img style="width: 30px;" src="../../../assets/image/dev1.png">
          </template>
        </el-step>
        <el-step title="按模板填写快递信息" description="">
          <template slot="icon">
            <img style="width: 30px;" src="../../../assets/image/dev2.png">
          </template>
        </el-step>
        <el-step title="上传发货单模板并提交" description="">
          <template slot="icon">
            <img style="width: 30px;" src="../../../assets/image/dev3.png">
          </template>
        </el-step>
      </el-steps>
      <div class="delivery-data-con">
        <el-upload
          action=""
          class="upload-demo"
          :auto-upload="false"
          :limit = '1'
          accept="*/*"
          :on-change = 'importExcel'
          :on-remove = 'removeDevExcel'
          ref="upload"
          ><el-button size="small" type="primary" >上传批量发货Excel表单</el-button>
<!--          <i slot="tip" class="el-upload__tip el-icon-info">请选取文本文件</i>-->
        </el-upload>
<!--        <el-upload-->
<!--          class="upload-demo"-->
<!--          action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler"-->
<!--          :on-preview="handlePreview"-->
<!--          :on-remove="handleRemove"-->
<!--          :before-remove="beforeRemove"-->
<!--          multiple-->
<!--          :limit="1"-->
<!--          :on-exceed="handleExceed"-->
<!--          :file-list="fileList">-->
<!--          <el-button size="small" type="primary" >上传批量发货Excel表单</el-button>-->
<!--&lt;!&ndash;          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
<!--        </el-upload>-->
<!--        <div class="submit-dev-form">-->
<!--          <el-button type="primary">上传批量发货Excel表单</el-button>-->
<!--        </div>-->
<!--        <div class="submit-dev-excel"></div>-->
      </div>
      <div class="delivery-tips-con">
        <p style="text-align: center">常见问题</p>
        <p>1、批量发货规则</p>
        <p>必须正确填写了“快递公司 快递单号”才会导入并更改订单状态为已发货!</p>
        <p>2、如何获取一个批量发货的excel文件？</p>
        <p>在商户后台左侧菜单的 “订单中心” 》“订单列表”里面可以将订单导出为Excel格式的文件，您可以在这里自由导出订单</p>
        <p>3、导出excel文件后，批量发货需要输入什么信息？</p>
        <p>在我们的导出的excel文件中，打开里面有“快递单号 快递公司”。 您可以在将正确的快递发货单号，快递公司填入对应的列里面，和对应的订单号一对应。然后保存提交，就可以用于批量发货了</p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDelivery">取 消</el-button>
        <el-button type="primary" @click="subDelivery">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import XLSX from "xlsx";
  import {listOrder, getOrder, sendOrder, getExpressInfo, updateOrder, getExpressList,exportOrder,deliveryOrder} from '@/api/module/order'
  import {dateFormat} from '@/utils'

  export default {
    name: "order",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //-------------------
        fullHeight: 0,
        tableHeight: 0,
        fullscreenLoading: false,
        // 时间线正序
        reverse: false,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 折扣金额表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 弹出层标题2
        title2: "",
        // 是否显示弹出层2
        open2: false,
        // 是否显示弹出层
        open3: false,
        isDeliveryOpen: false, // 批量发货对话框
        // 弹出层标题2
        title3: "",
        //快递公司
        expressList: [],
        //商品状态
        goodsOptions: [
          {label: "全部状态", value: -1},
          {label: "未发货", value: 0},
          {label: "已发货", value: 1},
          {label: "已收货", value: 2},
          {label: "配货中", value: 3},
          {label: "拒收", value: 4},
        ],
        //支付状态  付款状态:0:未付款,1:已付款,2申请退款,3,退款中,4已退款5退款申请失败（申请后20天内未处理）
        payOptions: [
          {label: "全部状态", value: -1},
          {label: "未付款", value: 0},
          {label: "已付款", value: 1},
          {label: "申请退款", value: 2},
          {label: "退款中", value: 3},
          {label: "已退款", value: 4},
          {label: "退款申请失败", value: 5},
        ],
        //订单状态:0:未处理,1,已作废,2,待退货,3,已退货,4,异常订单,10已处理
        orderOptions: [
          {label: "全部状态", value: -1},
          {label: "未处理", value: 0},
          {label: "已作废", value: 1},
          {label: "待退货", value: 2},
          {label: "已退货", value: 3},
          {label: "异常订单", value: 4},
          {label: "已处理", value: 10},
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          payStatus: null,
          goodsStatus: null,
          status: null,
          GoodsName: null,
          order_sn: null,
          shipname: null,
          Tel:null,
          beginTime: 0,
          endTime: 0,
          addTimeInterval: []
        },
        sendGoods: {
          orderSn: "",
          deliverNo: "",
          deliverName: "",
          deliverCode: "",
        },
        expressInfo: [],
        // 表单参数
        form: {},
        jsonData: [],
        excelList: []

      };
    },
    created() {
      this.getList();
      this.getExpress();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })
    },
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 110
      },
      // 保证日期初始化格式
      'queryParams.addTimeInterval'() {
        // select组件，clear的时候，将addTimeInterval的值，初始化为null，判断当其值为null时，赋值为数组
        if(!this.queryParams.addTimeInterval && typeof(this.queryParams.addTimeInterval) !== "undefined") {
          this.queryParams.addTimeInterval = [];
          this.queryParams.beginTime = 0;
          this.queryParams.endTime = 0;
        }
      }
    },
    methods: {
      // 获取所有物流
      getExpress() {
        getExpressList().then(res => {
          if(res.code === 1 && res.data) {
            this.expressList = res.data.expressLists;
          }else {
            this.$message({message: '数据出错啦！',type:'error'});
          }
        });
      },
      // 选择的物流数据
      selectValue(value) {
        this.sendGoods.deliverCode = value;
      },
      //物流
      handleWl: function (row) {
        this.loading = true;
        this.sendGoods.deliverCode = row.DeliverCode;
        this.sendGoods.deliverName = row.DeliverName;
        this.sendGoods.deliverNo = row.DeliverNo;
        this.sendGoods.orderSn = row.order_sn;
        getExpressInfo(this.sendGoods).then(res => {
          this.loading = false;
          if(res.code === 1) {
            this.open3 = true;
            this.title3 = "物流信息";
            this.expressInfo = res.data.data;
          }else {
            let msg = res.msg || '数据出错了';
            this.$message({type: 'error',message: msg});
          }
        });
      },
      //发货
      fahuo: function (row) {
        const order_sn = row.order_sn
        this.sendGoods.orderSn = order_sn
        this.open2 = true;
        this.title2 = "去发货";
      },
      // 批量发货
      handleDelivery(){
        this.isDeliveryOpen = true;
      },
      // 上传批量发货Excel表单前
      importExcel(file, fileList) {
        //this.excelList = fileList;
        this.excelList = [];
        let _this = this;
        _this.file2Xce(file).then(item => {
          if (item && item.length > 0) {
            // xlsxJson就是解析出来的json数据,数据格式如下
            // [{sheetName: sheet1, sheet: sheetData }]
            if (item[0] && item[0].sheet && item[0].sheet.length) {
              //_this.tableData = item[0].sheet  //把数据塞到表格预览
              console.log(743,item[0].sheet);
              this.excelList = item[0].sheet
            }
          }
        })
          .catch(error => {
            loading.close();
          })
      },
      /**
       * 解析文件
       * @param {Object} file
       */
      file2Xce(file) {
        return new Promise(function(resolve, reject) {
          const reader = new FileReader();
          reader.onload = function(e) {
            const data = e.target.result;
            this.wb = XLSX.read(data, {
              type: "binary"
            });
            const result = [];
            this.wb.SheetNames.forEach(sheetName => {
              result.push({
                sheetName: sheetName,
                sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
              });
            });
            resolve(result);
          };
          reader.readAsBinaryString(file.raw);
        });
      },
      removeDevExcel(file, fileList) {
        this.excelList = [];
        //console.log(781,this.excelList);
      },
      // ---------
      // tableToExcel(list){
      //   // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
      //   let title = `订单编号,第三方订单号,goodsFee,goodsStatus,orderStatus,goodsId,name,price,skuName\n`;
      //   //增加\t为了不让表格显示科学计数法或者其他格式
      //   for(let i = 0 ; i < list.length ; i++ ){
      //     for(let item in list[i]){
      //       title += `${list[i][item] + '\t'},`;
      //     }
      //     title += '\n';
      //   }
      //   //encodeURIComponent解决中文乱码
      //   let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title);
      //   //通过创建a标签实现
      //   var link = document.createElement("a");
      //   link.href = uri;
      //   //对下载的文件命名
      //   link.download =  "json数据表.csv";
      //   document.body.appendChild(link);
      //   link.click();
      //   document.body.removeChild(link);
      // } ,

      // --------------
      // 订单导出
      handleExport(row) {
        const rowIds = this.ids;
        let query = {page: 1, limit: 100}
        exportOrder(query).then(res => {
          if(res.code === 1) {
            const link = document.createElement('a');
            link.href = res.data;
            //link.download = '订单.xls'; //下载的文件名
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        });
        // return
        // this.$confirm('是否确认导出所选择的订单的数据？','警告',{
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(async()=> {
        //   this.loading = true;
        //   let delResult = await exportOrder(ids);
        //   this.loading = false;
        //   if(delResult.code === 1) {
        //     this.$message({type: 'success',message: delResult.msg});
        //   }
        //   if(delResult.code === 0) {
        //     this.$message({type: 'error',message: delResult.msg});
        //   }
        // }).catch(()=> {});

      },

      dateIfAddZero: function (time) {
        return time < 10 ? '0' + time : time
      },
      /** 查询折扣金额列表 */
      getList() {
        this.loading = true;
        listOrder(this.queryParams).then(response => {
          this.from = response.data.list;
          this.orderList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if(this.queryParams.addTimeInterval.length === 2) {
          this.queryParams.beginTime = new Date(this.queryParams.addTimeInterval[0]).getTime() / 1000;
          this.queryParams.endTime = new Date(this.queryParams.addTimeInterval[1]).getTime() / 1000;
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.beginTime = 0;
        this.queryParams.endTime = 0;
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.order_sn)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },

      /** 详情按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.loading = true
        const order_sn = row.order_sn || this.ids
        getOrder(order_sn).then(response => {
          //console.log("请求原始数据：",response);
          this.loading = false
          this.form = response.data.parms;
          this.form.Delivertime = dateFormat(response.data.parms.Delivertime * 1000, "Y-m-d H:i:s");
          this.form.Addtime = dateFormat(response.data.parms.Addtime * 1000, "Y-m-d H:i:s");
          this.expressList = response.data.expressLists;
          this.open = true;
          this.title = "订单详情";
        });
      },
      /** 发货按钮 */
      submitForm() {
        this.$refs["sendGoods"].validate(valid => {
          if (valid) {
            sendOrder(this.sendGoods).then(response => {
              if (response.code == 1) {
                this.msgSuccess("发货成功");
                this.open2 = false;
                this.open = false;
                this.getList();
              }
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const order_sns = row.order_sn || this.ids;
        this.$confirm('是否确认删除折扣金额编号为"' + order_sns + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delOrder(order_sns);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      // 取消批量发货
      cancelDelivery() {
        this.isDeliveryOpen = false;
        this.excelList = [];
      },
      // 提交导入数据
      subDelivery() {
        if(this.excelList.length === 0) {
          this.$message({type:'warning',message:'请先上传填写好的表格数据'});
          return
        }

        if(this.excelList.length > 0 && this.excelList[0].id && this.excelList[0].express_name &&
          this.excelList[0].express_sn && this.excelList[0].express_code) {
          deliveryOrder(this.excelList).then(res=> {
            //console.log(954,res)
            if(res.code === 1) {
              this.isDeliveryOpen = false;
              this.$message({type:'success',message:'批量发货成功'});
              this.getList();
            }else {
              let msg = res.message || '批量发货失败'
              this.$message({type:'error',message:msg});
            }
          });
        }else {
          this.$message({type:'error',message:'导入表格数据有误'});
        }
      }
    } //methods结束
  };
</script>
<style scoped lang="scss" type="text/stylus">
  .order-details{
    /deep/.el-dialog {
      height: 80%;
      overflow: hidden;
    }
    /deep/.el-dialog__body {
      height: calc(100% - 120px);
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }

  /deep/.queryFormInline {
    .el-form-item:nth-child(1) {
      margin-bottom: 10px ;
    }
  }
  .delivery-tips-con,.delivery-data-con {
    width: 80%;
    margin: 5px auto;
  }
  .delivery-data-con {
    height: 100px;
    margin: 40px auto;
  }
  .upload-demo {
    text-align : center;
  }
  //.submit-dev-form {
  //  text-align : center;
  //}
  //.submit-dev-excel {
  //  overflow-x:hidden;
  //  overflow-y:scroll;
  //}
  .delivery-tips-con {
    font-size: 12px;
  }
  /deep/.el-step__title.is-finish {
    color: #333
  }
</style>
