<template>
    <div style="margin-top:10px">
        <p>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="到期日期：">
                    <el-date-picker
                    v-model="formInline.valueDate"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit"  >查询</el-button>
                </el-form-item>
            </el-form>
        </p>
        <br/>
        <br/>
        <el-divider></el-divider>
        <div>
            <h3>{{ this.dateDay }}日案件总量</h3>
            <br/> 
            <el-row :gutter="20"  style="margin-left:30px"   :data="loanBackedList">
                <el-col :span="8">
                    <div class="grid-content bg-purple">案件总量：{{ loanBackedList.totle  }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">提前结清数量：{{ loanBackedList.advanceNumber   }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">历史逾期数量：{{ loanBackedList.historyNumber   }}</div>
                </el-col>
                
            </el-row>
            <br/>
            <el-row :gutter="20" style="margin-left:30px" :data="loanBackedList">
                <el-col :span="8">
                    <div class="grid-content bg-purple">待分配数量：{{ loanBackedList.needDivisionNumber   }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">已分配数量：{{ loanBackedList.divisionNumber   }}</div>
                </el-col>
            </el-row>
        </div>
         <el-divider></el-divider>
        <div>
            <h2>查询结果</h2>
            <br/>
            <el-table :data="loanBackedListResult" stripe style="width: 100%;margin-left:30px">
                <el-table-column prop="planIndex" label="还款期数"  :formatter="planIndexFormat"></el-table-column>
                <el-table-column prop="totle" label="总条数"></el-table-column>
                <!-- <el-table-column prop="totleMoney" label="总金额" ></el-table-column> -->
                <el-table-column prop="divisionNumber" label="已分配条数"  ></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                            <el-button type="text" size="small" @click="assignMarketCase(scope.row)" v-if="scope.row.totle != scope.row.divisionNumber" >分配</el-button>
                            <el-button type="text" size="small" @click="assignMarketCase(scope.row)" v-else disabled >已分配</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

         <el-divider></el-divider>
        <div>
            <h2>{{ this.dateDay }}日分配记录</h2>
            <br/>
            <el-table :data="loanBackedListlog" stripe style="width: 100%;margin-left:30px">
                <el-table-column prop="date" label="分配日期" :formatter="dateFormat"></el-table-column>
                <el-table-column prop="backIndex" label="还款期数" ></el-table-column>
                <!-- <el-table-column prop="planNumber" label="待分配数量" ></el-table-column> -->
                <el-table-column prop="overNumber" label="已分配条数"  ></el-table-column>
            </el-table>
        </div>

         <!--窗口组件-->
    <template>
      <!-- 分配分案 -->
      <assignMarketCase
        v-if="ui.assignMarketCase.visible"
        :dialogVisible.sync="ui.assignMarketCase.visible" 
        :allIndex="ui.assignMarketCase.allIndex" 
        :planIndex="ui.assignMarketCase.planIndex" 
        :planDate="ui.assignMarketCase.planDate" 
         @my-event="getMyMarket"  >
      </assignMarketCase>

    </template>
    </div>

</template>

<script>
    import * as moment from "moment";
    import assignMarketCase  from "./ByhassignMarketCase";
    export default {
        name: "ByhRemindCaseList",
          components: {
           assignMarketCase,
        },
        data(){
            return {
                flag: false,
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
               
                dateDay:'',
                ui:
                {
                    assignMarketCase:{
                        visible: false,
                        allIndex: '',
                        planIndex:'',
                        planDate:''
                    }
                },
                loanBackedList:{
                    totle:'',
                    advanceNumber:'',
                    divisionNumber:'',
                    historyNumber:'',
                    needDivisionNumber:'',
                },
                loanBackedListResult:[],
                loanBackedListlog:[],
                assignMarket:[],
                formInline: {
                    valueDate: '',
                    clientCell:'',
                    confirmUser: '',
                    memo: '',
                },
            }
        },

        created() {
            if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
                this.flag = this.$route.query.flag;
                this.formInline.clientCell = this.$route.query.clientCell;
            }
            setTimeout(() => {
                this.backedData();
            }, 400);
        },

        mounted() {
            setTimeout(() => {
                var date = +new Date(); //获取当前日期时间戳
                var before = date+1000*60*60*24;//当前日期时间戳减去一天时间戳
                var beforeDate = new Date(before);//将时间戳转化为Date对象
                this.formInline.valueDate = beforeDate
            }, 300);
        },

        methods: {
            /** 加载数据 */
            backedData(params) {
                this.$$post('/division/getDivision', {
                    planDate : this.formInline.valueDate,
                })
                .then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }
                    if(this.formInline.valueDate){
                        this.dateDay = moment(this.formInline.valueDate).format("YYYY-MM-DD");
                    }
                    const $data = res.data.data;
                    if($data.divisionModelList != null ){
                        this.loanBackedList = $data;
                        this.loanBackedListlog = $data.divisionRecordModels;
                        this.loanBackedListResult = $data.divisionModelList;
                    }
                    this.handleClose();
                })
                .catch(err => {
                    alert("error!")
                })
              
            },
                // 分配后不刷新页面加载数据
            getMyMarket(msg){
                if(msg){
                    this.backedData();
                }
            },
              /* 逾期期数 */
            planIndexFormat: function (row) {
                var planIndex = row.planIndex
                var allIndex = row.allIndex
                if (planIndex == undefined || allIndex == undefined) {
                return ''
                }
                return planIndex + '/' + allIndex
            },
               /*搜索条件*/
            onSubmit() {
                this.backedData();
            },

             /*重置*/
            reset() {
                this.formInline.clientCell = '';
            },

            // 分配分案
            assignMarketCase(record){
                this.ui.assignMarketCase = {
                    visible: true,
                    allIndex: record.allIndex,
                    planIndex: record.planIndex,
                    planDate: record.planDate,
                }
            },
          
            /** 处理分页操作*/
            handleCurrentChange() {
                this.loanBackedList = this.backedData()
            },
            /*日期*/
            dateFormat: function (row, column) {
                var date = row[column.property]
                if (date == undefined) {
                    return ''
                }
                return moment(date).format("YYYY-MM-DD")
            },
             /** 关闭处理 */
            handleClose() {
                this.visible = false;
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 300);
            },

            //参数
            buildParam() {
                var return_hash = {
                    size: this.page.size,
                    current: this.page.current,
                };
                if (this.formInline.valueDate != '') {
                    return_hash['valueDate'] = this.formInline.valueDate
                }
                return return_hash;
            },

        }
    }


</script>

<style scoped>

</style>