<template>
  <a-drawer
    :title="'交易流水（'+(itemInfo.customerName ||'--')+(modalType==1?'：充值金额':'：抵扣金额')+'）'"
    placement="right"
    :visible="isShow"
    width="80%"
    id="transaction-flow-modal"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    @close="isShow = false"
  >
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 搜索条件 -->
      <div ref="searchBox" class="table-page-search-wrapper">
        <a-form-model
          ref="ruleForm"
          class="form-model-con"
          layout="inline"
          :model="queryParam"
          @keyup.enter.native="$refs.table.refresh(true)"
          id="transactionFlow-form">
          <a-row :gutter="5" type="flex" justify="center" align="center">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="交易时间">
                <rangeDate id="transactionFlow-time" ref="rangeDate" :value="time" @change="dateChange" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="关联单号">
                <a-input id="transactionFlow-bizNo" v-model.trim="queryParam.bizNo" allowClear placeholder="请输入关联单号"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="交易类型">
                <v-select
                  v-model="queryParam.bizType"
                  id="transactionFlow-bizType"
                  code="STORE_ACCOUNT_BIZ_TYPE"
                  placeholder="请选择交易类型"
                  allowClear></v-select>
              </a-form-model-item>
            </a-col>
            <a-col flex="auto" style="margin-bottom: 10px;">
              <a-button type="primary" @click="$refs.table.refresh(true)" id="transactionFlow-refresh">查询</a-button>
              <a-button style="margin-left: 5px" @click="resetSearchForm" id="transactionFlow-reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- 统计 -->
      <div class="table-operator" style="margin-bottom: 10px;">
        <div class="alert-message">
          充值金额：<strong>{{ totalData&&(totalData.rechargeAmount || totalData.rechargeAmount==0) ?toThousands(Math.abs(totalData.rechargeAmount)) : '--' }}</strong>；
          销售金额：<strong>{{ totalData&&(totalData.salesAmount || totalData.salesAmount==0) ? toThousands(Math.abs(totalData.salesAmount)) : '--' }}</strong>；
          退款金额：<strong>{{ totalData&&(totalData.refundAmount || totalData.refundAmount==0) ? toThousands(Math.abs(totalData.refundAmount)) : '--' }}</strong>；
          清零金额：<strong>{{ totalData&&(totalData.zeroAmount || totalData.zeroAmount==0) ? toThousands(Math.abs(totalData.zeroAmount)) : '--' }}</strong>；
        </div>
      </div>
      <!-- 列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :scroll="{ y: tableHeight }"
        :defaultLoadData="false"
        bordered>
      </s-table>
    </a-spin>
  </a-drawer>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect } from '@/components'
// 组件
import productType from '@/views/common/productType.js'
import productBrand from '@/views/common/productBrand.js'
import rangeDate from '@/views/common/rangeDate.vue'
// 接口
import { storeAccountDetailList, storeAccountDetailCount } from '@/api/storeAccount' // 接口api
export default {
  name: 'TransactionFlowModal',
  components: { STable, VSelect, productType, productBrand, rangeDate },
  mixins: [commonMixin],
  props: {
    openModal: {
      //  弹框显示状态
      type: Boolean,
      default: false
    },
    modalType: { // 1是充值交易流水  2是抵扣交易流水
      type: String,
      default: '1'
    },
    itemInfo: {// 当前行回显数据
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    const _this = this
    return {
      spinning: false,
      isShow: this.openModal, //  是否打开弹框
      tableHeight: 0, // 表格高度
      totalData: null, // 统计数据
      time: [], // 交易时间
      // 查询条件
      queryParam: {
        beginDate: undefined, // 交易开始时间
        endDate: undefined, // 交易结束时间
        bizNo: '', // 关联单号
        bizType: undefined // 交易类型
      },
      columns: [
        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
        { title: '交易时间', dataIndex: 'tradeDate', width: '24%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '关联单号', dataIndex: 'bizNo', width: '24%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '金额（￥）', dataIndex: 'tradeAmount', width: '24%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
        { title: '交易类型', dataIndex: 'bizTypeDictValue', width: '24%', align: 'center', customRender: function (text) { return text || '--' } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const params = Object.assign(parameter, this.queryParam)
        params.storeAccountSn = this.itemInfo.storeAccountSn
        params.storeSn = this.itemInfo.storeSn
        params.shelfSn = this.itemInfo.shelfSn
        params.accountType = this.modalType == 1 ? 'RECHARGE' : 'GIVE'
        this.disabled = true
        this.spinning = true
        return storeAccountDetailList(params).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            const no = (data.pageNo - 1) * data.pageSize
             for (var i = 0; i < data.list.length; i++) {
               data.list[i].no = no + i + 1
             }
            this.getCount(params)
            this.disabled = false
          }
          this.spinning = false
          return data
        })
      }
    }
  },
  methods: {
    //  交易时间  change
    dateChange (date) {
      this.queryParam.beginDate = date[0]
      this.queryParam.endDate = date[1]
    },
    // 统计
    getCount (ajaxData) {
      storeAccountDetailCount(ajaxData).then(res => {
        if (res.status == 200) {
          this.totalData = res.data || []
        } else {
          this.totalData = null
        }
      })
    },
    // 充值
    resetSearchForm () {
      this.time = []
      this.$refs.rangeDate.resetDate()
      this.queryParam.beginDate = undefined
      this.queryParam.endDate = undefined
      this.queryParam.bizNo = undefined
      this.queryParam.bizType = undefined
      this.$refs.table.refresh(true)
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        this.$nextTick(() => {
          this.resetSearchForm()
        })
      }
    }
  }
}
</script>

<style lang="less">
.outIndetail-modal {
	.ant-drawer-body {
		padding: 10px 20px;
    .outIndetail-modal-table{
      padding: 20px 0 0;
    }
    .baseInfo{
      line-height: 24px;
      font-size: 14px;
    }
	}
}
.table-operator{
  .subsidyRequired{
    margin-right: 5px;
    color:#ED1c24;
  }
}

</style>
