<template>
    <div>
        <el-row :gutter="24">
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
                <el-form-item label="交易时间" prop="trade_time.value">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" size="small" :default-time="['00:00:00', '23:59:59']" type="datetimerange" v-model="queryParams.trade_time.value" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
             </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span>门诊结算汇总报表</span>
                    </div>
                    <div class="text item">
                        <el-table :data="mzData" style="width: 100%"
                            :header-cell-style="{ background: 'white', color: '#18518B' }">
                            <el-table-column :prop="item.prop" :label="item.lable" v-for="item in mzHeader"  :key="item">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <el-card class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span>住院结算汇总报表</span>
                    </div>
                    <div class="text item">
                        <el-table :data="zyData" style="width: 100%"
                            :header-cell-style="{ background: 'white', color: '#18518B' }">
                            <el-table-column :prop="item.prop" :label="item.lable" v-for="item in zyHeader" :key="item">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <div style="margin-top: 20px;margin-bottom: 20px;">
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="门诊结算个人报表" name="01">

                        </el-tab-pane>
                        <el-tab-pane label="住院结算个人报表" name="02">

                        </el-tab-pane>
                    </el-tabs>
                    <el-table :data="list" style="width: 100%"
                        :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }" v-loading="loading"
                        element-loading-text="拼命加载中">
                        <el-table-column :prop="item.prop" align="center" :label="item.lable" :fixed="item.iffixed" :width="item.width" v-for="item in listHeader" :key="item">
                        </el-table-column>
                    </el-table>
                     <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList" />
                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        yibao,yibaolist
    } from '@/api/report'
    export default {
        name: 'Yibaoreport',
        data() {
            return {
                mzList: [],
                zyList: [],
                activeName: '01',
                mzHeader:[],
                zyHeader:[],
                mzData: [{
                        name: '充值',
                        amount: '1000.00',
                    },
                    {
                        name: '退费',
                        amount: '2000.00',
                    }
                ],
                zyData: [{
                        name: '预交金',
                        amount: '1000.00',
                    },
                    {
                        name: '出院结算',
                        amount: '2000.00',
                    }
                ],
                ordervisible: false,
                // 遮罩层
                loading: false,
                // 表格数据
                list: [],
                listHeader:[],
                // 总条数
                total: 0,
                // 分页参数
                pageInfo: {
                    page: 1,
                    limit: 10,
                },
                // 查询参数
                queryParams: {
                    trade_time: {
                        value: [],
                        op: 'between'
                    },
                },
                out_trade_no: '', //订单号
                ywlx: ''

            };
        },
        created() {
            this.getNowTime();
            this.getYibao();
            this.getList()
        },
        methods: {
            getYibao(){
                this.loading = true
                const qyparams = {
                    ...this.formatQueryParams(this.queryParams)
                }
                yibao({start_time:this.queryParams.trade_time.value[0],end_time:this.queryParams.trade_time.value[1]}).then(response => {
                   this.mzData = response.mzData[1]
                   this.zyData = response.zyData[1]
                   this.mzHeader = response.mzData[0]
                   this.zyHeader = response.zyData[0]
                }).finally(() => {
                    this.loading = false
                })
            },
            getList() {
                this.loading = true
                const qyparams = {
                    start_time:this.queryParams.trade_time.value[0],
                    end_time:this.queryParams.trade_time.value[1],
                    page:this.pageInfo.page,
                    limit:this.pageInfo.limit,
                    account_type:this.activeName
                }
                yibaolist(qyparams).then(response => {
                    this.listHeader = response[0]
                    this.list = response[1].data
                    this.total = response[1].total
                }).finally(() => {
                    this.loading = false
                })
            },
            handleQuery(){

            },
            getNowTime() {
                var now = new Date()
                var year = now.getFullYear() // 得到年份
                var month = now.getMonth() // 得到月份
                var date = now.getDate() // 得到日期
                month = month + 1
                month = month.toString().padStart(2, '0')
                date = date.toString().padStart(2, '0')
                var defaultDate = `${year}-${month}-${date}`
                this.queryParams.trade_time.value = ['2022-08-13 00:00:00', '2022-08-13 23:59:59'];
                // this.queryParams.trade_date.value = [defaultDate + ' 00:00:00', defaultDate + ' 23:59:59']
            },
            handleClick(e) {
                this.pageInfo.page = 1;
                this.getList();
            },
        },
    };
</script>

<style>
    .el-card {
        border: 1px solid #e6ebf5 !important;
    }
</style>
