<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="结算时间">
                <a-range-picker
                  style="width: 100%"
                  v-model="queryParam.generateTimeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange"
                  @ok="onDateOk"
                  :allowClear="allowClear"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="收支方向">
                <j-dict-select-tag :triggerChange="false" v-model="queryParam.type" placeholder="请选择收支方向"
                                   dictCode="account_type" v-decorator="['status', {}]"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="备注内容">
                <a-input placeholder="模糊搜索备注内容" v-model="queryParam.paymentCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button ghost type='primary' @click="searchQuery" icon="search">查询</a-button>
                <a-button ghost type='primary' @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button class="ant-btn ant-btn-primary" type='primary' icon='download' @click="handleExportXls('账户明细')">导出</a-button>
      </div>

      <!-- table区域-begin -->
      <div>
        <a-table
          ref='table'
          size='middle'
          bordered
          rowKey='id'
          :columns='columns'
          :dataSource='dataSource'
          :pagination='ipagination'
          :loading='loading'
          @change='handleTableChange'>
          <span slot='type_dictText' slot-scope='text,record'>
            <span :class="record.type===1?'red':'green'">{{ text }}</span>
          </span>
          <span slot='amount' slot-scope='text,record'>
            <span :class="record.type===1?'red':'green'">
              <template v-if='record.isDrawback === 1'>
                {{ text ? text + '(已退款)' : text === 0 ? text + '(已退款)' : '--' }}
              </template>
              <template v-else>
                {{ text ? text : text === 0 ? text : '--' }}
              </template>
            </span>
          </span>
          <span slot='serviceFee' slot-scope='text,record'>
            <span :class="record.type===1?'red':'green'">
              {{ text ? text : text === 0 ? text : '--' }}
            </span>
          </span>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
  import { filterObj } from '@/utils/util';
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { Arithmetic } from '@/mixins/Arithmetic'
  import { httpAction, getAction, downFile } from '@/api/manage'

export default {
  name: 'HwAccountManager',
  mixins: [JeecgListMixin, Arithmetic],
  components: {
  },
  props: ['value'],
  data() {
    return {
      allowClear:false,
      form: this.$form.createForm(this),
      description: '账户信息表管理页面',
      // 表头
      columns: [
        {
          title: '时间',
          align: 'left',
          dataIndex: 'updateTime',
        },
        {
          title: '收支方向',
          align: 'left',
          dataIndex: 'type_dictText',
          scopedSlots: { customRender: 'type_dictText' }
        },
        {
          title: '金额',
          align: 'left',
          dataIndex: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '服务费',
          align: 'left',
          dataIndex: 'serviceFee',
          scopedSlots: { customRender: 'serviceFee' }
        },
        {
          title: '备注',
          align: 'left',
          dataIndex: 'paymentCode',
          customRender: (value, record) => {
            return value ? value : '--'
          }
        }
      ],
      url: {
        list: '/saasmanager/hwPlatformCompanyAccountDetail/managerList',
        exportXlsUrl: '/saasmanager/hwPlatformCompanyAccountDetail/exportXlsManager',
      },
      dataSource: [],
      // 查询条件
      queryParam: {
        generateTimeRange:[],
      },
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.dataSource = []
        this.loadData(1, value[0], value[1])
      }
    },
  },
  created() {

  }
  ,
  methods: {
    loadData(pageNum, subcontractorId, cpType) {
      this.loading = true
      if (pageNum === 1) {
        this.ipagination.current = 1
      }
      // update-begin- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
      if (!subcontractorId) {
        this.loading = false
        // update-end- --- author:wangshuai ------ date:20200102 ---- for:传过来的部门编码为空全查
      }else{
        //加载数据 若传入参数1则加载第一页的内容
        getAction(this.url.list, {
          subcontractorId, cpType,
          ...this.getQueryParams()
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },

    getQueryParams(){
      console.log(this.queryParam.generateTimeRange)
      var param = Object.assign({}, this.queryParam,this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      delete param.generateTimeRange; // 时间参数不传递后台
      return filterObj(param);
    },
    onDateChange: function (value, dateString) {
      console.log(dateString[0],dateString[1]);
      this.queryParam.generateTimeRange_begin=dateString[0]+" 00:00:00";
      this.queryParam.generateTimeRange_end=dateString[1] +" 23:59:59";
    },
    onDateOk(value) {
      console.log(value);
    },
    searchQuery() {
      this.loadData(1, this.value[0],this.value[1])
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1, this.value[0],this.value[1])
    },
    handleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData(null, this.value[0], this.value[1])
    },
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = this.getQueryParams()
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(',')
      }
      param.subcontractorId = this.value[0];
      param.cpType = this.value[1];
      console.log('导出参数', param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  }
}
</script>
<style lang='less' scoped>
@import '~@assets/less/common.less';
</style>