<template>
  <layout-body>
    <layout-filter>
      <filter-item :label="filters.createTime.label">
        <Date-picker v-model="filters.createTime.model" type="daterange" format="yyyy-MM-dd" placeholder="选择日期">
        </Date-picker>
      </filter-item>
      <filter-item :label="filters.orderCode.label">
        <i-input v-model.trim="filters.orderCode.model" :placeholder="filters.orderCode.holder"></i-input>
      </filter-item>
      <filter-item :label="filters.balanceId.label">
        <i-input v-model.trim="filters.balanceId.model" :placeholder="filters.balanceId.holder"></i-input>
      </filter-item>
      <filter-item :label="filters.productSku.label">
        <i-input v-model.trim="filters.productSku.model" :placeholder="filters.productSku.holder"></i-input>
      </filter-item>
      <filter-item :label="filters.brandId.label">
        <select-brand v-model="filters.brandId.model"></select-brand>
      </filter-item>
      <filter-item :label="filters.type.label">
        <Select v-model="filters.type.model" clearable>
          <Option v-for="option in filters.type.options" :key="option.value" :value="option.value">{{
            option.label
          }}</Option>
        </Select>
      </filter-item>
      <filter-item :label="filters.status.label">
        <Select v-model="filters.status.model" clearable>
          <Option v-for="option in filters.status.options" :key="option.value" :value="option.value">{{
            option.label
          }}</Option>
        </Select>
      </filter-item>
      <filter-item :label="filters.agreementIsAbnormal.label">
        <Select v-model="filters.agreementIsAbnormal.model" clearable>
          <Option v-for="option in filters.agreementIsAbnormal.options" :key="option.value" :value="option.value">{{
            option.label
          }}</Option>
        </Select>
      </filter-item>
      <filter-item>
        <Button @click="returnPage">返回对账单列表</Button>
        <Button type="primary" :loading="loading" @click="search">筛选</Button>
        <Button @click="reset">清空条件</Button>
        <Button type="warning" class="table-btn" @click="exportData">导出</Button>
      </filter-item>
    </layout-filter>
    <layout-list>
      <Table border :columns="tableCols" :data="tableData"></Table>
      <Page
        :total="pageData.total"
        :current="pageData.pageNo"
        :page-size="20"
        show-total
        @on-change="pageChange"
      ></Page>
    </layout-list>
  </layout-body>
</template>

<script>
import _ from 'lodash';
import detail from './store/detail';
import FranchiseService from 'services/finance/franchise-service';
import qs from 'querystringify';

export default {
  data() {
    return detail.call(this);
  },
  computed: {
    startTime() {
      const createTime = this.filters.createTime.model;

      if (_.isEmpty(createTime)) {
        return 0;
      } else {
        return createTime[0] ? createTime[0].getTime() / 1000 : 0;
      }
    },
    endTime() {
      const createTime = this.filters.createTime.model;

      if (_.isEmpty(createTime)) {
        return 0;
      } else {
        return createTime[1] ? createTime[1].getTime() / 1000 : 0;
      }
    },
  },
  created() {
    this.franchiseService = new FranchiseService();
    this.search();
  },
  methods: {
    filterValues() {
      const params = {
        salesTimeBegin: this.startTime,
        salesTimeEnd: this.endTime,
        orderCode: +this.filters.orderCode.model,
        balanceId: +this.filters.balanceId.model,
        productSku: +this.filters.productSku.model,
        brandId: +this.filters.brandId.model,
        type: +this.filters.type.model,
        agreementIsAbnormal: +this.filters.agreementIsAbnormal.model,
        status: this.filters.status.model,
        pageSize: this.pageData.pageSize,
        pageNo: this.pageData.pageNo,
        manageMode: 2,
      };

      return _.pickBy(params, val => val);
    },
    search() {
      // const sumParams = _.pickBy(
      //   {
      //     balanceId: +this.filters.balanceId.model,
      //     brandId: +this.filters.brandId.model,
      //     orderCode: +this.filters.orderCode.model,
      //     status: +this.filters.status.model,
      //     productSku: +this.filters.sku.model,
      //     manageMode: 2,
      //   },
      //   val => val
      // );
      if (this.loading) {
        return;
      }

      this.loading = true;
      const params = this.filterValues();

      return Promise.all([
        this.franchiseService.balanceDetail(params),
        this.franchiseService.balanceSumNums(params),
        this.franchiseService.balanceSumAmount(params),
      ])
        .then(([list, sumNums, sumAmount]) => {
          this.tableData = _.get(list, 'data.records', []);
          this.pageData.total = _.get(list, 'data.totalCount', 0);
          this.pageData.pageNo = _.get(list, 'data.pageNo', 1);
          this.tableData.push({
            sellTypeDesc: '总计',
            salesNums: +sumNums.data,
            clearingPriceSum: +sumAmount.data,
          });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    reset() {
      this.filters.createTime.model = null;
      this.filters.orderCode.model = null;
      this.filters.productSku.model = null;
      this.filters.balanceId.model = null;
      this.filters.brandId.model = null;
      this.filters.type.model = null;
      this.filters.status.model = null;
      this.filters.agreementIsAbnormal.model = null;
      this.pageData.pageNo = 1;
      this.pageData.total = 0;
      this.search();
    },
    pageChange(val) {
      this.pageData.pageNo = val;
      this.search();
    },
    exportData() {
      const querystring = qs.stringify(this.filterValues(), true);
      const href = `${FranchiseService.exportBalanceDetail}${querystring}`;

      window.open(href, '_blank');
    },
    returnPage() {
      this.$router.push({
        name: 'finance.franchise-clearing.clearing',
      });
    },
  },
};
</script>

<style lang="scss">
.table-btn {
  margin-left: 15px;
}
</style>