<!--
  @description: 服务费开票审批记录
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/serviceInvoiceRecords
  @date: 2020/04/06-13:50
-->
<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.trim="searchForm.supplierName" placeholder="投标人" style="width:228px" />
            </el-form-item>
            <!-- 开票申请时间 -->
            <el-form-item ref="createTime" label="开票申请时间" prop="createTime">
              <el-date-picker
                v-model="createTime"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:228px"
                @change="changeCreateTime"
              />
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="状态" prop="auditStatus">
              <el-select v-model="searchForm.auditStatus" placeholder="请选择" style="width:228px">
                <el-option
                  v-for="(item,index) in serviceInvoiceRecordStatusList"
                  :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="addAppay">
          新增服务费开票申请
        </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
            prop="supplierName"
            label="投标人/招标人"
            min-width="220"
          />
          <!-- 发票抬头 -->
          <el-table-column
            header-align="center"
            label="发票抬头"
            prop="invoiceTittle"
            align="left"
            width="200"
          />
          <!-- 开票金额（元） -->
          <el-table-column
            header-align="center"
            prop="invoiceAmount"
            label="开票金额（元）"
            align="right"
            width="120"
          />
          <!-- 发票编号 -->
          <el-table-column
            header-align="center"
            prop="invoiceTax"
            label="发票编号"
            min-width="180"
          />
          <!-- 开票申请时间 -->
          <el-table-column
            header-align="center"
            label="开票申请时间"
            prop="createTime"
            align="center"
            width="140"
          />
          <!-- 开票时间 -->
          <el-table-column
            header-align="center"
            label="开票时间"
            align="center"
            width="140"
          />
          <!-- 状态 -->
          <el-table-column
            label="状态"
            prop="auditStatus"
            align="center"
            width="110"
          >
            <template slot-scope="scope">
              <span
                v-for="(item,index) in serviceInvoiceRecordStatusList"
                v-if="scope.row.auditStatus === item.typecode"
                :key="index"
              >{{ item.typename }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            header-align="center"
            label="操作"
            width="300"
          >
            <template slot-scope="scope">
              <!--============操作开票===============-->
              <!--开票申请撤回 01 开票申请审批驳回 02 -->
              <el-link
                v-if="scope.row.auditStatus!=='01' || scope.row.auditStatus!=='02'"
                type="primary"
                @click.stop="viewApply(scope.row)"
              >
                [查看开票申请]
              </el-link>
              <!--开票申请中 00 -->
              <!--              <el-link
                v-if="scope.row.auditStatus==='00'"
                type="primary"
                @click.stop="revocationApply(scope.row)">[撤回开票申请]</el-link>-->
              <!--开票申请撤回 01-->
              <el-link
                v-if="scope.row.auditStatus==='01'"
                type="primary"
                @click.stop="delApply(scope.row,scope.$index)"
              >
                [删除开票申请]
              </el-link>
              <el-link
                type="primary"
                @click.stop="editBillingApplications(scope.row,scope.$index)"
              >
                [编辑开票申请]
              </el-link>
              <!--============操作退款===============-->
              <!--已开票 06-->
              <el-link
                v-if="scope.row.auditStatus==='06'"
                type="primary"
                @click.stop="applyRefund(scope.row)"
              >
                [申请退款]
              </el-link>
              <!--退款失败 14-->
              <el-link
                v-if="scope.row.auditStatus==='14'"
                type="primary"
                @click.stop="applyRefund(scope.row)"
              >
                [重新发起退款]
              </el-link>
              <!--            <el-link
                type="primary"
                @click.stop="applyRefund(row)">[编辑退款]</el-link>-->
              <!--退款审批中-07 退款中-13 退款成功-15-->
              <el-link
                v-if="scope.row.auditStatus==='07' || scope.row.auditStatus==='13' ||scope.row.auditStatus==='15'"
                type="primary"
                @click.stop="viewRefund(scope.row)"
              >
                [查看退款申请]
              </el-link>
              <!--退款审批驳回-08  typename-14-->
              <el-link
                v-if="scope.row.auditStatus==='08' || scope.row.auditStatus==='14'"
                type="primary"
                @click.stop="deletionRefund(scope.row,scope.$index)"
              >
                [删除退款申请]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { queryWinServiceList, delTenderFeeWinService, delTenderFeeWinServiceOut } from '@/api/fee/servicefee'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { ServiceGroupMixin } from '../../mixins/serviceFeeGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  name: 'ServiceInvoiceRecordsList',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin, ServiceGroupMixin],
  data() {
    return {
      loading: true,
      createTime: '', // 开票申请时间
      winServiceId: this.$route.query.winServicePackinfoid, // 服务费开票信息ID
      // 搜索
      searchForm: {
        auditStatus: '', // 审批状态
        createTimeEnd: '', // 开票申请时间结束
        createTimeStart: '', // 开票申请时间开始
        stageId: this.$route.query.stageId, // 阶段id
        supplierId: '', // 供应商id
        supplierName: '', // 供应商名称
        tenderId: '', // 标段名称
        winServiceId: '' // 服务费开票信息ID
      },
      tableData: []
    }
  },
  created() {
    // 获取列表信息
    this.loadData()
  },
  methods: {
    // 获取数据
    loadData() {
      const params = this.getQueryParams()// 查询条件
      queryWinServiceList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询条件
    getQueryParams() {
      this.searchForm.winServiceId = this.winServiceId
      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.createTime = ''
      this.searchForm.createTimeStart = ''
      this.searchForm.createTimeEnd = ''
      this.$refs[formName].resetFields()
      // 获取列表信息
      this.loadData()
    },
    // 开标申请时间
    changeCreateTime(val) {
      if (val) {
        this.searchForm.createTimeStart = this.$Moment(val[0]).format(this.momentSaveFormat)//  开票申请时间结束
        this.searchForm.createTimeEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 开票申请时间开始
      }
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/serviceManage'
      })
    },
    /* =====================================操作开票================================*/
    // 新增服务费开票申请
    addAppay(row) {
      this.$router.push({
        path: '/fee/serviceInvoiceApplyAdd',
        query: {
          ...this.$route.query
        }
      })
    },
    // 编辑开票申请
    editBillingApplications(row) {
      this.$router.push({
        path: '/fee/serviceInvoiceApplyAdd',
        query: {
          ...this.$route.query,
          winServiceId: row.winServiceId // 中标服务费ID
        }
      })
    },
    // 查看开票申请
    viewApply(row) {
      this.$router.push({
        path: '/fee/serviceInvoiceApplyDetail',
        query: {
          ...this.$route.query,
          winServiceId: row.winServiceId // 中标服务费ID
        }
      })
    },
    // 撤回开票申请
    revocationApply(row) {
      this.$confirm('确认撤回开票申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
      })
    },
    // 删除开票申请
    delApply(row, index) {
      this.$confirm('确认删除开票申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        delTenderFeeWinService(row.winServiceId).then(res => {
          this.tableData.splice(index, 1)
          // 获取列表信息
          this.loadData()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }).catch(() => {

        })
      })
    },
    /* =====================================操作退款================================*/
    // 申请退款/ 重新发起退款
    applyRefund(row) {
      this.$router.push(
        {
          path: '/fee/serviceRefundApplyAdd',
          query: {
            ...this.$route.query,
            supplierId: row.supplierId, // 收款单位id
            winServiceId: row.winServiceId // 中标服务费ID
          }
        })
    },
    // 删除退款申请
    deletionRefund(row, index) {
      this.$confirm('确认删除退款申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        delTenderFeeWinServiceOut(row.outId).then(res => {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }).catch(() => {

        })
      })
    },
    // 查看退款申请
    viewRefund(row) {
      this.$router.push({
        path: '/fee/serviceRefundApplyDetail',
        query: {
          ...this.$route.query,
          outId: row.outId // 服务费退款信息ID
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
