<template>
  <div class="member-fund-manage-main">
    <div class="search">
      <div />
      <div class="right">
        <div>
          <el-input v-model="search.fastSearch" placeholder="请输入客户号/长银账号/长银账户名称/客户名称" style="width: 320px;" />
        </div>
        <div>
          <el-select v-model="search.accountStatus" placeholder="请选择账户状态" clearable>
            <el-option
              v-for="item in constant.memberAccountStatus"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <!-- <div>
          <el-input v-model="search.channel" placeholder="请输入渠道类型" clearable></el-input>
        </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"
      :table-options="tableOptions"
    />
    <cy-dialog ref="detailDownloadRef" title="综合明细单查询下载" :top="'20vh'" :append="true">
      <el-form ref="ruleForm" :model="downloadForm" label-width="100px" label-position="left">
        <el-form-item label="查询月份" class="form-required">
          <el-date-picker
            v-model="downloadForm.date"
            type="monthrange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width: 340px"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="submit-btn">
        <el-button @click="$refs.detailDownloadRef.show = false;">关闭</el-button>
        <el-button type="primary" @click="confirmSubmit">确定</el-button>
      </div>
    </cy-dialog>
  </div>
</template>

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

export default {
  data() {
    return {
      search: {
        fastSearch: '',
        accountStatus: '',
        channel: ''
      },
      loading: false,
      total: 0,
      tableData: [],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '账号',
          prop: 'accountNumber',
          showTooltip: true
        },
        {
          label: '渠道类型',
          showTooltip: true,
          render: (h, row) => {
            return (
              <div>{ row.channel === 'bocom' ? '交通银行' : row.channel }</div>
            )
          }
        },
        {
          label: '账户名称',
          prop: 'accountName',
          showTooltip: true
        },
        {
          label: '账户状态',
          render: (h, row) => {
            return (
              <div>{ row.accountStatus === 1 ? '生效' : '失效' }</div>
            )
          }
        },
        {
          label: '账户余额',
          width: 120,
          render: (h, row) => {
            return (
              <div>{ formatMoney(row.accountBalance) }</div>
            )
          }
        },
        {
          label: '冻结金额',
          width: 120,
          render: (h, row) => {
            return (
              <div>{ formatMoney(row.freezeAmount) }</div>
            )
          }
        },
        {
          label: '可用余额',
          width: 120,
          render: (h, row) => {
            return (
              <div>{ formatMoney(row.availableBalance) }</div>
            )
          }
        },
        {
          label: '币种',
          prop: 'currency'
        },
        {
          label: '开通日期',
          prop: 'openTime'
        },
        {
          label: '失效日期',
          prop: 'expiringDate'
        },
        {
          label: '操作',
          width: 150,
          render: (h, row) => {
            const btnList = [
              {
                msg: '交易记录',
                icon: 'iconfont icon-jiaoyijilu',
                power: 'transactionRecords2',
                category: 'bussinessRecord'
              },
              {
                msg: '账单流水',
                icon: 'iconfont icon-jiaoyijilu',
                power: 'billFlow',
                category: 'accountList'
              },
              {
                msg: '提现',
                icon: 'iconfont icon-tixian1',
                power: 'withdrawal',
                category: 'withdrawal'
              },
              {
                msg: '转账',
                icon: 'iconfont icon-zhuanzhang1',
                power: 'transferAccounts',
                category: 'transferAccounts'
              },
              {
                msg: '综合明细单下载',
                icon: 'iconfont icon-xiazai',
                power: 'downloadComprehensiveDetailFile',
                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} onClick={() => { this.handlerOperate(item.category, row) }}></i>
                  </span>
                </el-tooltip>
              )
            })
            return <div>{ options }</div>
          }
        }
      ],
      tableOptions: {
        maxHeight: 'calc(100vh - 406px)',
        height: 'calc(100vh - 406px)'
      },
      page: 1,
      size: 10,
      downloadForm: {
        date: []
      },
      curDownloadRowId: '',
      pickerOptions: {
        disabledDate: (date) => {
          const currentDate = new Date()
          currentDate.setDate(1)
          const lastMonth = new Date(currentDate.setMonth(currentDate.getMonth() - 1))
          return date > lastMonth
        }
      }
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData(tab) {
      this.loading = true
      if (tab === 'all') {
        this.page = 1
        this.size = 10
      }

      const res = await queryMemberList({
        ...this.search,
        page: this.page,
        rows: this.size,
        listType: 1
      })

      console.log('fetchData assets----', res)
      if (res) {
        this.loading = false
        this.tableData = res.rows
        this.total = res.records
      }
    },
    handlerOperate(type, row) {
      if (type === 'withdrawal') {
        this.$router.push({ name: 'MemberFundManageWithdrawal', query: { id: row.id }})
      } else if (type === 'transferAccounts') {
        this.$router.push({ name: 'MemberFundManageTransferAccounts', query: { id: row.id }})
      } else if (type === 'bussinessRecord') {
        this.$router.push({
          name: 'MemberFundManageTransactionRecord',
          query: {
            id: row.id,
            accNumber: row.accountNumber
          }
        })
      } else if (type === 'accountList') {
        this.$router.push({
          name: 'MemberFundManageCashFlow',
          query: {
            id: row.id,
            accNumber: row.accountNumber
          }
        })
      } else if (type === 'download') {
        this.$refs.detailDownloadRef.show = true
        this.curDownloadRowId = row.id
        this.downloadForm.date = []
      }
    },
    async confirmSubmit() {
      const reqParams = {
        id: this.curDownloadRowId,
        startDate: '',
        endDate: ''
      }
      if (this.downloadForm.date.length === 0) {
        this.$message.warning('请选择查询月份')
        return
      }

      reqParams.startDate = this.downloadForm.date[0]
      reqParams.endDate = this.downloadForm.date[1]

      const res = await queryBillInfoDetails(reqParams)

      if (res) {
        exportFile(res)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
