<template>
  <div class="p_all_20">
    <div class="tit titborder">
      <el-radio-group v-model="tabPosition">
        <!--<el-radio-button :label="1">余额</el-radio-button>-->
        <el-radio-button :label="2">支付宝</el-radio-button>
      </el-radio-group>
      <span
        class="reset"
        v-if="infoData.activate"
      >
        <router-link to="/checking/setpassword">重置提现密码</router-link>
      </span>

    </div>
    <div v-if="tabPosition==1">
      <div class="showbox">
        <div
          class="show"
          v-if="infoData.activate"
        >
          <div class="left">
            <div class="one">
              <div class="text">¥{{infoData.balance?infoData.balance:0}}</div>
              <div class="title">可用余额</div>
            </div>
            <div class="two">
              <div class="text">¥{{infoData.waitReceiveAmount?infoData.waitReceiveAmount:0}}</div>
              <div class="title">待确认金额</div>
            </div>
          </div>

          <span class="btn"  v-if="infoData.activate">
            <router-link to="/checking/withdraw">去提现</router-link>
        </span>
          <span class="btn btndef" v-else> <a href="javascript:void(0);">去提现</a></span>
        </div>
        <div
          class="show"
          v-else
        >
          <div class="left">
            <div class="jihuoText">您还未激活提现账号！</div>
          </div>
          <span class="btn">
            <router-link :to="{path:'/checking/setpassword',query:{goAct:true}}">去激活</router-link>
          </span>
        </div>
      </div>
      <div class="tit">账户记录</div>

      <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>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="搜索"
                prop="tradeNo"
              >
                <el-input
                  v-model="searchParam.tradeNo"
                  placeholder="请输入订单号/流水号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item
                label="类型"
                prop="invoiceNo"
              >
                <el-select
                  v-model="searchParam.type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in typeStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <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-form-item>
			    </el-col> -->
          </el-row>

          <div class="showInfo">
            <div class="item">
              营收：
              <span class="data">¥{{totalData.inCome?totalData.inCome:0}}</span>
            </div>
            <div class="item">
              提现：
              <span class="data">¥{{totalData.withdraw?totalData.withdraw:0}}</span>
            </div>
          </div>

        </el-form>
      </div>
      <div class="box">

        <el-table
          :data="tableData"
          border
          show-header
          style="width: 100%"
        >
          <el-table-column
            prop="tradeNo"
            align="center"
            label="流水号"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            align="center"
            label="类型"
          >
            <!-- <template slot-scope="scope">
		  {{scope.row.type==3?'营销':(scope.row.type==7?'提现':'')}}
		</template> -->
          </el-table-column>
          <el-table-column
            prop="amount"
            align="center"
            label="金额(元)"
          >
          </el-table-column>
          <el-table-column
            prop="balance"
            align="center"
            label="交易后余额(元)"
          >
          </el-table-column>

          <el-table-column
            prop="time"
            align="center"
            label="时间"
          >
          </el-table-column>

          <el-table-column
            prop="remark"
            align="center"
            label="备注"
          >
            <template slot-scope="scope">
              <a
                :href="'/order/frmOrderDetail?orderid='+ scope.row.orderId"
                v-if="scope.row.jumpOrder"
                target="_blank"
              >{{scope.row.remark}}</a>
              <span v-else>{{scope.row.remark}}</span>

            </template>
          </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>
    <div v-if="tabPosition==2">
      <zhifubao></zhifubao>
    </div>
  </div>
</template>

<script>
  import zhifubao from './zhifubao'
import qs from 'qs'
export default {
    components:{zhifubao},
  name: "order",
  data() {
    return {
      tabPosition:2,
      infoData: {},
      tableData: [],
      date: "",
      pageTotal: 1,
      typeStatused: -1,
      nowTime: 4,
      searchParam: {
        pageNum: 1,
        pageSize: 20,
        type: -1,
        beginDate: "",
        endDate: "",
        tradeNo: ""
      },
      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();
    this.getStatistics();
  },
  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/record/export?' + 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();
        this.getStatistics();
      }
    },

    tabDate(v) {
      this.nowTime = 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.getList();
      this.getStatistics();
    },
    getStatistics() {
      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';
      }

      this.$axios
        .get("/mypay/statistics", {
          params: {
            beginDate: this.searchParam.beginDate,
            endDate: this.searchParam.endDate
          }
        })
        .then(function(res) {
          if (res.data.code == 200) {
            _this.totalData = res.data.data?res.data.data:{};
          } else {
            _this.$message.warning(res.data.message);
          }
        })
        .catch(function(res) {
          console.log(res);
        });
    },
    getInfo() {
      let _this = this;
      this.$axios
        .get("/mypay/balance/info")
        .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() {
      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/record/list", params)
        .then(function(res) {
          if (res.data.code == 200) {
            if (res.data.data.list) {
              _this.tableData = res.data.data.list;
            }
            _this.pageTotal = res.data.data.total;
          } else {
            _this.$message.warning(res.data.message);
          }
        })
        .catch(function(res) {
          console.log(res);
        });
    },
    handleSizeChange: function(e) {
      var that = this;
      that.searchParam.pageSize = e;
      that.getList();
      that.getStatistics();
    },
    handleCurrentChange: function(e) {
      var that = this;
      that.searchParam.pageNum = e;
      that.getList();
      that.getStatistics();
    },
    handleSearch: function(e) {
      var that = this;
      that.searchParam.pageNum = 1;
      that.getList();
      that.getStatistics();
    },
    handleRest: function(e) {
      var that = this;
      that.nowTime = 4;
      that.searchParam.tradeNo = "";
      that.searchParam.type = "";
      that.searchParam.pageNum = 1;
      this.date = [
        new Date(this.format(new Date())),
        new Date(this.format(new Date(), 1))
      ];
      that.getList();
      that.getStatistics();
    }
  }
};
</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: #FF6800;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 5px;
}
.box {
  padding: 15px;
}
.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 #ff6800;
  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 {
  background: #f1f1f1;
  padding: 20px 30px 0px;

  box-sizing: border-box;
  margin: 0 15px;
}
.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>
