<!--
  @description: 服务费欠款管理
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/serviceDebt
  @date: 2020/04/08-19:40
-->
<template>
  <table-crud
    ref="tableCrud"
    :tabs="tabsData"
    :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="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="searchForm.tenderNo"
          placeholder="项目编号"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 欠费单位 -->
      <el-form-item ref="supplierName" label="欠费单位" prop="supplierName">
        <el-input
          v-model="searchForm.supplierName"
          placeholder="欠费单位"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 标段（包）名称 -->
      <el-form-item ref="packName" label="标段（包）名称" prop="packName">
        <el-input
          v-model="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="searchForm.tenderName"
          placeholder="项目名称"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 欠款状态 -->
      <el-form-item label="欠款状态" prop="payStatus">
        <el-select v-model="searchForm.payStatus" placeholder="请选择" style="width:228px">
          <el-option
            v-for="(item, index) in debtStatusList"
            :key="index"
            :label="item.typename"
            :value="item.typecode"
          />
        </el-select>
      </el-form-item>
      <!-- 业务部门 -->
      <el-form-item ref="tenderDepart" label="业务部门" prop="tenderDepart">
        <el-input
          v-model="searchForm.tenderDepart"
          placeholder="业务部门"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 项目经理 -->
      <el-form-item ref="tenderManager" label="项目经理" prop="tenderManager">
        <el-input
          v-model="searchForm.tenderManager"
          placeholder="项目经理"
          style="width:228px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!--销账时间-->
      <el-form-item ref="cancleTime" label="销账时间" prop="cancleTime">
        <el-date-picker
          v-model="searchForm.cancleTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:228px"
          @change="changeCancleTime"
        />
      </el-form-item>
    </template>
    <template v-slot:menuLeft>
      <el-row class="table-alert-info">
        <el-button type="primary" style="margin-right: 16px" @click="exportWinServiceDebtList">
          导出欠费记录
        </el-button>
        <el-link :underline="false">
          单页应收金额<span class="sum_color">{{ statistics.pageServiceAmount }}</span>元
        </el-link>
        <el-link :underline="false">
          单页已收金额<span class="sum_color">{{ statistics.pageAvailableBlance }}</span>元
        </el-link>
        <el-link :underline="false">
          全部应收金额<span class="sum_color">{{ statistics.totalServiceAmount }}</span>元
        </el-link>
        <el-link :underline="false">
          全部已收金额<span class="sum_color">{{ statistics.totalAvailableBlance }}</span>元
        </el-link>
      </el-row>
    </template>
    <template v-slot:GXTable>
      <el-table
        ref="smallTable"
        v-loading="loading"
        :data="tableData"
        row-class-name="row-line-height-cell16"
        size="mini"
      >
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          width="60px"
          align="center"
        />
        <!-- 招标项目编号/名称-->
        <el-table-column

          fixed="left"
          label="招标项目编号/名称"
          min-width="260"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.tenderNo }}</p>
            <p>{{ scope.row.tenderName }}</p>
          </template>
        </el-table-column>
        <!-- 标段（包）编号/名称 -->
        <el-table-column

          header-align="center"
          label="标段（包）编号/名称"
          fixed="left"
          min-width="260"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.packNo }}</p>
            <p>{{ scope.row.packName }}</p>
          </template>
        </el-table-column>
        <!-- 中标人 -->
        <el-table-column
          v-if="searchForm.paymentParty=='00'"
          label="中标人"
          header-align="center"
          prop="supplierName"
          align="left"
          min-width="200"
        />
        <!-- 招标人 -->
        <el-table-column
          v-if="searchForm.paymentParty=='01'"
          label="招标人"
          header-align="center"
          prop="supplierName"
          align="left"
          min-width="200"
        />
        <!--应收服务费金额（元） -->
        <el-table-column
          header-align="center"
          prop="serviceAmount"
          label="应收服务费金额（元）"
          align="right"
          width="160"
        />
        <!-- 子账号余额（元）-->
        <el-table-column
          v-if="searchForm.paymentParty=='00'"
          header-align="center"
          label="子账号余额（元）"
          prop="availableBlance"
          align="right"
          width="120"
        />
        <!-- 业务部门 -->
        <el-table-column
          header-align="center"
          label="业务部门"
          prop="tenderDepart"
          min-width="160"
        />
        <!-- 项目经理 -->
        <el-table-column
          header-align="center"
          label="项目经理"
          prop="tenderManager"
          align="center"
          width="90"
        />
        <!-- 欠款状态 -->
        <el-table-column
          :formatter="formatPayStatus"
          header-align="center"
          label="欠款状态"
          align="center"
          width="90"
        />
        <!-- 销账时间 -->
        <el-table-column
          header-align="center"
          label="销账时间"
          prop="cancleTime"
          align="center"
          width="140"
        />
        <!-- 操作 -->
        <el-table-column
          header-align="center"
          label="操作"
          fixed="right"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <!-- 已销账03-->
            <el-link
              v-if="scope.row.payStatus!=='03'"
              type="primary"
              @click.stop="writeOff(scope.row)"
            >
              [销账]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </table-crud>
</template>
<script>
/* 接口*/
import {
  queryWinServiceDebtList,
  queryWinServiceDebtStatistics,
  cancleWinServiceDebt,
  queryWinServiceDebtListExport
} from '@api/fee/servicefee'
  /* 公用方法*/
import { download } from '@/assets/js/utils' // 常用方法
/* 混合开发方法-参数字段*/
import { ServiceGroupMixin } from '../mixins/serviceFeeGroupMixin'

export default {
  name: 'ServiceDebt',
  mixins: [ServiceGroupMixin],
  data() {
    return {
      tabsData: [
        { name: '中标人', val: '00' },
        { name: '招标人', val: '01' }
      ],
      activeName: '',
      loading: true,
      // 搜索
      searchForm: {
        cancleTime: '', // 销账时间
        cancleTimeEnd: '', // 销账时间结束
        cancleTimeStart: '', // 销账时间开始
        packId: '', // 标段id
        packName: '', // 标段名称
        packNo: '', // 标段编号
        payStatus: '', // 支付状态00未收款01待确认02待销账03已销账
        paymentMethod: '', // 服务费支付方式00差额定率累进制 01固定金额 02固定比例
        paymentParty: '00', // 服务费支付方00中标人 01招标人
        supplierId: '', // 欠费单位id
        supplierName: '', // 欠费单位名称
        tenderDepart: '', // 业务部门
        tenderDepartId: '', // 业务部门ID
        tenderId: '', // 标段名称
        tenderManager: '', // 项目经理
        tenderManagerId: '', // 项目经理ID
        tenderName: '', // 项目名称
        tenderNo: '', // 项目编号
        winServiceDebtId: '', // 中标服务费欠款信息ID
        winServiceId: '' // 开票信息id
      },
      // 获取中标服务费欠款统计信息
      statistics: {
        pageAvailableBlance: 0, // 单页已收金额/子账户余额
        pageServiceAmount: 0, // 单页应收服务费金额
        totalAvailableBlance: 0, // 总已收金额/子账户余额
        totalServiceAmount: 0// 总应收服务费金额
      },
      tableData: []
    }
  },
  methods: {
    // 导出欠费记录
    exportWinServiceDebtList() {
      // 00中标人 01招标人
      let serviceChargeArrearsName = '' // 导出欠费记录名称
      if (this.activeName === '00') {
        serviceChargeArrearsName = '中标人'
      } else {
        serviceChargeArrearsName = '招标人'
      }
      const params = this.$refs.tableCrud.getQueryParams()
      queryWinServiceDebtListExport(params).then(res => {
        download(res, '服务费' + serviceChargeArrearsName + '欠费记录.xls')
      })
    },
    // 获取数据
    loadData(params, callback, tab) {
      this.activeName = tab.val
      params.paymentParty = tab.val // 服务费支付方00中标人 01招标人
      queryWinServiceDebtList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
      // 获取中标服务费欠款统计信息
      this.getWinServiceDebtStatistics(params)
    },
    // 获取中标服务费欠款统计信息
    getWinServiceDebtStatistics(params) {
      queryWinServiceDebtStatistics(params).then(response => {
        this.statistics = response.data
      }).catch(() => {
      })
    },
    // 销账
    writeOff(row) {
      this.$confirm('确认销账吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.handleCancleWinServiceDebt(row.winServiceDebtId)
      })
    },
    // 销账调用接口方法
    handleCancleWinServiceDebt(winServiceDebtId) {
      cancleWinServiceDebt(winServiceDebtId).then(response => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.$refs.tableCrud.onSearchChange()
      }).catch(() => {
      })
    },
    // 销账时间
    changeCancleTime(val) {
      if (val) {
        this.searchForm.cancleTimeStart = this.$Moment(val[0]).format(this.momentSaveFormat)// 销账时间结束
        this.searchForm.cancleTimeEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 销账时间开始
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
