<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"
            :props="defaultProps"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <div class="btn-group">
            <el-button type="primary" @click="onSearch">查询</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="tableData">
          <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 { getAreas } from "@/config/area.js";
export default {
  data() {
    return {
      page: { currentPage: 1, pageSize: 10, total: 0 },
      areaOptions: [],
      defaultProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      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: []
      },
      tableData: [
        {
          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() {
    this.getAreas();
    // this.onSearch();
  },
  methods: {
    getAreas() {
      getAreas().then(res => {
        this.areaOptions = res;
      });
    },
    // 查询
    onSearch() {
      this.page.currentPage = 1;
      this.getTableData();
    },
    // 获得数据接口
    getTableData() {
      let vm = this;
      let param = {
        _index: this.page.currentPage,
        _size: this.page.pageSize,
        orgId: this.selectAreaId
      };
      vm.$https(
        {
          url: "interaction/getList",
          method: "post",
          authType: this.backToken
        },
        vm.$qs.stringify(param)
      )
        .then(res => {
          console.log(res.data.body);
          let data = res.data.body;
          vm.page.total = data.total;
          // vm.tableData = data.records;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleReset() {
      this.form = {};
    },
    // 分页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    }
  }
};
</script>
<style lang="less">
@import "../../../style/table.less";
@import "../../../style/pagination.less";
</style>