<template>
  <view>
    <view class="top_container">
      <view class="report_status">{{
        flag == "cq" ? "超期待处理" : record.reportStatusName
      }}</view>
      <view class="report_status"
        >计划编号:{{ record.planWorkOrderNo || "" }}</view
      >
      <view
        class="btn"
        v-if="record.reportStatusId == '56' && !flag"
        @click="toPatrol()"
        >立即巡检</view
      ><!-- 待处理 -->
      <view class="btn" v-else-if="flag == 'cq'" @click="toEvaluate()"
        >关闭巡检</view
      ><!-- 超期待处理 -->
    </view>
    <view class="detail_name_container">
      <view
        :class="[current_num == 1 ? 'current' : '']"
        @click="changecurrent(1)"
        >基本信息</view
      >
      <view
        :class="[current_num == 2 ? 'current' : '']"
        @click="changecurrent(2)"
        >巡检项目</view
      >
      <view
        v-if="record.reportStatusId == '167'"
        :class="[current_num == 3 ? 'current' : '']"
        @click="changecurrent(3)"
        >巡检关闭</view
      >
    </view>
    <view>
      <view class="myContainer myContentBox">
        <view class="top_container detail_list_top">
          <view class="report_status">设备信息</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">设备单号</view>
          <view class="list_item_content content_right">{{
            record.deviceSerialno
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">设备名称</view>
          <view class="list_item_content content_right">{{
            record.deviceName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">规格型号</view>
          <view class="list_item_content content_right">{{
            record.deviceModel
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">使用部门</view>
          <view class="list_item_content content_right">{{
            record.useDeptName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">安装地点</view>
          <view class="list_item_content content_right">{{ record.site }}</view>
        </view>
      </view>
    </view>
    <view v-if="current_num == 1">
      <view class="myContainer myContentBox">
        <view class="top_container detail_list_top">
          <view class="report_status">巡检概况</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">巡检单号</view>
          <view class="list_item_content content_right">{{
            record.recordWorkOrderNo
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">巡检计划</view>
          <view class="list_item_content content_right">{{
            record.patrolPlanName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">巡检名称</view>
          <view class="list_item_content content_right">{{
            record.patrolRecordName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">巡检部门</view>
          <view class="list_item_content content_right">{{
            record.patroldeptName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">巡检人</view>
          <view class="list_item_content content_right">{{
            record.patrolPersonName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">巡检人电话</view>
          <view class="list_item_content content_right">{{
            record.cellphone && record.cellphone != "undefined"
              ? record.cellphone
              : ""
          }}</view>
        </view>
      </view>
      <!-- 巡检签到（待验收、已验收） -->
      <view v-if="record.reportStatusId != '56' && record.reportStatusId">
        <view class="myCon myContentBox">
          <view class="top_container detail_list_top">
            <view class="report_status">巡检签到</view>
          </view>

          <view
            class="img-wrap"
            v-for="(items, index) in signInImage"
            :key="index"
          >
            <view
              class="img-box"
              v-if="items.filePath && items.filePath != 'undefined'"
            >
              <img :src="config.imgURL + items.filePath" />
            </view>
          </view>
        </view>
        <view class="myCon myContentBox">
          <view class="top_container detail_list_top">
            <view class="report_status">巡检结果</view>
          </view>
          <view class="resultContent">{{ record.resultContent }}</view>
          <view
            class="img-wrap"
            v-for="(items, index) in initFileList"
            :key="index"
          >
            <view class="img-box">
              <img :src="config.imgURL + items.filePath" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="current_num == 2">
      <view
        class="myContentBox myContainer"
        v-for="(items, index) in details"
        :key="index"
      >
        <view class="top_container detail_list_top">
          <view class="report_status"
            >[{{ items.serialNo }}]-{{ items.deviceName }}</view
          >
          <!-- <view class="report_status">停机时间:{{items.offTime}}</view> -->
        </view>
        <view style="clear: both">
          <view class="multi_list_item">
            <view class="list_item list_item-">
              <view class="list_item_name">巡检项目:</view>
              <view class="list_item_content">{{ items.projectName }}</view>
            </view>
            <view class="list_item list_item-">
              <view class="list_item_name">巡检结果:</view>
              <view
                class="list_item_content"
                v-if="items.result == 2"
                style="color: red"
                >异常</view
              >
              <view
                class="list_item_content"
                v-else-if="items.result == 1"
                style="color: #3382ff"
                >正常</view
              >
            </view>
          </view>

          <view class="list_item">
            <view class="list_item_name">巡检标准:</view>
            <view class="list_item_content">{{ items.function }}</view>
          </view>
          <view class="list_item">
            <view class="list_item_name">巡检记录:</view>
            <view class="list_item_content">{{ items.content || "" }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="current_num == 3">
      <view class="myContainer myContentBox">
        <view class="list_item">
          <view class="list_item_name">关闭时间</view>
          <view class="list_item_content content_right">{{
            record.completeTime
          }}</view>
        </view>
      </view>
      <view class="myContainer myContentBox">
        <view class="top_container detail_list_top">
          <view class="report_status">关闭原因</view>
        </view>
        <view class="resultContent" style="padding-bottom: 20upx">{{
          record.closeReason || ""
        }}</view>
      </view>
    </view>
    <view class="goHome" @click="goMain()">
      <img src="../../static/img/gohome.png" />
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { config } from "../../request/js/config.js";
export default {
  data() {
    return {
      config: config,
      current_num: 1,
      id: "",
      // data_result:{
      record: {},
      details: [],
      signInImage: [],
      initFileList: [],
      // },
      flag: "",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.flag = option.flag; //判断是否超期
    if (this.id == undefined) {
      uni.reLaunch({
        url: "eqPatrol",
      });
      return false;
    }
    this.setpatrolSignInImage([]);
    this.setpatrolDetails({});
    this.setpatrolStep3({});
    var _this = this;
    this.$http
      .request({
        url: "/apis/patrolRecord/recordDetail",
        params: {
          id: option.id,
        },
      })
      .then((res) => {
        if (res.data.code == 0) {
          this.record = res.data.record;
          this.details = res.data.details;
          this.signInImage = res.data.signInImage;
          this.initFileList = res.data.initFileList;
        }
      })
      .catch((err) => {
        uni.showToast({
          title: "获取信息失败",
          duration: 2000,
          icon: "none",
        });
      });
  },
  methods: {
    ...mapMutations([
      "setpatrolDetails",
      "setpatrolSignInImage",
      "setpatrolStep3",
    ]),
    changecurrent(num) {
      this.current_num = num;
    },
    //点击立即巡检
    toPatrol() {
      uni.navigateTo({
        url: "patrolStep1?id=" + this.id,
      });
    },
    //验收评价
    toEvaluate() {
      uni.navigateTo({
        url: "patrolEvaluate?id=" + this.id + "&flag=cq",
      });
    },
  },
  onBackPress(options) {
    //取消默认的返回事件.
    // uni.navigateTo({
    // 	url: "eqPatrol"
    // });
    // return true;
  },
};
</script>
<style>
page {
  background-color: #f5f7f5;
}
</style>
<style scoped>
.top_container {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 30upx 200upx 30upx 30upx;
  box-sizing: border-box;
  color: #333;
  box-shadow: 2px 2px 20upx rgba(0, 0, 0, 0.1);
}
.detail_list_top {
  border-bottom: 1px solid #ededed;
  box-shadow: none;
  padding-right: 30upx;
}
.report_status {
  line-height: 40upx;
  word-break: break-all;
  font-size: 28upx;
}
.btn {
  position: absolute;
  width: 160upx;
  height: 68upx;
  text-align: center;
  line-height: 68upx;
  border-radius: 10upx;
  background-color: #3382ff;
  color: #fff;
  right: 30upx;
  margin: auto;
  top: 0;
  bottom: 0;
  font-size: 28upx;
}
.detail_name_container {
  position: relative;
  width: 100%;
  padding-left: 30upx;
  height: 100upx;
  box-sizing: border-box;
  color: #333;
}
.detail_name_container view {
  position: relative;
  font-size: 30upx;
  float: left;
  line-height: 100upx;
}
.detail_name_container view {
  margin-right: 20upx;
}
.current:after {
  position: absolute;
  content: "";
  width: 80upx;
  height: 8upx;
  background-color: #3382ff;
  bottom: 8upx;
  left: 20upx;
  border-radius: 8upx;
}
.detail_list {
  position: relative;
  background-color: #fff;
  width: 90%;
  margin: auto;
  box-shadow: 1px 1px 20upx rgba(0, 0, 0, 0.1);
  margin-bottom: 30upx;
  overflow: auto;
}
.list_item {
  position: relative;
  width: 100%;
  min-height: 70upx;
  padding: 0 10upx;
  box-sizing: border-box;
}
.multi_list_item {
  position: relative;
  overflow: auto;
}
.list_item- {
  width: 50%;
  float: left;
}

.list_item_name {
  position: absolute;
  left: 30upx;
  font-size: 28upx;
  color: #999;
  line-height: 70upx;
  width: 140upx;
}
.list_item- .list_item_name {
  width: 120upx !important;
}
.list_item_content {
  position: relative;
  padding: 14upx 0 14upx 140upx;
  font-size: 28upx;
  line-height: 40upx;
  color: #333;
}
.content_right {
  text-align: right;
  padding-right: 20upx;
}
.sign_in_container {
  position: relative;
  width: 100%;
}
.img-wrap {
  position: relative;
  background-color: #fff;
  float: left;
  width: 27%;
  margin: 3%;
}
.img-box {
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  margin: 0;
  position: relative;
}
.img-box img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.resultContent {
  font-size: 30upx;
  color: #333;
  padding: 30upx 30upx 0 30upx;
  box-sizing: border-box;
}
</style>
