<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>供应商:</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.clubName"
          style="width:180px;"
          placeholder="机构名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>收款状态:</span>
        <el-select v-model="listQuery.receiptStatus" 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-select v-model="listQuery.payStatus" 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-select v-model="listQuery.refundType" 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.settleStatus" 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">
        <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
      default-expand-all
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column label="序号" align="center" width="40">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="子订单信息" type="expand" width="60">
        <template slot-scope="{row}">
          <el-table :data="row.newShopOrders" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
            <el-table-column label="商品信息" type="expand" width="80px">
              <template slot-scope="scope">
                <el-table :data="scope.row.newOrderProducts" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
                  <el-table-column label="商品名" align="center" prop="name" />
                  <el-table-column label="规格" align="center" prop="unit" />
                  <el-table-column label="数量" align="center" prop="num" />
                  <el-table-column label="退货" align="center" prop="returnedPurchaseProductNum" />
                  <el-table-column label="单价" align="center" prop="price" />
                  <el-table-column label="总价" align="center" prop="totalAmount" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos" width="240">
              <template slot-scope="scope">
                <span v-for="child in scope.row.shopOrderNos" :key="child">
                  {{ child }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="结算状态" align="center" prop="settleStatus">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.settleStatus===1" type="danger" size="small">未结算</el-tag>
                <el-tag v-if="scope.row.settleStatus===2" type="warning" size="small">部分结算</el-tag>
                <el-tag v-if="scope.row.settleStatus===3" type="success" size="small">已结算</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="应结金额" align="center" prop="payableAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.payableAmount | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="已结金额" align="center" prop="payableAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.payableAmount | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="供应商" align="center" prop="shopName" />
            <el-table-column label="商品费" align="center" prop="shopProductAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.shopProductAmount | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="已付供应商/合作方" align="center" prop="payedShopAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.payedShopAmount | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="供应商退款" align="center" prop="refundAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.refundAmount | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应付供应商/合作方" align="center" prop="shouldPayShopAmount">
              <template slot-scope="scope">
                <span>{{ scope.row.shouldPayShopAmount | amountfilters }}</span>
              </template>
            </el-table-column>
            <el-table-column label="供应商运费" align="center" prop="shopPostFee">
              <template slot-scope="scope">
                <span>{{ scope.row.shopPostFee | amountfilters }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="订单编号(ID)" align="center" prop="orderNo">
        <template slot-scope="{row}">
          <span class="el-p-link" @click="handleOrderDetails(row)">{{ row.orderNo }}({{ row.orderId }})</span>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="orderTime" />
      <el-table-column label="订单金额" align="center" prop="payTotalFee" />
      <el-table-column label="应收金额" align="center" prop="shouldPayProduct">
        <template slot-scope="{row}">
          <span>{{ row.shouldPayProduct | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已收金额" align="center" prop="alreadyReceipt">
        <template slot-scope="{row}">
          <span>{{ row.alreadyReceipt | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应付金额" align="center" prop="payableAmount">
        <template slot-scope="{row}">
          <span>{{ row.payableAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已付金额" align="center" prop="paidAmount">
        <template slot-scope="{row}">
          <span>{{ row.paidAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退款金额" align="center" prop="payableAmount">
        <template slot-scope="{row}">
          <span>{{ row.payableAmount | amountfilters }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center" prop="clubName" />
      <el-table-column label="机构运费" align="center" prop="freight">
        <template slot-scope="{row}">
          <span>{{ row.postageInfo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="status" align="center">
        <template slot-scope="{row}">
          <template v-if="['11','12','13','21','22','23','31','32','33'].indexOf(row.status)>=0">
            <el-tag type="success" size="small">交易中</el-tag>
          </template>
          <template v-else>
            <el-tag :type="row.status*1===6?'info':''" size="small">{{ row.status | orderStatusFilter }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="收款状态" align="center" prop="receiptStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
          <el-tag v-if="row.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
          <el-tag v-if="row.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="付款状态" align="center" prop="receiptStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.payStatus*1===1" type="danger" size="small">待付款</el-tag>
          <el-tag v-if="row.payStatus*1===2" type="warning" size="small">部分付款</el-tag>
          <el-tag v-if="row.payStatus*1===3" type="success" size="small">已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="退款状态" align="center" prop="receiptStatus">
        <template slot-scope="{row}">
          <el-tag v-if="row.refundType*1===1" type="warning" size="small">部分退款</el-tag>
          <el-tag v-if="row.refundType*1===2" type="success" size="small">全部付款</el-tag>
          <el-tag v-else type="info" size="small">无退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" style="margin:5px;" @click="handleToRecord(1,row.orderId)">收付款记录</el-button>
          <el-button type="primary" size="mini" style="margin:5px;" @click="handleToRecord(2,row.orderId)">退货/退款记录</el-button>
          <!-- <el-button type="text" size="mini" @click="handleToRecord(3,row.orderId)">供应商退/付款记录</el-button> -->
        </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 { organizePayInfos } from '@/api/finance'
import pickerOptions from '@/utils/time-picker.js'

export default {
  filters: {

  },
  data() {
    return {
      time: '',
      pickerOptions,
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        organizeId: this.$store.getters.organizeId,
        pageNum: 1,
        pageSize: 10,
        shopName: '', // 供应商名称
        clubName: '', // 机构名称
        orderNo: '', // 订单编号
        orderId: '', // 订单ID
        shopOrderId: '', // 子订单ID
        shopOrderNo: '', // 子订单编号
        payStatus: '', // 付款状态
        receiptStatus: '', // 收款状态
        refundType: '', // 退款状态
        settleStatus: ''// 结算状态
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      try {
        const res = await organizePayInfos(this.listQuery)
        this.list = res.data.list
        this.listLoading = false
      } catch (error) {
        console.log('error', error)
        this.listLoading = false
      }
    },
    handleToRecord(type, orderId) {
      switch (type) {
        case 1:
          this.$router.push({ path: '/finance/remit-record', query: { orderId: orderId }})
          break
        case 2:
          this.$router.push({ path: '/finance/refund-record', query: { orderId: orderId }})
          break
        case 3:
          this.$router.push({ path: '/finance/shop-record', query: { orderId: orderId }})
          break
      }
    },
    // 跳转订单详情
    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>
/deep/ .el-table__expanded-cell[class*=cell]{
  padding:10px 10px !important;
}
/deep/ .el-table__row td {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
}
.el-span-warning{
  color: #E6A23C;
}
.el-span-success{
  color: #67C23A;
}
.el-span-danger{
  color: #F56C6C;
}
</style>
