<template>
  <div class="checkRecord">
    <headNav
      @backPage="backPage"
      @rightClick="rightClick"
      :iconName="showIcon"
      title="消防监督记录"
    ></headNav>

    <!-- <div v-if="imgSrc" class="pdfImg">
      <van-image :src="imgSrc"></van-image>
    </div> -->

    <div class="file" id="file">
      <div class="title scale8">
        <div class="title_top">{{ formData && formData.enforce_org_name }}</div>
        <div class="title_bottom">消防监督检查记录</div>
      </div>

      <div class="number">
        <span class="scale8">编号：{{ fileNum }}</span>
      </div>

      <div class="file_top scale8">
        <div class="checkForm">
          <div class="df">
            <div>检查形式：</div>
            <div class="ml5">
              <van-radio-group disabled v-model="checkForm">
                <van-radio icon-size="16px" shape="square" name="1"
                  >消防监督抽查
                </van-radio>
                <van-radio class="mt10" icon-size="16px" shape="square" name="2"
                  >公共聚集场所投入使用，营业前消防安全检查
                </van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="companyName df aic mt10">
          <div>被检查单位(场所)名称：</div>
          <div class="underLine">
            {{
              formData.enforce_obj_name ||
                (formData.enforce_obj && formData.enforce_obj.enforce_obj_name)
            }}
          </div>
        </div>
        <div class="location df mt10">
          <div>地 址：</div>
          <div class="underLine">
            {{
              formData.enforce_obj && formData.enforce_obj.enforce_obj_address
            }}
          </div>
        </div>
        <div class="item df aic mt20">
          <div class="df itemFlex2">
            <div class="label">消防安全责任人：</div>
            <div class="underLine">
              {{ formData.enforce_obj && formData.enforce_obj.charge_person }}
            </div>
          </div>
          <div class="df itemFlex1">
            <div>电话：</div>
            <div class="underLine">
              {{
                formData.enforce_obj && formData.enforce_obj.charge_person_phone
              }}
            </div>
          </div>
        </div>
        <div class="item df aic mt10">
          <div class="df itemFlex2">
            <div class="label">消防安全管理人：</div>
            <div class="underLine">
              {{ formData.enforce_obj && formData.enforce_obj.manage_person }}
            </div>
          </div>
          <div class="df itemFlex1">
            <div>电话：</div>
            <div class="underLine">
              {{
                formData.enforce_obj && formData.enforce_obj.manage_person_phone
              }}
            </div>
          </div>
        </div>
        <div class="item df aic mt10">
          <div class="df itemFlex2">
            <div class="label">联 系 人：</div>
            <div class="underLine">
              {{ formData.enforce_obj && formData.enforce_obj.legal_person }}
            </div>
          </div>
          <div class="df itemFlex1">
            <div>电话：</div>
            <div class="underLine">
              {{
                formData.enforce_obj && formData.enforce_obj.legal_person_phone
              }}
            </div>
          </div>
        </div>
        <div class="isImportant">
          <van-radio-group v-model="isImportant" disabled class="df aic">
            <van-radio class="mr20" icon-size="16px" shape="square" name="1"
              >消防安全重点单位
            </van-radio>
            <van-radio icon-size="16px" shape="square" name="2"
              >非消防安全重点单位
            </van-radio>
          </van-radio-group>
        </div>
        <div class="checkPerson df aic">
          <div>消防监督检查员：</div>
          <div class="underLine">
            {{ loginUser && loginUser.userName }}
          </div>
        </div>
        <div class="checkPerson df aic mt10">
          <div>检查时间：</div>
          <div>
            <span class="underLine_"> {{ year }} </span>年
            <span class="underLine_"> {{ month }} </span>月
            <span class="underLine_"> {{ day }} </span>日
            <span class="underLine_"> {{ hour }} </span>时
          </div>
        </div>
        <!-- @click="showSignPannel=true" -->
        <div class="signUp df dic mt10">
          <div>被检查单位随网检查人员（签名）：</div>
          <div class="underLine">
              <img :src="signValue" alt="" srcset="">
          </div>
        </div>
        <div class="tips">此记录由消防机构存档</div>
      </div>

      <div class="table" v-if="allNodes && allNodes.length > 0">
        <table border="1" width="100%" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th width="10%" colspan="2"></th>
              <th width="90%">监 督 检 查 内 容 和 情 况</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="nodes in allNodes" :key="nodes.id">
              <td colspan="2">
                <div class="processName">
                  {{ nodes.enforce_item }}
                </div>
              </td>
              <td v-if="nodes.childs">
                <div class="sonProcessContent" v-if="nodes.childs.length > 0">
                  <template v-if="nodes.enforce_item == '消防许可及验收备案'">
                    <div v-if="!showSureBtn" class="custom">
                      <span>被检查建筑物名称:</span><span class="underLine customInfo">{{customInfo.name}}</span>
                      <van-radio-group v-model="customInfo.check">
                        <van-radio icon-size="16px" shape="square" name="0">1998年9月1日之前竣工建筑且此后来改建(含装修、用途变更)</van-radio>
                        <van-radio icon-size="16px" shape="square" name="1">依法通过消防验收</van-radio>
                        <van-radio icon-size="16px" shape="square" name="2">依法进行竣工验收消防备案</van-radio>
                        <van-radio icon-size="16px" shape="square" name="3"><span>其他情况:</span><span class="underLine customInfo">{{customInfo.other}}</span></van-radio>
                      </van-radio-group>
                    </div>
                    <div v-else class="custom">
                      <van-field class="custom-name" v-model="customInfo.name" label="被检查建筑物名称" placeholder="请输入" />
                      <van-radio-group v-model="customInfo.check">
                        <van-radio icon-size="16px" shape="square" name="0">1998年9月1日之前竣工建筑且此后来改建(含装修、用途变更)</van-radio>
                        <van-radio icon-size="16px" shape="square" name="1">依法通过消防验收</van-radio>
                        <van-radio icon-size="16px" shape="square" name="2">依法进行竣工验收消防备案</van-radio>
                        <van-radio icon-size="16px" shape="square" name="3"><van-field v-model="customInfo.other" label="其他情况" placeholder="请输入" /></van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                  <div
                    class="sonProcessItem"
                    v-for="inputItem in nodes.childs"
                    :key="inputItem.id"
                  >
                    <div class="sonProcessName">
                      <div v-if="inputItem.check_result || inputItem.check_result == 0">
                        <van-radio-group v-if="inputItem.check_result == 0" disabled value="0">
                          <van-radio icon-size="16px" shape="square" name="0">不涉及</van-radio>
                          <!-- <van-radio v-if="inputItem.check_result == 1" icon-size="16px" shape="square" name="1">合格</van-radio> -->
                          <!-- <van-radio v-if="inputItem.check_result == 2" icon-size="16px" shape="square" name="1">不合格</van-radio> -->
                        </van-radio-group>
                      </div>
                      <!-- {{ inputItem.enforce_item }} -->
                      <span style="margin-left: 3px;">{{ inputItem.enforce_content }}</span>
                      <div class="right">
                        <div class="custom-option" v-if="inputItem.result_options">
                              <van-radio-group disabled direction="horizontal" v-model="inputItem.checkOption">
                                  <van-radio shape="square" v-for="(option, optionInd) in inputItem.result_options" :key="optionInd" :name="option">{{option}}</van-radio>
                              </van-radio-group>
                        </div>

                        <div class="custom-other" v-if="inputItem.other_enforce_item">
                              <div style="display: flex;" v-for="(other, otherInd) in inputItem.other_enforce_item" :key="otherInd">
                                  <div>{{ other.k }}</div>
                                  <div class="underLine">{{ other.v }}</div>
                              </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="sonProcessItem sonProcessItem1" style="margin-top: 10px;">
                    <div class="sonProcessName">检查情况:</div>
                    <div class="right" style="flex: 1;display: block" v-if="nodes.checkInfos">
                      <div v-for="(checkNodes, checkNodesIndex) in nodes.checkInfos" :key="checkNodesIndex">
                        <span>{{ checkNodes.name }}</span>
                        <span class="check-result">{{ checkNodes.result }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="processName">备注</div>
              </td>
              <td>
                <div v-for="(remark, remarkIndex) in customItems" :key="remarkIndex" class="sonProcessName">{{remark}}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <van-popup v-model="showSignPannel" position="bottom">
        <div class="signPop">
        <div class="signContent">
            <sign-canvas
                class="sign-canvas"
                ref="SignCanvas"
                :options="signOptions"
                v-model="signValue"
            />
        </div>
        <div class="signPopbtn">
            <van-button type="info" plain @click="clearCanvas">清除</van-button>
            <van-button type="info" @click="showSignPannel=false;">保存</van-button>
        </div>
        </div>
    </van-popup>

    <div class="btn" v-if="showSureBtn">
      <van-button type="info" @click="sure">确定</van-button>
    </div>

    <!-- 遮罩层 -->
    <v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
  </div>
</template>

<script>
import headNav from "@/components/headNav.vue";
import { downloadPDF } from "@/utils/htmlToPDF.js";
import mask_overLay from "@/components/overLay_xy.vue";
import { get, post, postImg, put, imgBaseUrl } from "@/utils/http.js";
import { getInfo } from "@/utils/auth";
import { dateFormat, notEmpty } from '@/utils/tool';
import { compressAccurately } from "image-conversion";
import recordSign from '@/mixins/recordSign';

export default {
  name: "checkRecord",
  components: {
    headNav,
    "v-mask": mask_overLay,
  },
  mixins: [recordSign],
  data() {
    return {
        checkForm: "1",
        isImportant: "1",
        showSureBtn: true,
        showOverLay: false,
        tipMsg: "加载中",
        topInfo: "",
        questionList: "",
        companyInfo: "",
        year: "    ",
        month: "  ",
        day: "  ",
        hour: "  ",
        imgSrc: "",
        showImg: "",
        showIcon: "",
        radioGroup1: "",
        pdfDataOld: [],
        pdfDataNew: "",
        pdfDataQes: "",
        fileNum: "",
        formData: {},
        jobNodes: [],
        allNodes: [],
        signValue: null,
        showSignPannel: false,
        signOptions: {
            isSign: true,
            isShowBorder: false,
            canvasWidth: 350,
            canvasHeight: 245,
            bgColor: '#fff'
        },
        customInfo: {
          name: '',
          check: '',
          other: ''
        },
        customItems: [],
    };
  },
  computed: {
    dailyId() {
      return this.$route.params.currentID;
    },
    isRead() {
        return this.$route.params.isRead
    },
    loginUser() {
      const user = getInfo();
      if (user) {
        return user.userInfo;
      }
      return null;
    },
  },
  mounted() {
    this.init();
  },
methods: {
    clearCanvas() {
        this.$refs.SignCanvas.canvasClear();
    },
    handleBookItem(data) {
        const result = this.getCheckResult(data);
        if (result && (result.check_result == 1 || result.check_result == 2)) {
            data.check_result = result.check_result;
        }
        else {
          data.check_result = 0;
        }
        if (data.result_options) {
            const options = []
            data.result_options = data.result_options.replace(/，/g, ',');
            data.result_options.split(',').map(item => {
                if (item && item.length > 0) {
                    // const have = result && result.check_options && result.check_options.indexOf(item) > 0;
                    // options.push({
                    //     k: item,
                    //     v: have
                    // });
                    let str = item.trim().replace('/', '');
                    str = str.replace('#', ',');
                    options.push(str);
                }
            })
            data.checkOption = result ? result.check_options : [];
            data.result_options = options;
        }
        if (data.other_enforce_item) {
            const list = [];
            const resultOthersStr = result && result.enforce_job_node_item && result.enforce_job_node_item.replace(/，/g, ',') || '';
				    const resultOthers = resultOthersStr.split(',');
            const others = data.other_enforce_item.replace('，', ',');
            const otherItems = others.split(',');
            otherItems.map((other, index) => {
                const item = other.replace('/', '');
                if (item && item.length > 0) {
                    const obj = {
                        k: item,
                        v: ''
                    };
                    if (resultOthers && resultOthers.length > index) {
                        obj.v = resultOthers[index];
                    }
                    list.push(obj);
                }
            })
            data.other_enforce_item = list
        }
    },
    getCheckResult(data) {
        if (this.jobNodes) {
            for (let i = 0; i < this.jobNodes.length; i++) {
                const node = this.jobNodes[i];
                const items = node.items || [];
                for (let j = 0; j < items.length; j++) {
                    const item = items[j];
                    if (data.id === item.item_id) {
                        return item;
                    }
                }
            }
        }
        return null;
    },
    getCategoryCheck(obj, arr) {
        let res = [];
        const vm = this;
        if (obj && arr && arr.length > 0) {
            arr.map(item => {
                const checkItem = vm.getCheckResult(item);
                if (checkItem && (checkItem.check_result == 1 || checkItem.check_result == 2)) {
                    // 0-不涉及,1-合格,2-不合格
                    const result = checkItem.check_result == 1 ? '合格' : '不合格';
                    res.push({
                        name: item.enforce_item,
                        result
                    });
                }
                // else {
                //     res.push({
                //         name: item.enforce_item,
                //         result: '不涉及'
                //     });
                // }
            });
        }
        obj.checkInfos = res;
    },
    handleBookDatas(data) {
        const cls = new Set();
        data.map((item) => {
            cls.add(item.enforce_class);
        });
        const list = [...cls];
        const res = [];
        const vm = this;
        list.map((item) => {
            const childs = data.filter((obj) => item === obj.enforce_class);
            childs.map(child => {
                vm.handleBookItem(child);
            })
            const obj = {
                id: item,
                enforce_item: item,
                childs: childs,
            };
            this.getCategoryCheck(obj, childs);
            res.push(obj);
        });
        this.allNodes = res;

        if (this.formData.check_nodes) {
          let marks = [];
          this.formData.check_nodes.map(node => {
            if (node.items) {
              node.items.map(item => {
                if (item.item_type == '1' && notEmpty(item.item_content)) {
                  let str = item.item_content;
                  switch (item.check_result) {
                    case 1:
                      str += ' -- 合格';
                      break;
                    case 2:
                      str += ' -- 不合格';
                      break;
                    default:
                      str += ' -- 不涉及';
                      break;
                  }
                  marks.push(str);
                }
              });
            }
          });
          this.customItems = marks;
        }
    },
    async init() {
      this.showOverLay = true;
      this.$http.get(`/v2/api/enforce-job/${this.dailyId}`).then(async (res) => {
          if (res && res.data && res.data.check_nodes) {
            this.jobNodes = res.data.check_nodes;
            const obj = res.data;
            const users = [];
            if (obj.executors) {
              obj.executors.map((item) => {
                users.push(item.user_name);
              });
              obj.executorNames = users.join(", ");
            }
            if (obj.start_time) {
              const date = dateFormat('YYYY-mm-dd-HH', new Date(obj.start_time)).split('-');
              this.year = date[0];
              this.month = date[1];
              this.day = date[2];
              this.hour = date[3];
            }

            this.formData = obj;
            this.fileNum = obj.job_no;
            this.$http.get("/v2/api/enforce-handbook?page=1&size=100000&sort=sort asc&query=enforce_type==0").then((result) => {
                if (result.data.data) {
                  const res = [...result.data.data];
                  this.handleBookDatas(res);
                }
                this.showOverLay = false;
              });
            // let checkNodes = res.data.check_nodes
            // for (let i = 0; i < checkNodes.length; i++) {
            //   let tmpCheckNodes = this.formData.check_nodes
            //   if ((checkNodes[i].items || []).length > 0) {
            //     checkNodes[i].enforce_obj_class = (checkNodes[i].items[0] || {}).enforce_obj_class || ''
            //     checkNodes[i].checkResultList = []
            //     for (let itemsIndex = 0; itemsIndex < checkNodes[i].items.length; itemsIndex++) {
            //       if (checkNodes[i].items[itemsIndex].check_result) {
            //         checkNodes[i].checkResultList.push({
            //           ...checkNodes[i].items[itemsIndex],
            //           checkResultName: checkNodes[i].items[itemsIndex].check_result == 1 ? '合格' : '不合格'
            //         })
            //       }
            //       if (checkNodes[i].items[itemsIndex].item_id) {
            //         let tmpRes = await this.$http.get(`/v2/api/enforce-handbook/${checkNodes[i].items[itemsIndex].item_id}`).catch(() => null)
            //         if (tmpRes && tmpRes.data) {
            //           tmpRes.data.result_options_keys = (tmpRes.data.result_options || '').split('，') || []
            //           tmpCheckNodes[i].items[itemsIndex] = {
            //             ...tmpCheckNodes[i].items[itemsIndex],
            //             tmpHandbookValue: tmpRes.data
            //           }
            //         }
            //       }
            //     }
            //   }
            //   this.formData = {
            //     ...this.formData,
            //     check_nodes: [...tmpCheckNodes]
            //   }
            // }
          }
        });
      // this.topInfo = await this.getDetailInfoApi();
    },

    // 获取图片Api
    getPdfImgApi(id) {
      return get(`/supervision/getCheckLogPic/${id}`);
    },

    // 获取任务详情信息
    async getDetailInfoApi() {
      const res = await get(
        `/cdsupervisionTask/get/${this.$route.params.currentID}`
      );
      if (res.success === true) {
        return res.data;
      }
    },

    // 获取pdf答案
    async getPdfDataApi(id) {
      const res = await get(`/applet/getPdfData/${id}`);
      if (res.success === true) {
        return res.data;
      }
    },

    // 获取单位信息
    async getCompanyInfoApi(id) {
      const res = await get(`/cdSuperObjE/get/${id}`);
      if (res.success === true) {
        return res.data;
      }
    },

    // 获取编号
    async getFileNumApi() {
      const res = await get(`/applet/getPdfCode`);
      if (res.success === true) {
        return res.data;
      }
    },

    // 解析radio的字符串为数组
    getRadioGroup(str) {
      return str.split(",");
    },

    // 后退一页
    backPage() {
      this.$router.go(-1);
    },

    // 跳转检查结果
    rightClick() {
      this.$router.replace(
        `/checkResult/${this.topInfo.taskId}/${this.$route.params.currentID}`
      );
    },

    // base64转blob
    dataURItoBlob(base64Data) {
      var byteString;

      if (base64Data.split(",")[0].indexOf("base64") >= 0)
        byteString = atob(base64Data.split(",")[1]);
      else byteString = unescape(base64Data.split(",")[1]);

      var mimeString = base64Data
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];

      var ia = new Uint8Array(byteString.length);

      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }

      return new Blob([ia], {
        type: mimeString,
      });
    },

    // 确定
    async sure() {
      // if (!this.signValue) {
      //   this.$toast.fail('请被检查单位随网检查人员签名');
      //   return;
      // }

      this.showOverLay = true;
      this.showSureBtn = false;
      this.tipMsg = "上传pdf中";
      setTimeout(async() => {
        let subData = "";
        subData = await downloadPDF(
          document.querySelector("#file"),
          "消防监督检查记录"
        );
        // this.imgSrc = subData.turnImgData;
        this.startToSign(subData);
      }, 2000);
      // return;

      // this.tipMsg = "上传pdf中";
      // let imgblob = this.dataURItoBlob(subData.turnImgData);
      // imgblob = await compressAccurately(imgblob, {
      //   size: 500,
      // });
      // let imgFd = new FormData();
      // imgFd.append("fileBinary", imgblob, "pdf.png");
      // imgFd.append("fileName", '消防监督检查记录.png');
      // // 上传图片
      // let imgUploadRes = await this.$http.post("/v2/api/file", imgFd);
      // if (imgUploadRes.data && imgUploadRes.data.id) {
      //     this.formData.result_png_file_id = imgUploadRes.data.id;
      // }

      // var fd = new FormData(document.forms[0]);
      // fd.append("fileBinary", subData.myfile);
      // fd.append("fileName", "消防监督检查记录.pdf");
      // let res = await post("/v2/api/file", fd);
      // if (res.id) {
      //     this.formData.result_file_id = res.id;
      //     this.updateTaskRecordFile();
      // } else {
      //   this.$toast.fail("上传失败");
      // }
      // this.showOverLay = false;
    },
    updateTaskRecordFile() {
      this.showOverLay = true;
      put(`/v2/api/enforce-job/${this.dailyId}`, {
          id: this.dailyId,
          result_file_id: this.formData.result_file_id,
          result_png_file_id: this.formData.result_png_file_id,
        })
        .then((res) => {
          this.$router.replace(`/checkResult/${this.$route.params.currentID}/normal`);
          this.showOverLay = false;
        })
        .catch(() => {
          this.$toast.fail("上传失败");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.checkRecord {
  font-size: 14px;

  .pdfImg {
    margin-top: 47px;
  }

  .ml5 {
    margin-left: 5px;
  }

  .scale8 {
    transform: scale(0.8);
  }

  .scale9 {
    transform: scale(0.9);
  }

  .itemFlex1 {
    flex: 1;
  }

  .itemFlex2 {
    flex: 2;
  }

  .underLine {
    flex: 1;
    height: 15px;
    border-bottom: 1px solid #a0a0a2;
    min-width: 25px;
    img {
        margin-top: -10px;
        width: 50%;
    }
  }

  .underLine_ {
    border-bottom: 1px solid #a0a0a2;
    padding: 0 4px;
  }

  .file {
    overflow: auto;
    // margin-top: 60px;
    background-color: #fff;
    font-family: arial;

    color: #585858;
    font-size: 10px;

    .title {
      margin-top: 70px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      letter-spacing: 2px;

      .title_top {
        font-size: 18px;
        margin-bottom: 10px;
      }

      .title_bottom {
        font-size: 14px;
        font-weight: bold;
      }
    }

    .number {
      font-size: 12px;
      display: flex;
      justify-content: flex-end;
      margin: 10px 26px 10px 0;
    }

    .file_top {
      margin-top: -40px;
    }

    .isImportant {
      margin: 20px 0;
      display: flex;
    }

    .tips {
      margin: 50px 0 80px;
    }
  }

  .btn {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;

    button {
      flex: 1;
      margin: 5px 25px;
      height: 40px;
    }
  }

  .table {
    margin-top: 90px;
    padding: 10px 16px;

    .flexEnd {
      align-items: flex-end !important;
    }

    table {
      border: none;
      border-bottom: 1px solid;
      // border-collapse: collapse
    }

    .processName {
      width: 30px;
      font-size: 13px;
      text-align: center;
      white-space: normal;
      word-break: break-all;
      color: #4d4d4d;
    }

    .sonProcessContent {
      padding: 0px 0px 20px 0px;

      .sonProcessItem {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 6px;

        .tableInput {
          border: none;
          border-bottom: 1px solid #a0a0a2;
        }

        .left {
          display: flex;
          margin-top: 2px;
        }

        .explain {
          textarea {
            border: none;
            width: 100%;
            resize: none;
            padding: 0;
          }
        }

        .sonProcessName {
          font-weight: bold;
          font-size: 12px;
          transform: scale(0.9);
          margin-left: -5px;
          // margin-top: 2px;
          display: flex;
          flex-wrap: wrap;
        }

        .right {
          display: flex;
          flex-wrap: wrap;
          margin-left: 10px;
          flex: 2;
          margin-top: -1px;

          .right_content {
            padding-left: 8px;
            height: 15px;
            display: flex;
            align-items: flex-end;
          }
        }

        .pabsolute {
          position: absolute;
          right: 15px;
          top: 15px;
        }
      }

      .sonProcessItem1 {
        margin-top: 4px;
      }

      .sonProcessSpec {
        flex-wrap: nowrap;
        position: relative;
      }
    }

    th {
      border: 1px solid;
      padding: 4px 5px;
      border-bottom: none;
      border-right: none;

      &:last-child {
        border-right: 1px solid;
      }
    }

    td {
      border: 1px solid;
      padding: 4px 5px;
      border-bottom: none;
      border-right: none;

      &:last-child {
        border-right: 1px solid;
      }
    }

    .tableNewList_item {
      display: flex;
      justify-content: space-between;
    }
  }
  .check-result {
      margin-left: 10px;
  }
}
.custom {
  font-size: 10px;
}
.custom-option {
  display: flex;
  align-items: center;
}
.custom-other {
  display: flex;
  align-items: center;
  flex: 1; 
  flex-wrap: wrap;
}
.customInfo {
  margin-left: 14px;
  height: 40px;
  line-height: 40px;
}
</style>

<style lang="scss">
.checkRecord {
  height: calc(100vh);
  overflow: auto;

  .specCheckBox {
    display: inline-block;
    position: relative;

    .specCheckBox_div {
      position: absolute;
      font-weight: normal;
      width: 130px;
      top: -14px;
      left: 20px;
    }
  }

  .van-radio-group {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .van-radio__label {
    color: #585858;
  }

  .sonProcessItem {
    .van-radio__icon--checked .van-icon {
      background-color: transparent;
      border: none;
      color: #000;
      // font-size: 14px;
    }
    .van-radio__icon.van-radio__icon--square {
      border: 1px solid #383838;
      width: 10px;
      height: 10px;
      margin-bottom: 2px;
    }
    .van-radio__icon.van-radio__icon--square.van-radio__icon--checked {
      border: 1px solid transparent;
      margin-left: -3px;
    }
    .van-icon.van-icon-success {
      border: none;
    }
    .van-checkbox {
      align-items: flex-start;

      .van-checkbox__icon.van-checkbox__icon--square {
        width: 12px;
        height: 12px;
      }

      .van-checkbox__icon.van-checkbox__icon--square.van-checkbox__icon--checked {
        // margin-top: 5px;

        .van-icon.van-icon-success {
          margin-top: 5px;
          width: 12px;
          height: 12px;
          font-size: 12px;
          background-color: transparent;
          color: #323233;
          border: none;
        }
      }

      .van-icon.van-icon-success {
        margin-top: 5px;
        width: 12px;
        height: 12px;
        font-size: 12px;
        border: 1px solid #323243;
      }

      .van-checkbox__icon--disabled .van-icon {
          background-color: transparent !important;
      }
    }
  }

  .van-field__control {
    border-bottom: 1px solid #757575;
    width: 100%;
  }

  .van-cell.van-field {
    padding: 5px 5px;
  }

  .van-radio__icon--disabled .van-icon {
    background-color: transparent;
  }

  .van-radio__label.van-radio__label--disabled {
    margin-left: 4px;
    color: #7f7f7f;
  }
}
.custom {
  .van-cell {
    font-size: 10px;
  }
  .van-cell::after {
    border-bottom: none;
  }
  .van-radio__icon--checked .van-icon {
    background-color: transparent;
    border-color: #323233;
    color: #323233;
  }
  .custom-name {
    .van-cell__title {
      width: 100px;
    }
  }
}
</style>