<template>
  <div class="app-container handleDetailPage">


    <!-- 头部标题start -->
    <div class="filter-container mb-20">
      <div class="left">
        <div class="basicTit">
          <span>工单详情</span>
          <el-button class="goBack" @click="goBack">返回</el-button>
        </div>
      </div>
      <div class="right">
        <el-button type="primary">指派</el-button>
         <el-button type="danger">撤单</el-button>
      </div>
    </div>
    <!-- 头部标题end -->

    <!-- 图文区块 -->
    <div class="filter-container handleTestBlock">


        <div class="left">
            <div class="jianxiuSec">
                <div class="left-img">
                    <img src="@/assets/images/jianxiuImg.png" alt="">
                </div>
                <div class="right-des">
                   <div>工单来源：报修编号：TSRP23_20210916165634493</div>
                   <h2 class="tit">测试</h2>
                   <div class="bottomStatus">
                       状态:
                       <span style=" color: #52c41a">待指派</span>
                       <span class="workStatusBtn">超时</span>
                    </div>
                </div>
            </div>
        </div>


        
        <div class="right">dsds</div>
    </div>

    <!-- 图文区块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'

export default {
  name: 'HandleDetail',

  components: { DialogComponent },

  data() {
    return {
      pageShow: true,
      region: '',
      dealWorker: '',
      workFrom: '',
      num2: 0,
      showDialog: false,
    }
  },
  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>
