<template>
  <!-- 设备主管 -->
  <view class="">
    <TabMain :tabList="chartsTabList"></TabMain>
    <productionLine class="productionLine"></productionLine>
    <view class="box-bar">
      <view class="title-wrap">
        <view class="title">
          <image src="@/static/u24.svg" class="icon" mode=""></image>
          <view class="text"> 待办工单({{ orderNum }}) </view>
        </view>
        <view class="mor" @click="handlMor"> 更多 </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 productionLine from './components/productionLine.vue'
import { post } from '@/utils/api.js'
export default {
  components: {
    TabMain,
    productionLine
  },
  data () {
    return {
      chartsTabList: ['平均修复时间MTTR', '平均故障间隔时间MTBF'],
      order_list: [],
      orderNum: '',
      dict: {
        status: {
          0: '待接收',
          1: '执行中',
          2: '已完成'
        }
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      post(this.apiUrl + '/home/page/system/myToBeDoneWorkOrderList').then(
        res => {
          if (res.success) {
            this.order_list = res.data.records
            this.orderNum = res.data.total
          }
        }
      )
    },
    handlMor () {
      uni.navigateTo({
        url: '/pages/home/backlog/backlog'
      })
    },
    // 去详情
    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;
}
.marginTop {
  margin-top: 20rpx;
}
.order-list {
  padding: 0 30rpx;
  margin: 0 auto;
  background-color: #ffffff;
}
.productionLine {
  margin-top: 20rpx;
}
.box-bar {
  background-color: #fff;
  margin-top: 20rpx;
}
.title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .mor {
    padding-right: 20rpx;
    font-size: 32rpx;
    color: #999;
  }
  .title {
    display: flex;
    padding: 20rpx;
    align-items: center;
    .text {
      font-size: 36rpx;
      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 {
        display: flex;
        .c1 {
          color: #333333;
          font-size: 28rpx;
          font-weight: bold;
          margin-right: 10rpx;
        }
        .bq {
          color: #7f7f7f;
          font-size: 28rpx;
          background-color: #f2f2f2;
          border-radius: 10rpx;
          padding: 0 10rpx;
        }
      }
    }
    &.s3 {
      .b1 {
        background: #f1f1f1;
        border-radius: 10rpx;
        padding: 3rpx 5rpx;
      }
    }
  }
}
</style>
