<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="团队名称"
        prop="teamName">
        <el-input v-model="form.teamName" clearable></el-input>
      </el-form-item>
      <el-form-item
        label="交易类型"
        prop="transactionType">
        <el-select v-model="form.transactionType" clearable placeholder="请选择">
          <el-option label="充值" value="RECHARGE"></el-option>
          <el-option label="扣款" value="DEDUCT"></el-option>
          <el-option label="预付款支付" value="PREPAY_PAY"></el-option>
          <el-option label="预付款退款" value="PREPAY_REFUND"></el-option>
          <el-option label="授信支付" value="CREDIT_PAY"></el-option>
          <el-option label="授信退款" value="CREDIT_REFUND"></el-option>
          <el-option label="还款" value="REPAYMENT"></el-option>
          <el-option label="调整授信额度" value="ADJUST"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="操作时间起"
        prop="operateTimeBegin">
        <el-date-picker
          v-model="form.operateTimeBegin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="操作时间止"
        prop="operateTimeEnd">
        <el-date-picker
          v-model="form.operateTimeEnd"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getList(true)">
          搜索
        </el-button>
        <el-button
          type="primary"
          @click="reportExport">
          导出
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <el-table
        border
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="teamName"
          label="团队名称">
        </el-table-column>
        <el-table-column
          prop="transactionType"
          label="交易类型"
          width="120">
          <template slot-scope="scope">
            {{ transactionTypeMap[scope.row.transactionType] || scope.row.transactionType }}
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="金额"
          width="100">
        </el-table-column>
        <el-table-column
          prop="balanceBefore"
          label="变动前余额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="balanceAfter"
          label="变动后余额"
          width="120">
        </el-table-column>
        <el-table-column
          prop="creditLimitBefore"
          label="变动前授信额度"
          width="130">
        </el-table-column>
        <el-table-column
          prop="creditLimitAfter"
          label="变动后授信额度"
          width="130">
        </el-table-column>
        <el-table-column
          prop="debtAmount"
          width="130">
          <template slot="header">
            当前总欠款
            <Tip msg="授信支付未还总额"></Tip>
          </template>
        </el-table-column>
        <el-table-column
          prop="remainingDebt"
          width="130">
          <template slot="header">
            剩余应还
            <Tip msg="剔除了退款的金额"></Tip>
          </template>
        </el-table-column>
        <el-table-column
          prop="operatorName"
          label="操作人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="operateTime"
          label="操作时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="linkOrderId"
          label="关联订单"
          width="120">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.linkOrderId"
              type="primary"
              @click="showOrderDetail(scope.row.linkOrderId)"
            >
              查看
            </el-link>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.teamAccountRepaymentFlows && scope.row.teamAccountRepaymentFlows.length"
              type="primary"
              @click="showRepaymentDetail(scope.row)"
            >
              还款明细
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getList()"
        :total="total"
      >
      </el-pagination>
    </div>

    <OrderDetail ref="orderDetail"></OrderDetail>

    <!-- 还款明细弹框 -->
    <el-dialog
      title="还款明细"
      width="1100px"
      :visible.sync="repaymentDetailVisible"
      :close-on-click-modal="false"
    >
      <el-table
        border
        :data="repaymentDetailList"
        size="small"
        v-loading="repaymentDetailLoading"
      >
        <el-table-column type="index" label="序号" width="50" />
        <!-- <el-table-column prop="createTime" label="创建时间" width="140" /> -->
        <el-table-column prop="amount" label="还款金额" width="100" />
        <el-table-column prop="remainingDebt" label="剩余欠款" width="100" />
        <el-table-column prop="balanceBefore" label="还款前余额" width="100" />
        <el-table-column prop="balanceAfter" label="还款后余额" width="100" />
        <el-table-column prop="operatorName" label="操作员" width="90" />
        <el-table-column prop="operateTime" label="操作时间" width="140" />
        <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getTeamAccountFlow } from '@/api/checker'
import Tip from '@/components/Tip'

export default {
  name: 'TeamAccountFlow',
  components: {
    Tip
  },
  props: {
    teamId: { type: [Number, String], default: null },
    teamName: { type: String, default: '' }
  },
  watch: {
    teamName (val) {
      this.form.teamName = val
      this.getList(true)
    },
    teamId (val) {
      this.form.teamId = val
      this.getList(true)
    }
  },
  data () {
    return {
      form: {
        teamId: this.teamId,
        teamName: this.teamName,
        transactionType: '',
        operateTimeBegin: '',
        operateTimeEnd: '',
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      tableData: [],
      total: 0,
      repaymentDetailVisible: false,
      repaymentDetailList: [],
      repaymentDetailLoading: false,
      transactionTypeMap: {
        RECHARGE: '充值',
        DEDUCT: '扣款',
        CONSUME: '消费',
        REFUND: '退款',
        ADJUST: '调整授信额度',
        REPAYMENT: '还款',
        PREPAY_PAY: '预付款支付',
        PREPAY_REFUND: '预付款退款',
        CREDIT_PAY: '授信支付',
        CREDIT_REFUND: '授信退款'
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
      this.form.operateTimeBegin = ''
      this.form.operateTimeEnd = ''
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList (goFirst) {
      let params = { ...this.form }
      goFirst && (params.pageNum = 1)
      this.loading = true
      getTeamAccountFlow(params).then(res => {
        const data = res.data || {}
        this.tableData = data.records || []
        this.total = data.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    reportExport () {
      const params = {
        ...this.form,
        export: true
      }
      getTeamAccountFlow(params).then(() => {
        this.$message.success('导出成功。')
        this.goToDownload()
      }).catch(() => {
        this.$message.error('导出失败。')
      })
    },
    async showOrderDetail (orderId) {
      const { getSingleOrder } = await import('@/api/order')
      const res = await getSingleOrder(orderId)
      this.$refs.orderDetail.show(res.data)
    },
    showRepaymentDetail (row) {
      this.repaymentDetailList = (row.teamAccountRepaymentFlows || []).filter(item => item.id)
      this.repaymentDetailVisible = true
    }
  }
}
</script>

<style scoped>
</style>
