<template>
  <div class="stat-shop">
    <layout-body>
      <p slot="title">服务费账单</p>
      <layout-filter class="box-filter" :inline="true" :col="1">
        <filter-item :label="filters.dateRange.label">
          <Date-picker type="datetimerange"
                       :placeholder="filters.dateRange.label"
                       @on-change="dateRange"
                       v-model="filters.dateRange.model"
                       format="yyyy-MM-dd">
          </Date-picker>
          <div class="quick">
            <a href="javascript:;" @click="() => {changeLimit(0)}">今日</a>
            <a href="javascript:;" @click="() => {changeLimit(1)}">昨天</a>
            <a href="javascript:;" @click="() => {changeLimit(7)}">近7天</a>
            <a href="javascript:;" @click="() => {changeLimit(30)}">近30天</a>
          </div>
        </filter-item>
      </layout-filter>
    </layout-body>
  </div>
</template>

<script>
  import moment from "moment";
  import {ServiceList} from './store';
  import FinanceService from 'services/finance/finance-service';

  export default {
    data() {
      return ServiceList.call(this);
    },
    created() {
      this.financeService = new FinanceService();
    },
    mounted() {
      this.loadData();
    },
    watch: {
      date() {
        this.loadData();
      },
      day(newDay) {
        let curDay = moment().format('YYYY-MM-DD');
        if (newDay === this.beginTime || !newDay) {
          return;
        }
        this.dateRange = newDay !== this.curDay ? [newDay, curDay] : [newDay, newDay];
      },
      dateRange(newDate) {
        this.beginTime = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
        this.endTime = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
        this.day = this.beginTime === this.endTime === this.today ? '' : this.beginTime;
        this.pageData.current = 1;
        this.list();
      },
    },
    methods: {
      loadData() {
        this.list();
      },
      changeLimit(limit) {
        if (limit > 1) {
          this.dateRange = [this[`day${limit}`], this.today];
        } else if (limit === 1) {
          this.dateRange = [this.yesterday, this.today];
        } else {
          this.dateRange = [this.today, this.today];
        }
        this.pageData.current = 1;
      },
      pageChange() {
        this.pageData.current = page;
        this.list();
      },
      filtersParams() {
        let params = {};
        let fts = this.filters;
        let withdrawStatus = fts.withdrawStatus.model,
          statementSn = fts.statementSn.model === '' || fts.brand.model === null ?
            null : fts.statementSn.model;
        let pageNo = this.pageData.current;
        let pageSize = this.pageData.pageSize;

        if (this.filters.withdrawStatus.model) {
          if (this.isNumber(this.filters.withdrawStatus.mode)) {
            params.withdrawStatus = this.filters.withdrawStatus.model;
          }
        }
        if (this.filters.statementSn.model) {
          if (this.isString(this.filters.statementSn.mode)) {
            params.statementSn = this.filters.statementSn.model;
          }
        }
        params.pageSize = this.pageData.pageSize;
        params.pageNo = this.pageData.current;

        return Promise.resolve({
          params,
          withdrawStatus,
          statementSn,
          pageNo,
          pageSize
        });
      },
      list() {
        this.$Loading.start();
        return this.filtersParams().then((params) => {
          let filter = {
            beginTime: this.beginDate,
            endTime: this.endDate,
            pageNo: params.pageNo,
          };
          if (this.withdrawStatus && this.withdrawStatus !== '-1') {
            filter = Object.assign({}, filter, {withdrawStatus: this.withdrawStatus});
          }
          return this.FinanceService.shopWithdrawServiceList(filter);
        }).then(result => {
          if (!result.data) {
            result.data = {
              pageNo: 1,
              pageSize: 1,
              totalCount: 1,
              totalPage: 1,
              records: []
            }
          }
          this.pageData.total = result.data.totalCount;
          this.pageData.current = result.data.pageNo;
          this.tableData = result.data.records;
          this.$Loading.finish();
        }).catch(() => {
          this.$Loading.finish();
        });
      },
      reset() {
        this.filters.withdrawStatus.model = null;
        this.filters.statementSn.model = null;
        this.filters.timeFlag.model = null;
        this.filters.beginTime.model = null;
        this.filters.endTime.model = null;
        this.pageData.pageNo = 1;
        this.pageData.total = 0;
        this.list();
      }
    }
  };
</script>

<style lang="scss">
  .stat-shop {
    .ivu-tabs-tabpane {
      height: 400px;
      position: relative;
    }
  }

  .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-title {
    font-weight: 700;
    color: #495060;
    font-size: 16px;
    line-height: 22px;
    margin: 5px;

    &:before {
      content: " ";
      display: inline-block;
      width: 5px;
      margin-right: 2px;
      height: 22px;
      vertical-align: top;
      background-color: #999;
    }
  }

  .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: 220px;
    }
  }

  .ivu-table-cell {
    padding-left: 6px;
    padding-right: 6px;
  }
</style>