<template>
  <div>
    <div class="basicHeader">
      <el-button
        class="search-button"
        icon="el-icon-plus"
        type="success"
        @click="install()"
      >
        添加监测项
      </el-button>
      <el-button
        class="search-button"
        icon="el-icon-plus"
        type="success"
        @click="oneTouch()"
      >
        一键生成
      </el-button>
      <el-button class="search-button" icon="el-icon-s-fold" @click="senior()">
        高级功能
      </el-button>

      <div class="videoRight">
        <el-button icon="el-icon-download" type="primary">导入</el-button>
        <el-button icon="el-icon-upload2" type="primary">导出</el-button>
      </div>
    </div>
    <div style="margin: 0 15px">
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-style="headClass"
        :height="tableHeight"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column
          prop="numCode"
          label="变量编码"
          width=""
        ></el-table-column>
        <el-table-column
          prop="meterLevel"
          label="计量级别"
          width=""
        ></el-table-column>
        <el-table-column
          prop="category"
          label="类别"
          width=""
        ></el-table-column>
        <el-table-column
          prop="accessRd"
          label="支路"
          width=""
        ></el-table-column>
        <el-table-column prop="subItem" label="分项" width=""></el-table-column>
        <el-table-column
          prop="department"
          label="部门"
          width=""
        ></el-table-column>
        <el-table-column
          prop="partition"
          label="分区"
          width=""
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="Update(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              @click="Delete(scope.$index, scope.row)"
              type="text"
              size="small"
              style="color: red"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import { useStore } from 'vuex'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'consumConfig',
  components: {},
  props: {},
  setup() {
    // const store = useStore()
    
    const install = () => {
      console.log('')
    }
    const oneTouch = () => {
      console.log('')
    }
    const senior = () => {
      console.log('')
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    const tableHeight = ref('200')
    tableHeight.value = window.innerHeight - 260 + 'px'
    window.onresize = function () {
      tableHeight.value = window.innerHeight - 260 + 'px'
    }

    return {
      tableHeight,
      headClass,
      activeName: ref('consBasic'),
      install, //添加监测项事件
      oneTouch, //一键生成事件
      senior, //高级功能事件
      tableData: [
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
        {
          numCode: '05-01',
          meterLevel: 'Tom',
          category: '11:01:08',
          accessRd: '',
          subItem: '',
          department: '',
          partition: '',
        },
      ],
    }
  },
})
</script>