<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="pageTitle"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <uni-section :title="pageTitle" type="line">
      <uni-collapse>
        <uni-collapse-item
          :open="index === 0"
          :typeOpen="1"
          :show-animation="true"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <template v-slot:title>
            <view class="modle-info">
              <view class="modle-line">
                <view>
                  {{ item.planName }}
                  <span
                    class="line-status"
                    :class="{ error: item.resultStatus > 1 }"
                    v-if="item.resultStatus != 0"
                    >{{ ['', '正常', '异常', '异常'][item.resultStatus] }}</span
                  >
                </view>
                <view>{{ item.workOrderCode }}</view>
              </view>
              <view class="modle-line"> </view>
            </view>
          </template>
          <CellInfo label="计划单号：" :value="item.planCode"></CellInfo>
          <CellInfo
            label="巡点检人员："
            :value="item.executeUserName"
            v-if="pageTitle == '巡点检记录'"
          ></CellInfo>
          <template v-if="pageTitle == '保养记录'">
            <!-- <CellInfo label="保养负责人"></CellInfo> -->
            <CellInfo
              label="保养人员："
              :value="item.executeUserName"
            ></CellInfo>
          </template>
          <template v-if="pageTitle == '维修记录'">
            <CellInfo
              label="报修记录单号："
              :value="item.repairsCode"
            ></CellInfo>
            <CellInfo
              label="维修人员："
              :value="item.executeUserName"
            ></CellInfo>
          </template>
          <CellInfo label="工单生成时间：" :value="item.createTime"></CellInfo>
          <CellInfo label="开工时间：" :value="item.acceptTime"></CellInfo>
          <CellInfo label="报工时间：" :value="item.finishTime"></CellInfo>
        </uni-collapse-item>
      </uni-collapse>

      <u-empty
        style="padding: 40rpx 0"
        textSize="32rpx"
        text="暂无数据"
        v-if="!tableData.length"
      ></u-empty>
    </uni-section>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import { postJ } from '@/utils/api.js'
let [page, size, isEnd] = [1, 20, true]
const workOrderTypeOpt = {
  巡点检记录: 1,
  保养记录: 2,
  维修记录: 3
}
export default {
  components: {
    CellInfo
  },
  data () {
    return {
      pageTitle: '',
      tableData: [],
      info: {}
    }
  },
  onLoad (option) {
    this.info = JSON.parse(decodeURIComponent(option.info))
    this.pageTitle = option.pageTitle
  },
  onShow () {
    page = 1
    this.getData()
  },
  onReachBottom () {
    if (isEnd) {
      return
    }
    page++
    this.getData()
  },
  methods: {
    getData () {
      postJ(
        this.apiUrl + `/workOrder/inspectRecordPage?page=${page}&size=${size}`,
        {
          workOrderType: workOrderTypeOpt[this.pageTitle],
          equiCode: this.info.assetCode
        }
      ).then(res => {
        if (res.success) {
          if (page === 1) {
            this.tableData = res.data.records
          } else {
            this.tableData.push(...res.data.records)
          }
          isEnd = this.tableData.length >= res.data.total
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.mainBox {
  /deep/.uni-collapse-item__title {
    background-color: rgba(215, 215, 215, 1);
  }
  /deep/.uni-collapse-item__wrap {
    background-color: rgba(244, 244, 244, 1);
  }
  .modle-info {
    .modle-line {
      width: 94%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      font-size: 28rpx;
      .line-status {
        display: inline-block;
        background: rgba(242, 242, 242, 1);
        padding: 6rpx 12rpx;
        border-radius: 20rpx;
        margin-left: 20rpx;
        color: #333333;
        font-size: 20rpx;

        &.error {
          background: rgba(245, 154, 35, 1);
          color: #fff;
        }
      }
    }
    .modle-line:last-child {
      color: #999;
      padding: 0rpx 0 20rpx;
    }
  }
}
</style>
