<template>
    <div class="app-container">
        <div class="flexBet searchTop">
            <div class="title flex m20">
                <div class="bar"></div>
                <div class="text">{{ $route.meta.title }}</div>
            </div>
            <el-row :gutter="10" class="mb8">

                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
        </div>
        <div class="bg">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="96px"
                class="flex form" style="padding:0 20px">
                <el-form-item label="批次号" prop="batchNo">
                    <el-input size="medium" v-model="queryParams.batchNo" placeholder="请输入批次号"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item>
                <el-form-item label="商户订单号" prop="outTradeNo">
                    <el-input size="medium" v-model="queryParams.outTradeNo" placeholder="请输入商户订单号"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item>
                <el-form-item label="平台订单号" prop="noOrder">
                    <el-input size="medium" v-model="queryParams.noOrder" placeholder="请输入平台订单号"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item>
                <el-form-item label="商户名称" prop="storeName">
                    <el-input size="medium" v-model="queryParams.storeName" placeholder="请输入商户名称"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item>
                <el-form-item label="开户名" prop="acctName">
                    <el-input size="medium" v-model="queryParams.acctName" placeholder="请输入开户名"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item>
                <el-form-item label="收款地址" prop="acctId">
                    <el-input size="medium" v-model="queryParams.acctId" placeholder="请输入收款地址"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item>
                <!-- <el-form-item label="身份证号码" prop="certId">
                    <el-input size="medium" v-model="queryParams.certId" placeholder="请输入身份证号码"
                        @keyup.enter.native="handleQuery" style="width: 215px;border-color: #E6F1FF;" />
                </el-form-item> -->

                <el-form-item label="代付状态" prop="orderStatus">
                    <el-select v-model="queryParams.orderStatus" placeholder="请选择代付状态" size="medium">
                        <el-option v-for="dict in dict.type.payment_status" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="入金渠道" prop="channelType">
                    <el-select v-model="queryParams.channelType" placeholder="请选择入金渠道" clearable size="medium">
                        <el-option v-for="(item, i) in userLevType" :key="i" :label="item.channelName"
                            :value="item.payChannel"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出金渠道" prop="outChannel">
                    <el-select v-model="queryParams.outChannel" placeholder="请选择出金渠道" clearable size="medium">
                        <el-option v-for="(item, i) in userLevType" :key="i" :label="item.channelName"
                            :value="item.payChannel"></el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item label="是否发起代付" prop="isPayment">
                    <el-select v-model="queryParams.isPayment" placeholder="请选择是否发起代付" size="medium">
                        <el-option v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item> -->

                <el-form-item label="用户类型" prop="userType">
                    <el-select v-model="queryParams.userType" placeholder="请选择用户类型" size="medium">
                        <el-option v-for="dict in typeCon" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="订单来源" prop="sourceType">
                    <el-select v-model="queryParams.sourceType" placeholder="请选择订单来源" size="medium">
                        <el-option v-for="dict in dict.type.source_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="代付时间">
                    <el-date-picker v-model="dateRange" style="width: 240px;border-color: #E6F1FF;"
                        value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions" :unlink-panels="true"></el-date-picker>
                </el-form-item>

                <el-form-item>
                    <div class="searchTop flexBet" style="align-items: center;">
                        <el-row :gutter="10" class="mb8">
                            <el-button type="primary" icon="" size="medium" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
                        </el-row>

                        <el-row :gutter="10" class="mb8" style="margin-left:20px">
                            <el-col :span="1.5">
                                <el-button type="primary" plain icon="" size="medium" @click="handleExport"
                                    v-hasPermi="['record:platform_payment_coin_export']">导出</el-button>
                            </el-col>
                            <!-- <el-col :span="1.5">
                                <el-button type="primary" plain icon="" size="medium" @click="handleSay"
                                    v-hasPermi="['record:platform_payment_audit_save']">审核</el-button>
                            </el-col> -->
                        </el-row>
                    </div>

                </el-form-item>



            </el-form>
            <el-table stripe v-loading="loading" :data="infoList">
                <!-- <el-table-column type="selection" width="55" align="center" :selectable="selectable" />  @selection-change="handleSelectionChange" -->
                <el-table-column :label="'批次号\n渠道订单号'" align="center" prop="storeNo" min-width="230">
                    <template slot-scope="scope">
                        {{ scope.row.batchNo }}<br />
                        {{ scope.row.transactionId }}
                    </template>
                </el-table-column>
                <el-table-column :label="'商户订单号\n平台订单号'" align="center" prop="storeNo" min-width="180">
                    <template slot-scope="scope">
                        {{ scope.row.outTradeNo }}<br />
                        {{ scope.row.noOrder }}
                    </template>
                </el-table-column>
                <!-- <el-table-column :label="'开户名\n身份证号'" align="center" prop="storeNo" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.acctName }}<br />
                        {{ scope.row.certId }}
                    </template>
                </el-table-column> -->
                <el-table-column label="用户类型" align="center" prop="userType" min-width="120">
                    <template slot-scope="scope">
                        <el-tag :type="
                            scope.row.userType == 'store'
                                ? 'success' : 'primary'
                        ">
                            {{ scope.row.userType == 'store' ? '商户' : '代理商' }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column :label="'币种名称'" align="center" prop="storeNo" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.bankName }}
                    </template>
                </el-table-column>

                <el-table-column :label="'交易hash'" align="center" prop="transactionId" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.transactionId }}
                    </template>
                </el-table-column>

                <el-table-column :label="'系统出款地址'" align="center" prop="storeNo" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.attach }}
                    </template>
                </el-table-column>

                <el-table-column :label="'收款地址'" align="center" prop="storeNo" min-width="180">
                    <template slot-scope="scope">
                        {{ scope.row.acctId }}
                    </template>
                </el-table-column>
                <el-table-column :label="'代付金额\n代付手续费'" align="center" prop="storeNo">
                    <template slot-scope="scope">
                        {{ scope.row.tranAmt }}<br />
                        {{ scope.row.tranFee }}
                    </template>
                </el-table-column>
                <el-table-column :label="'代付状态'" align="center" prop="storeNo">
                    <template slot-scope="scope">
                        {{ scope.row.orderStatusName }}<br />
                    </template>
                </el-table-column>
                <el-table-column :label="'对公对私\n出款账号'" align="center" prop="storeNo" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.flagCard == 'private_account' ? "对私" : '对公' }}<br />
                        {{ scope.row.accountNo }}
                    </template>
                </el-table-column>
                <el-table-column :label="'入金渠道\n出金渠道'" align="center" prop="storeNo" min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.payChannelName }}<br />
                        {{ scope.row.outChannelName }}
                    </template>
                </el-table-column>
                <el-table-column :label="'商户名称\n代付时间'" align="center" prop="storeNo" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.storeName }}<br />
                        {{ scope.row.createTime }}
                    </template>
                </el-table-column>
                <el-table-column :label="'订单来源'" align="center" prop="storeNo" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.sourceType == 's_manual' ? '手工提单' : 'API下发' }}
                    </template>
                </el-table-column>
                <el-table-column label="代付信息" align="center" prop="orderMsg" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                    min-width="80">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.orderStatus == 'processing' || scope.row.orderStatus == 'processreview'"
                            size="small" type="text" style="color: #006EFF;" @click="handleOrder(scope.row)"
                            v-hasPermi="['record:platform_payment_coin_handle']">手工处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>

        <!-- 处理当前代付订单 -->
        <el-dialog v-dialogDrag :close-on-click-modal="false" title="信息" :visible.sync="isShowDetail" width="23%"
            append-to-body>
            <div class="m20">确认要处理当前代付订单？</div>
            <el-form ref="form" :model="form" :rules="rules" label-width="115px">
                <el-form-item label="交易凭证hash" prop="txId">
                    <el-input v-model="form.txId" placeholder="请输入交易凭证hash" />
                </el-form-item>
                <el-form-item label="出账地址" prop="fromAddress">
                    <el-input v-model="form.fromAddress" placeholder="请输入出账地址" />
                </el-form-item>
                <el-form-item label="验证码" prop="googleCode">
                    <el-input v-model="form.googleCode" placeholder="请输入谷歌动态验证码" />
                </el-form-item>
            </el-form>
            <el-button type="primary" icon="" size="small" @click="submitForm('processsuccess')">置为成功</el-button>
            <el-button plain size="small" @click="submitForm('processfailed')">置为取消</el-button>
            <el-button plain size="small" @click="cancel">取消</el-button>
        </el-dialog>

        <!-- 审核 -->
        <el-dialog v-dialogDrag title="代付审核" :visible.sync="isShowJudege" width="600px" append-to-body
            :close-on-click-modal="false" :before-close="cancel">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="审核状态" prop="auditStatus">
                    <el-radio-group v-model="form.auditStatus" @change="getValue">
                                    <el-radio v-for="(item, i) in statusOptions" :key="i" :value="item.label"
                            :label="item.value">{{ item.label }}</el-radio>
                                  </el-radio-group>
                </el-form-item>
                <el-form-item label="谷歌验证码" prop="googleCode">
                    <el-input v-model="form.googleCode" placeholder="请输入谷歌动态验证码" />
                </el-form-item>
                <el-form-item label="驳回原因" prop="rejectReason" v-if="form.auditStatus == 'processreject'">
                    <el-input v-model="form.rejectReason" placeholder="请输入驳回原因" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('judge')">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { common_api, platform_payment_list } from "@/api/form";

export default {
    name: "PkAdWeiList",
    dicts: ['pay_status', 'source_type', 'yes_no', 'payment_status'],
    data() {
        return {
            typeCon: [
                {
                    label: '商户',
                    value: 'store',
                },
                {
                    label: '代理商',
                    value: 'agent',
                },
            ],
            statusOptions: [
                {
                    label: '通过',
                    value: 'processing',
                },
                {
                    label: '驳回',
                    value: 'processreject',
                },
            ],
            detailData: {},
            isShowDetail: false,
            isShowJudege: false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 3);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 6);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近两年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 36);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                ]
            },
            userLevType: [

            ],
            sortLevType: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            dateRange: [],
            // 新增广告图片地址
            imageUrl: "",
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            paymentIds: [],
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 广告表格数据
            infoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                sourceType: null,
                isPayment: null,
                outChannel: null,
                channelType: null,
                orderStatus: null,
                certId: null,
                acctId: null,
                acctName: null,
                storeName: null,
                noOrder: null,
                outTradeNo: null,
                batchNo: null,
                userType: null,

            },

            // 表单参数
            form: {

            },
            // 表单校验
            rules: {
                // txId: [
                //     { required: true, message: "请输入交易成功hash", trigger: "blur" },
                // ],
                // fromAddress: [
                //     { required: true, message: "请输入出账地址", trigger: "blur" },
                // ],
                auditStatus: [
                    { required: true, message: "请选择审核状态", trigger: "blur" },
                ],
                googleCode: [
                    { required: true, message: "请输入谷歌动态验证码", trigger: "blur" },
                ],
                rejectReason: [
                    { required: true, message: "请输入驳回原因", trigger: "blur" },
                ],
            }
        };
    },
    created() {
        this.getList();
        this.init();

    },
    methods: {
        getValue(e) {
            this.$forceUpdate()
        },
        selectable(row, rowIndex) {
            //索引是从0开始，条件1是指只有第2行数据不被禁用  
            if (row.orderStatus == 'processreview') {
                return true;  //不禁用
            } else {
                return false;  //禁用
            }
        },
        /** 手工处理 */
        handleOrder(row) {
            this.reset()
            this.detailData = row
            this.isShowDetail = true
        },
        // 审核
        handleSay() {
            if (!this.paymentIds.length) {
                this.$message.error('请选择要审核的数据')
                return;
            }
            this.isShowJudege = true
            this.form.auditStatus = 'processing'
        },
        init() {
            common_api.payChannelAll().then((response) => {
                this.userLevType = response.data
            });
            common_api.payTypeAll().then((response) => {
                this.sortLevType = response.data
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出代付流水?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    return platform_payment_list.uexport(queryParams);
                })
                .then((response) => {
                    this.download(response.msg);
                    this.queryParams.pageNum = 1;
                    this.queryParams.pageSize = 20;
                });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.storeId)
            this.paymentIds = selection.map(item => item.batchNo)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        getList() {
            this.loading = true;
            platform_payment_list
                .ulistInfo(this.addSESDateRange(this.queryParams, this.dateRange))
                .then((response) => {
                    this.infoList = response.rows;
                    this.total = Number(response.total);
                    this.loading = false;
                });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.isShowDetail = false;
            this.isShowJudege = false
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加广告位信息";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            pkUserInfo.getInfo(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改广告位信息";
            });
        },
        /** 提交按钮 */
        submitForm(type) {
            if (!this.form.googleCode) {
                this.$message.error('请输入谷歌动态验证码')
                return;
            }
            if (type == 'processsuccess' && !this.form.txId) {
                this.$message.error('请输入交易凭证hash')
                return;
            }
            if (type == 'processsuccess' && !this.form.fromAddress) {
                this.$message.error('请输入出账地址')
                return;
            }

            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (type == 'judge') {
                        const loading = this.$loading({
                            lock: true,
                            text: `正在审核`,
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        this.form.paymentIds = this.paymentIds.join(',')
                        platform_payment_list.platform_payment_audit_save(this.form).then((response) => {
                            loading.close();
                            this.isShowJudege = false;
                            this.msgSuccess("审核成功");
                            this.getList();
                        }).catch(() => {
                            loading.close();
                            this.isShowJudege = false;
                        })
                    } else {
                        const loading = this.$loading({
                            lock: true,
                            text: `正在手动处理`,
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        let form = {
                            id: this.detailData.id,
                            status: type,
                            googleCode: this.form.googleCode,
                            fromAddress: this.form.fromAddress,
                            txId: this.form.txId,
                        }
                        platform_payment_list.platform_payment_coin_handle(form).then((response) => {
                            loading.close();
                            this.isShowDetail = false;
                            this.msgSuccess("处理成功");
                            this.getList();
                        }).catch(() => {
                            loading.close();
                            this.isShowDetail = false;
                        })
                    }

                }
            });
        },

    },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
    padding: 20px 20px;
}

::v-deep .el-dialog__headerbtn {
    top: 10px;
}

::v-deep .el-dialog__header {
    background: #F8F8F8;
    padding: 8px;

    .el-dialog__title {
        font-size: 14px;
    }
}

::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 33vh !important;
}
</style>