<template>
  <!-- 运维管理 -->
  <view class="">
    <TabMain :tabList="chartsTabList"></TabMain>
    <workOrder class="workOrder"></workOrder>

    <view class="box-bar">
      <view class="title">
        <image src="@/static/u24.svg" class="icon" mode=""></image>
        <view class="text"> 我的工单({{ orderNum }}) </view>
      </view>
      <template v-if="order_list.length > 0">
        <view
          class="order-list"
          v-for="(item, index) in order_list"
          :key="index"
          @click="goDetails(item)"
        >
          <view class="s1 item">
            <view class="b1">
              {{ item.planName }}
            </view>
            <view class="b2">
              {{ item.workOrderCode }}
            </view>
          </view>
          <view class="s2 item">
            <view class="b1">
              {{ item.type.descp }}
            </view>
            <view class="b2">
              {{ item.executeUserName }}
            </view>
          </view>
          <view class="s3 item">
            <view class="b1">
              {{ dict.status[item.status] }}
            </view>
            <view class="b2">
              {{ item.createTime }}
            </view>
          </view>
        </view>
      </template>
      <view class="u-empty" v-else>
        <u-empty mode="data"> </u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import TabMain from './components/TabMain.vue'
import workOrder from './components/work_order.vue'
import { post } from '@/utils/api.js'
export default {
  components: {
    TabMain,
    workOrder
  },
  data () {
    return {
      chartsTabList: ['平均修复时间MTTR', '平均故障间隔时间MTBF'],
      order_list: [],
      orderNum: '',
      dict: {
        status: {
          0: '待接收',
          1: '执行中',
          2: '已完成'
        }
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      post(this.apiUrl + '/home/page/operation/myToBeDoneWorkOrderList', null, null, false).then(
        res => {
          if (res.success) {
            this.order_list = res.data.records
            this.orderNum = res.data.total
          }
        }
      )
    },
    // 去详情
    goDetails (item) {
      let route = ''
      switch (item.type.code) {
        // 巡点检
        case 1: {
          route = '/pages/tour_tally/detail/detail'
          break
        }
        // 保养
        case 2: {
          route = '/pages/maintenance/detail/detail'
          break
        }
        // 维修
        case 3: {
          route = '/pages/maintain_service/detail/detail'
          break
        }
        // 盘点
        case 4: {
          route = 'pages/warehouse/workOrder/details/details'
          break
        }
        default:
          break
      }
      if (!route) {
        return
      }
      let par = {
        id: item.id,
        workOrderId: item.id,
        workOrderCode: item.workOrderCode
      }
      par = this.URLSearchParams(par)
      uni.navigateTo({
        url: route + '?' + par
      })
    }
  }
}
</script>

<style scoped lang="scss">
.u-empty {
  padding: 30rpx;
}
.workOrder {
  margin-top: 20rpx;
}
.box-bar {
  background-color: #fff;
  margin-top: 20rpx;
  .title {
    display: flex;
    padding: 20rpx;
    align-items: center;
    .text {
      font-size: 32rpx;
      color: #333333;
    }
    .icon {
      width: 37rpx;
      height: 37rpx;
      margin-right: 10rpx;
    }
  }
}
.order-list {
  background-color: #fff;
  & + .order-list {
    border-top: 1px solid #f2f2f2;
  }
  padding: 15rpx;
  .item {
    font-size: 28rpx;
    color: rgb(170, 170, 170);
    display: flex;
    justify-content: space-between;
    & + .item {
      margin-top: 15rpx;
    }
    &.s1 {
      .b1 {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
    &.s3 {
      .b1 {
        background: #f1f1f1;
        border-radius: 10rpx;
        padding: 3rpx 5rpx;
      }
    }
  }
}
</style>
