<template>
  <div class="STBbase-wrapper height100">
      <div class="search-container">
          <el-form :inline="true" :model="form">
            <el-form-item>
                <el-select v-model="form.unit" placeholder="请选择所属单位">
                <el-option
                    v-for="item in unitOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
             </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.state" placeholder="请选择机顶盒状态">
                <el-option
                    v-for="item in stateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
             </el-select>
            </el-form-item>
            <el-form-item>
                <el-cascader v-model="form.area" :options="areaOptions" :show-all-levels="false"></el-cascader>
            </el-form-item>
            <el-form-item>
                <div class="btn-group">
                   <el-button type="primary" @click="handleSubmit">查询</el-button>
                   <el-button @click="handleReset">重置</el-button>
                </div>     
            </el-form-item>
        </el-form>
        <div class="page-tip">
            <span class="page-tip-title">页面说明:</span>
            <span class="page-tips">可按照机顶盒状态及所属单位进行信息筛选。可查看当前系统所有机顶盒运维状态信息。</span>
        </div>
      </div>
      <div class="table-content">
        <div class="party-table">
            <el-table border style="width: 100%;height:100%" height="100%" :data="list">
                <el-table-column type="index" width="120" label="序号"></el-table-column>
                <el-table-column label="mac地址" prop="macUrl"></el-table-column>
                <el-table-column label="所属单位" prop="unit"></el-table-column>
                <el-table-column label="机顶盒状态" prop="state"></el-table-column>
            </el-table>
        </div>
        <party-pagination/>
      </div>
  </div>
</template>
<script>
import { partyPagination } from '@/components/index'
import area from '@/config/area'
export default {
    data(){
        return{
            areaOptions: area,
            unitOptions: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            stateOptions:[{
                value: '1',
                label: '待激活'
                },{
                value: '2',
                label: '禁用'
                },{
                value: '3',
                label: '启用'
            }],
            form:{
                unit:'',
                state:'',
                area:[]
            },
            list: [
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 
                {unit:'中国博物馆', state: '禁用',name: '王小虎',  macUrl: '00:71:cc:d3:11'}, 

            ]
        }
    },
    components:{ partyPagination},
    mounted(){

    },
    methods:{
        handleSubmit(){

        },
        handleReset(){
            this.form = {}
        }
    }
}
</script>
<style lang="less">
@import "../../../style/dialog.less";
@import '../../../style/table.less';
@import '../../../style/pagination.less';
</style>