<template>
  <div class='app-container'>
    <!-- 返回start -->
    <div class='siteTitle'>
      <el-button class='goBack' @click='goBack'>返回</el-button>
      台区1-站点列表
    </div>
    <!-- 返回end -->

    <!-- 表格start -->
    <el-table
      :data='tableData'
      border
      stripe
      :header-cell-style='headClass'
      :cell-style='cellStyle'
    >
      <el-table-column fixed prop='stationName' label='站点名称' width=''>
      </el-table-column>
      <el-table-column prop='stationStatus' label='状态' width=''>
        <template #default>
          <el-avatar class='status'></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop='deviceName' label='设备名称' width=''>
      </el-table-column>
      <el-table-column prop='siteNo' label='编号' width=''> </el-table-column>
      <el-table-column prop='eddy' label='额定电压' width=''> </el-table-column>
      <el-table-column prop='eddl' label='额定电流' width=''> </el-table-column>
      <el-table-column prop='dlfzl' label='电流负载率门限' width=''>
      </el-table-column>
       <el-table-column fixed='right' label='操作' width='250'>
        <template #default="scope">
           <el-button @click='handleClick(scope.row)' type='text' size='small'>查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->
  </div>
</template>

<script>
import { defineComponent, ref} from 'vue'

export default defineComponent({
   name: 'SiteList',
    props: ['pageShow'],

  setup(props, context) {
    const showDialog = ref(false)
    const input = ref('请输入台区名称')
    const tableData = ref([
      {
          stationName: '测试站点1',
          stationStatus: '~',
          deviceName: '电力监测设备',
          siteNo: 'cssb1',
          eddy: '10',
          eddl: '12',
          dlfzl: '80%',
        },
        {
          stationName: '测试站点1',
          stationStatus: '~',
          deviceName: '视频监测设备',
          siteNo: 'cssb1',
          eddy: '10',
          eddl: '12',
          dlfzl: '80%',
        },
        {
          stationName: '测试站点1',
          stationStatus: '~',
          deviceName: '电力监测设备',
          siteNo: 'spjcsdb1',
          eddy: '10',
          eddl: '12',
          dlfzl: '80%',
        },
        {
          stationName: '测试站点1',
          stationStatus: '~',
          deviceName: '电力监测设备',
          siteNo: 'cssb1',
          eddy: '10',
          eddl: '12',
          dlfzl: '80%',
        },
    ])

   const goBack=()=> {
      context.emit('func')
      // this.$router.replace('/stationManage/index');
    }
    // 表头样式设置
   const headClass=()=> {
      return 'background:#FAFAFA;';
    }

    //自定义列样式
    const cellStyle=({ row, column, rowIndex, columnIndex })=> {
      row, column, rowIndex
      if (columnIndex === 1) {
        return `color:#04F21C`;
      } else {
        return '';
      }
    }
    //查看
   const  handleClick=(row)=> {
         alert('查看对应站点（页面跳转）')
        console.log(row);
      }

    // 添加操作
   const addItem=()=> {
      this.tableItem = {
        id: '',
        stationName: '',
        stationStatus: '',
        deviceName: '',
        siteList: [],
        done: '',
        guaZai: '',
      };
      this.dialogTitle = '新增';
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true;
      });
    }

     return {
      tableData,
      input,
      showDialog,
      // dialogComponent,


      headClass,
      cellStyle,
      addItem,
      goBack,
      handleClick,

    }
    
  },
})
</script>


<style lang='scss' scoped>
</style>
