<style>
.page-content p {
    margin: 0 !important;
}

.quetion_Title {
    background: transparent !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 400px;
}
</style>
<template>
    <div class="page-body">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    <q-select
                        @input="resetSearch"
                        clearable
                        filled
                        v-model="msg.Type"
                        :options="TypeList"
                        emit-value
                        map-options
                        label="审核状态"
                    />
                </div>
                <div class="col-3">
                    <q-select
                        @input="resetSearch"
                        clearable
                        filled
                        v-model="msg.AuditStatus"
                        :options="ApproveStateList"
                        emit-value
                        map-options
                        label="审核状态"
                    />
                </div>
            </div>
        </div>
        <div class="page-content">
            <q-table
                :loading="loading"
                no-data-label="暂无相关数据"
                flat
                class="sticky-column-table sticky-right-column-table"
                separator="none"
                :data="dataList"
                :columns="columns"
                row-key="name"
            >
                <template v-slot:body-cell-CustomerName="props">
                    <q-td :props="props">
                        <q-avatar rounded size="sm" v-if="props.row.CustomerImage">
                            <img :src="props.row.CustomerImage" />
                        </q-avatar>
                        <q-avatar
                            rounded
                            size="sm"
                            color="teal-10"
                            text-color="white"
                            v-if="!props.row.CustomerImage"
                        >{{ props.row.CustomerName.substring(0, 1) }}</q-avatar>
                        {{ props.row.CustomerName }}
                    </q-td>
                </template>
                <template v-slot:body-cell-Type="props">
                    <q-td :props="props">{{ props.row.Type == 1 ? "返佣" : '幸福存折' }}</q-td>
                </template>
                <template v-slot:body-cell-AuditStatus="props">
                    <q-td :props="props">
                        <span v-if="props.row.Type == 1">申请中</span>
                        <span v-if="props.row.Type == 2">待打款</span>
                        <span v-if="props.row.Type == 3">已打款</span>
                        <span v-if="props.row.Type == 4">拒绝</span>
                    </q-td>
                </template>
                <template v-slot:body-cell-TimeStr="props">
                    <q-td :props="props">
                        <div v-if="props.row.AuditDate != ''">审核时间:{{ props.row.AuditDate }}</div>
                        <div v-if="props.row.RemitDate != ''">打款时间:{{ props.row.RemitDate }}</div>
                        <div v-if="props.row.RejectDate != ''">拒绝时间:{{ props.row.RejectDate }}</div>
                    </q-td>
                </template>
                <template v-slot:body-cell-Remark="props">
                    <q-td :props="props">
                        <div
                            v-if="props.row.AuditRemark && props.row.AuditRemark != ''"
                        >审核备注:{{ props.row.AuditRemark }}</div>
                        <div
                            v-if="props.row.RemitRemark && props.row.RemitRemark != ''"
                        >打款备注:{{ props.row.RemitRemark }}</div>
                        <div
                            v-if="props.row.RejectRemark && props.row.RejectRemark != ''"
                        >拒绝备注:{{ props.row.RejectRemark }}</div>
                    </q-td>
                </template>
                <template v-slot:body-cell-BankName="props">
                    <q-td :props="props">
                        <div>
                            <img :src="props.row.BankIcon" alt />
                        </div>
                        <div>{{ props.row.AccountHolder }}({{ props.row.BankCardNo }})</div>
                    </q-td>
                </template>
                <template v-slot:body-cell-optioned="props">
                    <q-td :props="props" style="width:200px;" >
                        <q-btn
                            v-if="props.row.AuditStatus==1"
                            flat
                            size="xs"
                            icon="edit"
                            color="done"
                            style="font-weight:400"
                            label="审核通过"
                            @click="operation(props.row,1)"
                        />
                         <q-btn
                            v-if="props.row.AuditStatus==1"
                            flat
                            size="xs"
                            icon="highlight_off"
                           
                            style="font-weight:400;color: red;"
                            label="审核驳回"
                            @click="operation(props.row,2)"
                        />
                    </q-td>
                </template>

                <template v-slot:bottom>
                    <div></div>
                </template>
            </q-table>
            <q-pagination
                class="full-width justify-end"
                v-model="msg.pageIndex"
                color="primary"
                :max="pageCount"
                :input="true"
                @input="changePage"
            />
        </div>
    </div>
</template>
<script>
import {
    getCustomerRemitPageList,
    RemoveCustomer
} from '../../api/sale/peemanagement';

export default {
    meta: {
        title: "同行审批"
    },
    components: {

    },
    data() {
        return {
            pageCount: 0,
            msg: {
                pageIndex: 1,
                pageSize: 12,
                rowsPerPage: 12,
                Type: '0', //	类型 1返佣 2幸福存折
                AuditStatus: '0', //状态 1申请中 2待打款 3已打款 4拒绝

            },
            loading: false,
            TypeList: [{ label: "全部", value: "0", }, { label: "返佣", value: "1", }, { label: "幸福存折", value: "2", }],
            //审核状态列表
            ApproveStateList: [{
                label: "不限",
                value: "0",
            }, {
                label: "申请中",
                value: "1",
            },
            {
                label: "待打款",
                value: "2",
            }, {
                label: "已打款",
                value: "3",
            }, {
                label: "拒绝",
                value: "4",
            },
            ],
            columns: [
                {
                    name: 'CustomerName',
                    label: '客户信息',
                    field: 'CustomerName',
                    align: 'left'
                },

                {
                    name: 'ContactNumber',
                    label: '联系电话',
                    field: 'ContactNumber',
                    align: 'left',
                },
                {
                    name: 'Type',
                    label: '类型',
                    field: 'Type',
                    align: 'left'
                },
                {
                    name: 'BankName',
                    label: '提现账户',
                    field: 'BankName',
                    align: 'left'
                },
                {
                    name: 'AppliedMoney',
                    label: '申请金额',
                    field: 'AppliedMoney',
                    align: 'left'
                },
                {
                    name: 'RemitMoney',
                    label: '打款金额',
                    field: 'RemitMoney',
                    align: 'left'
                },
                {
                    name: 'AuditStatus',
                    label: '状态',
                    field: 'AuditStatus',
                    align: 'left'
                },
                {
                    name: 'TimeStr',
                    label: '时间',
                    field: 'TimeStr',
                    align: 'left'
                },
                {
                    name: 'Remark',
                    label: '备注',
                    field: 'Remark',
                    align: 'left'
                },
                {
                    name: 'CreateDate',
                    label: '申请时间',
                    field: 'CreateDate',
                    align: 'left'
                },

                {
                    name: 'optioned',
                    label: '操作',
                    field: 'QuestionId'
                }
            ],
            dataList: [],
            //判断显示
            authObj: {
                isShowAudit: true,
            },
            remitMsg:{
                RemitId:0,
                State:1,
                Remark:'',
            }
        }
    },
    created() { },
    mounted() {
        this.getList();
    },
    methods: {
        //重新查询
        resetSearch() {
            this.msg.pageIndex = 1;
            this.getList();
        },
        //翻页
        changePage(val) {
            this.msg.pageIndex = val;
            this.getList()
        },
        //获取分页数据
        getList() {
            getCustomerRemitPageList(this.msg).then(res => {
                this.dataList = res.Data.PageData;
                this.loading = false;
                this.pageCount = res.Data.PageCount;
            }).catch(() => {
                this.loading = false
            })
        },
        operation(row,type){
            this.remitMsg.RemitId  = row.Id;
            this.remitMsg.State  = row.type;
            this.remitMsg.Remark = ''
        }
    }
}
</script>
<style lang="sass">

@import url('~assets/css/table.sass')
</style>