<template>
  <div class="app-container workManage" v-if="this.pageShow">
    <!-- 筛选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 -->

  



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

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

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

  components: { DialogComponent },

  data() {
    return {
      pageShow:true,
      region: '',
      dealWorker: '',
      workFrom: '',
      num2: 0,
      showDialog: false,

      input: '请输入编号',
      tableData: [
        {
          workCode: 'TSRP23_20210916165634493',
          workDes: '测试',
          workType: '检修',
          stationName: '	万众实业变电站',
          status: '待指派',
          createTime: '10',
           handleMan: '运维管理员',
        },
        
      ],
    }
  },
  methods: {

    goDhandlePage(){
      this.pageShow=!this.pageShow
    },
    // 表头样式设置
    headClass() {
      return 'background:#FAFAFA;'
    },

    //自定义列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      row, column, rowIndex
      if (columnIndex === 2||columnIndex === 0) {
        return `color:#89b7eb;`
      } else {
        return ''
      }
    },

    // 添加操作
    addItem() {
      this.tableItem = {
        id: '',
        workCode: '',
        workDes: '',
        stationName: '',
        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>
