<template>
    <el-dialog id="tableBody" title="导出数据" :visible.sync="dialogVisible" width="45%"   center :before-close="handleClose">
        <div style="margin-left:20%">
            <h3>请选择时间：</h3>
            <br/>
            <div>
                <el-row :gutter="20" style="margin-left:5%;line-height: 25px;">
                     <el-form>
                    <el-form-item label="还款时间：">
                    <el-date-picker v-model="searchInfo.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期" :clearable="false" ></el-date-picker>
                    </el-form-item>
                     </el-form>
                </el-row>
               
            </div>
             <br/>
            <br/>
            <el-button size="mini" type="button">
            <downloadexcel
                class = "btn btn-default"
                :fetch   = "fetchData"
                :fields = "json_fields"
                name    = "filename.xls"
                type    = "xls">
                导出
            </downloadexcel>
          </el-button>
            
        </div>
    </el-dialog>
</template>

<script>
import * as moment from "moment";
import downloadexcel  from 'vue-json-excel'

    export default {
        name: "byhExportMarket",
        props: {
            dialogVisible: {
                type: Boolean
            },
            type: {
                type: Number
            },
        },
         components: {
            downloadexcel 
        },
        data () {
            return {
                client: {
                    type:'',
                },
                searchInfo: {
                    date: [],
                },
                  json_fields: {
                        '借款编号': 'loanNo',
                        '客户编号': 'clientNo',
                        '姓名': 'clientName', 
                        '计划还款状态': 'statusStr',
                        '还款期数': 'planIndex',
                        '计划还款时间':  {
                            field: 'planDate',
                            callback: (value) => {
                                return moment(value).format("YYYY-MM-DD");
                            }
                        },
                        '计划还款总金额': 'planAmt',
                        '计划还款本金': 'planBen',
                        '计划还款服务费': 'planFu',
                        '计划还款利息': 'planXi',

                    },
                    json_meta: [
                            [
                                {
                                    'key': 'charset',
                                    'value': 'utf-8'
                                }
                            ]
                        ],
            }
        },
        created() {
            this.client = {
                type: this.type,
            }
        },
        methods: {
            async  fetchData(){
                if (this.searchInfo.date != null  && this.searchInfo.date.length>0) {
                     var  end = new Date(this.searchInfo.date[1])
                    var start= new Date(this.searchInfo.date[0])

                     end=end.setDate(end.getDate());
                     end=new Date(end);
                    var planDateStart = (Date.parse(start))
                    var planDateEnd = Date.parse(end)
                } else {
                    var planDateStart = new Date().getTime()
                    var planDateEnd = new Date().getTime()
                }
                var response =  await this.$$get('/plan/exportExecl?planDateEnd='+planDateEnd+"&planDateStart="+planDateStart);
                this.handleClose();
                if(response.data.result != null){
                    return response.data.result;

                }else{
                    alert("暂无数据")
                }
            },
               /** 关闭处理 */
            handleClose () {
                this.visible = false
                setTimeout(() => {
                    this.$emit('update:dialogVisible', false)
                }, 100)
            },
            dateFormat: function (row, column) {

                var date = row[column.property];
                if (date == undefined) {
                return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
      
           
        },
        mounted: function () {
        },
    }
</script>

<style scoped lang="stylus" >

#tableBody{
    text-align:center;
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>