<template>
  <div class="p_all_20">
      <div class="dataTotal_box">
        <el-form
          ref="form"
          label-width="100px"
          :model="searchParam"
        >
          <div class="dataTotal">

            <div class="tit02">
              <div class="btnbox">
              <span
                :class="nowTime == 1?'actf60':''"
                @click="tabDate(1)"
              >今天</span>
                <span
                  :class="nowTime == 2?'actf60':''"
                  @click="tabDate(2)"
                >昨天</span>
                <span
                  :class="nowTime == 3?'actf60':''"
                  @click="tabDate(3)"
                >最近7天</span>
                <span
                  :class="nowTime == 4?'actf60':''"
                  @click="tabDate(4)"
                >最近30天</span>
              </div>
              <el-form-item
                label="日期"
                prop="orderCode"
                style="margin-bottom:0;"
              >
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  range-separator="-"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                  @change="changeTime"
                />
              </el-form-item>
            </div>
            <div style="width: 100%;background: #d2d2d2;height: 1px;margin: 15px auto"></div>
          </div>

          <el-row :gutter="10">
            <el-col :span="8">
            <el-form-item
              label="搜索"
              prop="tradeNo"
            >
              <el-input
                v-model="searchParam.search"
                placeholder="请输入订单号/流水号"
              ></el-input>
            </el-form-item>
          </el-col>
            <el-col :span="8" v-if="false">
              <el-form-item
                label="买家信息"
                prop="tradeNo"
              >
                <el-input
                  v-model="searchParam.sellerInformation"
                  placeholder="请输入名称/支付宝账号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="false">
              <el-form-item
                label="卖家信息"
                prop="tradeNo"
              >
                <el-input
                  v-model="searchParam.buyerInformation"
                  placeholder="请输入卖家信息"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="收货人姓名"
                prop="tradeNo"
              >
                <el-input
                  v-model="searchParam.receiverName"
                  placeholder="请输入收货人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button
                  type="primary"
                  @click="handleSearch"
                >搜索</el-button>
                <el-button
                  type=""
                  @click="handleRest"
                >重置</el-button>
                <a
                  :href="exportMain"
                  style="margin-left: 10px;"
                  v-show="tableData.length"
                >
                  <el-button>导出</el-button>
                </a>
                <el-button
                  v-show="!tableData.length"
                  @click="alertAll"
                >导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="box">
        <div style="padding: 20px 10px;background: #f6f9ff">
          <span style="margin-right: 20px;display: inline-block">订单笔数：{{infoData.orderCount}} </span><span>订单金额：￥{{infoData.AllTotalFee||0}}</span>
        </div>
        <el-table
          v-loading="zLoading"
          :data="tableData"
          border
          show-header
          style="width: 100%;margin-top: 15px"
        >
          <el-table-column
            prop="orderCode"
            align="center"
            label="订单号"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            align="center"
            label="买家"
          >
          </el-table-column>
          <el-table-column
            prop="amount"
            align="center"
            label="收货人/联系电话"
          >
            <template slot-scope="scope">
              <p>{{scope.row.receiver}}</p>
              <p>{{scope.row.phone}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="tradeNo"
            align="center"
            label="流水号"
          >
          </el-table-column>

          <!--<el-table-column-->
            <!--prop="buyerEmail"-->
            <!--align="center"-->
            <!--label="买家支付宝账号"-->
          <!--&gt;-->
          <!--</el-table-column>-->

          <el-table-column
            prop="remark"
            align="center"
            label="订单金额（元）"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.totalFee">￥{{scope.row.totalFee}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="completionDate"
            align="center"
            label="完成时间"
          >
          </el-table-column>

        </el-table>
        <el-pagination
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParam.pageNum"
          :page-sizes="[10,20,30, 40]"
          :page-size="searchParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "order",
    data() {
      return {
        zLoading:false,
        tabPosition:1,
        infoData: {},
        tableData: [],
        date: "",
        pageTotal: 1,
        typeStatused: -1,
        nowTime: 4,
        searchParam: {
          "pageNum":1,//页码
          "pageSize":20,//每页条数
          "dayType":4,//0-全部  1-今天 2-昨天 3-最近七天 4-最近30天
          "beginDate":"",//开始时间
          "endDate":"",//结束时间
          "search":"",//
          "sellerInformation":"",//买家信息
          "buyerInformation":"",//卖家信息
          "receiverName":""//收货人姓名
        },
        typeStatus: [
          {
            label: "全部",
            value: -1
          },
          {
            label: "营收",
            value: 0
          },
          // {
          //   label: "退款",
          //   value: 1
          // },
          {
            label: "提现",
            value: 2
          }
        ],
        totalData: {}
      };
    },
    mounted() {
      this.date = [
        new Date(this.format(new Date())),
        new Date(this.format(new Date(), 1))
      ];
      this.getInfo();
      this.getList();
    },
    computed: {
      exportMain() {
        // var sePar = this.searchParam;
        // var par = "";

        // for (let se in sePar) {
        //   par += "&" + se + "=" + sePar[se];
        // }
        // return "/api/mypay/record/export?ids=" + par;
        var info = localStorage.getItem('info') == "" ? "" : JSON.parse(localStorage.getItem('info'));
        var token = info && info.token ? info.token : '';
        var params = this.searchParam;
        params.token = token;
        let dataparams = qs.stringify(params);
        // return this.HOST + this.exportmainUrl+'?' + dataparams;
        return '/api/mypay/exportOrderAlipayTurnoverList?' + dataparams;
      }
    },
    methods: {
      alertAll() {
        this.$message.warning("暂无数据，导出无效！");
      },
      format(time, val) {
        let t = "";
        if (this.nowTime == 2) {
          t = new Date(time.getTime() - 3600 * 1000 * 24 * 1);
        } else if (this.nowTime == 3) {
          t = new Date(time.getTime() - 3600 * 1000 * 24 * 6);
        } else if (this.nowTime == 4) {
          t = new Date(time.getTime() - 3600 * 1000 * 24 * 29);
        } else {
          t = new Date(time.getTime());
        }
        var tf = function(i) {
          return (i < 10 ? "0" : "") + i;
        };
        let format = "yyyy-MM-dd";
        let formatStr = /yyyy|MM|dd|HH|mm|ss/g;

        if (val == 1) {
          t = new Date(time.getTime());
        } else if (val == 2) {
          t = new Date(time.getTime() - 3600 * 1000 * 24 * 1);
        }

        return format.replace(formatStr, function(a) {
          switch (a) {
            case "yyyy":
              return tf(t.getFullYear());
            case "MM":
              return tf(t.getMonth() + 1);
            case "dd":
              return tf(t.getDate());
            case "HH":
              return tf(t.getHours());
            case "mm":
              return tf(t.getMinutes());
            case "ss":
              return tf(t.getSeconds());
          }
        });
      },

      changeTime(v) {
        if (v && v.length) {
          this.nowTime = 0;
          this.date = v;
          this.searchParam.pageNum = 1;
          this.getList();
        }
      },

      tabDate(v) {
        this.nowTime = v;
        this.searchParam.dayType=v
        this.searchParam.pageNum = 1;
        if (v == 2) {
          this.date = [
            new Date(this.format(new Date())),
            new Date(this.format(new Date(), 2))
          ];
        } else {
          this.date = [
            new Date(this.format(new Date())),
            new Date(this.format(new Date(), 1))
          ];
        }
        this.getInfo()
        this.getList();
      },
      getInfo() {
        let _this = this;
        this.$axios
          .get("/mypay/orderAlipayTurnoverStatistics",{params:this.searchParam})
          .then(function(res) {
            if (res.data.code == 200) {
              _this.infoData = res.data.data;
            } else {
              _this.$message.warning(res.data.message);
            }
          })
          .catch(function(res) {
            console.log(res);
          });
      },
      getList() {
        this.zLoading=true
        let _this = this;
        if (this.nowTime) {
          this.searchParam.beginDate = this.format(new Date())
            .split(",")
            .join("-")+' 00:00:00';
          this.searchParam.endDate = this.format(new Date(), 1)
            .split(",")
            .join("-")+' 23:59:59';
          if (this.nowTime == 2) {
            this.searchParam.endDate = this.format(new Date(), 2)
              .split(",")
              .join("-")+' 23:59:59';
          }
        } else {
          this.searchParam.beginDate = this.format(new Date(this.date[0]))
            .split(",")
            .join("-")+' 00:00:00';
          this.searchParam.endDate = this.format(new Date(this.date[1]))
            .split(",")
            .join("-")+' 23:59:59';
        }
        let params = this.searchParam;
        this.$axios
          .post("/mypay/orderAlipayTurnoverList", params)
          .then(function(res) {
            if (res.data.code == 200) {
              _this.zLoading=false
              if (res.data.data.list) {
                _this.tableData = res.data.data.list;
              }
              _this.pageTotal = res.data.data.total;
            } else {
              _this.zLoading=false
              _this.pageTotal=0
              _this.tableData=[]
              _this.$message.warning(res.data.message);
            }
          })
          .catch(function(res) {
            console.log(res);
          });
      },
      handleSizeChange: function(e) {
        var that = this;
        that.searchParam.pageSize = e;
        that.getList();
      },
      handleCurrentChange: function(e) {
        var that = this;
        that.searchParam.pageNum = e;
        that.getList();
      },
      handleSearch: function(e) {
        var that = this;
        that.searchParam.pageNum = 1;
        that.getInfo()
        that.getList();
      },
      handleRest: function(e) {
        var that = this;
        that.nowTime = 4;
        that.searchParam.search = "";
        that.searchParam.sellerInformation = "";
        that.searchParam.buyerInformation = "";
        that.searchParam.receiverName = '';
        this.date = [
          new Date(this.format(new Date())),
          new Date(this.format(new Date(), 1))
        ];
        that.getList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .titborder {
    border-bottom: 1px solid #ccc;
  }
  .tit {
    padding: 0px 0px 10px;
    font-size: 16px;
    color: #6b6b6b;
    overflow: hidden;
  }
  .tit:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 24px;
    background: #147ef9;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .box {
  }
  .box .search {
    font-size: 16px;
  }
  .page {
    margin-top: 15px;
    text-align: center;
  }
  .selected {
    background: transparent;
  }
  .titspan {
    line-height: 24px;
    vertical-align: middle;
    font-size: 16px;
  }
  .reset a {
    text-align: right;
    float: right;
    display: block;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #147ef9;
    font-size: 14px;
    cursor: pointer;
    color: #f60;
  }
  .showbox {
    margin: 15px;
    padding: 0px 50px;
    background: rgba(241, 241, 241, 1);
    border-radius: 4px;
  }
  .show {
    height: 160px;
    font-size: 14px;
    display: flex;
    align-items: center;
    .btn{
      width: 14%;
      float: left;
    }
  }
  .left {
    width: 86%;
    float: left;
    display: flex;
    .one {
      text-align: center;
    }
    .two {
      padding-left: 158px;
      text-align: center;
    }
  }
  .left .title {
    font-size: 24px;
    color: #333333;
    padding-top: 19px;
  }
  .left .text {
    font-size: 30px;
    color: #00aaee;
    font-weight: bold;
  }
  .btn a {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    width: 56px;
    text-align: center;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    background-color: #f60;
    //border:1px solid #f60;
    color: #fff;
  }
  .el-button--primary {
    background-color: #f60;
    border-color: #f60;
  }
  .timeInput01 {
    padding-left: 10px;
  }
  .jihuoText {
    font-size: 34px;
    color: #f60;
  }
  .btndef a {
    background-color: #ccc;
  }
  .inputWidth {
    width: 230px;
    margin-right: 10px;
  }
  .boxSear {
    overflow: hidden;
    padding-right: 15px;
  }
  .dataTotal_box {
  }
  .showInfo {
    display: flex;
    padding: 30px 0;
    border-top: 2px solid rgba(107, 107, 107, 0.1);
  }

  .showInfo .item {
    flex: 1;
    text-align: center;
  }
  .showInfo .data {
    color: #00aaee;
    font-size: 28px;
  }

  .dataTotal {
    color: #6b6b6b;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .dataTotal .tit02 {
    display: flex;
  }
  .dataTotal .totaltit {
    line-height: 38px;
    flex: 1;
  }
  .dataTotal .btnbox {
  }

  .dataTotal .btnbox span {
    display: inline-block;
    padding: 10px 6px;
    margin-bottom: 0px;
    cursor: pointer;
    transition: transform 0.3s;
    position: relative;
  }
  .dataTotal .actf60 {
    color: #f60;
    position: relative;
  }
  .dataTotal .actf60:after {
    position: absolute;
    content: "";
    width: 60%;
    height: 2px;
    background: #f60;
    bottom: -3px;
    left: 20%;
    z-index: 2;
  }
</style>
