<template>
  <div class="app-container">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
      <div>
        <div class="filter-item">
          站点:
          <el-select v-model="region" placeholder="请选择" style="width: 200px">
            <el-option label="站点一" value="1"></el-option>
            <el-option label="站点二" value="2"></el-option>
          </el-select>
        </div>

         <div class="filter-item">
          工单来源:
          <el-select v-model="workFrom" placeholder="请选择" style="width: 200px">
            <el-option label="来源一" value="1"></el-option>
            <el-option label="来源二" value="2"></el-option>
          </el-select>
        </div>

         <div class="filter-item">
          当前处理人:
          <el-select v-model="dealWorker" placeholder="请选择" style="width: 200px">
            <el-option label="处理人一" value="1"></el-option>
            <el-option label="处理人二" value="2"></el-option>
          </el-select>
        </div>

        <el-button type="primary" icon="el-icon-search" class="search-button">
          搜索
        </el-button>

        <el-button icon="el-icon-plus" type="success" @click="addItem()">
          新增
        </el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- tab切换 -->
    <el-button
      class="search-button timeTab"
      @click="num2 = 0"
      :type="num2 == 0 ? 'primary' : ''"
      >曲线</el-button
    >
    <el-button
      class="search-button timeTab"
      @click="num2 = 1"
      :type="num2 == 1 ? 'primary' : ''"
      style="margin-left: 0 !important"
      >表格</el-button
    >
    <!-- tab切换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="stationCode"
        label="台区编号"
        width=""
      ></el-table-column>
      <el-table-column
        prop="stationAddress"
        label="台区地址"
        width=""
      ></el-table-column>
      <el-table-column prop="pointNum" label="点位数量" width="">
        <template #default="scope">
          <router-link
            style="margin-right: 15px"
            :to="{ path: 'siteList', query: { id: scope.row.stationName } }"
          >
            {{ scope.row.pointNum }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceNum"
        label="挂载设备数量"
        width="350"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            type="text"
            size="small"
            class="delete-text"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      v-if="showDialog"
      ref="dialogComponent"
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import DialogComponent from './dialogComponent'
// import { mapGetters } from "vuex";

export default {
  // name: "Dashboard",
  // computed: {
  //   ...mapGetters(["name"]),
  // },

  components: { DialogComponent },

  data() {
    return {
      region: '',
      dealWorker:'',
      workFrom:'',

      num2:0,
      showDialog: false,

      input: '请输入台区名称',
      tableData: [
        {
          stationName: '台区1',
          stationCode: 'tq02',
          stationAddress: '青浦区徐泾镇',
          pointNum: '8',
          deviceNum: '10',
        },
        {
          stationName: '台区1',
          stationCode: 'tq02',
          stationAddress: '青浦区徐泾镇',
          pointNum: '8',
          deviceNum: '10',
        },
        {
          stationName: '台区1',
          stationCode: 'tq02',
          stationAddress: '青浦区徐泾镇',
          pointNum: '8',
          deviceNum: '10',
        },
        {
          stationName: '台区1',
          stationCode: 'tq02',
          stationAddress: '青浦区徐泾镇',
          pointNum: '8',
          deviceNum: '10',
        },
      ],
    }
  },
  methods: {
    // 表头样式设置
    headClass() {
      return 'background:#FAFAFA;'
    },

    //自定义列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      row, column, rowIndex
      if (columnIndex === 3) {
        return `color:#0284E8;`
      } else {
        return ''
      }
    },

    // 添加操作
    addItem() {
      this.tableItem = {
        id: '',
        stationName: '',
        stationCode: '',
        stationAddress: '',
        siteList: [],
        done: '',
        guaZai: '',
      }
      this.dialogTitle = '新增'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true
      })
    },
    // 编辑操作
    editRow(row) {
      console.log(row)
      this.tableItem = row
      this.dialogTitle = '编辑'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true
      })
    },
    // 关闭操作
    closeDialog(flag) {
      if (flag) {
        // 重新刷新表格内容
        this.fetchData()
      }
      this.showDialog = false
    },

    // handleEdit(index, row) {
    //   console.log(index, row);
    // },

    //删除操作
    handleDelete(index, row) {
      console.log(index, row)
      alert(index)
    },
  },
}
</script>

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