<template>
  <view>
    <view class="top_container">
      <view class="report_status" v-if="record.result == '56'">待处理</view>
      <view class="report_status" v-else-if="record.result == '57'"
        >待验收</view
      >
      <view class="report_status" v-else-if="record.result == '58'"
        >已验收</view
      >
      <view class="report_status"
        >计划编号:{{ record.work_orderNo || "" }}</view
      >
      <view class="btn" v-if="record.result == '56'" @click="toPatrol()"
        >保养执行</view
      ><!-- 待处理 -->
      <view class="btn" v-else-if="record.result == '57'" @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
        :class="[current_num == 3 ? 'current' : '']"
        @click="changecurrent(3)"
        >备件信息</view
      >
      <view
        v-if="record.result == '58'"
        :class="[current_num == 4 ? 'current' : '']"
        @click="changecurrent(4)"
        >验收评价</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 contentRight">{{
            record.serialno
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">设备名称</view>
          <view class="list_item_content contentRight">{{
            record.deviceName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">规格型号</view>
          <view class="list_item_content contentRight">{{ record.model }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">使用部门</view>
          <view class="list_item_content contentRight">{{
            record.useDeptName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">安装地点</view>
          <view class="list_item_content contentRight">{{ record.site }}</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 contentRight">{{
            record.work_orderNo
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">保养级别</view>
          <view class="list_item_content contentRight">{{
            record.typeName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">保养名称</view>
          <view class="list_item_content contentRight">{{
            record.planName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">保养负责人</view>
          <view class="list_item_content contentRight">{{
            record.userName
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">负责人电话</view>
          <view class="list_item_content contentRight">{{
            record.mobile
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">保养开始时间</view>
          <view class="list_item_content contentRight">{{
            record.planStarttime
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">保养结束时间</view>
          <view class="list_item_content contentRight">{{
            record.planendtime
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">保养总用时</view>
          <view class="list_item_content contentRight"
            >{{ record.plan_man_hour || "-" }}小时</view
          >
        </view>
        <!-- 	<view class="list_item">
					<view class="list_item_name">下次保养时间</view>
					<view class="list_item_content contentRight">？</view>
				</view> -->
        <view class="list_item">
          <view class="list_item_name">停机时间</view>
          <view class="list_item_content contentRight"
            >{{ record.downHour || "-" }}小时</view
          >
        </view>
        <view class="list_item">
          <view class="list_item_name">使用状况</view>
          <view class="list_item_content contentRight">{{
            record.using_status_name
          }}</view>
        </view>
        <view class="list_item">
          <view class="list_item_name">材料费合计</view>
          <view class="list_item_content contentRight"
            >{{ record.cost }}元</view
          >
        </view>
        <view class="list_item">
          <view class="list_item_name">工时费合计</view>
          <view class="list_item_content contentRight"
            >{{ record.manhourCost }}元</view
          >
        </view>
      </view>
      <!-- 保养总结（待验收、已验收） -->
      <view v-if="record.result != '56' && record.result">
        <view class="myContainer myContentBox">
          <view class="top_container detail_list_top">
            <view class="report_status">保养总结</view>
          </view>
          <view class="resultContent">{{ record.resultContent }}</view>
        </view>
      </view>
    </view>
    <view v-else-if="current_num == 2">
      <view
        class="myContainer myContentBox"
        v-for="(items, index) in project"
        :key="index"
      >
        <view class="top_container detail_list_top">
          <view class="report_status">保养项目-{{ index }}</view>
        </view>
        <view style="clear: both">
          <view class="multi_list_item">
            <view class="list_item">
              <view class="list_item_name">项目:</view>
              <view class="list_item_content">{{ items.name }}</view>
            </view>
          </view>
          <view class="multi_list_item">
            <view class="list_item list_item-">
              <view class="list_item_name">工时:</view>
              <view class="list_item_content">{{ items.manhour }}小时</view>
            </view>
            <view class="list_item list_item-">
              <view class="list_item_name">结果:</view>
              <view class="list_item_content" v-if="items.result == 1"
                >通过</view
              >
              <view class="list_item_content" v-else-if="items.result == 0"
                >不通过</view
              >
            </view>
          </view>
          <view class="multi_list_item">
            <view class="list_item">
              <view class="list_item_name">保养工时费:</view>
              <view class="list_item_content" style="padding-left: 180upx"
                >{{ items.manHourCost || "" }}元</view
              >
            </view>
          </view>
          <view class="multi_list_item">
            <view class="list_item">
              <view class="list_item_name">方法:</view>
              <view class="list_item_content">{{ items.function }}</view>
            </view>
          </view>
          <view class="list_item">
            <view class="list_item_name">备注:</view>
            <view class="list_item_content">{{ items.remark }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="current_num == 3" class="difBox">
      <view
        class="myContainer myContentBox"
        v-for="(items, index) in part"
        :key="index"
      >
        <view class="top_container">
          <view class="report_status">{{ items.spartName }}</view>
          <view class="report_status">[{{ items.code }}]</view>
        </view>
        <view style="clear: both">
          <view class="multi_list_item">
            <view class="list_item list_item-">
              <view class="list_item_name list_item_name2">规格型号:</view>
              <view class="list_item_content list_item_content2">{{
                items.type
              }}</view>
            </view>
            <view class="list_item list_item-">
              <view class="list_item_name">库位:</view>
              <view class="list_item_content">{{ items.locationName }}</view>
            </view>
          </view>
          <view class="flex_list_item">
            <view>单价:{{ items.price }}元</view>
            <view>总价:{{ items.spart_sum }}元</view>
            <view>数量:{{ items.spart_amount }}{{ items.spart_unit }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="current_num == 4">
      <view class="myContainer myContentBox">
        <view class="list_item" style="padding: 20upx">
          <view
            class="list_item_name"
            style="padding-top: 28upx; color: #333"
            >{{ checkInfo.result_name || "" }}</view
          >
          <view class="list_item_content content_right">
            <view>验收人：{{ checkInfo.user_name || "" }}</view>
            <view>验收时间：{{ checkInfo.update_time || "" }}</view>
          </view>
        </view>
      </view>
      <view class="myContainer myContentBox">
        <view class="top_container">验收评价</view>
        <view class="star_content">
          <view class="star_name">完成效率</view>
          <view class="star">
            <uni-rate
              :value="checkInfo.xl_grade || ''"
              active-color="#3382FF"
              :disabled="true"
              color="#C1C1C1"
            ></uni-rate>
          </view>
        </view>
        <view class="star_content">
          <view class="star_name">完成质量</view>
          <view class="star">
            <uni-rate
              :value="checkInfo.qa_grade || ''"
              active-color="#3382FF"
              :disabled="true"
              color="#C1C1C1"
            ></uni-rate>
          </view>
        </view>
        <view class="star_content">
          <view class="star_name">工作态度</view>
          <view class="star">
            <uni-rate
              :value="checkInfo.td_grade || ''"
              active-color="#3382FF"
              :disabled="true"
              color="#C1C1C1"
            ></uni-rate>
          </view>
        </view>
      </view>
      <view class="myContainer myContentBox">
        <view class="top_container">验收意见</view>
        <view class="resultContent" style="padding-bottom: 5px">{{
          checkInfo.content || ""
        }}</view>
      </view>
    </view>
    <view class="goHome" @click="goMain()">
      <img src="../../static/img/gohome.png" />
    </view>
  </view>
</template>

<script>
import uniRate from "@/components/uni-rate/uni-rate.vue";
import { config } from "../../request/js/config.js";
export default {
  components: {
    uniRate,
  },
  data() {
    return {
      config: config,
      current_num: 1,
      id: "",
      record: {},
      part: [],
      project: [],
      checkInfo: {},
    };
  },
  onLoad(option) {
    this.id = option.id;
    if (this.id == undefined) {
      uni.reLaunch({
        url: "eqUpkeep",
      });
      return false;
    }
    var _this = this;
    this.$http
      .request({
        url: "/apis/upkeepPlan/oneRecordDetail",
        params: {
          recordId: this.id,
        },
      })
      .then((res) => {
        if (res.data.code == 0) {
          // this.data_result=res.data.data;
          this.record = res.data.data.record[0];
          this.part = res.data.data.part;
          this.project = res.data.data.project;
          if (this.record.result == 58) {
            _this.getValues();
          }
        }
      })
      .catch((err) => {
        uni.showToast({
          title: "获取信息失败",
          duration: 2000,
          icon: "none",
        });
      });
  },
  methods: {
    //获取评价详情。
    getValues() {
      this.$http
        .request({
          url: "/apis/upkeepRecord/getCheckDetail",
          params: {
            recordId: this.id,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.checkInfo = res.data.data;
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "获取信息失败",
            duration: 2000,
            icon: "none",
          });
        });
    },
    changecurrent(num) {
      this.current_num = num;
    },
    //点击立即巡检
    toPatrol() {
      uni.navigateTo({
        url: "keepStep1?id=" + this.id,
      });
    },
    //验收评价
    toEvaluate() {
      uni.navigateTo({
        url: "keepEvaluation?id=" + this.id,
      });
    },
  },
  onBackPress(options) {
    //取消默认的返回事件.
    // uni.navigateTo({
    // 	url: "eqUpkeep"
    // });
    // return true;
  },
};
</script>
<style>
page {
  background-color: #f5f7f5;
}
</style>
<style scoped>
.difBox .top_container {
  border-radius: 12upx 12upx 0px 0px;
  box-shadow: none;
  border: 0px;
}

.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); */
}

.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 30upx;
  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;
}
.list_item- .list_item_name {
  width: 100upx;
}
.list_item_name2 {
  width: 140upx !important;
}
.list_item_content {
  position: relative;
  padding: 14upx 0 14upx 100upx;
  font-size: 28upx;
  line-height: 40upx;
  max-height: 140upx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
}
.contentRight {
  text-align: right;
}
.list_item- .list_item_content {
  padding: 14upx 0 14upx 100upx;
}
.list_item_content2 {
  padding: 14upx 0 14upx 140upx !important;
}
.flex_list_item {
  position: relative;
  padding: 0 15px;
  height: 70upx;
  line-height: 70upx;
  border-top: 1px solid #e0e0e0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 24upx;
  color: #333;
}
.flex_list_item view {
  line-height: 70upx;
}
.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>
