<template>
    <div class="main-contain outpatientChargesManagement">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div style="display:flex;">
                <div class="formulaLeft">
                    <div class="mainCell" style="margin-bottom:10px;">
                        <el-input size="small" @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>
                    </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 align="center" prop="name" label="处方号" width="100">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="name" label="姓名" width="99">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="name" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger">退药</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="flex:1;margin-left:20px;">
                    <el-date-picker v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange" :editable="false" :clearable="false" style="width: 196px;margin-bottom:10px;" type="date" placeholder="选择日期时间" align="right" size="small"></el-date-picker>
                    <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
                        <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">{{ 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>
                </div>
            </div>
        </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 弄'
            }],
        }
    },
    methods:{
    }
}
</script>



<style lang="scss" scoped>
.formulaLeft{
    width:300px;
    .mainCell{
        display: flex;
    }
}
</style>
