<!--
  @description: 保证金退款
  @Modifier: sunxinman
  @routerPath: /fee/cashDepositRefundAdd
  @date: 2020/04/02-14:58
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back()">
        <i class="iconfont icon-fanhui mr10" />退款
      </div>
    </section>
    <section class="p0-16">
      <!--查询条件-->
      <div class="crud_menu_title clearfix">
        <span class="icon-line fl">查询条件</span>
        <span class="fr pointer" @click="handleToggleSearch">
          <el-link
            :underline="false"
            :class="toggleSearchStatus?'arrow-is-active':''"
            type="primary"
            class="toggleSearchStatus icon el-icon-arrow-down"
          />
          {{ toggleSearchStatus?'收起高级查询' :'展开高级查询' }}
        </span>
      </div>
      <section :class="{'SearchContent_show':toggleSearchStatus}" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            inline
            label-width="98px"
            label-position="left"
          >
            <!-- 投标人 -->
            <el-form-item ref="supplierName" label="投标人" prop="supplierName">
              <el-input v-model="searchForm.supplierName" placeholder="投标人" style="width:228px" />
            </el-form-item>
            <!-- 退款账户名称 -->
            <el-form-item label="退款账户名称" prop="desName">
              <el-input v-model="searchForm.desName" placeholder="退款账户名称" style="width:228px" />
            </el-form-item>
            <!-- 退款开户行 -->
            <el-form-item label="退款开户行" prop="desBankName">
              <el-input v-model="searchForm.desBankName" placeholder="退款开户行" style="width:228px" />
            </el-form-item>
            <!-- 退款状态 -->
            <el-form-item label="退款状态" prop="refundStatus">
              <el-select v-model="searchForm.refundStatus" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in refundFeeList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
            <!-- 退款日期 -->
            <el-form-item ref="refundTime" label="退款日期" prop="refundTime">
              <el-date-picker
                v-model="refundTime"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:228px"
                @change="changeRefundTime"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重置
          </el-button>
        </div>
      </section>
      <!--查询结果-->
      <div class="crud_menu_title">
        <span class="icon-line">查询结果</span>
      </div>
      <el-row class="mb10 table-alert-info">
        <el-col>
          <el-button type="primary" :loading="loadingBtn" @click="printRefund">
            退款
          </el-button>
          <el-button type="primary" plain @click="depositRefundListExport">
            导出退款记录
          </el-button>
          <el-link :underline="false">
            合计金额:<span class="sum_color">{{ moneyFormat(totalRefundAmount) }}</span>元
          </el-link>
          <el-link :underline="false">
            已选中记录数:<span class="sum_color">{{ checkedTr.length }}</span>条
          </el-link>
          <el-link :underline="false">
            已选中记录合计金额:<span class="sum_color">{{ moneyFormat(selectRefundAmount) }}</span>元
          </el-link>
        </el-col>
      </el-row>
      <section>
        <el-table
          ref="cashDepositRefundTable"
          v-loading="loading"
          :row-key="getRowKeys"
          :data="tableData"
          @selection-change="selectionChange"
        >
          <el-table-column
            :reserve-selection="true"
            :selectable="isDisabled"
            disabled="true"
            type="selection"
            width="55"
            fixed
            align="center"
          />
          <el-table-column
            type="index"
            label="序号"
            fixed
            width="60px"
            align="center"
          />
          <!-- 投标人  -->
          <el-table-column

            header-align="center"
            prop="supplierName"
            label="投标人"
            min-width="220"
          />
          <!-- 是否中标 -->
          <el-table-column
            :formatter="formatWinStatus"
            header-align="center"
            label="是否中标"
            prop="winStatus"
            align="center"
            width="80"
          />
          <!-- 退款账户名称  -->
          <el-table-column
            header-align="center"
            prop="desName"
            label="退款账户名称"
            width="160"
          />
          <!-- 退款开户行  -->
          <el-table-column

            header-align="center"
            prop="desBankName"
            label="退款开户行"
            min-width="180"
          />
          <!-- 联行号  -->
          <el-table-column
            header-align="center"
            prop="desBankNo"
            label="联行号"
            width="160"
          />
          <!-- 退款账号  -->
          <el-table-column
            header-align="center"
            prop="desNo"
            label="退款账号"
            width="160"
          />
          <!-- 退款金额小写（元） -->
          <el-table-column
            header-align="center"
            prop="refundAmount"
            label="退款金额小写"
            align="right"
            min-width="120"
          >
            <template slot-scope="scope">
              <span>{{ moneyFormat(scope.row.refundAmount) }} </span>
            </template>
          </el-table-column>
          <!-- 退款金额大写 -->
          <el-table-column
            header-align="center"
            label="退款金额大写"
            min-width="220"
          >
            <template slot-scope="scope">
              <span>{{ numberChinese(scope.row.refundAmount) }} </span>
            </template>
          </el-table-column>
          <!-- 标段（包）编号 -->
          <el-table-column
            header-align="center"
            label="标段（包）编号"
            prop="packNo"
            align="left"
            min-width="200"
          />
          <!-- 标段（包）名称 -->
          <el-table-column
            header-align="center"
            label="标段（包）名称"
            prop="packName"
            align="left"
            min-width="200"
          />
          <!-- 子账号 -->
          <el-table-column
            header-align="center"
            label="子账号"
            align="center"
            prop="accountNo"
            width="160"
          />
          <!-- 保证金余额（元） -->
          <el-table-column
            header-align="center"
            label="保证金余额（元）"
            prop="accountBlance"
            align="right"
            width="120"
          />
          <!-- 提交时间 -->
          <el-table-column
            header-align="center"
            label="提交时间"
            prop="createTime"
            align="center"
            width="140"
          />
          <!-- 退款时间 -->
          <el-table-column
            label="退款时间"
            prop="refundTime"
            align="center"
            width="140"
          />
          <!-- 退款状态 -->
          <el-table-column
            :formatter="formatRefundStatus"
            prop="refundStatus"
            label="退款状态"
            align="center"
            width="110"
          />
          <!-- 备注 -->
          <el-table-column
            header-align="center"
            label="备注"
            prop="remark"
            min-width="160"
          />
          <!-- 操作 -->
          <el-table-column
            header-align="center"
            label="操作"
            fixed="right"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-link
                v-if="scope.row.refundStatus!=='07'"
                type="primary"
                @click="repulse(scope.row)"
              >
                打回
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
        <!-- 退款打回弹框 -->
        <rejectReasonDialog ref="rejectReason" @loadData="loadData" />
      </section>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { queryDepositRefundDetailList, batchRefundDetails, queryDepositRefundDetailListExport } from '@api/fee/bailfee'
/* 公用方法*/
import { filterObj, download } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { cashDepositGroupMixin } from '../mixins/cashDepositGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import rejectReasonDialog from './rejectReason-dialog'

export default {
  name: 'CashDepositRefundAdd',
  components: {
    pagination, // 分页
    rejectReasonDialog // 退款打回弹框
  },
  mixins: [ListMixin, cashDepositGroupMixin],
  data() {
    return {
      loadingBtn: false,
      // 获取row的key值
      getRowKeys(row) {
        return row.refundDetailId
      },
      totalRefundAmount: this.$route.params.totalRefundAmount, // 合计金额
      loading: true,
      refundTime: '', // 退款日期
      selectRefundAmount: 0, // 已选中金额
      // 搜索
      searchForm: {
        createTimeEnd: '', // 提交时间结束
        createTimeStart: '', // 提交时间开始
        errorStatus: '', // 是否错误来账00正常01错误
        packId: '', // 包组ID
        refundDetailId: '', // 退款明细ID
        refundId: this.$route.params.refundId, // 退款主表ID
        refundStatus: '', // 退款状态
        refundTimeEnd: '', // 退款时间结束
        refundTimeStart: '' // 退款时间开始
      },
      tableData: [],
      checkedTr: [] // 已勾选数据存放
    }
  },
  created() {
    // 获取列表信息
    this.loadData()
  },
  methods: {
    // 获取数据
    loadData() {
      // 查询条件
      const params = this.getQueryParams()
      queryDepositRefundDetailList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      // 获取列表信息
      this.loadData()
    },
    // 退款
    printRefund() {
      if (!this.checkedTr.length) {
        this.$message({
          type: 'warning',
          message: '请选择一条记录'
        })
      } else {
        this.$confirm('确认批量退款吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          // 获取为退款的数据 01 待退款 02退款审批驳回 06 退款失败
          const refundDetailIds = this.checkedTr.filter(row => row.refundStatus === '01' || row.refundStatus === '02' || row.refundStatus === '06').map(row => row.refundDetailId).join(',') // 已勾选数据取出明细id
          this.handleBatchRefund(refundDetailIds)
        })
      }
    },
    // 保证金退款-导出退款记录
    depositRefundListExport() {
      const params = this.getQueryParams()
      queryDepositRefundDetailListExport(params).then(res => {
        download(res, '保证金退款记录信息列表.xls')
      }).catch(() => {
      })
    },
    // 处理批量退款
    handleBatchRefund(refundDetailIds) {
      this.loadingBtn = true
      batchRefundDetails(refundDetailIds).then(response => {
        this.$message.success(response.header.msg)
        // 获取列表信息
        this.loadData()
        this.$refs.cashDepositRefundTable.clearSelection()
        this.loadingBtn = false
      }).catch(() => {
        this.loadingBtn = false
      })
    },
    // 打回
    repulse(row) {
      this.$refs.rejectReason.openDialog(row.refundDetailId)
    },
    // 退款日期
    changeRefundTime(val) {
      if (val) {
        this.searchForm.refundTimeStart = this.$Moment(val[0]).format(this.momentDateTime)// 退款时间开始
        this.searchForm.refundTimeEnd = this.$Moment(val[1]).format(this.momentDateTime)// 退款时间结束
      }
    },
    // 复选框部分禁用
    isDisabled(row) {
      // 不是已打回可以勾选
      return row.refundStatus !== '07'
    },
    // 勾选表格
    selectionChange(val) {
      this.checkedTr = val
      this.handleRefundAmount()
    },
    // 已选中合计金额
    handleRefundAmount() {
      let refundAmountTotal = 0
      this.checkedTr.forEach(item => {
        refundAmountTotal += Number(item.refundAmount)
      })
      this.selectRefundAmount = refundAmountTotal.toFixed(2)
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/cashDepositRefundManage'
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
