<template>
  <div>
    <div style="display: inline-block;">
      <div style="margin:5px;display: inline-block;">
        <span>开始时间：</span>
        <el-date-picker
          style="width: 220px;margin-left: 10px;"
          v-model="startTime"
          align="right"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间"
        >
        </el-date-picker
        >&nbsp;&nbsp;&nbsp;
      </div>
      <div style="margin:5px;display: inline-block;">
        <span>截止时间：</span>
        <el-date-picker
          style="width: 220px;margin-left: 10px;"
          v-model="endTime"
          align="right"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择截止时间"
        >
        </el-date-picker>
      </div>
      <div style="position: relative;display: inline-block;margin: 3px;">
          <span>骑手所在站点:</span>
          <el-select
            @change="phoneSelect"
            :clearable="true"
            v-model="stationName"
            placeholder="请选择骑手所在站点"
          >
            <el-option
              :label="i.stationName"
              :value="i.id"
              :key="i.id"
              v-for="i in stationData"
            ></el-option> </el-select
          >&nbsp;&nbsp;
        </div>
      <div style="position: relative;display: inline-block;margin: 3px;">
        <span>骑手姓名:</span>
        <el-input
          style="width: 200px;"
          @keydown.enter.native="phoneSelect"
          placeholder="请输入骑手姓名"
          v-model="riderName"
        >
        </el-input
        >&nbsp;&nbsp;
      </div>
      <div style="position: relative;display: inline-block;margin: 3px;">
        <span>骑手手机号:</span>
        <el-input
          style="width: 200px;"
          @keydown.enter.native="phoneSelect"
          placeholder="请输入骑手姓名"
          v-model="riderPhone"
        >
        </el-input
        >&nbsp;&nbsp;
      </div>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="primary"
        icon="document"
        @click="select"
        >查询
      </el-button>
      <el-button
          style="margin:10px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleans"
          >重置
        </el-button>
      <el-button
        style="margin-left:15px;"
        size="mini"
        type="warning"
        icon="document"
        @click="exportBtn"
        >导出Excel
      </el-button>
    </div>
    <div style="color: orange;">
      * 提示：骑手3月24期初金额=3月23期末余额<br>
      期初金额+收入-提现金额-提现手续费+骑手赠送余额=期末金额
    </div>
    <el-table v-loading="tableDataLoading" :data="duanxinData.list">
      <el-table-column fixed prop="complaintId" label="编号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="骑手姓名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="骑手手机号" align="center">
      </el-table-column>
      <el-table-column prop="stationName" label="骑手所在站点" align="center">
      </el-table-column>
      <el-table-column prop="dayId" label="日期" align="center">
      </el-table-column>
      <el-table-column prop="startMoney" label="期初金额（元）" align="center">
      </el-table-column>
      <el-table-column
        prop="revenue"
        label="收入（元）"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="revenueCount"
        label="收入笔数"
        align="center"
      >
        <template slot-scope="scope">
          <div
            style="color: #4f9dec;cursor: pointer;"
            @click="incomeNum(scope.row)"
          >
            {{ scope.row.revenueCount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="riderPayouts"
        label="提现金额（元）"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="riderPayoutsRates"
        label="提现手续费"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="riderPayoutsCount" label="提现笔数" align="center">
        <template slot-scope="scope">
          <div
            style="color: #4f9dec;cursor: pointer;"
            @click="riderNum(scope.row)"
          >
            {{ scope.row.riderPayoutsCount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="endMoney" label="期末金额（元）" align="center">
      </el-table-column>
      <el-table-column prop="sysGiftAmount" label="赠送骑手余额（元）" align="center">
      </el-table-column>
      <el-table-column prop="totalIncome" label="总收益（元）" align="center">
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next,jumper"
        :total="duanxinData.totalCount"
      >
      </el-pagination>
    </div>

    <!-- 导出限制 -->
    <el-dialog
      custom-class="export"
      :visible.sync="exportVisible"
      center
      :title="exportTitle"
      :close-on-click-modal="false"
    >
      <div class="con" v-show="exportFlag == 1">
        <img src="../../assets/img/error.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >当前导出条数超过50000条，暂不支持导出</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：数据中的图片、附件只能以链接的形式导出）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 2">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出中...</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 3">
        <img src="../../assets/img/success.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出成功</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 4">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >版本迭代中，导出暂时无法使用</span
        >
      </div>
      <div class="btn">
        <el-button type="primary" @click="exportAffirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      activeName: "first",
      tableDataLoading: false,
      dialogFormVisible: false,
      checkBoxData: [], //多选框选择的值

      startTime: "",
      endTime: "",
      stationName:"",
      riderName:"",
      riderPhone:"",
      filename: "",
      state: "",
      stationData:"",

      statesnum2:[
        {label:"待导出",value:0},
        {label:"导出完成",value:1},
        {label:"导出失败",value:2},
      ],
      duanxinData: [],

       // 导出限制
       exportTitle: "导出错误",
      exportVisible: false,
      exportFlag: 1, //1 超出限制  2导出中
    };
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    //处理默认选中当前日期
    getNowTime1() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
      var mm =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
      var ss =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
      return defaultDate;
      this.$set(this.info, "stockDate", defaultDate);
    },
    getNowTime2() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
      this.$set(this.info, "stockDate", defaultDate);
    },
    //处理默认选中当前日期
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth() - now.getMonth(); //得到月份
      var date = now.getDate() - now.getDate() + 1; //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
      this.$set(this.info, "stockDate", defaultDate);
    },
    // 查询
    select() {
      if(this.state==null){
        this.state=''
      }
      this.page = 1;
      this.limit = 10;
      this.dataSelect();
    },
    // 重置
    cleans() {
      // this.filename = "";
      this.riderName = "";
      this.startTime = "";
      this.endTime = "";
      this.riderPhone = "";
      this.stationName = "";
      this.page = 1;
      this.dataSelect();
    },
    refresh() {
      this.dataSelect();
    },
    stationList() {
      this.$http({
        url: this.$http.adornUrl("admin/riderStation/selectStationList"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          size: 1000
        })
      }).then(({ data }) => {
        console.log(data, "骑手站点");
        this.tableDataLoading = false;
        let returnData = data.data.list;
        this.stationData=returnData
      });
    },
    phoneSelect(){},
    // 获取派单数据列表
    dataSelect() {
      console.log(this.state);
      // if (this.endTime == '') {
      // 	  this.endTime = this.info2.stockDate2
      //   }
      //   if (this.startTime == '') {
      // 	  this.startTime = this.info.stockDate
      //   }
      this.tableDataLoading = true;
      var userId = this.$cookie.get('userId')
      this.$http({
        url: this.$http.adornUrl("reconciliation/riderBill"),
        method: "post",
        data: this.$http.adornData({
          page: this.page,
          limit: this.limit,
          riderName:this.riderName,// 骑手姓名
          riderPhone:this.riderPhone,// 骑手手机号
          riderStation:this.stationName,
          startDate: this.startTime, //开始时间
          endDate: this.endTime, //结束时间
        })
      }).then(({ data }) => {
        // console.log(data,'骑手');

        if (data && data.code === 0) {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.duanxinData = returnData;
          // console.log(data.data,'骑手对账');
        }
      });
    },
    // 下载文件
    downFile(row){
      var userId = this.$cookie.get('userId')
      this.$http({
        url: this.$http.adornUrl("admin/export/readBuffer"),
        method: "get",
        responseType: "blob",
        params: this.$http.adornParams({
          filename:row.fileName,// 文件名称
          userId:userId,
        })
      }).then(({ data }) => {
        console.log(data, "导出");
        let blob = new Blob([data], {
          type:
            "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob);
        } else {
          let url = window.URL.createObjectURL(blob);
          let elink = document.createElement("a");
          elink.download = row.fileName;
          elink.style.display = "none";
          elink.href = url;
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
        }
      });
    },

    // 导出execl
    exportBtn() {
      console.log(this.totalnum, "导出条数");
      this.exportTitle = "导出";
      // this.exportFlag = 4;
      this.exportVisible = true;
      if (this.totalnum >= 50000) {
        this.exportTitle = "导出错误";
        this.exportFlag = 1;
      } else {
        this.exportTitle = "导出";
        this.exportFlag = 2;
        this.exportVisible = true;
        var userId = this.$cookie.get("userId");
        this.$http({
          url: this.$http.adornUrl("admin/export/excelRiderBill"),
          method: "get",
          // responseType: "blob",
          params: this.$http.adornParams({
            userId: userId,
            riderName:this.riderName,// 骑手姓名
            riderPhone:this.riderPhone,// 骑手手机号
            riderStation:this.stationName,
            startDate: this.startTime, //开始时间
            endDate: this.endTime, //结束时间
          })
        }).then(({ data }) => {
          console.log(data, "导出");
          if (data.code == 0) {
            this.exportTitle = "导出成功";
            this.exportFlag = 3;
          }
          // let blob = new Blob([data], {
          //   type:
          //     "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          // });
          // if (window.navigator.msSaveOrOpenBlob) {
          //   navigator.msSaveBlob(blob);
          // } else {
          //   let url = window.URL.createObjectURL(blob);
          //   let elink = document.createElement("a");
          //   elink.download = "订单列表.xlsx";
          //   elink.style.display = "none";
          //   elink.href = url;
          //   document.body.appendChild(elink);
          //   elink.click();
          //   document.body.removeChild(elink);
          // }
        });
      }
    },
    exportAffirm() {
      this.exportVisible = false;
    },


    // 收入笔数跳转
    incomeNum(row){
      console.log(row,'收入笔数跳转');
      this.$router.push({ name: 'userDetail',params:{type:'rider',activeName:'shouyi',flag:'day',dayId:row.dayId},query: { userId: row.userId } });
    },
    // 提现笔数跳转
    riderNum(row){
      console.log(row,'提现笔数跳转');
      this.$router.push({ name: 'financeListRun', params: { type:'rider',refund: 1,dayId:row.dayId,phone:row.phone,
      userName:row.userName } });
    },
  },
  mounted() {
    this.dataSelect();
    this.stationList()
  },
};
</script>

<style  scoped="scoped">
/* 导出限制 */
.export {
  width: 500px;
}
.export .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
 .export .con .gundong {
  animation: gundong 3s linear infinite;
}
@keyframes gundong {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    transform: rotate(0deg);
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    transform: rotate(360deg);
  }
}
 .export img {
  width: 70px;
}
 .export .btn {
  display: flex;
  flex-direction: row-reverse;
}
</style>
