<template>
  <div class="hd-info-wrapper">
    <div class="hd-type-add-wrapper">
      <el-button type="primary" @click="addHdTypeDialogShow"
        >新增安全类别</el-button
      >
    </div>
    <div
      style="display: flex;align-items: center;"
      @click.stop="totalData.isDataCheckShow = !totalData.isDataCheckShow"
    >
      <div
        class="triangle-wrapper"
        style="margin-right: 15px;margin-left: 10px;"
      >
        <div v-if="totalData.isDataCheckShow">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3183"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="32"
            height="32"
          >
            <path
              d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
              p-id="3184"
            ></path>
          </svg>
        </div>
        <div v-else>
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <path
              d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
              fill="#2c2c2c"
            ></path>
          </svg>
        </div>
      </div>
      <h2>安全资料检查类</h2>
    </div>
    <div
      class="hd-type-wrapper"
      v-show="totalData.isDataCheckShow"
      v-for="(item, index) in totalData.datacheck"
    >
      <div
        class="hd-type-tools-wrapper"
        @click.stop="item.isShow = !item.isShow"
      >
        <div class="hd-type-triangle-name-wrapper">
          <div class="triangle-wrapper">
            <div v-if="item.isShow">
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3183"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="26"
                height="26"
              >
                <path
                  d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
                  p-id="3184"
                ></path>
              </svg>
            </div>
            <div v-else>
              <svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="26"
                height="26"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <path
                  d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
                  fill="#2c2c2c"
                ></path>
              </svg>
            </div>
          </div>
          <div class="hd-type-name">
            <span style="">安全类别：</span><span>{{ item.type }}</span>
          </div>
        </div>
        <div class="hd-type-tool-wrapper">
          <el-button
            type="warning"
            @click.stop="editHdTypeDialogShow(item, '安全资料类')"
            >编辑</el-button
          >
          <el-button type="danger" @click.stop="deleteHdType(item)"
            >删除</el-button
          >
        </div>
      </div>
      <div class="hd-type-tools-down" v-show="item.isShow">
        <div class="hd-inspection-add-wrapper">
          <el-button
            type="primary"
            @click.stop="addHdInspectionDialogShow(item)"
            >新增检查内容</el-button
          >
        </div>
        <div
          v-for="(inspection, index1) in item.inspectionContent"
          class="hd-inspection-item-total-wrapper"
        >
          <div
            class="hd-inspection-item-wrapper"
            @click="inspection.isShow = !inspection.isShow"
          >
            <div class="hd-inspection-triangle-wrapper">
              <div class="triangle-wrapper">
                <div v-if="inspection.isShow">
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3183"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="22"
                    height="22"
                  >
                    <path
                      d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
                      p-id="3184"
                    ></path>
                  </svg>
                </div>
                <div v-else>
                  <svg
                    viewBox="0 0 1024 1024"
                    xmlns="http://www.w3.org/2000/svg"
                    width="22"
                    height="22"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                  >
                    <path
                      d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
                      fill="#2c2c2c"
                    ></path>
                  </svg>
                </div>
              </div>
              <div class="hd-inspection-content">
                <span style="font-size: 18px;font-weight: bold;"
                  >检查内容: </span
                ><span>{{ inspection.inspectionContent }}</span>
              </div>
            </div>
            <div class="hd-inspection-tools-wrapper">
              <el-button
                type="warning"
                @click.stop="editInspectionDialogShow(item, inspection)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click.stop="deleteInspection(inspection)"
                >删除</el-button
              >
            </div>
          </div>
          <div class="hd-discover-add-wrapper" v-show="inspection.isShow">
            <el-button
              type="primary"
              @click="safetyMatterDialogShow(inspection)"
              >新增发现问题</el-button
            >
          </div>
          <div
            v-for="(matt, index2) in inspection.matts"
            class="hd-discover-wrapper"
            v-show="inspection.isShow"
          >
            <div class="matt-left">
              <div class="matt-left-discover">
                <span class="matt-left-title">发现问题：</span
                ><span class="matt-left-content">{{ matt.discover }}</span>
              </div>
              <div class="matt-left-basis">
                <span class="matt-left-title">检查依据：</span
                ><span class="matt-left-content">{{ matt.basis }}</span>
              </div>
              <div class="matt-left-suggestion">
                <span class="matt-left-title">检查建议：</span
                ><span class="matt-left-content">{{ matt.suggestion }}</span>
              </div>
            </div>
            <div class="matt-right">
              <el-button
                type="warning"
                @click.stop="editSafetyMatterDialogShow(inspection, matt)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click.stop="deleteSafetyMatterDialogShow(matt)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="display: flex;align-items: center;"
      @click.stop="totalData.isSiteManageShow = !totalData.isSiteManageShow"
    >
      <div
        class="triangle-wrapper"
        style="margin-right: 15px;margin-left: 10px;"
      >
        <div v-if="totalData.isSiteManageShow">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3183"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="32"
            height="32"
          >
            <path
              d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
              p-id="3184"
            ></path>
          </svg>
        </div>
        <div v-else>
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <path
              d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
              fill="#2c2c2c"
            ></path>
          </svg>
        </div>
      </div>
      <h2>现场管理类</h2>
    </div>
    <div
      class="hd-type-wrapper"
      v-show="totalData.isSiteManageShow"
      v-for="(item, index) in totalData.sitemanage"
    >
      <div class="hd-type-tools-wrapper">
        <div
          class="hd-type-triangle-name-wrapper"
          @click.stop="item.isShow = !item.isShow"
        >
          <div class="triangle-wrapper">
            <div v-if="item.isShow">
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3183"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="26"
                height="26"
              >
                <path
                  d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
                  p-id="3184"
                ></path>
              </svg>
            </div>
            <div v-else>
              <svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="26"
                height="26"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <path
                  d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
                  fill="#2c2c2c"
                ></path>
              </svg>
            </div>
          </div>
          <div class="hd-type-name">
            <span style="">安全类别：</span><span>{{ item.type }}</span>
          </div>
        </div>
        <div class="hd-type-tool-wrapper">
          <el-button
            type="warning"
            @click.stop="editHdTypeDialogShow(item, '现场检查类')"
            >编辑</el-button
          >
          <el-button type="danger" @click.stop="deleteHdType(item)"
            >删除</el-button
          >
        </div>
      </div>
      <div class="hd-type-tools-down" v-show="item.isShow">
        <div class="hd-inspection-add-wrapper">
          <el-button
            type="primary"
            @click.stop="addHdInspectionDialogShow(item)"
            >新增检查内容</el-button
          >
        </div>
        <div
          v-for="(inspection, index1) in item.inspectionContent"
          class="hd-inspection-item-total-wrapper"
        >
          <div class="hd-inspection-item-wrapper">
            <div
              class="hd-inspection-triangle-wrapper"
              @click="inspection.isShow = !inspection.isShow"
            >
              <div class="triangle-wrapper">
                <div v-if="inspection.isShow">
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3183"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="22"
                    height="22"
                  >
                    <path
                      d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
                      p-id="3184"
                    ></path>
                  </svg>
                </div>
                <div v-else>
                  <svg
                    viewBox="0 0 1024 1024"
                    xmlns="http://www.w3.org/2000/svg"
                    width="22"
                    height="22"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                  >
                    <path
                      d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
                      fill="#2c2c2c"
                    ></path>
                  </svg>
                </div>
              </div>
              <div class="hd-inspection-content">
                <span style="font-size: 18px;font-weight: bold;"
                  >检查内容: </span
                ><span>{{ inspection.inspectionContent }}</span>
              </div>
            </div>
            <div class="hd-inspection-tools-wrapper">
              <el-button
                type="warning"
                @click.stop="editInspectionDialogShow(item, inspection)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click.stop="deleteInspection(inspection)"
                >删除</el-button
              >
            </div>
          </div>
          <div class="hd-discover-add-wrapper" v-show="inspection.isShow">
            <el-button
              type="primary"
              @click="safetyMatterDialogShow(inspection)"
              >新增发现问题</el-button
            >
          </div>
          <div
            v-for="(matt, index2) in inspection.matts"
            class="hd-discover-wrapper"
            v-show="inspection.isShow"
          >
            <div class="matt-left">
              <div class="matt-left-discover">
                <span class="matt-left-title">发现问题：</span
                ><span class="matt-left-content">{{ matt.discover }}</span>
              </div>
              <div class="matt-left-basis">
                <span class="matt-left-title">检查依据：</span
                ><span class="matt-left-content">{{ matt.basis }}</span>
              </div>
              <div class="matt-left-suggestion">
                <span class="matt-left-title">检查建议：</span
                ><span class="matt-left-content">{{ matt.suggestion }}</span>
              </div>
            </div>
            <div class="matt-right">
              <el-button
                type="warning"
                @click="editSafetyMatterDialogShow(inspection, matt)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click="deleteSafetyMatterDialogShow(matt)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div
        style="display: flex; align-items: center; justify-content: space-between;"
        @click.stop="isShowTemplateTableData = !isShowTemplateTableData"
      >
        <div style="display: flex; align-items: center;">
          <div
            class="triangle-wrapper"
            style="margin-right: 15px;margin-left: 10px;"
          >
            <div v-if="isShowTemplateTableData">
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3183"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="32"
                height="32"
              >
                <path
                  d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
                  p-id="3184"
                ></path>
              </svg>
            </div>
            <div v-else>
              <svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <path
                  d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
                  fill="#2c2c2c"
                ></path>
              </svg>
            </div>
          </div>
          <h2>企业安全管理问题库模板</h2>
        </div>
        <el-button
          type="primary"
          style="margin-right: 15px;"
          @click.stop="generateAllTableData"
          >生成企业安全责任清单模板</el-button
        >
      </div>
      <div v-show="isShowTemplateTableData" style="padding: 20px;">
        <el-table
          :data="allTotalGenerateTableData"
          :span-method="arraySpanMethodSync"
          border
          v-loading="isLoadingTableData"
        >
          <el-table-column
            prop="totalCategory"
            label="类别"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="安全检查类别"
            width="240"
          ></el-table-column>
          <el-table-column
            prop="secContent"
            label="安全检查内容"
            width="280"
          ></el-table-column>
          <el-table-column
            prop="discover"
            label="发现问题"
            width="360"
          ></el-table-column>
          <el-table-column
            prop="basis"
            label="检查依据"
            width="360"
          ></el-table-column>
          <el-table-column
            prop="suggestion"
            label="整改建议"
            width="360"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="安全类别表单"
      :visible.sync="isShowAddTypeDialog"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="isShowAddTypeDialog"
        ref="hdtypeaddform"
        :rules="hdTypeFormRules"
        :model="hdTypeForm"
        label-width="120px"
      >
        <el-form-item label="安全分类" prop="type">
          <el-select v-model="hdTypeForm.type" placeholder="请选择安全分类">
            <el-option label="安全资料类" value="安全资料类"></el-option>
            <el-option label="现场检查类" value="现场检查类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全类别名称" prop="name">
          <el-input v-model="hdTypeForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitSecType">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑安全类别表单"
      :visible.sync="isShowEditTypeDialog"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="isShowEditTypeDialog"
        ref="hdtypeeditform"
        :rules="hdTypeFormRules"
        :model="hdEditTypeForm"
        label-width="120px"
      >
        <el-form-item label="安全分类" prop="type">
          <el-select v-model="hdEditTypeForm.type" placeholder="请选择安全分类">
            <el-option label="安全资料类" value="安全资料类"></el-option>
            <el-option label="现场检查类" value="现场检查类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全类别名称" prop="name">
          <el-input
            v-model="hdEditTypeForm.name"
            placeholder="请输入安全分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitHdTypeEdit">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="安全检查内容表单"
      :visible.sync="isShowAddInspectionDialog"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="isShowAddInspectionDialog"
        ref="hdinspectionaddform"
        :rules="hdInspectionFormRules"
        :model="hdInspectionForm"
        label-width="120px"
      >
        <el-form-item label="安全检查内容" prop="name">
          <el-input
            v-model="hdInspectionForm.name"
            placeholder="请输入安全检查内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitInspection">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑安全检查内容表单"
      :visible.sync="isShowEditInspectionDialog"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="isShowEditInspectionDialog"
        ref="hdinspectioneditform"
        :rules="hdInspectionFormRules"
        :model="hdInspectionEditForm"
        label-width="120px"
      >
        <el-form-item label="安全检查内容" prop="name">
          <el-input
            v-model="hdInspectionEditForm.name"
            placeholder="请输入安全检查内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitHdInspectionForm"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="添加发现问题表单"
      :visible.sync="isShowSafetyMatterDialogShow"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="isShowSafetyMatterDialogShow"
        ref="hdsafetymattaddform"
        :rules="hdSafetyMatterFormRules"
        :model="hdSafetyMatterForm"
        label-width="120px"
      >
        <el-form-item label="发现问题" prop="name">
          <el-input
            v-model="hdSafetyMatterForm.name"
            placeholder="请输入发现问题"
          ></el-input>
        </el-form-item>
        <el-form-item label="检查依据" prop="basis">
          <el-input
            v-model="hdSafetyMatterForm.basis"
            placeholder="请输入检查依据"
          ></el-input>
        </el-form-item>
        <el-form-item label="整改建议" prop="suggestion">
          <el-input
            v-model="hdSafetyMatterForm.suggestion"
            placeholder="请输入整改建议"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click.stop="submitSafetyMatter"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="编辑发现问题表单"
      :visible.sync="isShowSafetyMatterEditDialogShow"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="isShowSafetyMatterEditDialogShow"
        ref="hdsafetymatteditform"
        :rules="hdSafetyMatterFormRules"
        :model="hdSafetyMatterEditForm"
        label-width="120px"
      >
        <el-form-item label="发现问题" prop="name">
          <el-input
            v-model="hdSafetyMatterEditForm.name"
            placeholder="请输入发现问题"
          ></el-input>
        </el-form-item>
        <el-form-item label="检查依据" prop="basis">
          <el-input
            v-model="hdSafetyMatterEditForm.basis"
            placeholder="请输入检查依据"
          ></el-input>
        </el-form-item>
        <el-form-item label="整改建议" prop="suggestion">
          <el-input
            v-model="hdSafetyMatterEditForm.suggestion"
            placeholder="请输入整改建议"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click.stop="submitEditSafetyMatter"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEnterpriseSafetyInspectionContent,
  postEnterpriseSafetyInspectionContent,
  putEnterpriseSafetyInspectionContent,
  deleteEnterpriseSafetyInspectionContent,
  getEnterpriseSafetyMatter,
  postEnterpriseSafetyMatter,
  putEnterpriseSafetyMatter,
  deleteEnterpriseSafetyMatter
} from "@/api/secFound.js";
export default {
  data() {
    return {
      isShowTemplateTableData: false,
      isShowTemplateDataCheck: false,
      isShowTemplateSiteManage: false,
      templateDataCheck: [],
      templateSiteManage: [],
      templateData: [],
      isShowAddTypeDialog: false,
      hdTypeForm: {
        level: 1,
        name: "",
        type: ""
      },
      hdTypeFormRules: {
        name: [
          {
            required: true,
            message: "请选择安全分类",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择安全分类",
            trigger: "change"
          }
        ]
      },
      hdTypeList: [
        {
          label: "安全资料类",
          value: "安全资料类"
        },
        {
          label: "现场管理类",
          value: "现场管理类"
        }
      ],
      isShowEditTypeDialog: false,
      hdEditTypeForm: {
        id: -1,
        level: 1,
        name: "",
        type: ""
      },
      isShowAddInspectionDialog: false,
      hdInspectionForm: {
        level: 2,
        name: "",
        pid: -1
      },
      hdInspectionFormRules: {
        name: [
          {
            required: true,
            message: "请输入检查内容描述",
            trigger: "blur"
          }
        ]
      },
      isShowEditInspectionDialog: false,
      hdInspectionEditForm: {
        level: 2,
        name: "",
        id: -1
      },
      isShowSafetyMatterDialogShow: false,
      hdSafetyMatterForm: {
        inspectionContentId: -1,
        name: "",
        basis: "",
        suggestion: ""
      },
      hdSafetyMatterFormRules: {
        name: [
          {
            required: true,
            message: "请输入发现问题描述",
            trigger: "blur"
          }
        ],
        basis: [
          {
            required: true,
            message: "请输入检查依据",
            trigger: "blur"
          }
        ],
        suggestion: [
          {
            required: true,
            message: "请输入整改建议",
            trigger: "blur"
          }
        ]
      },
      isShowSafetyMatterEditDialogShow: false,
      hdSafetyMatterEditForm: {
        id: -1,
        inspectionContentId: -1,
        basis: "",
        name: "",
        suggestion: ""
      },
      totalData: {
        isDataCheckShow: false,
        datacheck: [
          {
            type: "安全生产标准化和双重预防体系",
            isShow: true,
            inspectionContent: [
              {
                inspectionContentId: -1,
                inspectionContent: "1、是否建立安全生产标准化, 是否有效运行",
                isShow: true,
                matts: [
                  {
                    discover: "1.1.1 未建立安全生产标准化",
                    basis:
                      "《中华人民共和国安全生产法》第二十一条、《山东省生产经营单位安全生产主题责任规定》第二十六条",
                    suggestion: "按法规和规定及时建立安全标准化"
                  },
                  {
                    discover: "1.1.2 未有效运行安全标准化",
                    basis:
                      "《中华人民共和国安全生产法》第二十一条、《山东省生产经营单位安全生产主题责任规定》第二十六条",
                    suggestion: "按法规和规定有效运行安全标准化"
                  }
                ]
              }
            ]
          }
        ],
        isSiteManageShow: false,
        sitemanage: [
          {
            type: "安全生产标准化和双重预防体系",
            isShow: true,
            inspectionContent: [
              {
                inspectionContent: "1、是否建立安全生产标准化, 是否有效运行",
                isShow: true,
                matts: [
                  {
                    discover: "1.1.1 未建立安全生产标准化",
                    basis:
                      "《中华人民共和国安全生产法》第二十一条、《山东省生产经营单位安全生产主题责任规定》第二十六条",
                    suggestion: "按法规和规定及时建立安全标准化"
                  },
                  {
                    discover: "1.1.2 未有效运行安全标准化",
                    basis:
                      "《中华人民共和国安全生产法》第二十一条、《山东省生产经营单位安全生产主题责任规定》第二十六条",
                    suggestion: "按法规和规定有效运行安全标准化"
                  }
                ]
              }
            ]
          }
        ]
      },
      allTotalGenerateTableData: [],
      isLoadingTableData: false
    };
  },
  async mounted() {
    this.initAllTableData();
    // await this.generateAllTableData();
    if (window.localStorage.getItem("enterpriseTemplateData")) {
      this.allTotalGenerateTableData = [
        ...JSON.parse(window.localStorage.getItem("enterpriseTemplateData"))
      ];
    }
  },
  methods: {
    arraySpanMethodSync({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.column0hide === false) {
          return [row.column0Length, 1];
        } else {
          return [0, 0];
        }
      }
      if (columnIndex === 1) {
        if (row.column1hide === false) {
          return [row.column1Length, 1];
        } else {
          return [0, 0];
        }
      }
      if (columnIndex === 2) {
        if (row.column2hide === false) {
          return [row.column2Length, 1];
        } else {
          return [0, 0];
        }
      }
    },
    async generateAllTableData() {
      if (window.localStorage.getItem("enterpriseTemplateData")) {
        this.allTotalGenerateTableData = [
          ...JSON.parse(window.localStorage.getItem("enterpriseTemplateData"))
        ];
        return;
      }
      this.isLoadingTableData = true;
      const allTableData = [];
      await getEnterpriseSafetyInspectionContent({
        level: 1,
        page: 0,
        size: 9999
      }).then(async res => {
        const level1data = [
          ...res.content
            .filter(item => item.type === "安全资料类")
            .map(item => {
              return {
                ...item,
                totalCategory: "安全资料类",
                type: item.name
              };
            }),
          ...res.content
            .filter(item => item.type === "现场检查类")
            .map(item => {
              return {
                ...item,
                totalCategory: "现场检查类",
                type: item.name
              };
            })
        ];
        const parr1 = [];
        level1data.forEach(item => {
          let p1 = getEnterpriseSafetyInspectionContent({
            level: 2,
            page: 0,
            size: 9999,
            pid: item.id
          }).then(async res1 => {
            item.secCheckContent = [
              ...res1.content.map(item => {
                return {
                  ...item,
                  secContent: item.name
                };
              })
            ];
            const parr2 = [];
            item.secCheckContent.forEach(item1 => {
              let p2 = getEnterpriseSafetyMatter({
                inspectionContentId: item1.id,
                page: 0,
                size: 9999
              }).then(res2 => {
                item1.matts = [
                  ...res2.content.map(item3 => {
                    return {
                      ...item3,
                      discover: item3.name
                    };
                  })
                ];
              });
              parr2.push(p2);
            });
            await Promise.all(parr2);
          });
          parr1.push(p1);
        });
        await Promise.all(parr1);
        level1data.forEach(item => {
          item.secCheckContent.forEach(item1 => {
            item1.matts.forEach(item2 => {
              allTableData.push({
                totalCategory: item.totalCategory,
                type: item.type,
                secContent: item1.secContent,
                discover: item2.discover,
                basis: item2.basis,
                suggestion: item2.suggestion
              });
            });
          });
        });
        console.log(
          allTableData,
          "allTableData allTableData allTableData allTableData allTableData"
        );
      });
      allTableData.forEach(item => {
        item.column0Length = allTableData.filter(
          item1 => item1.totalCategory === item.totalCategory
        ).length;
        item.column1Length = allTableData.filter(
          item1 => item1.type === item.type
        ).length;
        item.column2Length = allTableData.filter(
          item1 => item1.secContent === item.secContent
        ).length;
      });
      for (let j = 0; j < allTableData.length; j++) {
        const item = allTableData[j];
        const index = j;
        let hasAppear = false;
        for (let i = 0; i < index; i++) {
          if (item.totalCategory === allTableData[i].totalCategory) {
            hasAppear = true;
            break;
          }
        }
        item.column0hide = hasAppear;
      }
      for (let j = 0; j < allTableData.length; j++) {
        const item = allTableData[j];
        const index = j;
        let hasAppear = false;
        for (let i = 0; i < index; i++) {
          if (item.type === allTableData[i].type) {
            hasAppear = true;
            break;
          }
        }
        item.column1hide = hasAppear;
      }
      for (let j = 0; j < allTableData.length; j++) {
        const item = allTableData[j];
        const index = j;
        let hasAppear = false;
        for (let i = 0; i < index; i++) {
          if (item.secContent === allTableData[i].secContent) {
            hasAppear = true;
            break;
          }
        }
        item.column2hide = hasAppear;
      }
      this.allTotalGenerateTableData = [...allTableData];
      this.isLoadingTableData = false;
      window.localStorage.setItem(
        "enterpriseTemplateData",
        JSON.stringify(allTableData)
      );
    },
    computePreArrLengthByindexInSiteManage(passindex) {
      const toComputeArr = this.totalData.sitemanage.filter(
        (item, index) => index < passindex
      );
      if (toComputeArr.length === 0) {
        return 0;
      } else {
        let result = 0;
        toComputeArr.forEach(datacheck => {
          datacheck.inspectionContent.forEach(inspection => {
            result += inspection.matts.length;
          });
        });
        return result;
      }
    },
    computeCurArrLengthByIndexInSiteManage(passIndex) {
      const toComputeArr = this.totalData.sitemanage.filter((item, index) => {
        return index === passIndex;
      });
      if (toComputeArr.length === 0) {
        return 0;
      } else {
        let result = 0;
        toComputeArr[0].inspectionContent.forEach(item => {
          result += item.matts.length;
        });
        return result;
      }
    },
    computeCurArrLengthByIndex12InSiteManage(passIndex1, passIndex2) {
      const toComputeArr = this.totalData.datacheck.filter(
        (item, index) => index === passIndex1
      );
      const toComputeArr2 = toComputeArr[0].inspectionContent.filter(
        (item, index) => index < passIndex2
      );
      if (toComputeArr2.length === 0) {
        return 0;
      } else {
        let result = 0;
        toComputeArr2.forEach(item => {
          result += item.matts.length;
        });
        return result;
      }
    },
    generateTemplateSiteManage() {
      this.templateSiteManage = [];
      let curIndex = 0;
      this.totalData.sitemanage.forEach((item, index, arr) => {
        item.inspectionContent.forEach((item1, index1, arr1) => {
          item1.matts.forEach((item2, index2, arr2) => {
            this.templateSiteManage.push({
              totalType: "现场管理类",
              type: item.type,
              inspectionContent: item1.inspectionContent,
              discover: item2.discover,
              basis: item2.basis,
              suggestion: item2.suggestion,
              isHideColumn1:
                curIndex !== this.computePreArrLengthByindexInSiteManage(index),
              isHideColumn1Length: this.computeCurArrLengthByIndexInSiteManage(
                index
              ),
              isHideColumn2:
                curIndex !==
                this.computeCurArrLengthByIndex12InSiteManage(index, index1) +
                  this.computePreArrLengthByindexInSiteManage(index),
              isHideColumn2Length: arr2.length
            });
            curIndex++;
          });
        });
      });
    },
    computePreArrLengthByindexInDataCheck(passindex) {
      const toComputeArr = this.totalData.datacheck.filter(
        (item, index) => index < passindex
      );
      if (toComputeArr.length === 0) {
        return 0;
      } else {
        let result = 0;
        toComputeArr.forEach(datacheck => {
          datacheck.inspectionContent.forEach(inspection => {
            result += inspection.matts.length;
          });
        });
        return result;
      }
    },
    computeCurArrLengthByIndexInDataCheck(passIndex) {
      const toComputeArr = this.totalData.datacheck.filter((item, index) => {
        return index === passIndex;
      });
      if (toComputeArr.length === 0) {
        return 0;
      } else {
        let result = 0;
        toComputeArr[0].inspectionContent.forEach(item => {
          result += item.matts.length;
        });
        return result;
      }
    },
    computeCurArrLengthByIndex12InDataCheck(passIndex1, passIndex2) {
      const toComputeArr = this.totalData.datacheck.filter(
        (item, index) => index === passIndex1
      );
      const toComputeArr2 = toComputeArr[0].inspectionContent.filter(
        (item, index) => index < passIndex2
      );
      if (toComputeArr2.length === 0) {
        return 0;
      } else {
        let result = 0;
        toComputeArr2.forEach(item => {
          result += item.matts.length;
        });
        return result;
      }
    },
    arraySpanMethodDataCheck({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.isHideColumn1) {
          return [0, 0];
        } else {
          return [row.isHideColumn1Length, 1];
        }
      }
      if (columnIndex === 1) {
        if (row.isHideColumn2) {
          return [0, 0];
        } else {
          return [row.isHideColumn2Length, 1];
        }
      }
    },
    generateTemplateDataCheck() {
      this.templateDataCheck = [];
      let curIndex = 0;
      this.totalData.datacheck.forEach((item, index, arr) => {
        item.inspectionContent.forEach((item1, index1, arr1) => {
          item1.matts.forEach((item2, index2, arr2) => {
            this.templateDataCheck.push({
              totalType: "安全资料检查类",
              type: item.type,
              inspectionContent: item1.inspectionContent,
              discover: item2.discover,
              basis: item2.basis,
              suggestion: item2.suggestion,
              isHideColumn1:
                curIndex !== this.computePreArrLengthByindexInDataCheck(index),
              isHideColumn1Length: this.computeCurArrLengthByIndexInDataCheck(
                index
              ),
              isHideColumn2:
                curIndex !==
                this.computeCurArrLengthByIndex12InDataCheck(index, index1) +
                  this.computePreArrLengthByindexInDataCheck(index),
              isHideColumn2Length: arr2.length
            });
            curIndex++;
          });
        });
      });
    },
    generateTemplateData() {
      const placeData = [
        ...this.totalData.datacheck.map(item => {
          return {
            ...item,
            totalType: "安全资料检查类"
          };
        }),
        ...this.totalData.sitemanage.map(item => {
          return {
            ...item,
            totalType: "现场管理类"
          };
        })
      ];
      placeData.forEach;
      // this.totalData.datacheck.forEach((item, index) => {
      //   item.inspectionContent.forEach((item1, index1) => {
      //     item1.matts.forEach((item2, index2) => {
      //       this.templateData.push({
      //         totalType: "安全资料检查类",
      //         type: item.type,
      //         inspectionContent: item1.inspectionContent,
      //         discover: item2.discover,
      //         basis: item2.basis,
      //         suggestion: item2.suggestion,

      //       });
      //     });
      //   });
      // });
    },
    async initAllTableData() {
      this.totalData = {
        isDataCheckShow: false,
        isSiteManageShow: false,
        datacheck: [],
        sitemanage: []
      };
      await getEnterpriseSafetyInspectionContent({
        level: 1,
        page: 0,
        size: 9999
      }).then(res => {
        this.totalData.datacheck = [
          ...res.content
            .filter(item => item.type === "安全资料类")
            .map(item => {
              return {
                ...item,
                type: item.name,
                isShow: false,
                inspectionContent: []
              };
            })
        ];
        this.totalData.datacheck.forEach(item1 => {
          getEnterpriseSafetyInspectionContent({
            level: 2,
            page: 0,
            size: 9999,
            pid: item1.id
          }).then(res1 => {
            item1.inspectionContent = res1.content.map(item2 => {
              return {
                ...item2,
                inspectionContentId: item2.id,
                inspectionContent: item2.name,
                isShow: false,
                matts: []
              };
            });
            item1.inspectionContent.forEach(item3 => {
              getEnterpriseSafetyMatter({
                inspectionContentId: item3.id,
                page: 0,
                size: 9999
              }).then(res3 => {
                item3.matts = [
                  ...res3.content.map(item4 => {
                    return {
                      ...item4,
                      discover: item4.name,
                      basis: item4.basis,
                      suggestion: item4.suggestion
                    };
                  })
                ];
              });
            });
          });
        });
        this.totalData.sitemanage = [
          ...res.content
            .filter(item => item.type === "现场检查类")
            .map(item => {
              return {
                ...item,
                type: item.name,
                isShow: false,
                inspectionContent: []
              };
            })
        ];
        this.totalData.sitemanage.forEach(item1 => {
          getEnterpriseSafetyInspectionContent({
            level: 2,
            page: 0,
            size: 9999,
            pid: item1.id
          }).then(res1 => {
            item1.inspectionContent = res1.content.map(item2 => {
              return {
                ...item2,
                inspectionContentId: item2.id,
                inspectionContent: item2.name,
                isShow: false,
                matts: []
              };
            });
            item1.inspectionContent.forEach(item3 => {
              getEnterpriseSafetyMatter({
                inspectionContentId: item3.id,
                page: 0,
                size: 9999
              }).then(res3 => {
                item3.matts = [
                  ...res3.content.map(item4 => {
                    return {
                      ...item4,
                      discover: item4.name,
                      basis: item4.basis,
                      suggestion: item4.suggestion
                    };
                  })
                ];
              });
            });
          });
        });
      });
    },
    async initThreeLayerDataByType(tableData, type) {},
    addHdTypeDialogShow() {
      this.isShowAddTypeDialog = true;
      this.hdTypeForm = {
        level: 1,
        name: "",
        type: ""
      };
    },
    submitSecType() {
      this.$refs.hdtypeaddform.validate(valid => {
        if (valid) {
          postEnterpriseSafetyInspectionContent({ ...this.hdTypeForm }).then(
            res => {
              this.$message({
                type: "success",
                message: "添加安全类别成功"
              });
              this.initAllTableData();
              this.isShowAddTypeDialog = false;
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("添加安全类别失败");
            }
          );
        }
      });
    },
    editHdTypeDialogShow(item, totaltype) {
      this.isShowEditTypeDialog = true;
      this.hdEditTypeForm = {
        id: item.id,
        level: 1,
        name: item.type,
        type: totaltype
      };
    },
    submitHdTypeEdit() {
      this.$refs.hdtypeeditform.validate(valid => {
        if (valid) {
          putEnterpriseSafetyInspectionContent(this.hdEditTypeForm).then(
            res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.initAllTableData();
              this.isShowEditTypeDialog = false;
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("修改失败");
            }
          );
        }
      });
    },
    deleteHdType(item) {
      this.$confirm("此操作将永久删除该安全类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteEnterpriseSafetyInspectionContent([
            {
              id: item.id,
              level: 1
            }
          ]).then(
            res => {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.initAllTableData();
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("修改失败");
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addHdInspectionDialogShow(item) {
      this.isShowAddInspectionDialog = true;
      this.hdInspectionForm = {
        level: 2,
        name: "",
        pid: item.id
      };
    },
    submitInspection() {
      this.$refs.hdinspectionaddform.validate(valid => {
        if (valid) {
          postEnterpriseSafetyInspectionContent(this.hdInspectionForm).then(
            res => {
              this.$message({
                type: "success",
                message: "添加检查内容成功"
              });
              this.initAllTableData();
              this.isShowAddInspectionDialog = false;
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("添加检查内容失败");
            }
          );
        }
      });
    },
    editInspectionDialogShow(item, inspection) {
      this.isShowEditInspectionDialog = true;
      this.hdInspectionEditForm = {
        level: 2,
        name: inspection.inspectionContent,
        id: inspection.id
      };
    },
    submitHdInspectionForm() {
      this.$refs.hdinspectioneditform.validate(valid => {
        if (valid) {
          putEnterpriseSafetyInspectionContent(this.hdInspectionEditForm).then(
            res => {
              this.$message({
                type: "success",
                message: "修改安全检查内容成功"
              });
              this.initAllTableData();
              this.isShowEditInspectionDialog = false;
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("修改安全检查内容失败");
            }
          );
        }
      });
    },
    deleteInspection(inspection) {
      this.$confirm("此操作将永久删除该安全类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteEnterpriseSafetyInspectionContent([
            {
              id: inspection.id,
              level: 2
            }
          ]).then(
            res => {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.initAllTableData();
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("修改失败");
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    safetyMatterDialogShow(inspection) {
      this.hdSafetyMatterForm.inspectionContentId = inspection.id;
      this.hdSafetyMatterForm.name = "";
      this.hdSafetyMatterForm.basis = "";
      this.hdSafetyMatterForm.suggestion = "";
      this.isShowSafetyMatterDialogShow = true;
    },
    submitSafetyMatter() {
      this.$refs.hdsafetymattaddform.validate(valid => {
        if (valid) {
          postEnterpriseSafetyMatter(this.hdSafetyMatterForm).then(
            res => {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.initAllTableData();
              this.isShowSafetyMatterDialogShow = false;
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("添加失败");
            }
          );
        }
      });
    },
    submitEditSafetyMatter() {
      this.$refs.hdsafetymatteditform.validate(valid => {
        if (valid) {
          putEnterpriseSafetyMatter(this.hdSafetyMatterEditForm).then(
            res => {
              this.$message({
                type: "success",
                message: "修改成功"
              });
              this.initAllTableData();
              this.isShowSafetyMatterEditDialogShow = false;
              window.localStorage.removeItem("enterpriseTemplateData");
            },
            () => {
              this.$message.error("修改失败");
            }
          );
        }
      });
    },
    editSafetyMatterDialogShow(inspection, matt) {
      this.isShowSafetyMatterEditDialogShow = true;
      this.hdSafetyMatterEditForm = {
        id: matt.id,
        inspection: inspection.inspectionContentId,
        name: matt.discover,
        basis: matt.basis,
        suggestion: matt.suggestion
      };
    },
    deleteSafetyMatterDialogShow(matt) {
      this.$confirm("此操作将永久删除安全检查类别, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning "
      })
        .then(() => {
          deleteEnterpriseSafetyMatter([matt.id])
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.initAllTableData();
              window.localStorage.removeItem("enterpriseTemplateData");
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.triangle-wrapper {
  position: relative;
  .show-triangle {
    border-top: 15px solid black;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    width: 0;
    height: 0;
    border-radius: 3px;
  }
  .hide-triangle {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;
    width: 0;
    height: 0;
    border-radius: 3px;
  }
}
.hd-info-wrapper {
  .hd-type-add-wrapper {
    margin: 10px 10px;
    padding: 5px;
    border-radius: 5px;
    background: #fff;
  }
  .hd-type-wrapper {
    .hd-type-tools-wrapper {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      padding-left: 10px;
      background: #fff;
      margin: 10px 10px;
      .hd-type-triangle-name-wrapper {
        display: flex;
        align-items: center;
        .hd-type-name {
          margin-left: 20px;
        }
      }
      .hd-type-tool-wrapper {
      }
    }
    .hd-type-tools-down {
      .hd-inspection-add-wrapper {
        margin: 10px 10px;
        background: #fff;
        padding: 5px;
        border-radius: 5px;
        padding-left: 40px;
      }
      .hd-inspection-item-total-wrapper {
        .hd-inspection-item-wrapper {
          display: flex;
          justify-content: space-between;
          margin: 10px 10px;
          background: #fff;
          padding: 5px;
          border-radius: 5px;
          padding-left: 40px;
          .hd-inspection-triangle-wrapper {
            display: flex;
            align-items: center;
            .hd-inspection-content {
              margin-left: 10px;
            }
          }
          .hd-inspection-tools-wrapper {
            display: flex;
          }
        }
        .hd-discover-add-wrapper {
          margin: 10px 10px;
          padding: 5px;
          border-radius: 5px;
          background: #fff;
          padding-left: 80px;
        }
        .hd-discover-wrapper {
          margin: 10px 10px;
          padding: 5px;
          border-radius: 5px;
          background: #fff;
          padding-left: 80px;
          display: flex;
          justify-content: space-between;
          .matt-left {
            .matt-left-discover {
              padding: 8px;
              .matt-left-title {
                font-size: 18px;
                font-weight: bold;
              }
              .matt-left-content {
                font-size: 16px;
              }
            }
            .matt-left-basis {
              padding: 8px;
              .matt-left-title {
                font-size: 18px;
                font-weight: bold;
              }
              .matt-left-content {
                font-size: 16px;
              }
            }
            .matt-left-suggestion {
              padding: 8px;
              .matt-left-title {
                font-size: 18px;
                font-weight: bold;
              }
              .matt-left-content {
                font-size: 16px;
              }
            }
          }
          .matt-right {
          }
        }
      }
    }
  }
}
</style>
<style>
.main-container {
  background: #f5f6fb;
}
</style>
