<template>
  <div class="app-container">
    <div class="filter-container">
      <sticky style="margin-bottom: 10px;">
        <div class="sub-navbar">
          <el-button type="danger" icon="el-icon-delete" @click="withdrawSfd">
            撤回
          </el-button>
        </div>
      </sticky>
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.serialNumber" placeholder="收费单号" clearable style="width: 200px" @keyup.enter.native="handleFilter" />
          <el-input v-show="this.$store.getters.clientType !== 'Enterprise'" v-model="listQuery.inspectedUnit" placeholder="受检单位" clearable style="width: 240px" @keyup.enter.native="handleFilter" />
          <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="list"
      :data="list"
      fit
      highlight-current-row
      border
      stripe
      size="mini"
      height="600px"
      width="100%"
      @row-click="onRowClick"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column align="center" type="index" width="50" label="序号" />
      <el-table-column align="center" prop="serialNumber" label="收费单号" />
      <el-table-column align="center" prop="paymentCode" label="非税缴款码" />
      <el-table-column align="center" prop="inspectedUnit" label="受检单位" />
      <el-table-column :formatter="formatter.getChineseName" align="center" prop="createBy" label="创建人" />
      <el-table-column align="center" prop="createTime" label="创建日期" />
      <el-table-column align="center" prop="totalAmount" label="缴费金额（总）" />
      <el-table-column :formatter="formatter.getChineseName" align="center" prop="shenheren" label="审核人" />
      <el-table-column align="center" prop="shenheriqi" label="审核时间" />
      <el-table-column :formatter="formatter.getChineseName" align="center" prop="shenpiren" label="审批人" />
      <el-table-column align="center" prop="shenpiriqi" label="审批时间" />
    </el-table>
    <pagination v-show="totalCount>0" :total="totalCount" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageSize" @pagination="getList" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Sticky from '@/components/Sticky'
import qs from 'qs'

export default {
  name: 'ChargeBillTask',
  components: { Pagination, Sticky },
  data: function() {
    return {
      listQuery: {
        isTasking: true,
        printState: false,
        shebeizhongleidaima: '1000',
        isElectromechanical: false,
        jianyanleibie: 'ZJ',
        inspectedUnit: this.$store.getters.clientType === 'Enterprise' ? this.$store.getters.nickname : '',
        loginBy: (this.$store.getters.clientType !== 'Enterprise' && this.$store.getters.username !== 'admin') ? this.$store.getters.userId : '',
        pageNum: 1, // 页码
        pageSize: 20 // 每页条数
      },
      list: [],
      totalCount: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * 获得收费单分页列表数据
     */
    getList() {
      this.apibjd({
        url: '/charge/pageList',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.totalCount = data.total
      })
    },
    /**
     *  查询
     */
    handleFilter() {
      // 查询事件
      this.listQuery.pageNum = 1
      this.getList()
    },
    /**
     * 表格单击选中行
     */
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    /**
     * 撤回收费单
     */
    withdrawSfd() {
      const ids = this.$refs.list.selection.map(row => row.id)
      if (ids.length) {
        this.apibjd({
          url: '/charge/withdrawSfd',
          method: 'post',
          data: {
            ids: ids,
            currentLink: this.$refs.list.selection[0].flowstatus
          },
          paramsSerializer: function(params) {
            return qs.stringify(params, { indices: false })
          }
        }).then(_ => {
          this.$message.success('操作成功！')
          this.getList()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
