<template>
  <div class="transaction-box">
    <div class="search">
      <div />
      <div class="right">
        <div>
          <el-input v-model="search.number" placeholder="请输入平台流水号" />
        </div>
        <div>
          <el-input v-model="search.counterpartyInfo" placeholder="请输入对方账号" />
        </div>
        <div>
          <el-input v-model="search.accountName" placeholder="请输入账号/户名" />
        </div>
        <div>
          <el-select v-model="search.incomeExpenditureType" placeholder="请选择收支类型" clearable>
            <el-option
              v-for="item in constant.incomeExpenditureType"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="search.businessType" placeholder="请选择业务类型" clearable>
            <el-option
              v-for="item in constant.fundBusinessType"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="search.txnStatus" placeholder="请选择交易状态" clearable>
            <el-option
              v-for="item in constant.bocomTransState"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <div>
          <el-date-picker
            v-model="search.date"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 260px"
          >
          </el-date-picker>
        </div>
        <div>
          <el-button type="primary" @click="fetchData('all')">查询</el-button>
        </div>
      </div>
    </div>
    <cy-comm-table
      ref="commTable"
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :count="total"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { exportFile } from '@/utils'
import {
  findBusinessRecords,
  downloadDealNoticeBook
} from '@/api/cyAccountManage/memberAccountManage/index'
import { formatMoney } from '@/utils'

export default {
  data() {
    return {
      search: {
        number: '',
        counterpartyInfo: '',
        accountName: '',
        incomeExpenditureType: '',
        businessType: '',
        txnStatus: '',
        date: [],
        startDate: '',
        endDate: ''
      },
      loading: false,
      total: 0,
      page: 1,
      size: 10,
      tableData: [],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '平台流水号',
          prop: 'plfmSerNo',
          showTooltip: true,
          width: 110
        },
        {
          label: '平台支付订单号',
          prop: 'plfmPayOrdrNo',
          showTooltip: true,
          width: 120
        },
        {
          label: '账号',
          prop: 'accountNumber',
          showTooltip: true
        },
        {
          label: '账户名称',
          prop: 'accountName',
          showTooltip: true
        },
        {
          label: '收支类型',
          showTooltip: true,
          render: (h, row) => {
            return (
              <div>{ row.accountStatus === 1 ? '支出' : '收入' }</div>
            )
          }
        },
        {
          label: '业务类型',
          showTooltip: true,
          render: (h, row) => {
            return (
              <div>{ this.getBusinessTypeDesc(row.businessType) }</div>
            )
          }
        },
        {
          label: '币种',
          prop: 'currency',
          showTooltip: true
        },
        {
          label: '金额',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ formatMoney(row.txnAmt) }</div>
          }
        },
        {
          label: '手续费',
          showTooltip: true,
          render: (h, row) => {
            return <div>{ formatMoney(row.hdlFee) }</div>
          }
        },
        {
          label: '对方账号',
          prop: 'counterpartyAccountNumber',
          showTooltip: true
        },
        {
          label: '对方地址',
          prop: 'counterpartyAddress',
          showTooltip: true
        },
        {
          label: '对方户名',
          prop: 'counterpartyAccountName',
          showTooltip: true
        },
        {
          label: '对方行名',
          prop: 'counterpartyBankName',
          showTooltip: true
        },
        {
          label: '对方行号',
          prop: 'counterpartyBankNumber',
          showTooltip: true
        },
        {
          label: '交易状态',
          showTooltip: true,
          render: (h, row) => {
            return (
              <div>{ this.getDealState(row.txnStatus) }</div>
            )
          }
        },
        // {
        //   label: '余额',
        //   prop: 'accountBalance',
        //   showTooltip: true,
        //   width: 110,
        //   render: (h, row) => {
        //     return (
        //       <div>{ formatMoney(row.accountBalance) }</div>
        //     )
        //   }
        // },
        {
          label: '附言',
          prop: 'postscript',
          showTooltip: true
        },
        {
          label: '交易完成时间',
          prop: 'txnCompleteDate',
          showTooltip: true,
          width: 120
        }
        // {
        //   label: '操作',
        //   render: (h, row) => {
        //     const btnList = [
        //       {
        //         msg: '交易通知书下载',
        //         icon: 'iconfont icon-xiazai',
        //         power: '',
        //         // rowPower: [],
        //         category: 'download'
        //       }
        //     ]
        //     const options = btnList.map(item => {
        //       return (
        //         <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
        //           <span class='table-icon-box' style='margin-right: 8px;' v-power={item.power}>
        //             <i class={item.icon} style={item.style} onClick={() => { this.handlerOperate(item.category, row) }}></i>
        //           </span>
        //         </el-tooltip>
        //       )
        //     })
        //     return <div>{ options }</div>
        //   },
        //   width: 100
        // }
      ]
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  mounted() {
    this.$store.dispatch('getConstant', ['bocomTransState'])

    this.fetchData()
  },
  methods: {
    async fetchData(type) {
      if (type === 'all') {
        this.size = 10
        this.page = 1
      }

      if (this.search.date.length) {
        this.search.startDate = this.search.date[0]
        this.search.endDate = this.search.date[1]
      }

      const res = await findBusinessRecords({
        ...this.search,
        page: this.page,
        rows: this.size,
        Loading: true,
        accountNumber: this.$route.query.accNumber,
        billFlow: 1
      })

      console.log('fetchData ---', res)

      this.tableData = res.rows
      this.total = res.records
    },
    async handlerOperate(type, row) {
      if (type === 'download') {
        const res = await downloadDealNoticeBook({ id: row.id })

        if (res) {
          exportFile(res)
        }
      }
    },
    getBusinessTypeDesc(status) {
      const map = {
        1: '入账',
        2: '内部转入',
        3: '内部转出',
        4: '提款',
        5: '解冻'
      }
      if (!status) return ''
      return map[status] || []
    },
    getDealState(status) {
      const map = {
        bocomTransState_success: '成功',
        bocomTransState_failure: '失败'
        // bocomTransState_pending: '待查',
        // bocomTransState_authorize: '待授权',
        // bocomTransState_authorize_refuse: '授权拒绝',
        // bocomTransState_delay: '延时中'
      }
      if (!status) return ''
      return map[status] || []
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
