<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>子订单ID:</span>
        <el-input
          v-model="listQuery.shopOrderId"
          style="width:180px;"
          placeholder="子订单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
          @input="e => (listQuery.shopOrderId = checkedInput(e))"
        />
      </div>
      <div class="filter-control">
        <span>子订单编号:</span>
        <el-input
          v-model="listQuery.shopOrderNo"
          style="width:180px;"
          placeholder="子订单编号"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>订单ID:</span>
        <el-input
          v-model="listQuery.orderId"
          style="width:180px;"
          placeholder="订单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
          @input="e => (listQuery.orderId = checkedInput(e))"
        />
      </div>
      <div class="filter-control">
        <span>订单编号:</span>
        <el-input
          v-model="listQuery.orderNo"
          style="width:180px;"
          placeholder="订单编号"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>付款单ID:</span>
        <el-input
          v-model="listQuery.payShopId"
          style="width:180px;"
          placeholder="付款单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>供应商:</span>
        <el-input
          v-model="listQuery.shopName"
          style="width:180px;"
          placeholder="供应商"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>付款单名称:</span>
        <el-input
          v-model="listQuery.name"
          style="width:180px;"
          placeholder="付款单名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>付款审核状态:</span>
        <el-select v-model="listQuery.status" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待审核" :value="0" />
          <el-option label="审核通过" :value="1" />
          <el-option label="审核不通过" :value="2" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>申请时间:</span>
        <el-date-picker
          v-model="applyTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <span>付款时间:</span>
        <el-date-picker
          v-model="payTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <!-- <el-button type="primary" icon="el-icon-search" @click="getList">导出筛查结果</el-button> -->
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column label="付款单ID" align="center" prop="payShopId" width="80" />
      <el-table-column label="付款单名称" align="center" prop="name" />
      <el-table-column label="供应商" align="center" prop="shopName" />
      <el-table-column label="付款金额" align="center" prop="totalAmount" />
      <el-table-column label="订单编号(ID)" align="center" prop="orderNos">
        <template slot-scope="{row}">
          <span class="el-p-link" @click="handleOrderDetails(row)">{{ row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos">
        <template slot-scope="{row}">
          <p v-for="item in row.shopOrderNos" :key="item" style="margin: 0;" class="el-p-link" @click="handleOrderDetails(row)">
            {{ item ? item : '---' }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center" prop="clubName" />
      <el-table-column label="申请人" align="center" prop="applicantName">
        <template slot-scope="{row}">
          {{ row.applicantName ? row.applicantName : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="申请日期" align="center" prop="applyTime" width="100">
        <template slot-scope="{row}">
          {{ row.applyTime ? row.applyTime : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="审核人" align="center" prop="reviewerName">
        <template slot-scope="{row}">
          {{ row.reviewerName ? row.reviewerName : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="reviewTime" width="100">
        <template slot-scope="{row}">
          {{ row.reviewTime ? row.reviewTime : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="付款审核状态" prop="status" align="center" width="100">
        <template slot-scope="{ row }">
          <span
            :class="{
              'el-span-warning': row.status == 0,
              'el-span-success': row.status == 1,
              'el-span-danger': row.status == 2
            }"
          >
            {{ row.status | statusFilter }}
            <span v-if="row.status === 2" class="el-span-danger">原因：{{ row.reason }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="210">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(1,row.payShopId)">查看详情</el-button>
          <template v-if="row.status === 0 && row.payType !== 6">
            <!-- <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(2,row.payShopId)">修改申请</el-button> -->
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(3,row.payShopId)">取消付款</el-button>
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(4,row.payShopId)">付款审核</el-button>
          </template>
          <template v-if="row.status === 1 && row.payType !== 6">
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(5,row.payShopId)">编辑</el-button>
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(6,row.payShopId)">撤销付款</el-button>
          </template>
          <template v-if="row.status === 2">
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(2,row.payShopId)">重申付款</el-button>
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(3,row.payShopId)">取消付款</el-button>
          </template>
          <template v-if="row.status === 1">
            <el-button type="primary" size="mini" style="margin:5px;" @click="handleOperate(7,row.payShopId)">打印</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>10" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { getOrganizePayList, cancelPayApply, cancelPayBack } from '@/api/finance'
import pickerOptions from '@/utils/time-picker.js'

export default {
  filters: {
    statusFilter(status) {
      const map = {
        0: '待审核',
        1: '审核通过',
        2: '审核不通过'
      }
      return map[status]
    }
  },
  data() {
    return {
      payTime: '',
      applyTime: '',
      list: null,
      pickerOptions,
      listLoading: true,
      total: 0,
      listQuery: {
        organizeId: this.$store.getters.organizeId,
        pageNum: 1,
        pageSize: 10,
        name: '', // 付款单名称
        shopName: '', // 供应商名称
        orderNo: '', // 订单编号
        orderId: '', // 订单ID
        payShopId: '', // 付款单
        applyStartTime: '', // 申请开始时间
        applyEndTime: '', // 申请结束时间
        payStartTime: '', // 付款开始时间
        payEndTime: '', // 付款结束时间
        shopOrderId: '', // 子订单ID
        shopOrderNo: '', // 子订单编号
        status: '' // 付款状态
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    initTime() {
      // 初始化获取时间筛选值
      if (this.applyTime && this.applyTime.length > 0) {
        this.listQuery.applyStartTime = this.applyTime[0]
        this.listQuery.applyEndTime = this.applyTime[1]
      } else {
        this.listQuery.applyStartTime = ''
        this.listQuery.applyEndTime = ''
      }
      if (this.payTime && this.payTime.length > 0) {
        this.listQuery.payStartTime = this.payTime[0]
        this.listQuery.payEndTime = this.payTime[1]
      } else {
        this.listQuery.payStartTime = ''
        this.listQuery.payEndTime = ''
      }
    },
    async getList() {
      this.listLoading = true
      try {
        this.initTime()
        const res = await getOrganizePayList(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
        this.listLoading = false
      }
    },
    handleOperate(type, payShopId) {
      /**
       * 1 查看详情 2申请付款 3取消付款 4付款审核 5编辑 6撤销付款
       */
      switch (type) {
        case 1:// 1查看详情
          this.$router.push({ path: '/finance/payment-details', query: { payShopId: payShopId }})
          break
        case 2:// 2修改申请
          this.$router.push({ path: '/finance/payapply-edit', query: { type: 'edit', payShopId: payShopId }})
          break
        case 3:// 3取消付款
          this.handleCancelApply(payShopId)
          break
        case 4:// 4付款审核
          this.$router.push({ path: '/finance/payment-details', query: { type: 'verify', payShopId: payShopId }})
          break
        case 5:// 5编辑
          this.$router.push({ path: '/finance/payment-details', query: { type: 'edit', payShopId: payShopId }})
          break
        case 6:// 6撤销付款
          this.handleCancelBack(payShopId)
          break
        case 7:// 7打印
          this.$router.push({ path: '/finance/payment-details', query: { type: 'print', payShopId: payShopId }})
          break
      }
    },
    // 取消付款操作
    handleCancelApply(payShopId) {
      this.$confirm('确定要取消此次付款申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelPayApply(payShopId)
      })
    },
    handleCancelBack(payShopId) {
      this.$confirm('确定要撤销此次付款申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelPayBack(payShopId)
      })
    },
    // 取消付款调用
    async cancelPayApply(payShopId) {
      try {
        const res = await cancelPayApply(payShopId)
        this.$message.success(res.msg)
        this.getList()
      } catch (error) {
        console.log('error', error)
      }
    },
    // 撤销付款调用
    async cancelPayBack(payShopId) {
      try {
        const res = await cancelPayBack(payShopId)
        this.$message.success(res.msg)
        this.getList()
      } catch (error) {
        console.log('error', error)
      }
    },
    // 跳转订单详情
    handleOrderDetails(row) {
      this.$router.push({ path: '/order/detail', query: { orderId: row.orderId }})
    },
    checkedInput(event) {
      const pattern = /[^0-9.]/g
      return event.replace(pattern, '')
    }
  }
}

</script>
<style scoped>
</style>
