<template>
    <div class="main-contain outpatientChargesManagement">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div style="display: flex;justify-content: space-between;margin-bottom:10px;">
                <div>
                    <el-input size="small" style="width:150px;" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
                    <el-button size="small" style="margin-left:10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
                    <el-select size="small" v-model="value" placeholder="请选择" style="width:150px;margin-left:10px;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-date-picker size="small" v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange" :editable="false" :clearable="false" style="width: 196px;margin-right:10px;" type="date" placeholder="选择日期时间" align="right" ></el-date-picker>
                    <el-radio v-model="radio" label="1">明细</el-radio>
                    <el-radio v-model="radio" label="2">汇总</el-radio>
                </div>
                <el-button size="small" type="primary">报表下载</el-button>
            </div>
            <el-table :data="tableData" border height="500" style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column align="center" prop="name" label="患者名字">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="处方号">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="创建时间">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="创建医生">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="项目名称">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="试管颜色">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary">打印</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
export default {
    components:{
        BreadCrumb,
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '门诊收费' },
                { path: false, name: '项目消费明细汇总' }
            ],
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    }
}
</script>
