<template>
  <div class="transaction-box">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="静默户" name="default"></el-tab-pane>
      <el-tab-pane label="登记薄" name="register"></el-tab-pane>
      <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-select v-model="search.fundSource" placeholder="请选择资金来源" clearable>
              <el-option
                v-for="item in constant.bocomTransRecordsFundSource"
                :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"
        :table-options="getTableOptions()"
        :columns="columns"
        :data="tableData"
        :count="total"
      />
    </el-tabs>
  </div>
</template>

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

export default {
  data() {
    return {
      search: {
        number: '',
        counterpartyInfo: '',
        accountName: '',
        incomeExpenditureType: '',
        businessType: '',
        txnStatus: '',
        fundSource: '',
        date: [],
        startDate: '',
        endDate: ''
      },
      loading: false,
      total: 0,
      page: 1,
      size: 10,
      tableData: [],
      tableKey: 1,
      activeName: 'default',
      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.incomeExpenditureType === 1 ? '支出' : '收入' }</div>
            )
          }
        },
        {
          label: '业务类型',
          showTooltip: true,
          render: (h, row) => {
            return (
              <div>{ this.getBusinessTypeDesc(row.businessType) }</div>
            )
          }
        },
        {
          label: '资金来源',
          prop: 'fundSource',
          showTooltip: true
        },
        // {
        //   label: '是否解冻',
        //   showTooltip: true,
        //   render: (h, row) => {
        //     if (row.thaw === 0) {
        //       return (
        //         <div>否</div>
        //       )
        //     }
        //     if (row.thaw === 1) {
        //       return (
        //         <div>是</div>
        //       )
        //     }
        //     if (row.thaw === 2) {
        //       return (
        //         <div>待查</div>
        //       )
        //     }
        //     return (<div></div>)
        //   }
        // },
        // {
        //   label: '是否划扣',
        //   showTooltip: true,
        //   render: (h, row) => {
        //     if (row.buckling === 0) {
        //       return (
        //         <div>否</div>
        //       )
        //     }
        //     if (row.buckling === 1) {
        //       return (
        //         <div>是</div>
        //       )
        //     }
        //     if (row.buckling === 2) {
        //       return (
        //         <div>待查</div>
        //       )
        //     }
        //     return (<div></div>)
        //   }
        // },
        // {
        //   label: '是否划转到长银',
        //   showTooltip: true,
        //   width: 140,
        //   render: (h, row) => {
        //     if (row.toInkasso === 0) {
        //       return (
        //         <div>否</div>
        //       )
        //     }
        //     if (row.toInkasso === 1) {
        //       return (
        //         <div>是</div>
        //       )
        //     }
        //     if (row.toInkasso === 2) {
        //       return (
        //         <div>待查</div>
        //       )
        //     }
        //     return (<div></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: 'failReason',
          showTooltip: true
        },
        {
          label: '交易创建时间',
          prop: 'gmtCreate',
          showTooltip: true,
          width: 120
        },
        {
          label: '交易完成时间',
          prop: 'txnCompleteDate',
          showTooltip: true,
          width: 120
        },
        {
          label: '操作',
          render: (h, row) => {
            const btnList = [
              {
                msg: '交易通知书下载',
                icon: 'iconfont icon-xiazai',
                power: 'downloadTransferNoticeFile',
                // rowPower: [],
                category: 'download'
              },
              {
                msg: '刷新状态',
                icon: 'iconfont icon-shuaxin',
                power: 'updateTransactionRecordsStatus',
                // rowPower: [],
                category: 'refresh'
              },
              {
                msg: '处理',
                icon: 'iconfont icon-Union',
                power: '',
                // rowPower: [],
                category: 'exec'
              }
            ]
            const options = btnList.map(item => {
              return (
                this.tablePower(item.category, row) && <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', 'bocomTransRecordsFundSource'])

    this.fetchData()
  },
  methods: {
    handleTabClick(tab) {
      this.activeName = tab.name
      this.initSearch()
      if (this.activeName === 'default') {
        this.fetchData()
      } else if (this.activeName === 'register') {
        this.fetchData()
      }
    },
    initSearch() {
      this.page = 1
      this.size = 10
      this.search.number = ''
      this.search.counterpartyInfo = ''
      this.search.accountName = ''
      this.search.incomeExpenditureType = ''
      this.search.businessType = ''
      this.search.txnStatus = ''
      this.search.fundSource = ''
      this.search.date = []
      this.search.startDate = ''
      this.search.endDate = ''
    },
    getTableOptions() {
      if (this.total > 0) {
        return {
          sortTable: true,
          maxHeight: 'calc(100vh - 456px)',
          height: 'calc(100vh - 456px)'
        }
      }
      return {
        sortTable: true,
        maxHeight: 'calc(100vh - 360px)',
        height: 'calc(100vh - 360px)'
      }
    },
    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: 0,
        isVipAccount: this.activeName === 'default' ? 0 : 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)
        }
      } else if (type === 'refresh') {
        const res = await refreshTranserResultByPlfmSerNo({
          id: row.id,
          Loading: true
        })

        if (res.success) {
          this.$router.go(0)
        }
      } else if (type === 'exec') {
        const res = await execDealRecord({
          id: row.id,
          Loading: true
        })

        if (res.success) {
          this.$router.go(0)
        }
      }
    },
    getBusinessTypeDesc(status) {
      const map = {
        1: '入账',
        2: '内部转入',
        3: '内部转出',
        4: '提现',
        5: '解冻',
        6: '划扣'
      }
      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] || []
    },
    tablePower(type, row) {
      if (type === 'refresh' && !['bocomTransState_failure', 'bocomTransState_success'].includes(row.txnStatus)) {
        return true
      } else if (type === 'download' && row.acctgSerNo && row.acctgSerNo !== '') {
        return true
      } else if (type === 'exec' && (row.txnStatus === '' || row.txnStatus === null)) {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
