<template>
  <div class="withdraw">
    <q-table
      :loading="loading"
      no-data-label="暂无相关数据"
      flat
      class="sticky-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.AuditStatus == 1">申请中</span>
          <span v-if="props.row.AuditStatus == 2">待打款</span>
          <span v-if="props.row.AuditStatus == 3">已打款</span>
          <span v-if="props.row.AuditStatus == 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:100px;">
          <q-btn
            v-if="props.row.AuditStatus == 1"
            flat
            size="xs"
            icon="edit"
            color="done"
            style="font-weight:400"
            label="审核"
            @click="operation(props.row)"
          />
        </q-td>
      </template>

      <template v-slot:bottom>
        <q-pagination
          class="full-width justify-end"
          v-model="msg.pageIndex"
          color="primary"
          :max="pageCount"
          :input="true"
          @input="changePage"
        />
      </template>
    </q-table>
    <q-dialog v-model="isShow" persistent>
            <q-card style="width: 520px; max-width: 80vw;">
                <q-card-section>
                    <div class="text-h6">提现审核</div>
                </q-card-section>
                <q-separator />
                <q-card-section class="q-pt-none" style="margin-top: 15px;padding:10px 20px;">
                    <q-radio v-model="remitMsg.State" val="1" label="审核通过" />
                    <q-radio v-model="remitMsg.State" val="2" label="审核驳回" />
                    <q-input filled clearable v-model="remitMsg.Remark" label="备注"
                        style="margin-top: 20px;"    type="textarea"/>
                </q-card-section>
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="isShow = false" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="submit()" />
                </q-card-actions>
            </q-card>
        </q-dialog>
  </div>
</template>
<script>
import {
    getCustomerRemitPageList,
    setCustomerRemitState
} from '../../../api/sale/peemanagement';

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

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

            },
            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() {
            this.msg.Type=this.Type
            this.msg.CustomerId=this.Id
            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  = '1';
            this.remitMsg.Remark = '';
            this.isShow = true
        },
        submit(){            
            setCustomerRemitState(this.remitMsg).then(res => {
                this.$q.notify({
                    icon: 'iconfont icon-chenggong',
                    color: 'accent',
                    timeout: 2000,
                    message: '操作成功',
                    position: 'top'
                })
                this.isShow = false
                this.getList();
            }).catch(() => {
                
            })
        }
    }
}
</script>
<style>
.withdraw ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.withdraw ::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}
.withdraw ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}
.withdraw ::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.withdraw ::-webkit-scrollbar-corner {
  background: #204754;
}
</style>
