<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div class="cell clearfix">
                <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:0 10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
                <label class="title"><span class="name">模板类型</span> : </label>
                <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>
            </div>
            <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" width="60" label="序号">
                    <template slot-scope="scope">
                        1
                    </template>
                </el-table-column>
                <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="110">
                    <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="操作" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handerDetail">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100]"
                :page-size="10"
                background
                style="margin-top:20px;float: right"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <template-detail ref="templateDetail"></template-detail>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import templateDetail from './components/templateDetail'
export default {
    components:{
        BreadCrumb,
        templateDetail
    },
    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:{
        handerDetail(){
            this.$refs.templateDetail.show()
        }
    }
}
</script>
