<!--
  @description: 保证金退款-错误款项/非错误款项共用
  @Modifier: sunxinman/haofengxain
  @routerPath: /fee/cashDepositRefundManage
  @date: 2020/04/02-11:58
-->
<template>
  <table-crud
    ref="tableCrud"
    :menu="true"
    :search-form="searchForm"
    search-label-width="110px"
    @on-load="loadData"
  >
    <template v-slot:header>
      保证金退款列表
    </template>
    <template v-slot:search="search">
      <!-- 标段（包）编号 -->
      <el-form-item ref="packNo" label="标段（包）编号" prop="packNo">
        <el-input
          v-model.trim="searchForm.packNo"
          placeholder="标段（包）编号"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 项目编号 -->
      <el-form-item ref="tenderNo" label="项目编号" prop="tenderNo">
        <el-input
          v-model.trim="searchForm.tenderNo"
          placeholder="项目编号"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 标段（包）名称 -->
      <el-form-item ref="packName" label="标段（包）名称" prop="packName">
        <el-input
          v-model.trim="searchForm.packName"
          placeholder="标段（包）名称"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 项目名称 -->
      <el-form-item ref="tenderName" label="项目名称" prop="tenderName">
        <el-input
          v-model.trim="searchForm.tenderName"
          placeholder="项目名称"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 退款发起日期 -->
      <el-form-item ref="createTime" label="退款发起日期" prop="createTime">
        <el-date-picker
          v-model="searchForm.createTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:228px"
          @change="changeCreateTime"
        />
      </el-form-item>
      <!-- 审批通过日期 -->
      <el-form-item ref="auditTime" label="审批通过日期" prop="auditTime">
        <el-date-picker
          v-model="searchForm.auditTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:228px"
          @change="changeAuditTime"
        />
      </el-form-item>
      <!-- 是否错误来款 -->
      <el-form-item label="是否错误来款">
        <el-select v-model="searchForm.errorStatus" placeholder="请选择">
          <el-option
            v-for="(item,index) in errorModelList"
            :key="index"
            :label="item.typename"
            :value="item.typecode"
          />
        </el-select>
      </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 redundFeeSList"
            :key="index"
            :label="item.typename"
            :value="item.typecode"
          />
        </el-select>
      </el-form-item>
    </template>
    <template v-slot:menuLeft>
      <!-- <el-button type="primary" @click="printRefund">
        打印退款明细
      </el-button> -->
      <el-button @click="depositRefundListExport">
        导出退款明细
      </el-button>
    </template>
    <template v-slot:GXTable>
      <el-table
        ref="smallTable"
        v-loading="loading"
        :data="tableData"
        row-class-name="row-line-height-cell16"
        size="mini"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        />
        <!-- 招标项目编号/名称  -->
        <el-table-column
          label="招标项目编号/名称"
          min-width="220"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.tenderNo && scope.row.tenderNo }}</p>
            <p>{{ scope.row.tenderName && scope.row.tenderName }}</p>
          </template>
        </el-table-column>
        <!-- 标段（包）编号/名称 -->
        <el-table-column
          header-align="center"
          label="标段（包）编号/名称"
          prop="packName"
          min-width="200"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.packNo && scope.row.packNo }}</p>
            <p>{{ scope.row.packName && scope.row.packName }}</p>
          </template>
        </el-table-column>
        <!-- 业务部门 -->
        <el-table-column
          header-align="center"
          label="业务部门"
          prop="tenderDepart"
          min-width="100"
        />
        <!-- 项目经理 -->
        <el-table-column
          label="项目经理"
          prop="tenderManager"
          align="center"
          min-width="80"
        />
        <!-- 合计金额小写（元） -->
        <el-table-column
          header-align="center"
          prop="totalRefundAmount"
          label="退款金额小写"
          align="right"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.totalRefundAmount) }} </span>
          </template>
        </el-table-column>
        <!-- 退款金额大写 -->
        <el-table-column

          header-align="center"
          prop="totalRefundAmount"
          label="退款金额大写"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{ numberChinese(scope.row.totalRefundAmount) }} </span>
          </template>
        </el-table-column>
        <!-- 退款发起时间 -->
        <el-table-column
          header-align="center"
          prop="createTime"
          label="退款发起时间"
          width="140"
          align="center"
        />
        <!-- 审核通过时间 -->
        <el-table-column
          header-align="center"
          prop="auditTime"
          label="审核通过时间"
          width="140"
          align="center"
        />
        <!-- 是否错误来款 -->
        <el-table-column
          :formatter="formatErrorStatus"
          label="是否错误来款"
          prop="errorStatus"
          align="center"
          width="110"
        />
        <!-- 退款状态 -->
        <el-table-column
          :formatter="formatRefundFeeList"
          label="退款状态"
          prop="refundStatus"
          align="center"
          width="110"
        />
        <!-- 操作 -->
        <el-table-column
          header-align="center"
          label="操作"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <!-- <el-link
              type="primary"
              @click="refund(scope.row)"
            >
              退款
            </el-link> -->
            <el-link
              type="primary"
              @click="viewDetail(scope.row)"
            >
              查看
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </table-crud>
</template>
<script>
/* 接口*/
import { queryDepositRefundList, queryDepositRefundListExport } from '@api/fee/bailfee'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { cashDepositGroupMixin } from '../mixins/cashDepositGroupMixin'

export default {
  name: 'CashDepositRefundManageList',
  mixins: [cashDepositGroupMixin],
  data() {
    return {
      loading: true,
      // 搜索
      searchForm: {
        auditTime: '', // 审核通过时间
        createTime: '', // 退款发起时间
        auditStatus: '', // 审核状态
        auditTimeEnd: '', // 审核通过时间结束
        auditTimeStart: '', // 审核通过时间开始
        createTimeEnd: '', // 退款发起时间结束
        createTimeStart: '', // 退款发起时间开始
        errorStatus: '', // 是否错误来账00正常01错误
        packId: '', // 标段id
        packName: '', // 标段名称
        packNo: '', // 标段编号
        refundId: '', // 退款主表ID
        refundStatus: '', // 退款状态
        tenderDepart: '', // 业务部门
        tenderDepartId: '', // 业务部门ID
        tenderId: '', // 标段名称
        tenderManager: '', // 项目经理
        tenderManagerId: '', // 项目经理ID
        tenderName: '', // 项目名称
        tenderNo: '' // 项目编号
      },
      tableData: [],
      checkedTr: [] // 批量记账数据存放
    }
  },
  methods: {
    // 保证金退款审批主表列表
    loadData(params, callback) {
      params.auditStatus = '01' // 审核状态
      queryDepositRefundList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 退款
    refund(row) {
      this.$router.push({
        path: '/fee/cashDepositRefundAdd',
        name: 'CashDepositRefundAdd',
        params: {
          totalRefundAmount: row.totalRefundAmount, // 合计金额
          refundId: row.refundId
        }
      })
    },
    // 选择
    selectionChange(val) {
      this.checkedTr = val
    },
    // 查看
    viewDetail(row) {
      this.$router.push({
        path: '/fee/refundDetail',
        name: 'CashDepositRefundManageDetail',
        params: {
          refundId: row.refundId
        }
      })
    },
    // 打印退款明细
    printRefund() {
      if (!this.checkedTr.length) {
        this.$message({
          type: 'warning',
          message: '请选择一条记录'
        })
      }
    },
    // 退款发起时间
    changeCreateTime(val) {
      if (val) {
        this.searchForm.createTimeStart = this.$Moment(val[0]).format(this.momentSaveFormat)// 开始时间
        this.searchForm.createTimeEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 结束时间
      }
    },
    // 审核通过时间
    changeAuditTime(val) {
      if (val) {
        this.searchForm.auditTimeStart = this.$Moment(val[0]).format(this.momentSaveFormat)// 开始时间
        this.searchForm.auditTimeEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 结束时间
      }
    },
    // 保证金退款审批主表列表-导出退款明细
    depositRefundListExport() {
      const params = this.$refs.tableCrud.getQueryParams()
      params.errorStatus = this.$route.meta.pathErrorStatus // 是否错误来账
      queryDepositRefundListExport(params).then(res => {
        download(res, '保证金退款明细信息列表.xls')
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
