<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form class="form-params" :model="queryParams" label-width="auto" :inline="true" size="small">
          <el-form-item label="提现时间" prop="cashTime">
            <el-date-picker
              v-model="queryParams.cashTime"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="提现状态" prop="pay_status">
            <el-select v-model="queryParams.pay_status" placeholder="全部类型" clearable >
              <el-option label="全部类型" :value="-1"></el-option>
              <el-option label="打款中" :value="0" ></el-option>
              <el-option label="提现成功" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="withdrawlogList" :height="tableHeight">
        <el-table-column label="序号" align="center" width="55">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现流水单号" align="center" prop="sn" width="240"></el-table-column>
        <el-table-column label="提现时间" :formatter="formatTime" align="center" prop="created_time"></el-table-column>
        <el-table-column label="提现金额" :formatter="formatFee" align="center" prop="amount"></el-table-column>
        <el-table-column label="手续费" :formatter="formatFee" align="center" prop="service_fee"></el-table-column>
        <el-table-column label="实际到账金额" :formatter="formatFee" align="center" prop="real_amount"></el-table-column>
        <el-table-column label="提现状态" align="center" prop="pay_status">
          <template slot-scope="scope">
            <span v-if="scope.row.pay_status == 0">打款中</span>
            <span v-if="scope.row.pay_status == 1">提现成功</span>
          </template>
        </el-table-column>
        <el-table-column label="开票状态" align="center" prop="invoice_status">
          <template slot-scope="scope">
            <span v-if="scope.row.invoice_status == 0">未开票</span>
            <span v-if="scope.row.invoice_status == 1">已开票</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="footer_pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
  import { getWithdrawData } from '@/api/module/bankcard'
  import { dateFormat } from '@/utils'

  export default {
    name: "withdrawlog",
    data() {
      return {
        fullHeight: 0,
        tableHeight: 0,
        // 查询参数
        queryParams: { // 查询参数
          sellerId: 0,
          cashTime: [],
          pay_status: ''
        },
        total: 0,
        currentPage: 1,
        pageSize: 20,
        withdrawlogList: [],
      };
    },
    created() {
      /** 查询 提现记录 列表 */
      this.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })
    },
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 100;
      }
    },
    methods: {
      /** 查询 提现记录 列表 */
      getList() {
        let params = {
          page: this.currentPage,
          limit: this.pageSize,
        }

        if (this.queryParams.pay_status === 0 || this.queryParams.pay_status === 1) {
          params['pay_status'] = this.queryParams.pay_status
        }

        if( this.queryParams.cashTime && this.queryParams.cashTime.length == 2) {
          params['start_time'] = new Date(this.queryParams.cashTime[0]).getTime() / 1000;
          params['end_time'] = new Date(this.queryParams.cashTime[1]).getTime() / 1000;
        }

        getWithdrawData(params).then(response => {
          if (response) {
            this.withdrawlogList = response.data.data;
            this.total = response.data.count;
          } else {
            this.$message({message: '数据出错啦！', type: 'error'});
          }
        });
      },
      /** 详情 跳转 */
      viewDetails(row) {
        const indexId = row.id ? row.id : 0;
        this.$router.push({
          path: '/system/asset/wddetails',
          query: { withdrawId: indexId }
        });
      },
      /** 重置 搜索条件 */
      resetQuery() {
        this.queryParams = { // 查询参数
          sellerId: 0,
          cashTime: [],
          pay_status: ''
        }
        this.currentPage = 1
        this.pageSize = 20
        this.getList();
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },

      /** 格式化价格 返回原数据是 分，除以100 */
      formatFee(row, s, value, i) {
        let nm = 0,
        money = value
        if (money > 0) {
          nm = money / 100
        }
        return nm
      },
      /** 格式化时间 */
      formatTime(row) {
        var Time = row.created_time
        var newtime = ""
        if (Time > 0) {
          newtime = dateFormat(Time * 1000, "Y-m-d H:i:s");
        }
        return newtime
      },

      // 取消按钮
      cancel() {
        // this.open = false;
        // this.reset();
      },
      // 表单重置
      reset() {
        // this.form = {
        //   id: null,
        //   reflect_sn: null,
        //   reflect_money: null,
        //   status: 0,
        //   des: null,
        //   seller_bank_id: null,
        //   add_time: null,
        //   fee: null,
        //   seller_id: null,
        //   after_reflect_money: null
        // };
        // this.resetForm("form");
      },

    } //methods结束
  };
</script>
<style scoped>
  .form-params .el-form-item {
    margin: 10px 0 10px 10px;
  }

  /* 分页 */
  .footer_pagination {
    text-align: center;
    margin-top: 15px;
  }
</style>