<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 -->

    <!-- tab切换 -->
    <div class="tab-section">
      <el-button
        class="search-button timeTab"
        @click="num2 = 0"
        :type="num2 == 0 ? 'primary' : ''"
      >
        待抢单(0)
      </el-button>
      <el-button
        class="search-button timeTab"
        @click="num2 = 1"
        :type="num2 == 1 ? 'primary' : ''"
      >
        待指派(0)
      </el-button>
      <el-button
        class="search-button timeTab"
        @click="num2 = 2"
        :type="num2 == 2 ? 'primary' : ''"
      >
        待接单(0)
      </el-button>
      <el-button
        class="search-button timeTab"
        @click="num2 = 3"
        :type="num2 == 3 ? 'primary' : ''"
      >
        待处理(0)
      </el-button>
      <el-button
        class="search-button timeTab"
        @click="num2 = 4"
        :type="num2 == 4 ? 'primary' : ''"
      >
        待关单(0)
      </el-button>
      <el-button
        class="search-button timeTab"
        @click="num2 = 5"
        :type="num2 == 5 ? 'primary' : ''"
      >
        已完成(0)
      </el-button>
      <el-checkbox v-model="checked2">显示我的代办</el-checkbox>
    </div>

    <!-- tab切换end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column
        fixed
        prop="workCode"
        label="编号"
        width="260px"
      ></el-table-column>
      <el-table-column
        prop="workDes"
        label="工作描述"
        width=""
      ></el-table-column>
       <el-table-column prop="workType" label="工单类型" width="">
        <template #default="scope">
          <div>
            <img src="@/assets/images/jianxiu.svg" alt="" class="jianxiu">
             {{ scope.row.workType }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="stationName"
        label="站点"
        width=""
      ></el-table-column>
     
      <el-table-column
        prop="status"
        label="状态"
        width="350"
      >
         <template #default="scope">
          <div>
             {{ scope.row.status }}
             <span class="workStatusBtn">超时</span>
             <!-- <el-button size="mini" round>超时</el-button> -->
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        width=""
      ></el-table-column>

      <el-table-column
        prop="handleMan"
        label="当前处理人"
        width=""
      ></el-table-column>

      
      <el-table-column fixed="right" label="操作" width="">
        <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>
  <div v-else>
    sds
  </div>
</template>

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

export default {
  // name: "Dashboard",
  // 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: {
    // 表头样式设置
    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>
