<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-control">
        <span>收款ID:</span>
        <el-input
          v-model="listQuery.receiptId"
          style="width:180px;"
          placeholder="订单ID"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
          @input="e => (listQuery.receiptId = checkedInput(e))"
        />
      </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>订单类型:</span>
        <el-select v-model="listQuery.status" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="采购员订单" value="99" />
          <el-option label="自主订单" value="7" />
        </el-select>
      </div> -->
      <div class="filter-control">
        <span>机构名称:</span>
        <el-input
          v-model="listQuery.clubName"
          style="width:180px;"
          placeholder="客户名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>收款方式:</span>
        <el-select v-model="listQuery.payWay" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="线上" :value="1" />
          <el-option label="线下" :value="2" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>收款类型:</span>
        <el-select v-model="listQuery.payType" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option v-for="item in receiptTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>收款进度:</span>
        <el-select v-model="listQuery.receiptProgress" style="width:180px;" clearable @change="getList">
          <el-option value="" label="所有" />
          <el-option label="待收款" :value="1" />
          <el-option label="部分收款" :value="2" />
          <el-option label="已收款" :value="3" />
        </el-select>
      </div>
      <div class="filter-control">
        <span>收款时间:</span>
        <el-date-picker
          v-model="time"
          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">organizeId</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="receiptId" width="100" />
      <el-table-column label="收款时间" align="center" prop="receiptTime" width="200" />
      <el-table-column label="金额(元)" align="center" prop="receiptAmount" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.receiptAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款方式" align="center" prop="payWay">
        <template slot-scope="{ row }">
          {{ row.payWay | payWayFilters }}
        </template>
      </el-table-column>
      <el-table-column label="收款类型" align="center" prop="payType">
        <template slot-scope="{ row }">
          <span v-if="row.payWay === 2">{{ payTypeFilters(row.payType) }}</span>
          <span v-else>{{ row.bankNameType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center" prop="clubName">
        <template slot-scope="{ row }">
          {{ row.clubName ? row.clubName : '---' }}
        </template>
      </el-table-column>
      <el-table-column label="关联订单号" align="center" prop="shopOrderNos">
        <template slot-scope="{ row }">
          <p class="el-p-link" @click="handleOrderDetails(row)">{{ row.orderNo }}({{ row.orderId }})</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleToDetails(row.receiptId)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <pagination
      :total="total"
      :page-sizes="[20]"
      :page-size="20"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

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

export default {
  filters: {
    payWayFilters(value) {
      // 收款方式
      const map = {
        1: '线上',
        2: '线下'
      }
      return map[value]
    },
    receiptStatusFilters(value) {
      // 收款状态
      const map = {
        2: '待审核',
        3: '审核通过',
        4: '审核未通过',
        5: '收款撤销'
      }
      return map[value]
    }
  },
  data() {
    return {
      time: '',
      list: null,
      pickerOptions,
      listLoading: true,
      searchTimeVal: '',
      total: 0,
      listQuery: {
        organizeId: this.$store.getters.organizeId,
        pageNum: 1,
        pageSize: 20,
        receiptId: '', // 收款ID
        orderId: '', // 订单ID
        orderNo: '', // 订单编号
        userName: '', // 机构名称
        payWay: '', // 收款方式
        payType: '', // 收款账号
        receiptProgress: '', // 收款进度
        associationNum: '', // 关联数量
        startTime: '', // 下单开始时间
        endTime: '' // 下单结束时间
      },
      receiptTypeList: []
    }
  },
  created() {
    this.getList()
    this.getReceiptTypeList()
  },
  methods: {
    // 获取收款列表
    async getList() {
      this.listLoading = true
      if (this.time && this.time.length > 0) {
        this.listQuery.startTime = this.time[0]
        this.listQuery.endTime = this.time[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      try {
        const res = await getReceiptList(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
        this.listLoading = false
      }
    },
    // 获取收款账号列表
    async getReceiptTypeList() {
      const res = await getReceiptTypeList()
      this.receiptTypeList = res.data
    },
    payTypeFilters(value) {
      // 收款账号
      let valueText = ''
      this.receiptTypeList.forEach(type => {
        if (value === type.id) { valueText = type.name } else { valueText = '---' }
      })
      console.log('valueText', valueText)
      return valueText
    },
    handleToDetails(receiptId) {
      this.$router.push({ path: '/finance/details', query: { receiptId: receiptId }})
    },
    // 跳转订单详情
    handleOrderDetails(row) {
      this.$router.push({ path: '/order/detail', query: { orderId: row.orderId }})
    },
    checkedInput(event) {
      const pattern = /[^0-9.]/g
      return event.replace(pattern, '')
    },
    onSubmit() {
      console.log('search')
    }
  }
}

</script>
<style scoped>
.el-span-warning{
  color: #E6A23C;
}
.el-span-success{
  color: #67C23A;
}
.el-span-danger{
  color: #F56C6C;
}
</style>
