<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form class="form-params" :model="queryParams" :inline="true" size="small">
          <el-form-item label="关联订单单号：" prop="order_sn">
            <el-input
              v-model="queryParams.order_sn"
              placeholder="请输入关联订单单号"
              clearable
              style="width:230px"
            /></el-form-item>

          <el-form-item label="查询时间" prop="searchTime">
            <el-date-picker
              v-model="queryParams.searchTime"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="变动类型" prop="change_type">
            <el-select v-model="queryParams.change_type" placeholder="全部类型" clearable style="width:130px">
              <el-option label="全部类型" :value="0"></el-option>
              <el-option label="增加" :value="1" ></el-option>
              <el-option label="减少" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :height="tableHeight" :data="balanceList">
<!--        <template slot-scope="scope">-->
<!--          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>-->
<!--        </template>-->
        <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="balance_sn"></el-table-column>
        <el-table-column label="变动金额" align="center" prop="change_money"  width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.change_money / 100 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动类型" align="center" prop="change_type" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.change_type == 1">增加</span>
            <span v-if="scope.row.change_type == 2">减少</span>
          </template>
        </el-table-column>
        <el-table-column label="变动描述" align="center" prop="des"></el-table-column>
        <el-table-column label="变动时间" align="center" :formatter="formatTime" prop="add_time"></el-table-column>
        <el-table-column label="关联订单单号" align="center" prop="links_des"></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 { getBalanceList } from '@/api/module/bankcard'
  import {
    dateFormat
  } from '@/utils'
  export default {
    name: "asset",
    data() {
      return {
        loading: false,
        fullHeight: 0,
        tableHeight: 0,
        queryParams: { // 查询参数
          sellerId: 0,
          order_sn: '',
          searchTime: [],
          change_type: ''
        },
        total: 0,
        currentPage: 1,
        pageSize: 20,
        balanceList: [],
      };
    },
    created() {
      // this.queryParams.sellerId = this.$store.state.user.sellerid
      /** 查询 收支明细 列表 */
      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.order_sn != '') {
          params['order_sn'] = this.queryParams.order_sn
        }

        if(this.queryParams.change_type == '') {
          params['change_type'] = 0
        }else {
          params['change_type'] = this.queryParams.change_type
        }

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

        getBalanceList(params).then(res => {
          if(res.code == 1) {
            this.balanceList = res.data.list;
            this.total = res.data.count;
          }else {
            let msg = res.message ? res.message : '查询失败'
            this.$message({type: 'error', message: msg});
          }
        });

      },
      /** 重置 搜索条件 */
      resetQuery() {
        this.queryParams = { // 查询参数
          sellerId: 0,
          order_sn: '',
          searchTime: [],
          change_type: ''
        }
        this.currentPage = 1
        this.pageSize = 20
        this.getList();
      },

      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },
      /** 输入搜索条件后，enter 查询 暂时未用 */
      handleQuery() {

      },
      /** 时间格式化 */
      formatTime(row) {
        let Time = row.add_time;
        let newtime = "";
        if (Time > 0) {
          newtime = dateFormat(Time * 1000, "Y-m-d H:i:s");
        }
        return newtime
      },
      //格式化价格
      formatMoney(row) {
        var nm = 0;
        var money = row.change_money;
        if (money > 0) {
          nm = money / 1000
        }
        return nm
      },
    } //methods结束
  };
</script>
<style scoped>
  .form-params .el-form-item {
    margin: 10px 0 10px 10px;
  }

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