<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.id" placeholder="收款ID" class="filter-item" />
      <el-input v-model="listQuery.orderId" placeholder="订单ID" class="filter-item" />
      <el-input v-model="listQuery.orderNo" placeholder="订单编号" class="filter-item" />
      <el-input v-model="listQuery.userName" placeholder="客户名称" class="filter-item" />
      <el-select v-model="listQuery.payWay" placeholder="收款方式" class="filter-item">
        <el-option v-for="item in payWayOptions" :key="item.id" :label="item.type" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.receiptType" placeholder="收款类别" class="filter-item">
        <el-option v-for="item in receiptTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.receiptStatus" placeholder="收款状态" class="filter-item">
        <el-option v-for="item in receiptStatusOptions" :key="item.id" :label="item.type" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.payType" placeholder="收款账号" class="filter-item">
        <el-option v-for="item in payTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.receiptProgress" placeholder="收款进度" class="filter-item">
        <el-option label="收款进度" value="" />
        <el-option label="待收" value="1" />
        <el-option label="部分收" value="2" />
        <el-option label="全收" value="2" />
      </el-select>
      <el-select v-model="listQuery.receiptOrderType" placeholder="订单类型" class="filter-item">
        <el-option v-for="item in orderTypeOptions" :key="item.id" :label="item.type" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.associationNum" placeholder="关联数量" class="filter-item">
        <el-option label="关联数量" value="" />
        <el-option label="单个" value="1" />
        <el-option label="多个" value="2" />
      </el-select>
      <el-select v-model="listQuery.organizeId" placeholder="组织" class="filter-item">
        <el-option label="组织" value="" />
        <el-option label="采美" value="0" />
        <el-option label="呵呵商城" value="9999" />
        <el-option label="维沙" value="3" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-document" @click="handleDownload">
        导出Excel
      </el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width:100%">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="收款ID" align="center">
        <template slot-scope="{row}">{{ row.id }}</template>
      </el-table-column>
      <el-table-column label="收款时间" align="center">
        <template slot-scope="{row}">{{ row.receiptDate }}</template>
      </el-table-column>
      <el-table-column label="金额(￥)" align="center">
        <template slot-scope="{row}">{{ row.receiptAmount }}</template>
      </el-table-column>
      <el-table-column label="收款方式" align="center">
        <template slot-scope="{row}">
          <span v-text="getPayWayText(row.payWay)" />
        </template>
      </el-table-column>
      <el-table-column label="款项类别" align="center">
        <template slot-scope="{row}">
          <span v-text="getReceiptTypeText(row.receiptType)" />
        </template>
      </el-table-column>
      <el-table-column label="收款账号" align="center">
        <template slot-scope="{row}">
          <span v-text="getPayTypeText(row.payType)" />
        </template>
      </el-table-column>
      <el-table-column label="收款状态" align="center">
        <template slot-scope="{row}">
          <span v-text="getReceiptStatusText(row.receiptStatus)" />
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center">
        <template slot-scope="{row}">
          {{ row.userName }}
          <span v-if="row.suffix" style="color:red;">（{{ row.suffix }}）</span>
        </template>
      </el-table-column>
      <el-table-column label="订单类型" align="center">
        <template slot-scope="{row}">
          <span v-text="getOrderTypeText(row.orderType)" />
        </template>
      </el-table-column>
      <el-table-column label="关联订单号" align="center">
        <template slot-scope="{row}">{{ row.orders }}</template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

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

  </div>
</template>

<script>
import { fetchList, getReceiptType } from '@/api/caimei/finance/receipt'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
export default {
  name: 'ReceiptList',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        id: '',
        orderId: '',
        orderNo: '',
        userName: '',
        payWay: '',
        receiptType: '',
        receiptStatus: '',
        payType: '',
        receiptProgress: '',
        receiptOrderType: '',
        associationNum: '',
        organizeId: ''
      },
      payTypeOptions: [{ id: '', type: '收款账号' }],
      payWayOptions: [
        { id: '', type: '收款方式' },
        { id: '1', type: '线上' },
        { id: '2', type: '线下' },
        { id: '3', type: '余额抵扣' }
      ],
      receiptTypeOptions: [
        { id: '', type: '款项类别' },
        { id: '1', type: '订单款' },
        { id: '2', type: '非订单款' },
        { id: '3', type: '返佣款' },
        { id: '5', type: '供应商退款' },
        { id: '6', type: '超级会员款' },
        { id: '7', type: '二手商品上架费' }
      ],
      receiptStatusOptions: [
        { id: '', type: '收款状态' },
        { id: '1', type: '待确认' },
        { id: '2', type: '已确认' },
        { id: '3', type: '审核通过' },
        { id: '4', type: '审核未通过' },
        { id: '5', type: '收款撤销' }
      ],
      orderTypeOptions: [
        { id: '', type: '订单类型' },
        { id: '0', type: '协销' },
        { id: '1', type: '自主' },
        { id: '2', type: '呵呵' }
      ]
    }
  },
  created() {
    this.getType()
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.data.results
        this.total = response.data.totalRecord
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getType() {
      getReceiptType().then(response => {
        this.payTypeOptions = response.data
        this.payTypeOptions.unshift({ id: '', type: '收款账号' })
      })
    },
    getOptionText(id, options) {
      let text = ''
      options.forEach(item => {
        if (item.id === id) {
          text = item.type
        }
      })
      return text
    },
    getPayTypeText(id) {
      return this.getOptionText(id, this.payTypeOptions)
    },
    getPayWayText(id) {
      return this.getOptionText(id, this.payWayOptions)
    },
    getReceiptTypeText(id) {
      return this.getOptionText(id, this.receiptTypeOptions)
    },
    getReceiptStatusText(id) {
      return this.getOptionText(id, this.receiptStatusOptions)
    },
    getOrderTypeText(id) {
      return this.getOptionText(id, this.orderTypeOptions)
    },
    handleDetail(row) {
      this.$router.push({ path: '/finance/receipt/detail', query: { id: row.id }})
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // 序号	进账时间	金额(¥)	进账方式	款项类别	进账账号 状态	订单类型	关联订单号	订单ID	运费	税费	订单金额(¥)	关联金额
        const tHeader = ['Id', '进账时间', '金额(¥)', '进账方式', '款项类别', '进账账号', '状态', '订单类型', '关联订单号', '订单ID', '运费', '税费', '订单金额(¥)', '关联金额', '备注']
        const filterVal = ['id', 'receiptDate', 'receiptAmount', 'payWay', 'receiptType', 'payType', 'receiptStatus', 'orderType', 'orders', 'orderId', 'freight', 'orderTax', 'orderFee', 'associateAmount', 'noOrderReason']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '收款列表',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'receiptDate') {
          return parseTime(v[j])
        } else if (j === 'payType') {
          return this.getPayTypeText(v[j])
        } else if (j === 'payWay') {
          return this.getPayWayText(v[j])
        } else if (j === 'receiptType') {
          return this.getReceiptTypeText(v[j])
        } else if (j === 'receiptStatus') {
          return this.getReceiptStatusText(v[j])
        } else if (j === 'orderType') {
          return this.getOrderTypeText(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style scoped>
.filter-item{
  width: 120px;
  margin-right: 15px;
}
</style>
