<!--
  @description: 文件购买记录
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/docPurchaseRecord
  @date: 2020/03/20-09:18
-->
<template>
  <div>
    <section class="title p0-16 clearfix title_border">
      <!-- 返回 -->
      <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="docfeeShowShielding" 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="90px"
            label-position="left"
          >
            <!-- 购买时间 -->
            <el-form-item ref="payTime" label="购买时间" prop="payTime">
              <el-date-picker
                v-model="payTime"
                :value-format="elValueSaveFormat"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:228px"
                @change="handleCreateTime"
              />
            </el-form-item>
            <!-- 投标人名称 -->
            <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="feeType"
            >
              <el-select v-model="searchForm.feeType" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in costTypeList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
            <!-- 开票状态 -->
            <el-form-item
              v-if="docfeeShowShielding"
              label="开票状态"
              prop="invoiceStatus"
            >
              <el-select v-model="searchForm.invoiceStatus" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in docInvoiceStatusList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
            <!-- 退款状态 -->
            <el-form-item
              v-if="docfeeShowShielding"
              label="退款状态"
              prop="backStatus"
            >
              <el-select v-model="searchForm.backStatus" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in refundStatusList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" size="small" @click="onSearch">
            搜索
          </el-button>
          <el-button plain type="info" size="small" @click="resetForm('searchForm')">
            重置
          </el-button>
        </div>
      </section>
      <!--查询结果-->
      <div class="crud_menu_title">
        <span class="icon-line">查询结果</span>
      </div>
      <section class="mb10">
        <el-button type="primary" @click="exportExcel">
          导出收款记录
        </el-button>
        <el-button v-if="docfeeShowShielding" style="color: red;font-size:14px;" type="text">
          提示：标书费开票后方可退款
        </el-button>
      </section>
      <section>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <!-- 投标人名称  -->
          <el-table-column

            prop="supplierName"
            label="投标人名称"
            min-width="200"
          />
          <!-- 费用类型 -->
          <el-table-column
            :formatter="formatFeeType"
            header-align="center"
            label="费用类型"
            prop="feeType"
            align="left"
            min-width="120"
          />
          <!-- 金额（元） -->
          <el-table-column
            header-align="center"
            prop="documentPrice"
            label="金额（元）"
            align="right"
            min-width="75"
          />
          <!-- 购买时间 -->
          <el-table-column
            header-align="center"
            prop="payTime"
            label="购买时间"
            width="140"
            align="center"
          />
          <!-- 发票抬头 -->
          <el-table-column
            v-if="docfeeShowShielding"
            header-align="center"
            label="发票抬头"
            prop="invoiceTitle"
            min-width="200"
          />
          <!-- 开票时间 -->
          <el-table-column
            v-if="docfeeShowShielding"
            header-align="center"
            label="开票时间"
            prop="invoiceTime"
            width="140"
          />
          <!-- 发票编号 -->
          <el-table-column
            v-if="docfeeShowShielding"
            label="发票编号"
            prop="invoiceNo"
            align="center"
            min-width="130"
          />
          <!-- 开票状态 -->
          <el-table-column
            v-if="docfeeShowShielding"
            :formatter="formatInvoiceStatus"
            label="开票状态"
            prop="invoiceStatus"
            align="center"
            min-width="100"
          />
          <!-- 收款编号 -->
          <el-table-column
            v-if="docfeeShowShielding"
            label="收款编号"
            prop="peyeeNo"
            align="center"
            min-width="180"
          />
          <!-- 退款状态 -->
          <el-table-column
            v-if="docfeeShowShielding"
            :formatter="formatBackStatus"
            label="退款状态"
            prop="backStatus"
            align="center"
            min-width="100"
          />
          <!-- 操作 -->
          <!--未退款00 已退款01 退款中02  退款申请中03 退款审批驳回04 退款审批通过05 退款失败06 红冲中07 -->
          <el-table-column
            v-if="docfeeShowShielding"
            header-align="center"
            label="操作"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <!--docfeeShowShielding 02已开票 展示申请退款-->
              <template v-if="scope.row.invoiceStatus==='02'">
                <el-link
                  v-if="scope.row.backStatus ==='00' || scope.row.backStatus ==='04'|| scope.row.backStatus ==='06'"
                  type="primary"
                  @click.stop="applyRefund(scope.row)"
                >
                  [申请退款]
                </el-link>
              </template>
              <el-link
                v-if="scope.row.backStatus ==='01' || scope.row.backStatus ==='02'|| scope.row.backStatus ==='03' || scope.row.backStatus ==='05'"
                type="primary"
                @click.stop="examineRefund(scope.row)"
              >
                [查看退款]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { queryDocfeeListPages, exportPeyeeRecord } from '@api/fee/docfee'
/* 公用方法*/
import { download, filterObj } from '@/assets/js/utils'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { TenderFeeGroupMixin } from '../mixins/tenderFeeGroupMixin'
import { docfeeSystemConfig } from '../mixins/docfeeSystemConfig'

/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  name: 'DocPurchaseRecordList',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin, TenderFeeGroupMixin, docfeeSystemConfig],
  data() {
    return {
      payTime: '', // 购买时间
      loading: true,
      // 搜索
      searchForm: {
        backStatus: '', // 退款状态: 00未退款 01已退款 02退款中 03退款申请中 04退款审批驳回 05退款审批通过 06退款失败 07红冲中
        endTime: '', // 购买结束时间
        startTime: '', // 购买开始时间
        feeType: '', // 费用类型: 00资格预审文件费 01招标文件费
        invoiceStatus: '', // 开票状态: 00 未开票 01已开票 02 开票失败 03 开票申请中 04已电子开票重开 05电子红冲中 06已电子红冲 07电子红冲失败
        packId: '', // 标段id
        supplierName: '' // 供应商名称(投标人名称)
      },
      tableData: []
    }
  },
  created() {
    // 获取列表信息
    this.loadData()
  },
  methods: {
    // 获取数据
    loadData() {
      this.searchForm.packId = this.$route.params.packId // 标段id
      const params = this.getQueryParams()// 查询条件
      queryDocfeeListPages(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)
    },
    // 导出收款记录
    exportExcel() {
      exportPeyeeRecord(this.searchForm).then(res => {
        download(res, '收款记录信息.xls')
      })
    },
    // 申请退款
    applyRefund(row) {
      this.$router.push({
        path: '/fee/tenderFeeApplyRefundAdd',
        name: 'TenderFeeApplyRefundAdd',
        params: {
          feeDocId: row.id,
          packId: this.searchForm.packId
        }
      })
    },
    // 查看退款
    examineRefund(row) {
      this.$router.push({
        path: '/fee/tenderFeeApplyRefundDetail',
        name: 'TenderFeeApplyRefundDetail',
        params: {
          feeDocId: row.id,
          packId: this.searchForm.packId
        }
      })
    },
    handleCreateTime(val) {
      if (val) {
        this.searchForm.startTime = this.$Moment(val[0]).format(this.momentDate)// 创建开始时间
        this.searchForm.endTime = this.$Moment(val[1]).format(this.momentDate)// 创建结束时间
      }
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.payTime = ''
      this.searchForm.startTime = ''
      this.searchForm.endTime = ''
      this.$refs[formName].resetFields()
      // 获取列表信息
      this.loadData()
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/tenderFeeManage'
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
