<template>
  <view class="sheBeiSheShiDetail-container">
	  <u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="设备管理" :autoBack="true">
	  
	  </u-navbar>
    <u-swiper
      indicator
      class="swiper-top"
      :list="swiperList"
      height="150"
      circular
      :autoplay="false"
      radius="5"
      bgColor="#ffffff"
    ></u-swiper>
    <view class="detail-info">
      <view class="detail-info-title">
        <image
          style="width: 36rpx; height: 36rpx; margin-right: 22rpx"
          src="../../../../static/images/implement/detailInfo.png"
          mode="scaleToFill"
        />
        <text>详细信息</text>
      </view>
      <view
        class="detail-info-item"
        style="margin-top: 30rpx; background-color: #f8f9fb"
      >
        <view class="info-item-title"> 设施名称 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.facilitiesName }}
        </view>
      </view>
      <view class="detail-info-item">
        <view class="info-item-title"> 设施编号 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.facilitiesCode }}
        </view>
      </view>
      <view class="detail-info-item" style="background-color: #f8f9fb">
        <view class="info-item-title"> 地点位置 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.facilitiesAddress }}
        </view>
      </view>
      <view class="detail-info-item">
        <view class="info-item-title"> 投入使用时间 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.toUseDate }}
        </view>
      </view>
      <view class="detail-info-item" style="background-color: #f8f9fb">
        <view class="info-item-title"> 上次巡检时间 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.lastInspectionDate }}
        </view>
      </view>
      <view class="detail-info-item">
        <view class="info-item-title"> 二级单位 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.secUnitName }}
        </view>
      </view>
      <view class="detail-info-item" style="background-color: #f8f9fb">
        <view class="info-item-title"> 场站名称 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.plantName }}
        </view>
      </view>
      <view class="detail-info-item">
        <view class="info-item-title"> 巡检规则 </view>
        <view class="info-item-content">
          {{ facilitiesInfoData.inspectionRule }}
        </view>
      </view>
      <u-line color="#EEEEEE"></u-line>
      <view
        class="detail-info-title"
        style="margin-top: 44rpx"
        v-if="facilitiesRepair.length > 0"
      >
        <image
          style="width: 36rpx; height: 36rpx; margin-right: 22rpx"
          src="../../../../static/images/implement/baoxiu.png"
          mode="scaleToFill"
        />
        <text>近期报修</text>
      </view>

      <!-- <view class="collapse-lsit" v-if="facilitiesRepair.length > 0">
        <u-collapse
          accordion
          :border="false"
          style="margin-top: 30rpx"
          v-for="(item, index) in facilitiesRepair"
          :key="index"
        >
          <u-collapse-item class="collapse-item">
            <view slot="title" class="collapse-title">
              <text>报修问题</text>
              <text>{{ item.question }}</text>
            </view>
            <view class="collapse-content">
              <view class="collapse-content-left">报修时间</view>
              <view>{{ item.reportDate }}</view>
            </view>
            <view class="collapse-content" style="background-color: #f8f9fb">
              <view class="collapse-content-left">问题是否解决</view>

              <view v-if="item.status == 0" class="collapse-content-right">
                <image
                  style="margin-right: 14rpx"
                  src="../../../../static/images/implement/weijiejue.png"
                  mode="scaleToFill"
                />
                <text style="color: #f54547; font-weight: 400; font-size: 14px"
                  >未解决</text
                >
              </view>
              <view v-else class="collapse-content-right">
                <image
                  style="margin-right: 14rpx"
                  src="../../../../static/images/implement/yijiejue.png"
                  mode="scaleToFill"
                />
                <text style="color: #2acc45; font-weight: 400; font-size: 14px"
                  >已解决</text
                >
              </view>
            </view>
            <view class="collapse-content">
              <view class="collapse-content-left">解决时间</view>
              <view>{{ item.overDate }}</view>
            </view>
            <view class="collapse-content" style="background-color: #f8f9fb">
              <view class="collapse-content-left">备注</view>
              <view>{{ item.remark }}</view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view> -->
      <view class="detail-bottom">
        <u-button
          class="detail-bottom-btn"
          shape="circle"
          text="我要报修"
          @click="goToBaoXiu"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  facilitiesInfo,
  facilitiesRepair,
  facilitiesRepairList,
} from "@/api/indexpage/implement/index.js";

export default {
  data() {
    return {
      swiperList: [],
      ssId: "",
      facilitiesInfoData: {},
      facilitiesRepair: [],
    };
  },

  onLoad(options) {
    this.ssId = options.ssId;
  },
  onShow() {
	  console.log(this.ssId);
    this.getFacilitiesInfo();
    this.getFacilitiesRepairList();
  },
  methods: {
    async getFacilitiesRepairList() {
      let result = await facilitiesRepairList(this.ssId);
      if (result.code == 200) {
        this.facilitiesRepair = result.rows || [];
      }
    },
    goToBaoXiu() {
      //携带设备id
      this.$tab.navigateTo(
        `/pages/indexpage/sheBeiSheShi/myBaoXiu/myBaoXiu?ssId=${this.ssId}`
      );
    },
    async getFacilitiesInfo() {
      let result = await facilitiesInfo(this.ssId);
      if (result.code == 200) {
        this.facilitiesInfoData = result.data;
        this.swiperList = result.data.fileList ?? [];
      }
    },
    // async getFacilitiesRepair() {
    //   let result = await facilitiesRepair(this.ssId);
    //   if (result.code == 200) {

    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
.sheBeiSheShiDetail-container {
  // #ifndef APP-PLUS
  height: calc(100vh - 44px);
  // #endif
  // #ifdef APP-PLUS
  height: calc(100vh);
  // #endif
  background-color: #fff;
  font-family: Noto Sans S Chinese;
  overflow-y: auto;
  .swiper-top {
    height: 300rpx !important;
    background: #ffffff;
    box-sizing: border-box;
    width: calc(100% - 60rpx);
    margin: 0 auto;
    box-shadow: 0px 3px 4px 0px rgba(190, 207, 228, 0.4);
    border: 1px solid #e6e6e6;
  }
  .detail-info {
    box-sizing: border-box;
    padding: 40rpx 30rpx 0 30rpx;
    overflow: hidden;
    .detail-info-title {
      width: 100%;
      height: 40rpx;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }
    .detail-info-item {
      box-sizing: border-box;
      padding: 0 30rpx;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 84rpx;
      .info-item-title {
        width: 200rpx;
        color: #333333;
      }
      .info-item-content {
        display: flex;
        flex: 1;
        justify-content: end;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #666666;
      }
    }
    .u-collapse {
      ::v-deep .u-cell__body {
        background-color: #f8f9fb;
        height: 84rpx;
      }
    }

    .collapse-lsit {
      /deep/ .u-collapse-item__content__text {
        padding: 0;
      }
      .collapse-item {
        .collapse-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .collapse-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 84rpx;
          box-sizing: border-box;
          padding: 20rpx 30rpx;
          .collapse-content-left {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
          }
          .collapse-content-right {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
        }
      }
    }
    .detail-bottom {
      margin-top: 50rpx;
      margin-bottom: 80rpx;
      .detail-bottom-btn {
        width: 600rpx;
        height: 100rpx;
        color: #fff;
        background: linear-gradient(0deg, #2a86ff, #8fbcff);
      }
    }
  }
}
</style>
