<!--
  @description: 保证金退款查看
  @Modifier: sunxinman/haofengxain
  @routerPath: /fee/refundDetail
  @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="tenderName" label="投标人" prop="tenderName">
              <el-input v-model="searchForm.tenderName" placeholder="投标人" style="width:200px" />
            </el-form-item>
            <!-- 退款账户名称 -->
            <el-form-item label="退款账户名称" prop="auditStatus">
              <el-input v-model="searchForm.auditStatus" placeholder="退款账户名称" style="width:200px" />
            </el-form-item>
            <!-- 退款开户行 -->
            <el-form-item label="退款开户行" prop="auditStatus">
              <el-input v-model="searchForm.auditStatus" placeholder="退款开户行" style="width:200px" />
            </el-form-item>
            <!-- 退款状态 -->
            <el-form-item label="退款状态" prop="stageType">
              <el-select v-model="searchForm.stageType" placeholder="请选择" style="width:200px">
                <el-option
                  v-for="(item,index) in redundFeeAddList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
            <!-- 退款日期 -->
            <el-form-item ref="date" label="退款日期" prop="date">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:200px"
              />
            </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>
      <div class="mb10">
        <el-button type="primary" plain @click="depositRefundListExport">
          导出退款记录
        </el-button>
      </div>
      <section>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            width="60px"
            align="center"
          />
          <!-- 投标人  -->
          <el-table-column

            header-align="center"
            fixed="left"
            prop="supplierName"
            label="投标人"
            min-width="220"
          />
          <!-- 错误来款  -->
          <el-table-column
            :formatter="formatErrorStatus"
            prop="errorStatus"
            label="错误来款"
            width="120"
            align="center"
          />
          <!-- 是否中标 -->
          <el-table-column
            :formatter="formatWinStatus"
            header-align="center"
            label="是否中标"
            prop="winStatus"
            align="center"
            width="80"
          />
          <!-- 退款账户名称  -->
          <el-table-column

            header-align="center"
            prop="desName"
            label="退款账户名称"
            min-width="180"
          />
          <!-- 退款开户行  -->
          <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="驳回理由"
            prop=""
            align="left"
            min-width="150"
          />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { queryDepositRefundDetailList, queryDepositRefundDetailListExport } from '@api/fee/bailfee'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 公用方法*/
import { filterObj, numberChinese, moneyFormat } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { cashDepositGroupMixin } from '../mixins/cashDepositGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  name: 'RefundDetail',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin, cashDepositGroupMixin],
  data() {
    return {
      MoneyFormat: moneyFormat, // 金额添加千分位
      NumberChinese: numberChinese, // 金额转大写
      loading: true,
      date: '',
      // 搜索
      searchForm: {
        createTimeEnd: '', // 提交时间结束
        createTimeStart: '', // 提交时间开始
        errorStatus: '', // 是否错误来账00正常01错误
        packId: '', // 包组ID
        refundDetailId: '', // 退款明细ID
        refundId: this.$route.params.refundId, // 退款主表ID
        refundStatus: '', // 退款状态
        refundTimeEnd: '', // 退款时间结束
        refundTimeStart: '' // 退款时间开始
      },
      tableData: []
    }
  },
  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(() => {

      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 保证金退款-导出退款记录
    depositRefundListExport() {
      const params = this.getQueryParams()
      queryDepositRefundDetailListExport(params).then(res => {
        download(res, '退款记录.xls')
      }).catch(() => {
      })
    },
    // 搜索
    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()
    },
    // 返回
    back() {
      this.$router.push('/fee/cashDepositRefundManage')
    }
  }
}
</script>
<style lang="less" scoped>

</style>
