<template>
  <div class="ivu-row">
    <div class="ivu-card">
      <div class="ivu-card-head">
        <p slot="title" style="height: 30px; line-height: 30px; font-size: 20px;">资金总览</p>
      </div>
      <div class="ivu-card-body">
        <div class="ivu-row">
          <div class="ivu-flot-left">
            <div class="ivu-row">
              <div class="ivu-col ivu-font-b-16">我的余额</div>
            </div>
            <br />
            <div class="ivu-row">
              <div class="ivu-col ivu-col-span-12">可提现金额（元）</div>
              <div class="ivu-col ivu-col-span-12 ivu-font-b-16">{{ accountData.availableAmount }}</div>
            </div>
            <br />
            <div class="ivu-row">
              <div class="ivu-col ivu-col-span-12">不可提现金额（元）</div>
              <div class="ivu-col ivu-col-span-12 ivu-font-b-16">{{ accountData.unavailableAmount }}</div>
            </div>
            <br />
            <div class="ivu-row">
              <i-button type="primary" @click="goWithdrawApply">申请提现</i-button>
            </div>
          </div>
          <div class="ivu-flot-right">
            <div class="ivu-row">
              <div class="ivu-col ivu-font-b-16">账户信息</div>
            </div>
            <br />
            <div class="ivu-row">
              <div class="ivu-col">支付宝账号: {{ accountData.withdrawAccount }}</div>
            </div>
            <br />
            <div class="ivu-row">
              <div class="ivu-col">账号名称: {{ accountData.withdrawAccountName }}</div>
            </div>
            <br />
            <div class="ivu-row">
              <div class="ivu-col">联系方式: {{ accountData.customerTel }}</div>
            </div>
            <br />
          </div>
        </div>
      </div>
    </div>
    <div class="ivu-card">
      <div class="ivu-card-head">
        <p slot="title" style="height: 30px; line-height: 30px; font-size: 20px;">资金操作明细</p>
      </div>
      <div class="ivu-card-body">
        <layout-filter ref="filter" :model="filters" class="box-filter" :inline="true" :col="1">
          <filter-item label="起止时间">
            <Date-picker
              v-model="filters.createTime.model"
              type="datetimerange"
              format="yyyy-MM-dd"
              placeholder="选择日期和时间"
              @on-change="createTimeChange"
            ></Date-picker>
            <div class="quick">
              <a
                href="javascript:;"
                @click="
                  () => {
                    timeFlag(1);
                  }
                "
                >今天</a
              >
              <a
                href="javascript:;"
                @click="
                  () => {
                    timeFlag(2);
                  }
                "
                >昨天</a
              >
              <a
                href="javascript:;"
                @click="
                  () => {
                    timeFlag(3);
                  }
                "
                >最近7天</a
              >
              <a
                href="javascript:;"
                @click="
                  () => {
                    timeFlag(4);
                  }
                "
                >最近30天</a
              >
            </div>
          </filter-item>
          <filter-item>
            <div class="select-container">
              <Select v-model.trim="filters.status.model" :placeholder="filters.status.label" clearable>
                <Option v-for="option in filters.status.options" :key="option.value" :value="option.value">{{
                  option.label
                }}</Option>
              </Select>
            </div>
            <div class="select-container">
              <Input v-model.trim="filters.statementSn.model" :placeholder="filters.statementSn.label" />
            </div>
            <div class="select-container">
              <Input v-model.trim="filters.targetAccount.model" :placeholder="filters.targetAccount.label" />
            </div>
            <div class="select-container">
              <Button type="primary" @click="search">查询</Button>
              <Button type="primary" @click="reset">全部</Button>
              <!--            <Button type="primary" @click="exportData">导出</Button>-->
            </div>
          </filter-item>
        </layout-filter>
        <layout-list>
          <Table border :columns="tableCols" :data="tableData"></Table>
          <Page
            :total="pageData.total"
            :current="pageData.current"
            :page-size="pageData.pageSize"
            show-total
            @on-change="pageChange"
          ></Page>
        </layout-list>
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash';
import moment from 'moment';
import { WithdrawList } from './store';
import FinanceService from 'services/finance/finance-service';
import qs from 'querystringify';

export default {
  data() {
    return WithdrawList.call(this);
  },
  created() {
    this.financeService = new FinanceService();
    this.search();
    this.initAccount();
  },
  methods: {
    filterValues() {
      const values = {
        pageNo: 1,
        pageSize: 10,
      };
      const fields = this.filters;
      const keysMap = {
        beginTime: 'beginTime',
        endTime: 'endTime',
        timeFlag: 'timeFlag',
        status: 'status',
        statementSn: 'statementSn',
      };

      if (this.enableFilter) {
        _.each(keysMap, (val, key) => {
          values[key] = fields[val].model;
        });
      }
      return values;
    },
    search() {
      let params = {};
      this.enableFilter = true;
      params = this.filterValues();
      this.list(params);
      this.pageData.current = 1;
    },
    reset() {
      let params = {};
      this.enableFilter = false;
      params = this.filterValues();
      this.list(params);
      this.pageData.current = 1;
    },
    timeFlag(flag) {
      let params = {};
      this.enableFilter = false;
      params = this.filterValues();
      params.timeFlag = flag;
      this.list(params);
      this.pageData.current = 1;
    },
    createTimeChange(time) {
      if (!_.isArray(time)) {
        time = time.split(' - ');
      }
      if ((time[0] + '').length) {
        this.filters.beginTime.model = moment(time[0]).format('YYYY-MM-DD');
        this.filters.endTime.model = moment(time[1]).format('YYYY-MM-DD');
      }
    },
    pageChange(page) {
      const params = this.filterValues();
      params.pageNo = page;
      this.pageData.current = page;
      this.list(params);
    },
    list(params) {
      this.financeService.shopWithdrawList(params).then(ret => {
        this.tableData = _.get(ret, 'data.records', []);
        this.pageData.total = _.get(ret, 'data.totalCount', 0);
        this.pageData.current = _.get(ret, 'data.pageNo', 1);
      });
    },
    exportData() {
      this.enableFilter = true;
      const querystring = qs.stringify(this.filterValues(), true);
      const href = `${FinanceService.shopWithdrawList}?${querystring}`;
      window.open(href, '_blank');
    },
    getDetailById(id) {
      this.$router.push({
        name: 'finance.withdraw.detail',
        params: {
          id,
        },
      });
    },
    initAccount() {
      const params = {
        token: this.$user.token,
        timestamps: Math.round(new Date().getTime() / 1000),
      };
      this.financeService.shopWithdrawApplyInit(params).then(result => {
        if (result.code === 200) {
          this.accountData = result.data;
          this.data = result.data;
          this.data.withdrawAmount = result.data.withdrawAmount ? result.data.withdrawAmount : 0;
        }
      });
    },
    goWithdrawApply() {
      this.$router.push({ name: 'finance.withdraw.withdrawapply' });
    },
  },
};
</script>
<style lang="scss">
.layout-container {
  min-height: 200px;
  margin: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;

  .layout-filter .line {
    border-top: none;
    margin-bottom: 0;
  }
}

.shop-card {
  margin-top: 10px;
  margin-bottom: 10px;
}

.box-item {
  width: 90%;
  height: 50px;
  padding: 0 0 0 15px;
  line-height: 50px;
  font-size: 14px;
  overflow: hidden;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 10px;

  .box-item-label {
    display: inline-block;
    min-width: 75px;
    vertical-align: top;
    font-weight: normal;
  }

  .box-item-value {
    font-size: 20px;
    font-weight: 600;
  }

  i {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 22px;
    text-align: center;
    margin-top: -7px;
    vertical-align: middle;
    margin-right: 3px;
  }
}

.box-filter {
  .ivu-date-picker {
    margin-left: 0;
    width: 220px !important;
  }

  .quick {
    display: inline-block;
    margin-left: 20px;
    margin-right: 50px;

    a {
      margin-right: 5px;
    }
  }

  .select-container {
    display: inline-block;
    width: 200px;
  }
}

.ivu-table-cell {
  padding-left: 6px;
  padding-right: 6px;
}

.action-column {
  .cell-action-row {
    margin-top: 10px;

    &:last-child {
      margin-bottom: 10px;
    }
  }
}

.ivu-flot-left {
  width: 360px;
  height: 220px;
  float: left;
  border: 1px solid #cccccc;
  padding: 12px;
}
.ivu-flot-right {
  width: 360px;
  height: 220px;
  float: left;
  border: 1px solid #cccccc;
  padding: 12px;
  margin-left: 20px;
}

.ivu-font-b-16 {
  font-size: 16px;
  font-weight: bold;
}
</style>