<template>
  <div class="mod-config">
    <el-descriptions title="工单详情" direction="vertical" :column="column" size="mini" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="doOperate">审批</el-button>
      </template>
      <el-descriptions-item label="工单ID">
        <el-tag size="small">{{ ticketsData.ticketsId }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="小车类型">
        {{ ticketsData.carName }}
      </el-descriptions-item>
      <el-descriptions-item label="异常类型">
        {{ ticketsData.errorType }}
      </el-descriptions-item>
      <el-descriptions-item label="合同编号">{{ ticketsData.contractNumber }}</el-descriptions-item>
      <el-descriptions-item label="客户">{{ ticketsData.clientName }}</el-descriptions-item>
      <el-descriptions-item label="故障描述">{{ ticketsData.description }}</el-descriptions-item>
      <el-descriptions-item label="部门对接人">{{ ticketsData.deptPeople }}</el-descriptions-item>
      <el-descriptions-item label="客户联系电话">{{ ticketsData.deptPhone }}</el-descriptions-item>
      <el-descriptions-item label="创建者">{{ ticketsData.createUserId }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ ticketsData.createTime }}</el-descriptions-item>
      <el-descriptions-item label="是否验收">{{ ['否', '是'][Number(ticketsData.isCheck)] }}</el-descriptions-item>
      <el-descriptions-item label="工单状态">{{ statusOpt | findByValue(ticketsData.status) }}</el-descriptions-item>
      <el-descriptions-item label="工单关闭时间">{{ ticketsData.updateTime }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        column: 0,
        ticketsData: {},
        statusOpt: [{value: '0', label: '未开始'}, {value: '1', label: '已指派'}, {value: '2', label: '处理中'}, {value: '3', label: '已完成'}]
      }
    },
    created () {
      if (this.isMobile() || window.innerWidth < 768) {
        this.column = 2
      } else {
        this.column = 4
      }
      this.getDataList()
    },
    methods: {
      isMobile() {
        const userAgentInfo = navigator.userAgent;
        const mobileAgents = [
          "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"
        ];
        let isMobile = false;
        for (let i = 0; i < mobileAgents.length; i++) {
          if (userAgentInfo.indexOf(mobileAgents[i]) > -1) {
            isMobile = true;
            break;
          }
        }
        return isMobile;
      },
      // 获取数据列表
      getDataList () {
        this.$http({
          url: this.$http.adornUrl(`/tickets/tickets/info/${this.$route.query.id}`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.ticketsData = data.tickets
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      doOperate () {
        this.$confirm(`确定进行审批操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/flw/instance/completeFlow'),
            method: 'post',
            data: this.$http.adornData({ticketsId: this.ticketsData.ticketsId, processInstance: this.ticketsData.processInstance})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.$router.push('/tickets-tickets')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped>
.mod-config {
  padding: 30px 30px;
}
.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>