<template>
  <view class="container">
    <uni-nav-bar
      :fixed="true"
      background-color="rgba(214, 240, 255, 0.0)"
      status-bar
      rightWidth="240"
    >
      <block slot="left">
        <view class="" @click="back">
          <text class="iconfont icon-fanhui"></text>
        </view>
      </block>
      <block slot="right" class="nav-right">
        <view class="header-buttons">
          <view class="button" @click="lookTable">查看样表</view>
        </view>
      </block>
    </uni-nav-bar>
    <view class="profile-section">
      <view class="profile-box">
        <view class="profile-left">
          <view class="avatar">
            <image
              src="@/static/img/add-img/defaultAvatar.png"
              mode="aspectFit"
            ></image>
          </view>
          <view class="info">
            <view class="describe">
              <view class="username">{{ userInfo.user }}</view>
              <view v-if="abnormalLengths" class="abnormal"
                >存在异常 {{ abnormalLengths }} 项</view
              >
            </view>
            <view class="describe">
              <view class="number">
                巡检编号：
                <text class="value">{{ inspectionCode }}</text>
              </view>
              <view v-if="!!isSign" class="number">
                巡检时间：
                <text class="value">
                  {{ updateDate }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <!-- v-if="allIsSubmitOne" -->
        <view class="profile-right">
          <view
            v-if="!isSign"
            :disabled="!allIsSubmitOne"
            :class="{
              'record-button': true,
              'disabled-btn': !allIsSubmitOne,
            }"
            @click="toSign"
          >
            巡检人签字
          </view>
          <div v-else style="display: flex">
            <image
              class="sign-img"
              mode="aspectFit"
              :src="detailsInfo.signImg"
              @click="previewImage([detailsInfo.signImg], 0)"
            ></image>
            <button
              v-if="detailsInfo.synchronization != 1"
              class="record-button"
              @click="toSign"
            >
              重签
            </button>
          </div>
          <template v-if="allIsSubmitOne">
            <button
              v-if="detailsInfo.synchronization != 1 && isSign"
              class="inspection-button ml-10"
              @click="onSyncData(true)"
            >
              数据同步
            </button>
          </template>
        </view>
      </view>
    </view>
    <view class="box" v-if="!isSign">
      <view class="bar">
        <view class="title">巡检进度</view>
        <view class="dai">
          待巡检
          <text class="num">{{ listData.length - inspectionNumber }}</text>
          个机房
        </view>
        <view class="yi">
          已完成
          <text class="num">{{ inspectionNumber }}</text>
          个机房
        </view>
      </view>
    </view>
    <view v-if="!isSign" class="card-box">
      <view
        class="card-row"
        :class="{ right: rowIndex % 2 !== 0 }"
        v-for="(row, rowIndex) in rows"
        :key="rowIndex"
      >
        <view
          class="card-wrapper"
          v-for="(card, cardIndex) in row"
          :key="cardIndex"
          @click="startDialog(card.name, card.jfType, card.value, false)"
        >
          <view
            class="card"
            :class="{
              status1: card.status == 1,
              status2: card.status == 2,
              active: value === card.value,
            }"
          >
            <view class="card-content">
              <view class="first-row">
                <template v-if="card.isSubmit == 0">
                  <text class="iconfont icon-weixunjian"></text>
                </template>
                <template v-else>
                  <text
                    v-if="card.status == 0"
                    class="iconfont icon-weixunjian"
                  ></text>
                  <text
                    v-if="card.status == 1"
                    class="iconfont icon-wancheng"
                  ></text>
                  <text
                    v-if="card.status == 2"
                    class="iconfont icon-shibai1"
                  ></text>
                </template>

                <text class="status" v-if="card.isSubmit == 0">草稿</text>
                <text class="status" v-else>{{ card.statusLable }}</text>
              </view>
              <view class="second-row">
                <text class="location">{{ card.name }}</text>
              </view>
            </view>
            <view class="spacer-image right" v-if="cardIndex < row.length - 1">
              <image
                v-if="inspectionNumber == 11"
                class="img"
                src="@/static/img/arr2.svg"
                mode="aspectFit"
              ></image>
              <image
                v-else
                class="img"
                src="@/static/img/arr1.svg"
                mode="aspectFit"
              ></image>
            </view>
            <view class="spacer-image bottom" v-if="rowIndex < rows.length - 1">
              <view
                v-if="
                  (rowIndex == 1 && cardIndex == 0) ||
                  (rowIndex == 0 && cardIndex == 4)
                "
              >
                <image
                  v-if="inspectionNumber == 11"
                  class="img"
                  src="@/static/img/arr2.svg"
                  mode="aspectFit"
                ></image>
                <image
                  v-else
                  class="img"
                  src="@/static/img/arr1.svg"
                  mode="aspectFit"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="card-box detail">
      <view
        class="card-row"
        :class="{ right: rowIndex % 2 !== 0 }"
        v-for="(row, rowIndex) in rows"
        :key="rowIndex"
      >
        <view
          class="card-wrapper"
          v-for="(card, cardIndex) in row"
          :key="cardIndex"
          @click="getDetailsItem(card.name, card.jfType, card.value)"
        >
          <view
            class="card"
            :class="{
              active: value === card.value,
              warning: card.statusLable == '巡检异常',
            }"
          >
            <view class="card-content">
              <view class="first-row">
                <image
                  class="icon"
                  src="@/static/img/add-img/home1.png"
                ></image>
                <text class="status">{{ card.statusLable }}</text>
              </view>
              <view class="second-row">
                <text class="location">{{ card.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <detail ref="detail" :jfType="jfType" :detailsItem="detailsItem"></detail>
    </view>
    <view v-if="!isSign" class="submit-module">
      <view class="action-btn" @click="startDialogBtn()">开始巡检</view>
    </view>
    <signDialog ref="signDialog" @confirm="handlePopupConfirm"></signDialog>
    <!-- 巡检弹窗 -->
    <startDialog
      ref="startDialog"
      :startDialogData="startDialogData"
      @confirm="handleStartDialog"
    ></startDialog>
    <Dialog
      v-show="isDialog"
      :list="propList"
      @close="onSyncData(false)"
    ></Dialog>
  </view>
</template>
<script>
import moment from "moment";
import {
  writeInspectionData,
  addLog,
  getLogContent,
  LOG_TYPE_ENUM,
} from "@/utils/IoReadingAndWriting.js";
import signDialog from "@/components/signDialog.vue";
import detail from "./components/detail.vue";
import startDialog from "./components/dialog.vue";

import assRoomApi from "@/api/assRoom.js";
import inspectApi from "@/api/inspect";
import { sqlToData, dataToSql, getHistoryData } from "./shared";
import Dialog from "@/pages/inspectionManagement/dialog.vue";

export default {
  components: {
    signDialog,
    detail,
    startDialog,
    Dialog,
  },
  data() {
    return {
      inspectionCode: "",
      rows: [],
      baseInfo: {}, // 基础信息
      inspectionNumber: 0, // 已巡检的井道数量
      detailsInfo: {}, // 详情
      detailsItem: {},
      isDisable: false, // 禁用
      isSign: false, //签名状态
      isSubmit: 0, //提交状态
      uid: "",
      options: {}, //存储数据
      backValue: "",
      all_data: [], //所有数据
      jfType: "0", //机房类型
      allIsSubmitOne: false,
      startDialogData: {
        text: [],
        isList: true,
        isLast: false,
      }, //弹窗文案
      name: "F座3楼-内环屏蔽机房",
      value: "1",
      listData: [],
      isDialog: false,
      propList: [],
      did: "", // 最近7天数据的id
      inspectionType: "1",
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.now_user || {};
    },
    updateDate() {
      return moment(
        Number(this.detailsInfo.updateTime || this.detailsInfo.createTime),
      ).format("YYYY-MM-DD");
    },
    abnormalLengths() {
      const originData = this.detailsInfo?.originData;
      let ret = 0;
      (originData || []).forEach((jf) => {
        const details = jf.details || {};
        Object.keys(details).forEach((key) => {
          const item = details[key];
          console.log("x", key, item);
          (item.detail || []).forEach((current) => {
            if (current.inspectionResult === 1) {
              ret++;
            }
          });
        });
      });
      console.log("ret", ret);
      return ret;
    },
  },
  onLoad(options) {
    this.options = options;
    this.backValue = this.options.backValue || "";
    this.inspectionType = options.inspectionType || "1";
    this.isDisable = options.isDisable == 1 ? true : false;
    this.uid = this.options.uid || "";
    this.value = this.options.value || "1";
  },
  onShow() {
    // 已经签名不触发更新，主要用于图片预览关闭后会触发onShow
    if (!this.isSign) {
      if (this.uid) {
        this.getRoomList().then((res) => {
          this.init(res).then(() => {
            this.getDetails(this.uid);
          });
        });
      } else {
        this.getRoomList().then((res) => {
          console.log(11111111111111, res);

          // 获取7日（168小时）内最后一条巡检记录回显到页面（选项、文案、照片；异常项-不调出文案及照片）
          getHistoryData(this.inspectionType).then((detailsInfo) => {
            console.log(111111222222233, detailsInfo);
            if (detailsInfo) {
              // 处理历史数据（选项、文案、照片；异常项-不调出文案及照片）
              console.log("detailsInfo", detailsInfo);

              this.did = detailsInfo.id;

              delete detailsInfo.id;
              delete detailsInfo.inspectionCode;

              this.listData = this.listFormat(detailsInfo.originData);
              this.detailsInfo = detailsInfo;

              this.inspectionNumber = detailsInfo.inspectionNumber;
              this.inspectionCode = this.getInspectionCode();
              this.cardsInfo = detailsInfo.originData;
              this.isSubmit = 0;
              this.isSign = false;

              // 默认选中第一个机房
              this.detailsItem = detailsInfo.originData[0].details;

              if (
                this.detailsItem.afxt &&
                this.detailsItem.afxt.detail &&
                this.detailsItem.afxt.detail[2].inspectionResult === 1
              ) {
                this.detailsItem.afxt.detail =
                  this.detailsItem.afxt.detail.slice(0, 3);
              }
              this.allIsSubmitOne = detailsInfo.originData.every(
                (item) => item.isSubmit == 1,
              );

              let group1 = this.cardsInfo.slice(0, 5);
              let group2 = this.cardsInfo.slice(5, 10);
              let group3 = this.cardsInfo.slice(10);
              if (!this.isSign) {
                group2 = group2.reverse();
              }
              this.rows = [group1, group2, group3];

              this.detailsInfo = detailsInfo;
            } else {
              this.init(res);
            }
          });
        });
      }
    }

    // this.startDialogData.text = [
    //   `请到“${this.name}”后；`,
    //   "点击“我已到达”开始巡检",
    // ];
    console.log("this.startDialogData", this.startDialogData);
    this.all_data = this.$store.state.all_data;
  },
  methods: {
    getRoomList() {
      return assRoomApi.selectRoomList(1).then((res) => {
        console.log("机房列表", res);
        return res;
      });
    },
    listFormat(baseList) {
      const roomFeatureMap = {
        1: "1",
        2: "0",
        3: "2",
      };
      let list = baseList.map((item, index) => {
        const jfType = roomFeatureMap[item.roomFeature];
        return {
          id: item.id,
          name: item.roomName,
          value: item.dictValue,
          /** 只是为了映射jfType，为了兼容之前的逻辑
           * 前端用的：jfType 机房类型 0屏蔽  1汇聚  2电池间（1） 3电池间（2）
           * roomFeature 机房类型枚举：1.汇聚机房，2.屏蔽机房，3.UPS机房，4.数据机房
           */
          jfType: item.dictValue == "11" ? "3" : jfType,
          isVaild: item.isVaild || false, // 校验通过
          status: item.status || 0,
          statusLable: item.statusLable || "未巡检",
        };
      });
      return list;
    },
    init(baseList) {
      this.value = baseList[0].dictValue;
      return new Promise((resolve, reject) => {
        let list = this.listFormat(baseList);
        this.listData = this.deepClone(list);

        console.log("this.listData", this.listData);

        const group1 = list.slice(0, 5);
        const group2 = list.slice(5, 10).reverse();
        const group3 = list.slice(10);
        this.rows = [group1, group2, group3];

        if (this.uid) {
          this.inspectionCode = this.detailsInfo.inspectionCode;
        } else {
          this.inspectionCode = this.getInspectionCode();
        }
        resolve();
      });
    },
    deepClone(target) {
      if (typeof target !== "object" || target === null) {
        return target;
      }

      let clone;
      if (Array.isArray(target)) {
        clone = [];
        for (let i = 0; i < target.length; i++) {
          clone[i] = this.deepClone(target[i]);
        }
      } else {
        clone = {};
        for (const key in target) {
          if (target.hasOwnProperty(key)) {
            clone[key] = this.deepClone(target[key]);
          }
        }
      }

      return clone;
    },
    // 回显数据
    getDetails(uid) {
      uni.showLoading();
      return inspectApi
        .info(uid)
        .then((res) => {
          console.log("before sqlToData", res);
          const detailsInfo = sqlToData(res);
          console.log("getDetails", detailsInfo);

          this.listData = this.listFormat(detailsInfo.originData);

          this.detailsInfo = detailsInfo;
          this.inspectionNumber = detailsInfo.inspectionNumber;
          this.inspectionCode = detailsInfo.inspectionCode;
          this.cardsInfo = detailsInfo.originData;
          this.isSubmit = this.detailsInfo.isSubmit;
          this.isSign = this.detailsInfo.isSign;

          // 默认选中第一个机房
          this.detailsItem = detailsInfo.originData[0].details;

          if (
            this.detailsItem.afxt &&
            this.detailsItem.afxt.detail &&
            this.detailsItem.afxt.detail[2].inspectionResult === 1
          ) {
            this.detailsItem.afxt.detail = this.detailsItem.afxt.detail.slice(
              0,
              3,
            );
          }
          this.allIsSubmitOne = detailsInfo.originData.every(
            (item) => item.isSubmit == 1,
          );

          let group1 = this.cardsInfo.slice(0, 5);
          let group2 = this.cardsInfo.slice(5, 10);
          let group3 = this.cardsInfo.slice(10);
          if (!this.isSign) {
            group2 = group2.reverse();
          }
          this.rows = [group1, group2, group3];
          console.log("this.cardsInfo", this.cardsInfo);

          this.isDisable = this.isDisable || detailsInfo.synchronization == 1; // 是否禁用 1:已同步数据 0: 未同步数据
          uni.hideLoading();
        })
        .catch((error) => {
          uni.showToast({
            title: error.msg,
            icon: "none",
            duration: 1000,
          });
          uni.hideLoading();
        });
    },
    // 获取机房详情
    getDetailsItem(location, jfType, value) {
      this.activeName = location;
      this.value = value;
      this.detailsItem = this.detailsInfo.originData[value - 1].details;
      this.jfType = this.detailsInfo.originData[value - 1].jfType;
      if (this.detailsItem.afxt.detail[2].inspectionResult === 1) {
        this.detailsItem.afxt.detail = this.detailsItem.afxt.detail.slice(0, 3);
      }
      console.log("this.detailsItem", this.detailsItem);
    },
    startDialogBtn(name = "F座3楼-内环屏蔽机房", jfType = "0", value = "1") {
      let item = this.findTargetObject(this.listData);
      console.log("即将操作的机房", item);

      this.name = this.uid ? item.name : name;
      this.jfType = this.uid ? item.jfType : jfType;
      this.value = this.uid ? item.value : value;
      this.startDialogData.text = [
        `请到“${name}”后；`,
        "点击“我已到达”开始巡检",
      ];
      this.name = name;
      this.jfType = jfType;
      this.value = value;
      this.$refs.startDialog.open();
    },
    startDialog(name = "F座3楼-内环屏蔽机房", jfType = "0", value = "1") {
      this.name = name;
      this.jfType = jfType;
      this.value = value;
      if (!this.uid && value != "1") {
        this.startDialogData.text = [
          `当前线路非常用巡检线路，`,
          `是否需要从“${this.name}”开始巡检`,
        ];
      } else {
        this.startDialogData.text = [
          `请到“${this.name}”后；`,
          "点击“我已到达”开始巡检",
        ];
      }
      this.$refs.startDialog.open();
    },
    // 处理弹窗确认
    handleStartDialog(summary) {
      this.toShaftInspection(this.name, this.jfType, this.value);
    },
    // 跳转到具体的机房
    toShaftInspection(name, jfType, value) {
      console.log("name, 跳转到具体的机房, value", name, jfType, value);
      if (this.inspectionType == "3") {
        // 跳转月度巡检
        uni.navigateTo({
          url: `/pages/inspectionContent/inspectionContentMonthlyNew?value=${value}&inspectionCode=${this.inspectionCode}&jfType=${jfType}&location=${name}&uid=${this.uid}&backValue=${this.backValue}&did=${this.did}`,
        });
      } else if (this.inspectionType == "4") {
        // 跳转年度巡检
        uni.navigateTo({
          url: `/pages/inspectionContent/inspectionContentYearNew?value=${value}&inspectionCode=${this.inspectionCode}&jfType=${jfType}&location=${name}&uid=${this.uid}&backValue=${this.backValue}&did=${this.did}`,
        });
      } else {
        // 跳转日常巡检
        uni.navigateTo({
          url: `/pages/inspectionContent/inspectionContentNew?value=${value}&inspectionCode=${this.inspectionCode}&jfType=${jfType}&location=${name}&uid=${this.uid}&backValue=${this.backValue}&did=${this.did}`,
        });
      }
    },
    lookTable() {
      uni.navigateTo({
        url: "/pages/report/sampleTable?isJF=1",
      });
    },
    toSign() {
      if (!this.allIsSubmitOne) {
        return;
      }
      this.$refs.signDialog.open();
    },
    findTargetObject(rows) {
      if (!rows || rows.length === 0) return null;

      let lastNonZeroIndex = -1;

      // 首先检查所有对象，记录最后一个 status 不为 0 的索引
      for (let i = 0; i < rows.length; i++) {
        if (rows[i].status !== 0) {
          lastNonZeroIndex = i;
        }
      }

      // 如果没有找到任何 status 不为 0 的对象，返回 null
      if (lastNonZeroIndex === -1) return null;

      // 计算目标对象的索引
      let targetIndex = lastNonZeroIndex + 1;

      // 如果最后一个非零对象是数组的最后一个元素，则从第一个对象开始检查
      if (lastNonZeroIndex === rows.length - 1) {
        for (let i = 0; i < rows.length; i++) {
          if (rows[i].status !== 0) {
            targetIndex = i + 1;
            break; // 找到第一个就停止
          }
        }

        // 如果 targetIndex 超出数组范围，则返回 null
        return targetIndex < rows.length ? rows[targetIndex] : null;
      }

      // 正常情况：返回最后一个非零对象的下一个对象
      return rows[targetIndex];
    },
    // 处理弹窗确认
    handlePopupConfirm(signImg) {
      this.detailsInfo.isSign = this.isSign = true; // 回显到文字显示区域
      this.detailsInfo.signImg = signImg; // 回显到文字显示区域
      this.detailsInfo.isSubmit = 1; // 提交状态
      const isException = this.detailsInfo.originData.some(
        (item) => item.status == 2,
      );
      this.detailsInfo.isException = isException ? 1 : 0; // 巡检异常

      let allIsSubmitOne = this.detailsInfo.originData.every(
        (item) => item.isSubmit === 1,
      );

      if (!allIsSubmitOne) {
        // 如果有机房没有巡检完,记录是编辑状态
        this.detailsInfo.synchronization = 2;
      } else {
        this.detailsInfo.synchronization = 0;
      }

      this.detailsInfo.inspectionType = this.inspectionType || "1";

      this.realSave(this.detailsInfo);
    },
    realSave(params, type = "sign") {
      const send = dataToSql(params);
      const api = this.uid ? inspectApi.update : inspectApi.save;

      const inspectionCode = this.inspectionCode || this.getInspectionCode();
      send.inspectionCode = inspectionCode;

      console.log("send", send);
      api(this.uid ? { id: this.uid, ...send } : send).then((res) => {
        const logContent = getLogContent(
          LOG_TYPE_ENUM.sys,
          `巡检编号(${inspectionCode})`,
          "同步",
        );
        this.$logApi.addlog(logContent);
        console.log("logContent", logContent);

        uni.showToast({
          title: type == "sign" ? "签字成功" : "同步成功",
          icon: "success",
        });

        if (!this.uid) {
          this.uid = res.lastInsertId;
          setTimeout(() => {
            this.getDetails(res.lastInsertId);
          }, 300);
        }
      });
    },
    getInspectionCode() {
      return `${this.inspectionType == "3" ? "YDXJ" : this.inspectionType == "4" ? "NDXJ" : "JFXJ"}${moment().format("yyyyMMDDHHmmss")}${
        Math.floor(Math.random() * 900) + 100
      }`;
    },
    back() {
      if (this.backValue === "home") {
        uni.navigateTo({
          url: "/pages/home/home",
        });
      } else {
        uni.navigateTo({
          url: `/pages/inspectionManagement/index`,
        });
      }
    },
    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images,
        success: (res) => {},
      });
    },
    onSyncData(show) {
      this.isDialog = show;
      this.propList = [
        {
          ...dataToSql(this.detailsInfo),
          id: this.uid,
        },
      ];
      console.log("propList", this.propList);
      if (!show) {
        this.getDetails(this.uid);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.uni-nav-bar-text {
  height: 28.8px;
  width: 28.8px;
  background: #ffffff;
  border: 0.32px solid rgba(224, 224, 224, 1);
  border-radius: 14.4px;
  color: #333;
  text-align: center;
  .iconfont {
    font-size: 16px;
    line-height: 28.8px;
  }
}
.nav-right {
  width: 192px;
  z-index: 10;
}
.header-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
  .button {
    width: 89.6px;
    height: 28.8px;
    background: #ffffff;
    border-radius: 14.4px;
    margin-left: 12.8px;
    font-family: PingFangSC-Regular;
    font-size: 12.8px;
    color: #000000;
    line-height: 28.8px;
    font-weight: 400;
    text-align: center;
  }
}
.container {
  background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
  padding: 0 25.6px;
  height: 100vh;
}
.profile-section {
  width: 100%;
  margin-bottom: 12.8px;
  .profile-box {
    background-color: #fff;
    border-radius: 9.6px;
    padding: 12.8px 25.6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .profile-left {
      display: flex;
      align-items: center;
      .avatar {
        position: relative;
        width: 68.8px;
        height: 68.8px;
        margin-right: 9.6px;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
        .change-password {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.5);
          text-align: center;
          height: 17.6px;
          font-family: PingFangSC-Regular;
          font-size: 9.6px;
          color: #ffffff;
          line-height: 16px;
          font-weight: 400;
        }
      }
      .info {
        .username {
          font-size: 16px;
          color: #000000;
          line-height: 22.4px;
          font-weight: 500;
          margin-bottom: 7.2px;
          margin-right: 10px;
        }

        .number {
          font-size: 12.8px;
          color: #4a4a4a;
          line-height: 22.4px;
          font-weight: 400;
          margin-right: 9.6px;
          .value {
            color: #000000;
          }
        }
        .describe {
          display: flex;
          .abnormal {
            color: #fff;
            line-height: 22.4px;
            height: 22.4px;
            padding: 0 8px;
            font-size: 12px;
            background-color: #f55a42;
            border-radius: 11px;
          }
        }
      }
    }
    .profile-right {
      display: flex;
      .inspection-button {
        width: 89.6px;
        height: 28.8px;
        background-image: linear-gradient(105deg, #68acfb 0%, #3774f6 100%);
        border-radius: 14.4px;
        font-family: PingFangSC-Regular;
        font-size: 12.8px;
        color: #ffffff;
        line-height: 28.8px;
        font-weight: 400;
        margin-right: 12.8px;
      }
      .record-button {
        display: block;
        width: 115.2px;
        height: 28.8px;
        background: #ffffff;
        border: 0.8px solid rgba(55, 116, 246, 1);
        border-radius: 14.4px;
        font-family: PingFangSC-Regular;
        font-size: 12.8px;
        color: #3774f6;
        line-height: 28.8px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        &.disabled-btn {
          color: #c7c7c7;
          background-color: #f9f9f9;
          border-color: #f2f2f2;
        }
      }
    }
  }
}
.box {
  background: #ffffff;
  border-radius: 9.6px 9.6px 0 0;
  padding: 12.8px 19.2px;
  .bar {
    display: flex;
    justify-content: flex-start;
    .title {
      font-family: PingFangSC-Medium;
      font-size: 14.4px;
      color: #000000;
      line-height: 27.2px;
      font-weight: 500;
    }
    .dai {
      background: rgba(243, 152, 0, 0.08);
      border-radius: 8px;
      font-family: PingFangSC-Regular;
      font-size: 11.2px;
      color: #4a4a4a;
      letter-spacing: 0;
      text-align: right;
      line-height: 27.2px;
      font-weight: 400;
      margin: 0 9.6px;
      padding: 0 9.6px;
      .num {
        color: #f39800;
      }
    }
    .yi {
      background: rgba(55, 116, 246, 0.08);
      border-radius: 8px;
      font-family: PingFangSC-Regular;
      font-size: 11.2px;
      color: #4a4a4a;
      letter-spacing: 0;
      text-align: right;
      line-height: 27.2px;
      font-weight: 400;
      padding: 0 9.6px;
      .num {
        color: #000;
      }
    }
  }
}
.card-box {
  background: #ffffff;
  border-radius: 0 0 9.6px 9.6px;
  padding: 12.8px 19.2px;
  height: calc(100vh - 232px - 19.2px);
  &.detail {
    height: calc(100vh - 200px);
    border-radius: 9.6px;
    overflow: auto;
    .card-wrapper {
      width: calc((100% - 4 * 12.8px) / 5); /* 严格五等分宽度 */
      .card {
        margin-bottom: 12.8px;
      }
    }
  }
}
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  .card-wrapper {
    width: calc((100% - 4 * 43.2px) / 5); /* 严格五等分宽度 */
    .card {
      height: 51.2px;
      margin-bottom: 43.2px;
      border-radius: 8px;
      background-color: rgba(242, 242, 242, 0.6);
      box-shadow: 0 1.6px 3.2px rgba(0, 0, 0, 0.1);
      position: relative;
      &.active {
        background: #fafcff;
        border: 1px solid rgba(55, 116, 246, 1);
        box-shadow: 0px 0px 3px 0px rgba(55, 116, 246, 0.2);
      }
      &.warning {
        background: #fff5f4;
        &.active {
          border: 1px solid #ff4a34;
        }
        .status {
          color: #ff4a34 !important;
        }
      }

      &.status1 {
        background: #f3f7ff;
        .status {
          color: #3774f6;
        }
      }
      &.status2 {
        background: #fff5f4;
        .status {
          color: #f55a42;
        }
      }
      .card-content {
        padding: 6.4px;

        .first-row {
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 12px;
            margin-right: 6.4px;
            &.icon-weixunjian {
              color: #959595;
            }
            &.icon-shibai1 {
              color: #ff4a34;
            }
            &.icon-wancheng {
              color: #3774f6;
            }
          }
          .status {
            font-size: 12px;
            color: #333333;
          }
        }
        .second-row {
          margin-top: 3.2px;
          padding-left: 20px;
          .location {
            font-size: 12px;
            color: #666666;
          }
        }
      }
    }
    .spacer-image.right {
      position: absolute;
      right: -43.2px;
      top: 50%;
      transform: translateY(-50%);
      .img {
        width: 30.4px;
        height: 6.4px;
        margin: 0 6.4px;
      }
    }
  }

  .spacer-image.bottom {
    position: absolute;
    bottom: -33.6px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    .img {
      width: 30.4px;
      height: 6.4px;
      margin: 6.4px 0;
    }
  }
  &.right {
    .card-wrapper {
      .spacer-image.right {
        position: absolute;
        left: -43.2px;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        .img {
          width: 30.4px;
          height: 6.4px;
          margin: 0 6.4px;
        }
      }
    }
  }
}
.submit-module {
  display: flex;
  justify-content: center;
  position: fixed;
  gap: 16px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25.6px;

  .action-btn {
    width: 145.6px;
    height: 38.4px;
    line-height: 38.4px;
    background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
    box-shadow: 0px 8px 19.2px 0px rgba(185, 185, 185, 0.24);
    border-radius: 21.6px 19.2px 19.2px 21.6px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-weight: 400;

    &.complete-btn {
      background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
      color: #ffffff;
    }
  }
}

.sign-img {
  width: 80px;
  height: 28.8px;
  margin-right: 10px;
  border: 1px solid #c5c5c5;
  &.no-border {
    border: none;
  }
}
</style>
