<template>
  <layout-card>
    <div class="pdf-page">
      <div class="pdf-cover">
        <div class="top">
          <h1>{{ data.cpd.CORP_NAME }}</h1>
          <h1>秦安双重预防机制建设平台</h1>
          <h1>体系运行报告</h1>
        </div>
        <div class="bot">
          <h1>{{ data.cpd.CORP_NAME }}</h1>
          <h1>{{ dayjs(startDate).format("YYYY年MM月") }}</h1>
        </div>
      </div>
      <div class="pdf-print">
        <!--        TODO"-->
        <el-button type="primary">PDF导出</el-button>
      </div>
      <div class="pdf-content">
        <h1>1.概述</h1>
        <p>
          {{ data.cpd.CORP_NAME }}公司统一社会信用代码为：{{
            data.cpd.CODE
          }}，公司地址：{{ data.cpd.COMPANY_AREA }}，所属行业：{{
            data.cpd.CORP_TYPE_NAME
          }}，主要负责人：{{ data.cpd.LR_NAME }}。
        </p>
        <p>
          本体系运行报告的数据来源于{{
            data.cpd.CORP_NAME
          }}秦安双重预防机制建设平台相关数据，如企业信息、风险管控、隐患排查、隐患治理、教育培训、高危作业管理等均取自数据库实际数据。
        </p>
        <p>
          本体系运行报告的数据统计时间范围：{{
            dayjs(startDate).format("YYYY年MM月DD日")
          }}-{{ dayjs(lastDate).format("YYYY年MM月DD日") }}。
        </p>

        <h1>2.风险管控</h1>
        <h4>2.1 风险点（单元）</h4>
        <p>
          截至到{{ dayjs(lastDate).format("YYYY年MM月DD日") }}，公司共建立{{
            data.riskpd.unit_count
          }}个风险点（单元）。
        </p>
        <h4>2.2 辨识部位</h4>
        <p>
          截至到{{ dayjs(lastDate).format("YYYY年MM月DD日") }}，公司共辨识了{{
            data.riskpd.id_count
          }}个辨识部位。
        </p>
        <h4>2.3 风险管控信息台账</h4>
        <p>
          截至到{{ dayjs(lastDate).format("YYYY年MM月DD日") }}，公司建立了{{
            data.riskpd.risk_count
          }}个风险管控信息台账，其中，重大风险{{ data.riskpd.a_count }}个，
          较大风险{{ data.riskpd.b_count }}个，一般风险{{
            data.riskpd.c_count
          }}个，低风险{{ data.riskpd.d_count }}个。
        </p>
      </div>

      <div class="pdf-content">
        <h1>3.隐患排查</h1>
        <h4>3.1清单管理</h4>
        <p>
          截至到{{ dayjs(lastDate).format("YYYY年MM月DD日") }}，公司共建立{{
            data.lists.length
          }}个隐患排查清单，其中，日常隐患排查清单{{ data.listType0001 }}个，
          综合性隐患排查清单{{ data.listType0002 }}个，季节性隐患排查清单{{
            data.listType0004
          }}个，节假日隐患排查清单{{
            data.listType0005
          }}个，专业性隐患排查清单{{ data.listType0003 }}个。
        </p>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司新建了{{ data.monthlist.length }}个排查清单，详细情况如下:
        </p>
        <table>
          <thead>
            <tr>
              <td width="60" align="center">序号</td>
              <td>清单类型</td>
              <td>清单名称</td>
              <td>清单负责人</td>
              <td>清单建立时间</td>
              <td>清单排查周期</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.lists" :key="index">
              <td align="center">{{ index + 1 }}</td>
              <td>{{ typeMap[item.TYPE] }}</td>
              <td>{{ item.NAME }}</td>
              <td>{{ item.USER_NAME }}</td>
              <td>{{ dayjs(item.CREATTIME).format("YYYY年MM月DD日") }}</td>
              <td>{{ periodMap[item.PERIOD] }}</td>
            </tr>
            <tr v-if="data.lists.length === 0">
              <td colspan="6" align="center">暂无数据</td>
            </tr>
          </tbody>
        </table>

        <h4>3.2清单排查情况</h4>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司已建立清单用户，详细排查情况见表1：
        </p>
        <table>
          <thead>
            <tr>
              <td width="60" align="center">序号</td>
              <td>部门</td>
              <td>岗位</td>
              <td>姓名</td>
              <td>负责的清单数</td>
              <td>应排查清单的次数</td>
              <td>实际排查次数</td>
              <td>排查率</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.checkList" :key="index">
              <td align="center">{{ index + 1 }}</td>
              <td>{{ item.DEPARTNAME_ALL }}</td>
              <td>{{ item.POSTNAME }}</td>
              <td>{{ item.USERNAME }}</td>
              <td>{{ item.listCount }}</td>
              <td>{{ item.staCount }}</td>
              <td>{{ item.cheCount }}</td>
              <td>{{ item.percent }}</td>
            </tr>
            <tr v-if="data.checkList.length === 0">
              <td colspan="8" align="center">暂无数据</td>
            </tr>
          </tbody>
        </table>

        <h4>3.3隐患治理情况</h4>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司共发现隐患{{ data.hdlist.length }}项， 其中重大隐患{{
            data.zd_count
          }}项，一般隐患{{ data.yb_count }}项，其中，待整改{{
            data.dzg_count
          }}项，待验收{{ data.dys_count }}项，已验收{{
            data.yys_count
          }}项，已超期{{ data.cq_count }}项。
        </p>
        <p class="pdf-subtitle">隐患治理情况见表2</p>
        <table>
          <thead>
            <tr>
              <td width="60" align="center">序号</td>
              <td width="120" align="center">隐患发现时间</td>
              <td width="80" align="center">检查人</td>
              <td width="80">检查部门</td>
              <td width="80">问题描述</td>
              <td>整改措施</td>
              <td width="80">整改情况</td>
              <td width="100">整改前照片</td>
              <td width="100">整改后照片</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.hdlist" :key="index">
              <td align="center">{{ index + 1 }}</td>
              <td>{{ item.CREATTIME }}</td>
              <td>{{ item.USER_NAME }}</td>
              <td>{{ item.DEPARTMENT_NAME }}</td>
              <td>{{ item.HIDDENDESCR }}</td>
              <td>{{ item.RECTIFYDESCR }}</td>
              <td v-if="item.STATE === '-1'">已超期</td>
              <td v-if="item.STATE === '1'">
                {{
                  item.HIDDENLEVEL === "hiddenLevel0001" ? "待整改" : "整改中"
                }}
              </td>
              <td v-if="item.STATE === '2'">已整改</td>
              <td v-if="item.STATE === '3'">已整改</td>
              <td v-if="item.STATE === '4'">已验收</td>
              <td>
                <viewer :images="[VITE_FILE_URL + item.HD_IMGS]">
                  <img
                    v-if="item.HD_IMGS"
                    :src="VITE_FILE_URL + item.HD_IMGS"
                    alt=""
                  />
                </viewer>
              </td>
              <td>
                <viewer :images="[VITE_FILE_URL + item.ZG_IMGS]">
                  <img
                    v-if="item.ZG_IMGS"
                    :src="VITE_FILE_URL + item.ZG_IMGS"
                    alt=""
                  />
                </viewer>
              </td>
            </tr>
            <tr v-if="data.hdlist.length === 0">
              <td colspan="9" align="center">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="pdf-content">
        <h1>4.风险分析记录</h1>
        <p>改进信息显示风险辨识台账更新记录</p>
        <table>
          <tr>
            <td align="center">风险点（单元）</td>
            <td align="center">辨识部位</td>
            <td align="center">改进类型</td>
            <td align="center">持续改进</td>
            <td align="center">存在风险</td>
            <td align="center">管控措施</td>
          </tr>
          <tr v-for="(item, index) in data.riskLog" :key="index">
            <td align="center" rowspan="2" v-if="index % 2 === 0">
              {{ item.risk_unit_name }}
            </td>
            <td rowspan="2" v-if="index % 2 === 0">{{ item.parts_name }}</td>
            <td rowspan="2" v-if="index % 2 === 0">{{ item.is_new }}</td>
            <td>{{ item.label }}</td>
            <td>{{ item.risk_descr }}</td>
            <td>{{ item.measures }}</td>
          </tr>
          <tr v-if="data.riskLog.length === 0">
            <td colspan="6" align="center">暂无数据</td>
          </tr>
        </table>
      </div>

      <div class="pdf-content">
        <h1>5.教育培训情况</h1>
        <h4>5.1教育培训</h4>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司共完成建立{{ data.studypd.curriculum_count }}课程， 完成建立{{
            data.studypd.paper_count
          }}试卷，完成建立{{
            data.studypd.task_count
          }}次学习任务，岗位培训类型分别为{{
            data.post_type_name_arr.join("，")
          }}，培训时间{{ data.sum_classhour }}分钟， 共有{{
            data.study_student_count
          }}名学员参与平台教育培训，考核通过{{
            data.study_pass_count
          }}人，通过率{{ data.study_pass_rate || 0 }}%。
        </p>
        <table>
          <thead>
            <tr>
              <td width="60" align="center">序号</td>
              <td>课程名称</td>
              <td>培训类型</td>
              <td>任务学时（分钟）</td>
              <td>学员人数</td>
              <td>任务状态</td>
              <td>应考人数</td>
              <td>参考人数/合格人数</td>
              <td>通过率</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.studylist" :key="index">
              <td align="center">{{ index + 1 }}</td>
              <td>{{ item.STUDY_NAME }}</td>
              <td>{{ item.train_type_name }}</td>
              <td>{{ item.SUM_CLASSHOUR }}</td>
              <td>{{ item.userCount }}</td>
              <td v-if="item.PEIXUE_START_TIME > dayjs().format('YYYY-MM-DD')">
                未开始
              </td>
              <td
                v-else-if="
                  item.PEIXUE_START_TIME <= dayjs().format('YYYY-MM-DD') &&
                  item.PEIXUE_END_TIME >= dayjs().format('YYYY-MM-DD')
                "
              >
                进行中
              </td>
              <td
                v-else-if="item.PEIXUE_END_TIME <= dayjs().format('YYYY-MM-DD')"
              >
                已结束
              </td>
              <td>{{ item.userCount }}</td>
              <td>{{ item.cj }}/{{ item.hg }}</td>
              <td>
                {{ item.cj === 0 ? 0 : ((item.hg / item.cj) * 100).toFixed(2) }}
              </td>
            </tr>
          </tbody>
          <tr v-if="data.studylist.length === 0">
            <td colspan="9" align="center">暂无数据</td>
          </tr>
        </table>
        <h4>5.2档案建立情况</h4>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司共完成建立个人档案{{ data.ztask_count }}份， 一期一档{{
            data.studypd.task_count
          }}份。
        </p>
      </div>

      <div class="pdf-content">
        <h1>6.特殊作业管理</h1>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司共新建{{ data.eight_count }}项特殊作业审批， 已存档{{
            data.eight_pass_count
          }}项审批数据。其中，受限空间作业{{
            data.eightlist?.[2]?.pass_count || 0
          }}项，断路作业{{ data.eightlist?.[4]?.pass_count || 0 }}项，
          盲板抽堵作业{{ data.eightlist?.[0]?.pass_count || 0 }}项，动土作业{{
            data.eightlist?.[1]?.pass_count || 0
          }}项，高处作业{{ data.eightlist?.[5]?.pass_count || 0 }}项，
          吊装作业{{ data.eightlist?.[6]?.pass_count || 0 }}项，临时用电作业{{
            data.eightlist?.[3]?.pass_count || 0
          }}项，动火作业{{ data.eightlist?.[7]?.pass_count || 0 }}项。
        </p>
      </div>

      <div class="pdf-content">
        <h1>7.绩效考核</h1>
        <p>
          {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
            dayjs(lastDate).format("YYYY年MM月DD日")
          }}，公司绩效考核详细情况如下：
        </p>
        <h4>7.1 部门考核</h4>
        <table>
          <thead>
            <tr>
              <td width="60" align="center">序号</td>
              <td>部门</td>
              <td>发现隐患</td>
              <td>隐患整改</td>
              <td>检查得分</td>
              <td>培训得分</td>
              <td>风险辨识完善得分</td>
              <td>考核日期</td>
              <td>考核等级</td>
              <td>合计</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.deptPeList" :key="index">
              <td align="center">{{ index + 1 }}</td>
              <td>{{ item.DEPT_NAME_ALL }}</td>
              <td>{{ item.SCORE1 }}</td>
              <td>{{ item.SCORE2 }}</td>
              <td>{{ item.SCORE3 }}</td>
              <td>{{ item.SCORE4 }}</td>
              <td>{{ item.SCORE5 }}</td>
              <td>{{ month }}</td>
              <td>
                {{
                  fnComputeLevel(
                    item.SCORE1 +
                      item.SCORE2 +
                      item.SCORE3 +
                      item.SCORE4 +
                      item.SCORE5
                  )
                }}
              </td>
              <td>
                {{
                  item.SCORE1 +
                  item.SCORE2 +
                  item.SCORE3 +
                  item.SCORE4 +
                  item.SCORE5
                }}
              </td>
            </tr>
            <tr v-if="data.deptPeList.length === 0">
              <td colspan="10" align="center">暂无数据</td>
            </tr>
          </tbody>
        </table>

        <h4>7.2 人员考核</h4>
        <table>
          <thead>
            <tr>
              <td width="60" align="center">序号</td>
              <td>部门</td>
              <td>人员</td>
              <td>发现隐患</td>
              <td>隐患整改</td>
              <td>检查得分</td>
              <td>培训得分</td>
              <td>风险辨识完善得分</td>
              <td>考核日期</td>
              <td>考核等级</td>
              <td>合计</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.userPeList" :key="index">
              <td align="center">{{ index + 1 }}</td>
              <td>{{ item.DEPT_NAME_ALL }}</td>
              <td>{{ item.USER_NAME }}</td>
              <td>{{ item.SCORE1 }}</td>
              <td>{{ item.SCORE2 }}</td>
              <td>{{ item.SCORE3 }}</td>
              <td>{{ item.SCORE4 }}</td>
              <td>{{ item.SCORE5 }}</td>
              <td>{{ showDate }}</td>
              <td>
                {{
                  fnComputeLevel(
                    item.SCORE1 +
                      item.SCORE2 +
                      item.SCORE3 +
                      item.SCORE4 +
                      item.SCORE5
                  )
                }}
              </td>
              <td>
                {{
                  item.SCORE1 +
                  item.SCORE2 +
                  item.SCORE3 +
                  item.SCORE4 +
                  item.SCORE5
                }}
              </td>
            </tr>
            <tr v-if="data.userPeList.length === 0">
              <td colspan="11" align="center">暂无数据</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="pdf-content">
        <h1>8.结论建议</h1>
        <p>
          {{ data.corp_advice.ADVICE }}
        </p>
      </div>
    </div>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnConclusion">填写结论</el-button>
    </div>
    <div class="fixed_right" @click="data.otherVisible = true">
      查看其它诊断书
    </div>
    <conclusion
      v-model:visible="data.conclusionDialog.visible"
      v-model:advice="data.conclusionDialog.advice"
      :corp-advice="data.corp_advice"
      :month="month"
      @submit="fnGetConclusion"
    />
    <other
      v-model:visible="data.otherVisible"
      v-model:month="month"
      :advice-date="data.corp_advice_all"
      :date-list="dateList"
      @check="fnGetData"
    />
  </layout-card>
</template>

<script setup>
import {
  getEnterpriseReport1,
  getEnterpriseReport2,
  getEnterpriseReport3,
  getEnterpriseReport4,
  getEnterpriseReport5,
  getEnterpriseReport6,
  getEnterpriseReportConclusion,
} from "@/request/continuous_improvement.js";
import { reactive, ref, watchEffect } from "vue";
import dayjs from "dayjs";
import Conclusion from "./components/conclusion.vue";
import Other from "./components/other.vue";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const typeMap = {
  listType0001: "日常隐患排查清单",
  listType0002: "综合隐患排查清单",
  listType0003: "专业隐患排查清单",
  listType0004: "季节性隐患排查清单",
  listType0005: "节假日隐患排查清单",
};
const periodMap = {
  checkPeriod0001: "每日",
  checkPeriod0002: "每周",
  checkPeriod0003: "每旬",
  checkPeriod0004: "每月",
  checkPeriod0005: "每季",
  checkPeriod0006: "每年",
  checkPeriod0007: "半年",
};
const dateList = ref([]);
const month = ref("");
const startDate = ref("");
const lastDate = ref("");
const color = ref("unset");
const border_color = ref("var(--el-border-color-lighter)");
const width = ref("100%");
const data = reactive({
  cpd: {},
  riskpd: {},
  lists: [],
  monthlist: [],
  hdlist: [],
  studypd: {},
  riskLog: [],
  listType0001: 0,
  listType0002: 0,
  listType0003: 0,
  listType0004: 0,
  listType0005: 0,
  yb_count: 0,
  zd_count: 0,
  dzg_count: 0,
  dys_count: 0,
  yys_count: 0,
  cq_count: 0,
  checkList: [],
  studylist: [],
  study_student_count: 0,
  sum_classhour: 0,
  study_pass_count: 0,
  ztask_count: 0,
  post_type_name_arr: [],
  study_pass_rate: 0,
  eightlist: [],
  eight_count: 0,
  eight_pass_count: 0,
  deptPeList: [],
  userPeList: [],
  corp_advice: {},
  corp_advice_all: [],
  conclusionDialog: {
    visible: false,
    advice: "",
  },
  otherVisible: false,
});
watchEffect(() => {
  startDate.value = dayjs(month.value).startOf("month").format("YYYY-MM-DD");
  lastDate.value = dayjs(month.value).endOf("month").format("YYYY-MM-DD");
});
const fnGetDateList = () => {
  let tempDate = "2022-06";
  dateList.value.push(dayjs(tempDate).format("YYYY-MM"));
  while (dayjs().diff(dayjs(tempDate), "month") > 0) {
    tempDate = dayjs(tempDate).add(1, "month");
    dateList.value.push(dayjs(tempDate).format("YYYY-MM"));
  }
  month.value = dateList.value[dateList.value.length - 1];
};
fnGetDateList();
const fnGetConclusion = async () => {
  const resData = await getEnterpriseReportConclusion({ MONTH: month.value });
  const resDataAll = await getEnterpriseReportConclusion();
  data.corp_advice = resData.varList[0] || {
    ADVICE:
      "公司安全生产情况良好，需继续依据相关标准积极开展风险分级管控和隐患排查治理体系建设，根据公司目前的安全管理情况，须加强隐患排查、隐患整改等方面的安全管理，提高公司的安全管理水平，防止和减少生产安全事故的发生。",
  };
  data.corp_advice_all = resDataAll.varList.map((item) => item.ADVICE_DATE);
};
fnGetConclusion();
const fnComputeLevel = (total) => {
  if (total >= 75) return "一级";
  else if (total >= 50) return "二级";
  else if (total >= 25) return "三级";
  else return "四级";
};
const fnGetData1 = async () => {
  const resData = await getEnterpriseReport1({ MONTH: month.value });
  data.cpd = resData.cpd;
  data.riskpd = resData.riskpd;
  data.lists = resData.lists;
  data.monthlist = resData.monthlist;
  data.hdlist = resData.hdlist;
  data.studypd = resData.studypd;
  data.riskLog = resData.riskLog;
  data.lists.forEach((item) => {
    if (item.TYPE === "listType0001") data.listType0001++;
    else if (item.TYPE === "listType0002") data.listType0002++;
    else if (item.TYPE === "listType0003") data.listType0003++;
    else if (item.TYPE === "listType0004") data.listType0004++;
    else if (item.TYPE === "listType0005") data.listType0005++;
  });
  data.hdlist.forEach((item) => {
    if (item.HIDDENLEVEL === "hiddenLevel0001") data.yb_count++;
    else data.zd_count++;
    if (item.STATE === "1") data.dzg_count++;
    else if (item.STATE === "2" || item.STATE === "3") data.dys_count++;
    else if (item.STATE === "4") data.yys_count++;
    else if (item.STATE === "-1") data.cq_count++;
  });
};
const fnGetData2 = async () => {
  const resData = await getEnterpriseReport2({
    STARTTIME: startDate.value,
    ENDTIME: lastDate.value,
  });
  data.checkList = resData.varList;
};
const fnGetData3 = async () => {
  const resData = await getEnterpriseReport3({ MONTH: month.value });
  data.studylist = resData.varList;
  const post_type_name_set = new Set();
  data.study_student_count = 0;
  data.sum_classhour = 0;
  data.study_pass_count = 0;
  data.ztask_count = 0;
  data.studylist.forEach((item) => {
    post_type_name_set.add(item.post_type_name);
    data.sum_classhour += item.SUM_CLASSHOUR;
    data.study_student_count += item.cj;
    data.study_pass_count += item.hg;
    data.ztask_count += item.userCount;
  });
  if (post_type_name_set.size > 0) {
    data.post_type_name_arr = Array.from(post_type_name_set);
  }
  if (data.study_student_count > 0) {
    data.study_pass_rate = (
      (data.study_pass_count / data.study_student_count) *
      100
    ).toFixed(2);
  }
};
const fnGetData4 = async () => {
  const resData = await getEnterpriseReport4({ MONTH: month.value });
  data.eightlist = resData.eightlist;
  data.eight_count = 0;
  data.eight_pass_count = 0;
  data.eightlist.forEach((item) => {
    data.eight_count += +item.count;
    data.eight_pass_count += +item.pass_count || 0;
  });
};
const fnGetData5 = async () => {
  const resData = await getEnterpriseReport5({ MONTH: month.value });
  data.deptPeList = resData.varList;
};
const fnGetData6 = async () => {
  const resData = await getEnterpriseReport6({ MONTH: month.value });
  data.userPeList = resData.varList;
};
const fnGetData = async () => {
  await fnGetData1();
  await fnGetData2();
  await fnGetData3();
  await fnGetData4();
  await fnGetData5();
  await fnGetData6();
};
fnGetData();
const fnConclusion = () => {
  data.conclusionDialog.visible = true;
  data.conclusionDialog.advice = data.corp_advice.ADVICE;
};
</script>

<style scoped lang="scss">
.pdf-page {
  //width: 1100px;
  width: v-bind(width);
  border: 1px solid var(--el-border-color);
  padding: 20px;
  position: relative;
  color: v-bind(color);

  .pdf-print {
    float: right;
  }

  .pdf-cover {
    top: -1523px;
    position: absolute;
    width: 100%;
    height: 1497px;
    background: #fff url("/src/assets/images/print/cover-bg.png") no-repeat 0
      bottom;

    background-size: 100% 630px;

    .top {
      padding-top: 400px;

      h1 {
        font-size: 34px;
        text-align: center;
      }
    }

    .bot {
      padding-top: 700px;

      h1 {
        font-size: 18px;
        text-align: center;
      }
    }
  }

  .pdf-content {
    position: relative;

    .pdf-subtitle {
      text-align: center;
      text-indent: 0;
      margin-bottom: 1em;
      font-weight: bold;
    }

    h1 {
      font-size: 20px;
    }

    h4 {
      font-size: 16px;
      text-indent: 34px;
    }

    p {
      text-indent: 34px;
      margin: 0 0 0.2em;
      line-height: 1.6;
    }
  }
}

img {
  width: 100px;
  height: 100px;
}

table {
  border-collapse: collapse;
  width: 100%;

  td {
    border: 1px solid v-bind(border_color);
    padding: 8px 12px;
    font-size: 14px;
  }

  .title {
    background: var(--el-fill-color-light);
    width: 200px;
    text-align: center;
  }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1em;
  margin-top: 1em;
}

.fixed_right {
  position: fixed;
  right: -29px;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  clip-path: polygon(
    100% 0%,
    100% 0%,
    100% 0%,
    100% 100%,
    100% 100%,
    100% 100%,
    65% 85%,
    65% 17%
  );
  width: 100px;
  writing-mode: tb-rl;
  padding: 50px 10px 50px 0;
  background-color: var(--el-color-primary);
  cursor: pointer;
  font-size: 14px;
}
</style>
