<template>
    <div>
        <br>
        <div class="top">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
               
                <el-form-item label="打款批次：">
                    <el-input placeholder="请输入批次号" v-model="searchInfo.batchNo" clearable></el-input>
                </el-form-item>
               
                <el-form-item label="打款状态：">
                    <el-select v-model="searchInfo.batchStatus" clearable placeholder="全部">
                        <el-option v-for="item in this.$enumUtils.toValue('SendMoneyStatus')" :key="item.value"
                                :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item >
                <div class="btn">
                    <el-button @click="reset" type="primary">重置</el-button>
                    <el-button @click="querySearchRemind" type="primary">查询</el-button>
                </div>
            </el-form>

            <br/>
            <br/>
            <br/>
             <el-button @click="importMarketMoney" type="primary" style="margin-left:80px">导入打款信息</el-button>
        </div>
        <div>
            <el-table :data="tablePlanRemindData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column prop="batchNo" label="打款批次" sortable ></el-table-column>
                <el-table-column prop="totalCount" label="已导入数量" ></el-table-column>

                <el-table-column prop="totalAmt" label="导入总金额" sortable ></el-table-column>
                <el-table-column prop="successTotal" label="已成功打款数量" sortable ></el-table-column>
                <el-table-column prop="successAmt" label="已成功打款金额" sortable ></el-table-column>
                <el-table-column prop="batchStatusStr" label="打款状态" sortable ></el-table-column>
                <el-table-column prop="approvalStatusStr" label="审批状态" sortable ></el-table-column>
                <el-table-column prop="gmtCreated" label="导入时间" :formatter="dateFormat" sortable
                                ></el-table-column>
                <el-table-column prop="createUser" label="创建人"></el-table-column>
                <el-table-column prop="describe" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="doubleMoney(scope.row)" v-if="scope.row.approvalStatus === 'INIT' "  >批次打款</el-button>
                        <el-button size="mini" type="text" @click="doubleMoney(scope.row)" v-else disabled >批次打款</el-button>
                        <el-button size="mini" type="text" @click="moneyDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page.current"
                    :page-sizes="[20, 50, 80, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </div>

        <!--窗口组件-->
        <template>

             <!-- 导入弹窗 -->
            <byhImportMarketMoney
                    v-if="ui.byhImportMarketMoney.visible"
                    :batchNo="ui.byhImportMarketMoney.batchNo"
                    :dialogVisible.sync="ui.byhImportMarketMoney.visible">
            </byhImportMarketMoney>

              <!-- 详情 -->
            <byhDetailMarket
                    v-if="ui.byhDetailMarket.visible"
                    :batchNo="ui.byhDetailMarket.batchNo"
                    :dialogVisible.sync="ui.byhDetailMarket.visible">
            </byhDetailMarket>

              <!-- 批次打款 -->
            <byhSendnumMoney
                    v-if="ui.byhSendnumMoney.visible"
                    :batchNo="ui.byhSendnumMoney.batchNo"
                    :totalCount="ui.byhSendnumMoney.totalCount"
                    :totalAmt="ui.byhSendnumMoney.totalAmt"
                    :dialogVisible.sync="ui.byhSendnumMoney.visible">
            </byhSendnumMoney>


        </template>
    </div>
</template>

<script>
    import * as moment from "moment";
    import byhImportMarketMoney from './ByhImportMarketMoney';
    import byhDetailMarket from './ByhDetailMarket';
    import byhSendnumMoney from './ByhSendnumMoney';

    export default {
        name: "ByhPlanRemindList",
        components: {
            byhImportMarketMoney,
            byhDetailMarket,
            byhSendnumMoney
        },
        data() {
            return {
                flag: false,
                ui:
                    {
                        byhSendnumMoney: {
                            visible: false,
                            totalCount: '',
                            totalAmt: '',
                        },
                        byhImportMarketMoney:{
                            visible: false,
                            batchNo: '',
                        },
                        byhDetailMarket:{
                            visible: false,
                            batchNo: '',
                        }
                    },
                page: {
                    current: 1,
                    size: 20,
                    total: 0
                },
                searchInfo: {
                    date: [new Date(),new Date()],
                    batchNo: '',
                    batchStatus: '',
                },
                tablePlanRemindData: [],
                record: '',
                userGroupList:[],
                centerDialogVisible: false
            }

        },

        mounted: function () {
            this.tablePlanRemindData = this.remindData();
        },

        methods: {

            formatter(row, column) {
                return row.address;
            },
            //子组件传值给父组件
            getMyEvent(msg){
                if(msg){
                    this.tablePlanRemindData = this.remindData();
                }
            },
            // 分配后不刷新页面加载数据
            getMyMarket(msg){
                if(msg){
                    this.tablePlanRemindData = this.remindData();
                }
            },

            /** 加载数据 */
            remindData(params) {
                var listsData = [];
                this.$$post('/raise/getPageBatchList', this.buildParam()).then(res => {
                    if (res.data.code != 200) {
                        this.$message.error(res.data.message);
                        return
                    }
                    listsData = res.data.result.data;
                    this.tablePlanRemindData = listsData;
                    this.page.total = res.data.result.total;
                }).catch(error => {
                    this.$Message.error(error || '系统异常');
                });
            },

            //搜索查询
            querySearchRemind() {
                this.remindData();
            },

            /*提醒期数*/
            planIndexFormat: function (row, column) {
                var planIndex = row[column.property]
                if (planIndex == undefined) {
                    return ''
                }
                return planIndex + '/3'
            },
            doubleMoney(record){
                this.ui.byhSendnumMoney = {
                    visible: true,
                    batchNo: record.batchNo,
                    totalCount: record.totalCount,
                    totalAmt: record.totalAmt
                }
            },
            importMarketMoney(record){
                this.ui.byhImportMarketMoney = {
                    visible: true,
                    batchNo: record.batchNo,
                }
            },
            moneyDetail(record){
                this.ui.byhDetailMarket = {
                    visible: true,
                    batchNo: record.batchNo,
                }
            },
             handleSizeChange(row){
                this.page.size=row
                this.page.current=1;
                this.remindData();
            },
            //参数
            buildParam() {
                var return_hash = {
                    size: this.page.size,
                    current: this.page.current,
                };
                if (this.searchInfo.batchNo != '') {
                    return_hash['batchNo'] = this.searchInfo.batchNo
                }
                if (this.searchInfo.batchStatus  != '') {
                    return_hash['batchStatus'] = this.searchInfo.batchStatus 
                }
           

                return return_hash;
            },

            //显示日期
            dateFormat: function (row, column) {

                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },

            //重置
            reset() {
                this.searchInfo.batchNo = '';
                this.searchInfo.batchStatus = '';
            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.tablePlanRemindData = this.remindData();
            },

            getStatus(row) {
                let value = row.status;
                if (value === 'DISTRIBUTIONWATING') {
                    return '待分配';
                } else if (value === 'DISTRIBUTIONFINISH') {
                    return '已分配';
                } else if (value === 'RECOVERY') {
                    return '已回收';
                }
            },

             //营销组分类
            marketFormat: function (row, column) {
                var status = row['group'];
                return this.$enumUtils.toMsg('marketEnum', status);
            },

            mergeDate(param1, param2) {
                if (param1 == "") {
                    return ""
                }
                var array = new Array();
                array[0] = new Date(param1)
                array[1] = new Date(param2)
                return array;
            },
            getDate(param, num) {
                if (param && param[num] !== '') {
                    return moment(param[num]).format("YYYY-MM-DD")
                }
                return ""
            },

        }

    }
</script>

<style scoped>

</style>