<template>
  <view class="container">
    <!-- 导航栏 -->
    <!-- <uni-nav-bar
      dark
      :fixed="true"
      background-color="#5474e8"
      status-bar
      left-text="返回"
      title="杭州内网监管在线"
      left-icon="left"
      @clickLeft="back"
    >
    </uni-nav-bar> -->

    <uni-nav-bar
      :fixed="true"
      background-color="rgba(214, 240, 255, 0.0)"
      status-bar
      rightWidth="300"
    >
      <block slot="left">
        <view class="uni-nav-bar-text" @click="back">
          <text class="iconfont icon-fanhui"></text
        ></view>
      </block>
    </uni-nav-bar>

    <view class="content">
      <!-- 占位---不可删除 -->
      <view class="seize-seat"> </view>

      <view class="main box-shaow-box">
        <view class="content_header">机房巡检</view>

        <uni-forms
          class="formClass"
          :modelValue="formData"
          label-width="100px"
          ref="forms"
          label-align="right"
        >
          <uni-forms-item label="巡检类型" required>
            <uni-data-checkbox
              mode="tag"
              v-model="formData.inspectionType"
              @change="change"
              :localdata="rooms"
            />
          </uni-forms-item>
          <uni-forms-item label="巡检编号">
            <view class="text">{{ formData.inspectionCode }}</view>
          </uni-forms-item>
          <uni-forms-item label="记录名称">
            <view class="text">{{ formData.recordName }}</view>
          </uni-forms-item>
          <uni-forms-item label="巡检时间">
            <view class="text">{{ formData.inspectionTime }}</view>
          </uni-forms-item>
          <uni-forms-item label="巡检人">
            <view class="text">{{ formData.inspectionBy }}</view>
          </uni-forms-item>
        </uni-forms>

        <view class="btn-class" @tap="clickNext"> 开始巡检 </view>
      </view>
    </view>
  </view>
</template>

<script>
import getDateTime from "@/common/getdateTime.js";
import moment from "moment";

export default {
  data() {
    return {
      rooms: [
        {
          text: "机房日常巡检",
          value: "1",
        },
        {
          text: "井道巡检",
          value: "2",
        },
        {
          text: "机房月度巡检",
          value: "3",
        },
        {
          text: "机房年度巡检",
          value: "4",
        },
      ],
      formData: {
        inspectionType: "",
        inspectionCode: "",
        recordName: "",
        inspectionTime: "",
        inspectionBy: "",
      },
    };
  },
  onLoad() {},
  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.formData = {
        inspectionType: "1",
        inspectionCode: `JFXJ${moment().format("yyyyMMDDHHmmss")}${(Math.floor(Math.random() * 900) + 100)}`,
        recordName: `${moment().format("yyyyMMDD")}-机房巡检记录`,
        inspectionTime: moment().format("yyyy-MM-DD HH:mm"),
        inspectionBy: this.$store.state.now_user.user,
        inspectionById: this.$store.state.now_user.userId,
        createByName: this.$store.state.now_user.user,
        isException: "", // 是否有异常
        position: "", // 位置
        isSubmit: "", // 0 是草稿态；  1 是正式提交
        conclusion: "", //结论
        fillCheck: "", // tab字典的value值, 校验通过的
        creatTime: `${new Date().getTime()}`,


        items: [
          // {
          //         "itemCode": "1", // 检查项
          //         "measuredData": "2,3", // 异常的楼层
          //         "inspectionResult": "1" // 检查项的结果， 1是异常 0 是正常
          //     },
        ],
      };
    },

    change(val) {
      this.formData.recordName = `${moment().format("yyyyMMDD")}-${
        val.detail.data.text
      }`;
      this.formData.inspectionType = val.detail.value;

      const inspectionCode = `${
        val.detail.value == 1 ? "JFXJ" : "JDXJ"
      }${moment().format("yyyyMMDDHHmmss")}`;
      this.formData.inspectionCode = inspectionCode + (Math.floor(Math.random() * 900) + 100);
    },

    back() {
      uni.navigateBack();
    },

    showRoomName(val) {
      let res = "";
      switch (val) {
        case "1":
          res = "核密机房";
          break;
        case "2":
          res = "普密机房";
          break;
        case "3":
          res = "传输机房";
          break;
        case "4":
          res = "机要值班室";
          break;
        case "5":
          res = "UPS机房";
          break;
        case "6":
          res = "其他区域";
          break;
      }
      return res;
    },
    clickNext() {
      this.$store.commit("SET_TEMP_DATA", this.formData); // 缓存[巡检信息]

      if (this.formData.inspectionType == 2) {
        // 井道巡检

        uni.redirectTo({
          url: "/pages/shaftInspection/shaftInspection",
          success() {
            uni.hideLoading();
          },
        });
      } else {
        // 机房巡检

        uni.redirectTo({
          url: "/pages/inspectionContent/inspectionContent",
          success() {
            uni.hideLoading();
          },
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    90deg,
    #e9f7fe 0%,
    #dceffe 40%,
    #d5ebfd 66%,
    #c9e8fe 100%
  );
  .content {
    margin-top: -44px;
    width: 100%;

    height: calc(100vh - var(--status-bar-height) - 50px);
    background-size: 100% 40rpx;
    background-repeat: no-repeat;

    .seize-seat {
      height: 50px;
      width: 100%;
      background-image: linear-gradient(
        90deg,
        #e9f7fe 0%,
        #dceffe 40%,
        #d5ebfd 66%,
        #c9e8fe 100%
      );
    }

    .main {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      padding: 20px 24px;
      position: relative;

      .uni-forms-item {
        padding: 6px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 0px;
      }

      .content_header {
        font-size: 18px;
        color: #000000;
        line-height: 26px;
        font-weight: 500;
      }

      .formClass {
        margin-top: 18px;
      }

      .btn-class {
        width: 240px;
        height: 48px;
        background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
        box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24);
        border-radius: 27px;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        font-weight: 400;
        text-align: center;
        line-height: 48px;
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  /deep/ .uni-forms-item__content {
    display: flex;
    align-items: center;
  }

  // 导航栏样式
  .uni-nav-bar-text {
    height: 36px;
    width: 36px;
    background: #ffffff;
    border: 0.4px solid rgba(224, 224, 224, 1);
    border-radius: 18px;
    border-radius: 50%;
    color: #333;
    text-align: center;
    .iconfont {
      font-size: 20px;
      line-height: 36px;
    }
  }
}
</style>
