<template>
  <div class="app-container handleDetailPage">
    <!-- 头部标题start -->
    <div class="filter-container mb-20">
      <div class="left">
        <div class="basicTit" style="padding-left: 20px">
          <span>工单详情</span>
          <el-button class="goBack" @click="goBack">返回</el-button>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" @click="addItem()">指派</el-button>
        <el-button type="danger" @click="cheDan()">撤单</el-button>
      </div>
    </div>
    <!-- 头部标题end -->

    <!-- 图文区块 -->
    <div class="filter-container handleTestBlock">
      <div class="left">
        <div class="jianxiuSec mb-10">
          <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 class="desSec">
          <span>提单人：admin_enn</span>
          <span>创建时间：2021-09-16 16:56</span>
          <span>期望完成时间：2021-09-17 16:56</span>
          <br />
          <span>备注：测试</span>
        </div>
      </div>

      <div class="right">
        <div class="siteBlock">
          <div>
            <p>站点</p>
            <p>万众实业变电站</p>
          </div>
        </div>
        <div class="companyBlock">
          <div>
            <p>站点</p>
            <p>万众实业变电站</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 图文区块end -->

    <!-- 当前处理人 -->
    <div class="handlerBlock">
      <div>当前处理人 </div>
      <el-button icon="el-icon-s-custom">运维管理员123</el-button>
    </div>
    <!-- 当前处理人end -->

    <!-- 流程记录 -->
    <div class="handlerBlock">
      <div class="record">
        流程记录
        <span>
          隐藏
          <i class="el-icon-arrow-down"></i>
        </span>
      </div>
      <div class="" style="padding-left: 20px">
        2021-09-16 16:56 
        <b>admin_enn</b>  
        提交工单
      </div>
      <div class="imgSquare">
          <img src="@/assets/images/logo.png" alt="">
      </div>
       
    </div>
    <!-- 流程记录 end -->

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

<script>
import HandleDialog from './handleDialog'

export default {
  name: 'HandleDetail',
  props: {
    pageShow
    
  },

  components: { HandleDialog },

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

    // 撤单操作
    cheDan() {
      this.tableItem = {
        id: '',
        workCode: '',
        workDes: '',
        stationName: '',
        siteList: [],
        done: '',
        guaZai: '',
      }
      this.dialogTitle = '撤单'
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['handleDialog'].showDialog = true
      })
    },

    // // 撤单操作
    // editRow(row) {
    //   console.log(row)
    //   this.tableItem = row
    //   this.dialogTitle = '撤单'
    //   this.showDialog = true
    //   this.$nextTick(() => {
    //     this.$refs['handleDialog'].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>
