<!--
  @description: 保证金收款记账
  @Modifier: sunxinman/haofengxian
  @routerPath: /fee/cashDepositReceivablesBooking
  @date: 2020/03/31-17:58
-->
<template>
  <table-crud
    ref="tableCrud"
    :menu="true"
    :search-form="searchForm"
    search-label-width="110px"
    @on-load="loadData"
  >
    <template v-slot:header>
      保证金收款{{ bailShowShielding?'记账':'查看' }}
    </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="accountNo" label="子账号" prop="accountNo">
        <el-input v-model.trim="searchForm.accountNo" placeholder="子账号" style="width:228px" @keyup.enter.native="search.onSearch" />
      </el-form-item>
      <!-- 到账日期 -->
      <el-form-item v-if="bailShowShielding" ref="inDate" label="到账日期" prop="inDate">
        <el-date-picker
          v-model="searchForm.inDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:228px"
          @change="changeInDate"
        />
      </el-form-item>
      <!-- 项目经理 -->
      <el-form-item label="项目经理" prop="tenderManager">
        <el-input v-model.trim="searchForm.tenderManager" placeholder="项目经理" style="width:228px" @keyup.enter.native="search.onSearch" />
      </el-form-item>
      <!-- 收款记账状态 -->
      <el-form-item v-if="bailShowShielding" label="收款记账状态" prop="bookkeepingStatus">
        <el-select v-model="searchForm.bookkeepingStatus" placeholder="请选择" style="width:228px">
          <el-option
            v-for="(item,index) in billingStatusList"
            :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.trim="searchForm.tenderDepart" placeholder="业务部门" style="width:228px" @keyup.enter.native="search.onSearch" />
      </el-form-item>
      <!-- 投标人 -->
      <el-form-item ref="supplierName" label="投标人" prop="supplierName">
        <el-input v-model.trim="searchForm.supplierName" placeholder="投标人" style="width:228px" @keyup.enter.native="search.onSearch" />
      </el-form-item>
      <!-- 到账金额（元） -->
      <el-form-item ref="amount" label="到账金额（元）" prop="amount">
        <el-input v-model.trim="searchForm.amount" placeholder="到账金额（元）" style="width:228px" @keyup.enter.native="search.onSearch" />
      </el-form-item>
    </template>
    <template v-slot:menuLeft>
      <section class="table-alert-info">
        <el-button v-if="bailShowShielding" type="primary" @click="batchBookkeeping">
          批量记账
        </el-button>
        <el-button @click="exportDepositBookkeeping">
          导出当前记录
        </el-button>
        <el-link :underline="false">
          单页到账金额:<span class="sum_color">{{ bookkeepingInStatistics.pagePrice }}</span>元
        </el-link>
        <el-link :underline="false">
          总页到账金额:<span class="sum_color">{{ bookkeepingInStatistics.totalPrice }}</span>元
        </el-link>
      </section>
    </template>
    <template v-slot:GXTable>
      <section>
        <el-table
          ref="collectionAccountTable"
          v-loading="loading"
          :data="tableData"
          :row-key="getRowKeys"
          row-class-name="row-line-height-cell16"
          size="mini"
          @selection-change="selectionChange"
        >
          <el-table-column
            fixed="left"
            :reserve-selection="true"
            :selectable="isDisabled"
            disabled="true"
            type="selection"
            align="center"
            width="55"
          />
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <!-- 招标项目编号/名称  -->
          <el-table-column

            label="招标项目编号/名称"
            min-width="220"
          >
            <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="标段（包）编号/名称"
            prop="packName"
            min-width="200"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.packNo }}</p>
              <p>{{ scope.row.packName }}</p>
            </template>
          </el-table-column>
          <!-- 投标人 -->
          <el-table-column
            header-align="center"
            prop="supplierName"
            label="投标人"
            min-width="220"
          />
          <!-- 保证金唯一交易码 -->
          <el-table-column
            align="center"
            prop="seqNo"
            label="保证金唯一交易码"
            min-width="180"
          />
          <!-- 子账号 -->
          <el-table-column
            align="center"
            prop="accountNo"
            label="子账号"
            min-width="180"
          />
          <!-- 到账金额（元） -->
          <el-table-column
            header-align="center"
            prop="amount"
            label="到账金额（元）"
            width="110"
            align="right"
          />
          <!-- 到账时间 -->
          <el-table-column
            v-if="bailShowShielding"
            label="到账时间"
            width="140"
            align="center"
            prop="inDate"
          />
          <!-- 记账时间 -->
          <el-table-column
            v-if="bailShowShielding"
            header-align="center"
            label="记账时间"
            width="140"
            align="center"
            prop="bookkeepingTime"
          />
          <!-- 业务部门 -->
          <el-table-column
            header-align="center"
            label="业务部门"
            prop="tenderDepart"
            min-width="160"
          />
          <!-- 供应商企业性质 -->
          <el-table-column
            :formatter="formatPriEnterprise"
            align="center"
            label="供应商企业性质"
            prop="isPriEnterprise"
            width="150"
          />
          <!-- 项目经理 -->
          <el-table-column
            label="项目经理"
            prop="tenderManager"
            align="center"
            min-width="80"
          />
          <!-- 收款记账状态 -->
          <el-table-column
            v-if="bailShowShielding"
            :formatter="formatBookkeepingStatus"
            header-align="center"
            label="收款记账状态"
            prop="bookkeepingStatus"
            min-width="100"
          />
          <!-- 操作 -->
          <!--bookkeepingStatus 未记账00 记账中01 已记账02 记账失败03 手工记账04-->
          <el-table-column
            header-align="center"
            label="操作"
            width="180"
            fixed="right"
          >
            <template slot-scope="scope">
              <template v-if="bailShowShielding">
                <el-link
                  v-if="scope.row.bookkeepingStatus==='00' || scope.row.bookkeepingStatus==='03'"
                  type="primary"
                  @click.stop="bookKeeping(scope.row)"
                >
                  [记账]
                </el-link>
                <el-link
                  v-if="scope.row.bookkeepingStatus==='00' || scope.row.bookkeepingStatus==='03'"
                  type="primary"
                  @click.stop="manualAccounting(scope.row)"
                >
                  [手工记账]
                </el-link>
              </template>
              <el-link
                type="primary"
                @click.stop="viewDetail(scope.row)"
              >
                [查看]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </section>
    </template>
  </table-crud>
</template>
<script>
/* 接口*/
import { queryDepositBookkeepingInList, ncDepositBookkeepingIn, manualDepositBookkeepingIn, queryBookkeepingInStatistics, exportDepositBookkeepingInList } from '@api/fee/bailfee'
/* 公用方法*/
import { download, filterDictText } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { cashDepositGroupMixin } from '../mixins/cashDepositGroupMixin'
import { depositSystemConfig } from '../mixins/depositSystemConfig'

export default {
  name: 'CashDepositReceivablesBookingList',
  mixins: [cashDepositGroupMixin, depositSystemConfig],
  data() {
    return {
      /* 字典信息-start */
      isPriEnterpriseList: [], // 供应商企业性质
      /* 字典信息-end */
      // 获取row的key值
      getRowKeys(row) {
        return row.bookkeepingInId
      },
      loading: true,
      // 搜索
      searchForm: {
        inDate: '', // 到账日期
        amount: '', // 交易金额
        bookkeepingInId: '', // 收款记账信息ID
        bookkeepingTimeEnd: '', // 记账时间结束
        bookkeepingTimeStart: '', // 记账时间开始
        inDateEnd: '', // 到账时间结束
        inDateStart: '', // 到账时间开始
        packId: '', // 标段ID
        packName: '', // 标段名称
        packNo: '', // 标段编号
        supplierId: '', // 供应商ID
        supplierName: '', // 供应商名称
        tenderDepart: '', // 业务部门
        tenderDepartId: '', // 业务部门ID
        tenderId: '', // 项目ID
        tenderManager: '', // 项目经理
        tenderManagerId: '', // 项目经理ID
        tenderName: '', // 项目名称
        tenderNo: '' // 项目编号
      },
      // 费用统计数据
      bookkeepingInStatistics: {
        pagePrice: '', // 单页金额
        totalPrice: '' // 总页金额
      },
      tableData: [],
      checkedTr: [] // 批量记账数据存放
    }
  },
  created() {
    this.initGroup()// 获取字典方法
  },
  methods: {
    // 获取字典方法
    initGroup() {
      const data = [
        'isPriEnterprise' // 供应商企业性质
      ]
      this.$store.dispatch('getGroupType', data).then(res => {
        Object.keys(res.bidTypeData).forEach((key) => {
          this[key] = res.bidTypeData[key]
        })
      })
    },
    // 表格字典值替换文本-供应商企业性质
    formatPriEnterprise(row, column, cellValue) {
      return filterDictText(this.isPriEnterpriseList, cellValue)
    },
    // 获取数据
    loadData(params, callback) {
      delete params.inDate
      queryDepositBookkeepingInList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
      // 保证金收款记账列表-费用统计数据
      this.getBookkeepingInStatistics(params)
    },
    // 保证金收款记账列表-费用统计数据
    getBookkeepingInStatistics(params) {
      queryBookkeepingInStatistics(params).then(response => {
        const { pagePrice, totalPrice } = response.data
        this.bookkeepingInStatistics.pagePrice = pagePrice// 单页金额
        this.bookkeepingInStatistics.totalPrice = totalPrice// 总页金额
      }).catch(() => {

      })
    },
    // 提交NC记账调用后端接口
    submitNcDepositBookkeepingIn(bookkeepingInIds) {
      ncDepositBookkeepingIn(bookkeepingInIds).then(res => {
        this.$message({
          message: res.header.msg,
          type: 'success'
        })
        // 获取列表信息
        this.$refs.tableCrud.onSearchChange()
        this.$refs.collectionAccountTable.clearSelection()
      }).catch(() => {

      })
    },
    // 批量记账
    batchBookkeeping() {
      if (!this.checkedTr.length) {
        this.$message({
          message: '请选择一条记录',
          type: 'warning'
        })
      } else {
        this.$confirm('确认批量推送NC记账吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          const bookkeepingInId = this.checkedTr.map(row => row.bookkeepingInId).join(',')
          this.submitNcDepositBookkeepingIn(bookkeepingInId)
        })
      }
    },
    // 导出保证金收款记录
    exportDepositBookkeeping() {
      const params = this.$refs.tableCrud.getQueryParams()
      exportDepositBookkeepingInList(params).then(res => {
        download(res, '保证金收款记账信息表.xls')
      }).catch(() => {
      })
    },
    // 记账
    bookKeeping(row) {
      this.$confirm('确认推送NC记账吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.submitNcDepositBookkeepingIn(row.bookkeepingInId)
      })
    },
    // 手工记账
    manualAccounting(row) {
      this.$confirm('确认手工记账吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.submitManualDepositBookkeepingIn(row.bookkeepingInId)
      })
    },
    // 提交手工记账调用后端方法
    submitManualDepositBookkeepingIn(bookkeepingInId) {
      manualDepositBookkeepingIn(bookkeepingInId).then(res => {
        this.$message({
          message: res.header.msg,
          type: 'success'
        })
        // 获取列表信息
        this.$refs.tableCrud.onSearchChange()
      })
    },
    // 选择
    selectionChange(val) {
      this.checkedTr = val
    },
    // 查看
    viewDetail(row) {
      this.$router.push({
        path: '/fee/cashDepositReceivablesDetail',
        name: 'CashDepositReceivablesDetail',
        params: {
          bookkeepingInId: row.bookkeepingInId
        }
      })
    },
    // 到账时间
    changeInDate(val) {
      if (val) {
        this.searchForm.inDateStart = this.$Moment(val[0]).format(this.momentSaveFormat)// 开始时间
        this.searchForm.inDateEnd = this.$Moment(val[1]).format(this.momentSaveFormat)// 结束时间
      }
    },
    // 复选框部分禁用--bookkeepingStatus 未记账00 记账中01 已记账02 记账失败03 手工记账04
    isDisabled(row) {
      // 00可以制作
      return row.bookkeepingStatus === '00' || row.bookkeepingStatus === '03'
    }
  }
}
</script>
<style lang="less" scoped>

</style>
