<!--
  @description: 退款管理
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/refundManage
  @date: 2020/03/30-17:40
-->
<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 v-if="bailShowShielding" 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-position="left"
          >
            <!-- 退款状态 -->
            <el-form-item
              label="退款状态"
              prop="refundStatus"
            >
              <el-select v-model="searchForm.refundStatus" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in detailRefundStatuList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
            <!-- 提交时间 -->
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="createTime"
                :default-time="defaultTimerange"
                style="width:228px"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeCreateTime"
              />
            </el-form-item>
            <!-- 退款时间 -->
            <el-form-item label="退款时间">
              <el-date-picker
                v-model="refundTime"
                :default-time="defaultTimerange"
                style="width:228px"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeRefundTime"
              />
            </el-form-item>
            <!-- 错误来款 -->
            <el-form-item v-if="bailShowShielding" label="错误来款" prop="errorStatus">
              <el-select v-model="searchForm.errorStatus" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in errorModelList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </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" @click="applyRefund">
          申请退款
        </el-button>
      </div>
      <section>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <!-- 投标人  -->
          <el-table-column

            header-align="center"
            prop="supplierName"
            label="投标人"
            min-width="160"
          />
          <!-- 是否中标 -->
          <el-table-column
            :formatter="formatWinStatus"
            header-align="center"
            label="是否中标"
            prop="winStatus"
            align="center"
            width="80"
          />
          <!-- 退款申请人 -->
          <el-table-column
            header-align="center"
            prop="createUserName"
            label="退款申请人"
            align="center"
            min-width="150"
          />
          <!-- 错误来款 -->
          <el-table-column
            v-if="bailShowShielding"
            :formatter="formatErrorStatus"
            header-align="center"
            prop="errorStatus"
            label="错误来款"
            align="center"
            min-width="80"
          />
          <!-- 退款金额（元） -->
          <el-table-column
            header-align="center"
            prop="refundAmount"
            label="退款金额（元）"
            min-width="120"
            align="right"
          />
          <!-- 子账号 -->
          <el-table-column
            header-align="center"
            label="子账号"
            prop="accountNo"
            min-width="220"
          />
          <!-- 提交时间 -->
          <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"
            label="退款状态"
            prop="refundStatus"
            align="center"
            width="110"
          />
          <!-- 操作 -->
          <!-- 待审批00 待退款01 退款审批驳回02 退款中03 已打回04 已退款05 退款失败06 待确认07 确认驳回08-->
          <el-table-column
            header-align="center"
            label="操作"
            width="350"
          >
            <template slot-scope="scope">
              <el-link
                v-if="scope.row.refundStatus==='02' || scope.row.refundStatus==='04' || scope.row.refundStatus==='06'
                  || scope.row.refundStatus==='08'"
                type="primary"
                @click.stop="editRefund(scope.row)"
              >
                [编辑]
              </el-link>
              <el-link
                v-if="scope.row.refundStatus==='02' || scope.row.refundStatus==='04' || scope.row.refundStatus==='06'
                  || scope.row.refundStatus==='08'"
                type="primary"
                @click.stop="deleteRefund(scope.row,scope.$index)"
              >
                [删除]
              </el-link>
              <el-link
                v-if="scope.row.refundStatus==='00' || scope.row.refundStatus==='01' || scope.row.refundStatus==='03'
                  || scope.row.refundStatus==='05' || scope.row.refundStatus==='07'"
                type="primary"
                @click.stop="refundView(scope.row)"
              >
                [退款信息]
              </el-link>
              <el-link
                v-if="scope.row.refundStatus==='00' || scope.row.refundStatus==='01' || scope.row.refundStatus==='03'
                  || scope.row.refundStatus==='05' || scope.row.refundStatus==='07'"
                type="primary"
                @click.stop="bidderChangeInfoView(scope.row)"
              >
                [投标人变更信息]
              </el-link>
              <template v-if="bailfeeApplyRefundConfigType">
                <el-link
                  type="primary"
                  @click="handleDetail(scope.row)"
                >
                  [流程追踪]
                </el-link>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
    <!--流程追踪查看弹框-->
    <flow-detail-dialog ref="tracingFlow" />
  </div>
</template>
<script>
/* 接口*/
import { queryDepositRefundDetailList, delDepositRefundDetailInfo } from '@api/fee/bailfee'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { cashDepositGroupMixin } from '../../mixins/cashDepositGroupMixin'
import { depositSystemConfig } from '../../mixins/depositSystemConfig'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import flowDetailDialog from '@views/work/process/flowDetail-dialog' //  流程追踪组件

export default {
  name: 'RefundManageList',
  components: {
    pagination, // 分页
    flowDetailDialog
  },
  mixins: [ListMixin, cashDepositGroupMixin, depositSystemConfig],
  data() {
    return {
      bailfeeApplyRefundConfigType: this.$store.getters.systemConfigVo.configType, // 保证金退款审批配置true走工作流 false隐藏流程追踪
      loading: true,
      createTime: '', // 提交时间
      refundTime: '', // 退款时间
      // 搜索
      searchForm: {
        createTimeEnd: '', // 提交时间结束
        createTimeStart: '', // 提交时间开始
        errorStatus: '', // 是否错误来账00正常01错误
        packId: '', // 包组ID
        refundDetailId: '', // 退款明细ID
        refundId: '', // 退款主表ID
        refundStatus: '', // 退款状态
        refundTimeEnd: '', // 退款时间结束
        refundTimeStart: '' // 退款时间开始
      },
      tableData: []
    }
  },
  created() {
    // 根据键获取正式配置
    this.$store.dispatch('getSystemConfigValue', 'docfee-audit-config').then(() => {
      this.bailfeeApplyRefundConfigType = this.$store.getters.systemConfigVo.configType // true启动工作流 false普通审核
    }).catch(() => {
    })
    // 获取列表信息
    this.loadData()
  },
  methods: {
    // 获取数据
    loadData() {
      const params = this.getQueryParams()// 查询条件
      params.packId = this.$route.params.packId // 包组id
      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)
    },
    // 提交时间
    changeCreateTime(val) {
      if (val) {
        this.searchForm.createTimeStart = this.$Moment(val[0]).format(this.momentSaveFormat)//  提交开始时间
        this.searchForm.createTimeEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 提交结束时间
      }
    },
    // 退款时间
    changeRefundTime(val) {
      if (val) {
        this.searchForm.refundTimeStart = this.$Moment(val[0]).format(this.momentSaveFormat)//  退款开始时间
        this.searchForm.refundTimeEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 退款结束时间
      }
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.createTime = ''
      this.refundTime = ''
      this.$refs[formName].resetFields()
      Object.keys(this.searchForm).map((val, inx) => {
        this.searchForm[val] = ''
      })
      // 获取列表信息
      this.loadData()
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/cashDepositManage'
      })
    },
    // 查看退款信息
    refundView(row) {
      this.$router.push({
        path: '/fee/refundInfoDetail',
        name: 'RefundInfoDetail',
        params: {
          ...this.$route.params,
          supplierId: row.supplierId,
          refundDetailId: row.refundDetailId
        }
      })
    },
    // 投标人变更信息
    bidderChangeInfoView(row) {
      this.$router.push({
        path: '/fee/supplierChangeInfo',
        name: 'SupplierChangeInfoDetail',
        params: {
          ...this.$route.params,
          supplierId: row.supplierId,
          refundDetailId: row.refundDetailId
        }
      })
    },
    // 申请退款
    applyRefund() {
      this.$router.push({
        path: '/fee/applyRefund',
        name: 'ApplyRefund',
        params: {
          ...this.$route.params
        }
      })
    },
    // 编辑
    editRefund(row) {
      this.$router.push({
        path: '/fee/applyRefund',
        name: 'ApplyRefund',
        params: {
          ...this.$route.params,
          refundDetailId: row.refundDetailId,
          editorStatus: true // 标识符 前端自定义 用来区分是否编辑
        }
      })
    },
    // 删除
    deleteRefund(row, index) {
      this.$confirm('确认删除本条退款记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        delDepositRefundDetailInfo(row.refundDetailId).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.tableData.splice(index, 1)
        }).catch(() => {

        })
      })
    },
    // 流程追踪详情
    handleDetail(row) {
      this.$refs.tracingFlow.openDialogInitData(row.refundId)
    }
  }
}
</script>
<style lang="less" scoped>

</style>
