<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="props.formData.title" @closeDialog="handleClose">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :="true" label-width="135px" style="display: block;"
          :inline="true">
          <el-form-item label="培训计划选择:" prop="planName">
            <el-input v-model="ruleForm.planName" clearable style="width: 337px" readonly>
              <template #append>
                <el-button class='cursor' @click="ChooesDdld('00')">选择</el-button></template>
            </el-input>
          </el-form-item>
          <el-form-item label="主办部门:" prop="planHostsDeptName">
            <el-input v-model="ruleForm.planHostsDeptName" clearable style="width: 337px" readonly>
              <template #append>
                <el-button class='cursor' @click="ChooesDdld('01')">选择</el-button></template>
            </el-input>
          </el-form-item>
          <el-form-item label="项目负责人:" prop="planChargePersonName">
            <el-input v-model="ruleForm.planChargePersonName" clearable style="width: 337px" readonly>
              <template #append>
                <el-button class='cursor' @click="ChooesDdld('02')">选择</el-button></template>
            </el-input>
          </el-form-item>
          <el-form-item label="培训渠道:" prop="planChannel">
            <MOSTY.Select v-model="ruleForm.planChannel" clearable :disabled='disableds' style="width: 337px"
              :options="D_TB_PXQD">
              <!-- <el-option v-for="item in D_TB_PXQD" :key="item" :label="item.label" :value="item.value" /> -->
            </MOSTY.Select>
          </el-form-item>
          <el-form-item label="培训地点:" prop="place">
            <el-input v-model="ruleForm.place" maxlength="100" autosize type="textarea" show-word-limit
              placeholder="不能超过100个字" style="width: 337px"></el-input>
          </el-form-item>
          <el-form-item label="业务类型:" prop="specialityType">
            <MOSTY.Select v-model="ruleForm.specialityType" multiple clearable placeholder="请选择业务类型："
              :options="D_BZ_KTKYWLX" style="width: 337px" collapse-tags>
              <!-- <el-option v-for="item in D_BZ_KTKYWLX" :key="item" :label="item.label" :value="item.value" /> -->
            </MOSTY.Select>
          </el-form-item>
          <el-form-item label="培训类型:" prop="otherType">
            <MOSTY.Select v-model="ruleForm.otherType" :disabled='ruleForm.xtCjsj || ruleForm.otherType == "09"'
              clearable style="width: 337px" :options="pxlxlist">
              <!-- <el-option v-for="item in pxlxlist" :disabled="item.disabled" :key="item" :label="item.label"
                :value="item.value" /> -->
            </MOSTY.Select>
          </el-form-item>
          <el-form-item label="培训开始日期:" prop="startDate">
            <el-date-picker v-model="ruleForm.startDate" style="width: 337px" type="date" placeholder="培训开始日期"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disablednowDates" @change='changetime' />
          </el-form-item>
          <el-form-item label="培训结束日期:" prop="finshDate">
            <el-date-picker v-model="ruleForm.finshDate" style="width: 337px" type="date" placeholder="培训结束日期"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disablednowDate" @change='changetime2' />
          </el-form-item>
          <el-form-item label="报道截止时间:" prop="signFinshDate">
            <el-date-picker v-model="ruleForm.signFinshDate" style="width: 337px" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" :disabled-date="disablednowDate2" />
          </el-form-item>
          <el-form-item label="联系人:" prop="contactorName">
            <el-input v-model="ruleForm.contactorName" clearable style="width: 337px"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话:" prop="contactorPhone">
            <el-input v-model.number="ruleForm.contactorPhone" maxlength="11" show-word-limit
              style="width: 337px"></el-input>
          </el-form-item>
          <el-form-item label="培训预算（元）:" prop="realBudget">
            <el-input v-model="ruleForm.realBudget" type="Number" maxlength="7" @input="check"
              style="width: 337px"></el-input>
          </el-form-item>

          <el-form-item label="考核方式:" prop="examinationType">
            <el-select v-model="ruleForm.examinationType" :disabled='ruleForm.xtCjsj' clearable style="width: 337px">
              <el-option v-for="item in D_TB_PXKHFS" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="培训课时:" prop="realClassHour">
            <el-input v-model="ruleForm.realClassHour" type="Number" maxlength="3" @input="check1"
              style="width: 337px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="培训教师:" prop="teachers">
            <el-input v-model="ruleForm.teachers" maxlength="200" autosize type="textarea" show-word-limit
              placeholder="不能超过200个字" style="width: 337px"></el-input>
          </el-form-item> -->
          <el-form-item label="培训内容:" style='width:100%;'>
            <el-input v-model="ruleForm.realContent" maxlength="500" autosize type="textarea" show-word-limit
              placeholder="不能超过500个字" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="备注:" style='width:100%;'>
            <el-input v-model="ruleForm.bz" maxlength="500" :autosize="{ minRows: 2, maxRows: 5 }" type="textarea"
              show-word-limit placeholder="不能超过500个字" style="width: 100%;" />
          </el-form-item>
        </el-form>
        <div>
          <MOSTY.Assort :title="'培训教师列表'" />
          <div class="addbtn" v-if="props.formData.types != 'sj' && props.formData.types != 'ej'">
            <el-button type="primary" @click="handleAddTeacher">
              <el-icon>
                <Plus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
          <section style="height: 30vh;">
            <MOSTY.Table :table-columns="tableColumns3" :tableData="teacherList" :tableloading="tableloading"
              :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="true">
              <template #actions="scope">
                <el-popconfirm v-if="props.formData.types != 'sj' && props.formData.types != 'ej'"
                  confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="deleteTeacherList(scope.row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </MOSTY.Table>
          </section>
        </div>
        <div v-if='orgLevel == "1" || orgLevel == "2" || filterqx("isaqbm") == "1"'>
          <!--省、市公司组织的(安全科)或县下的安全科  -->
          <MOSTY.Assort :title="'参加单位/部门汇总'" />
          <div class="addbtn" v-if="props.formData.types != 'sj' && props.formData.types != 'ej'">
            <el-button type="primary" @click="ChooesDdld('05')">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <!-- {{ props.formData.types }} 移除types -->
              <span>添加</span>
            </el-button>
          </div>
          <section style="height: 30vh;">
            <MOSTY.Table :table-columns="tableColumns1" :tableData="ruleForm.deptList" :tableloading="tableloading"
              :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
              <template #actions="scope">
                <!-- 参训学员名单、学员填报、删除 -->
                <span class="operedit" @click="ChooesDdld('08', scope.row)">
                  学员填报</span>
                <span class="operedit" @click='changeryli(scope.row)'>
                  参训学员名单</span>

                <el-popconfirm v-if="props.formData.types != 'sj' && props.formData.types != 'ej'"
                  confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="deldetedept(scope.row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon> 删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </MOSTY.Table>
          </section>
        </div>
        <div v-if='orgLevel != "1" && orgLevel != "2" && filterqx("isaqbm") != "1"'>
          <!--县组织或一般部门组织的并且不是安全部门人员-->
          <MOSTY.Assort :title="'参训学员列表'" />
          <div class="addbtn">
            <el-button type="primary" @click="ChooesDdld('07')">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>添加</span>
            </el-button>
          </div>
          <section style="height: 30vh;">
            <MOSTY.Table :table-columns="tableColumns2" :tableData="ruleForm.traineeList" :tableloading="tableloading"
              :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
              <template #actions="scope">
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="deldetery(scope.row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon> 删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </MOSTY.Table>
          </section>
        </div>

        <div v-if='ruleForm.examinationType == "2" || ruleForm.examinationType == "4"'>
          <MOSTY.Assort :title="'配置考题卷'" />
          <div>
            <el-form ref="ruleFormRef2" :model="ruleForm" :rules="ruleForm.examinationType == '4' ? rules2 : rules3"
              :="true" label-width="135px" style="display: block;" :inline="true">
              <el-form-item label="试卷：" prop='paperName'>
                <el-input v-model="ruleForm.paperName" clearable style="width:827px" readonly>
                  <template #append>
                    <el-button class='cursor' @click="ChooesDdld('04')">选择</el-button></template>
                </el-input>
              </el-form-item>
              <el-form-item label="出题方式：" prop='ctfs'>
                <el-select class="pxdx_box" v-model="ruleForm.ctfs" disabled clearable placeholder='请选择试卷出题方式'
                  style="width: 337px">
                  <el-option v-for="item in D_BZ_PXSSCTFS" :key="item" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>

              <el-form-item label="判断题数量：" prop="pdCount">
                <el-input v-model.number="ruleForm.pdCount" disabled type='number' style="width: 337px">
                  <template #append>题</template>
                </el-input>
              </el-form-item>
              <el-form-item label="单选题数量：" prop='danxCount'>
                <el-input v-model.number="ruleForm.danxCount" disabled type='number' style="width: 337px">
                  <template #append>题</template>
                </el-input>
              </el-form-item>
              <el-form-item label="多选题数量：" prop='duoxCount'>
                <el-input v-model.number="ruleForm.duoxCount" disabled type='number' style="width: 337px">
                  <template #append>题</template>
                </el-input>
              </el-form-item>
              <el-form-item label="判断题分值：" prop='pdfz'>
                <el-input v-model.number="ruleForm.pdfz" :min="0" type='number' style="width: 337px"
                  @change="changeScore()">
                  <template #append>分</template>
                </el-input>
              </el-form-item>
              <el-form-item label="单选题分值：" prop='danxfz'>
                <el-input v-model.number="ruleForm.danxfz" :min="0" type='number' style="width: 337px"
                  @change="changeScore()">
                  <template #append>分</template></el-input>
              </el-form-item>
              <el-form-item label="多选题分值：" prop='duoxfz'>
                <el-input v-model="ruleForm.duoxfz" :min="0" type='number' style="width: 337px" @change="changeScore()">
                  <template #append>分</template></el-input>
              </el-form-item>
              <el-form-item label="总分：" prop='zf'>
                <el-input v-model="ruleForm.zf" disabled type='number' style="width: 337px">
                  <template #append>分</template></el-input>
              </el-form-item>
              <el-form-item label="合格分数：" prop='hgfs'>
                <el-input v-model.number="ruleForm.hgfs" :min="0" :max="100" type='number' style="width: 337px">
                  <template #append>分</template></el-input>
              </el-form-item>
              <el-form-item label="是否查看错题：" prop='sfckct'>
                <el-select v-model="ruleForm.sfckct" clearable style="width: 337px">
                  <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="考题是否随机：" prop='sflx'>
                <el-select v-model="ruleForm.sflx" clearable style="width: 337px" disabled>
                  <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="可考试次数：" prop='kcjcs'>
                <el-input v-model.number="ruleForm.kcjcs" :min="0" type='number' style="width: 337px">
                  <template #append>次</template></el-input>
              </el-form-item>
              <el-form-item label="是否发证：" prop='sffz'>
                <el-select v-model="ruleForm.sffz" clearable style="width: 337px">
                  <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="最早开考时间:" prop='examStartTime'>
                <el-date-picker v-model="ruleForm.examStartTime" style="width: 337px" type="datetime"
                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disablednowDates"
                  @change="ruleForm.examEndTime = ''" />
              </el-form-item>
              <el-form-item label="最晚开考时间:" prop='examEndTime'>
                <el-date-picker v-model="ruleForm.examEndTime" style="width: 337px" type="datetime"
                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledzwkk" />
              </el-form-item>
              <el-form-item label="考试时间:" prop='examTime'>
                <el-input v-model="ruleForm.examTime" type="number" clearable style="width: 337px">
                  <template #append>分钟</template></el-input>
              </el-form-item>
              <el-form-item v-if="ruleForm.sffz == '1'" label="证书模板：">
                <el-input v-model="ruleForm.mbName" clearable style="width: 277px" disabled></el-input>
                <el-button @click="ChooesDdld('06')">选择</el-button>
              </el-form-item>
              <el-form-item v-if="ruleForm.sffz == '1'" label="证书模板：" style='width:100%;'>
                <el-image :src="ruleForm.mbImg" fit="scale-down" :preview-src-list="[ruleForm.mbImg]"></el-image>
              </el-form-item>
            </el-form>
            <div class="addbtn" v-if='exeamobj'>
              <el-button type="primary" @click="chooseexam">
                <el-icon>
                  <View />
                </el-icon>
                <span>预览试卷</span>
              </el-button>
            </div>
          </div>
        </div>
        <div>
          <MOSTY.Assort :title="'培训课件（可培训后上传）'" color="#f00" />
          {{ ruleForm.files }}
          <div style="margin: 10px">
            <MOSTY.Upload :widthNumber="800" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="ruleForm.files"
              :showinput="false" :delrow="delrow"></MOSTY.Upload>
          </div>
        </div>
        <!-- <div>
          <MOSTY.Assort :title="'培训方案附件'" />
          <div style="margin: 10px">
            <MOSTY.Upload :widthNumber="800" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="ruleForm.pxfa" :showinput="false" :delrow="delrow"></MOSTY.Upload>
          </div>
        </div> -->
        <div>
          <MOSTY.Assort :title="'培训通知文件附件'" />
          <div style="margin: 10px">
            <MOSTY.Upload :widthNumber="800" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="ruleForm.pxtzwj"
              :showinput="false" :delrow="delrow"></MOSTY.Upload>
          </div>
        </div>
        <!-- <div>
          <MOSTY.Assort :title="'签到表附件'" />
          <div style="margin: 10px">
            <MOSTY.Upload :widthNumber="800" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="ruleForm.qdb" :showinput="false" :delrow="delrow"></MOSTY.Upload>
          </div>
        </div> -->
        <div>
          <MOSTY.Assort :title="'培训图片上传（可培训后上传）'" color="#f00" />
          <div style="margin: 10px">
            <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
              v-model="ruleForm.imgs" :nameshow='true' :gsgfList="['jpg', 'png']" :disabled='false'
              @filehandleChange="changeFiles">
            </MOSTY.Upload>
          </div>
        </div>

      </template>


      <template #footer>

        <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
      <template #dwbox>
        <!-- 选择主办部门名称-->
        <Choosebm :formInfo="fromObj" :showDdld="showDept" @closezzjg="closezzjg" @listdata="getSonValue"
          :zzlx="zzlx" />
        <!-- 选择负责人 deptId="listQuery.orgCode" -->
        <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
          @choosedUsers="getSonValue" :searchType="'01'"></ChooseUser>
        <!-- 选择参加单位汇总 -->
        <MOSTY.ChoosebmTree v-if='showCjbm' :formInfo="fromObj" :showDdld="showCjbm" :orgLevels='orgLevels'
          @closezzjg="closedept" @listdata="getSonValue" :zzlx="zzlx" :parentId='parentId' />
        <ChooseDept v-if='showCjdw' :formInfo="fromObj" :showDdld="showCjdw" :searchType="searchType"
          @closezzjg="closedept" @listdata="getSonValue" :zzlx="zzlx" />
        <!-- 选择考试试卷 -->
        <AddTest v-model="showJkssbm" :Single="true" @closezzjg="closeJhss" @listdata="getSonValue" :data="taskList" />
        <!-- 选择计划内培训 -->
        <Addpxtitle v-model="showpxtit" :Single="true" @closezzjg="closepxjh" @listdata="getSonValue"
          :data="pxjhtiList" />
        <!-- 选择证书模板 -->
        <ZslbList v-if="showMb" v-model="showMb" @changeClose="closeMbData" @listdata="getSonValue" :data="mbData" />
        <TeacherList v-if="isTeacherMask" @close="closeTeacher" @handleUser="handleUser" />
        <!-- 参训人员列表 -->
        <canxrylist v-model="showrybd" @changeClose="closeryData" :data="ryData" />
        <!-- 选择已经签到的人员 -->
        <cxrytable v-model="showrybd2" :tableData='qdrylist' :Single='false' :data="memberList"
          @choosedUsers="getSonValue" />

        <!-- 试卷预览 -->
        <div v-if="examShow" class="dialog-box">
          <Examdaio @close="examShow = false" :Row="exeamobj" />
        </div>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, reactive, watch, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { createAndClickLink, disablednowDates } from "@/utils/tools.js";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
import { ElMessage, ElMessageBox } from "element-plus";
import { isString } from '@/utils/tools.js';
import * as MOSTY from "@/components/MyComponents/index";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import ChooseDept from "@/components/MyComponents/ChooseDept/Depart.vue";
import AddTest from "./addTest.vue";
import ZslbList from "./zslbList.vue";
import canxrylist from "./canxrylist.vue";
import cxrytable from "./cxrytable.vue";
import Addpxtitle from "./addpxtitle.vue";
import TeacherList from './TeacherList.vue'
import { getItem } from "@/utils/storage";
import { filterqx } from "@/utils/auth.js";
import * as rule from "@/utils/rules.js";
import Examdaio from "@/views/safety/pxzyk/examdaio.vue";
import { intRuleNumber } from "@/utils/rules.js"
import { getErrMsg } from '@/utils/tools.js'

const { proxy } = getCurrentInstance();
const { D_BZ_KTKYWLX, D_TB_PXKHFS, D_TB_PXQD, D_BZ_SF, D_BZ_PXSSCTFS } = proxy.$dict("D_BZ_KTKYWLX", "D_TB_PXKHFS",
  "D_TB_PXQD", "D_BZ_SF", "D_BZ_PXSSCTFS");
const loading = ref(false); //新增保存按钮截流
// 模板数据
const mbData = ref(null)
const parentId = ref(null)
const pxlxlist = ref([])
const fromObj = ref([])
const zzlx = ref(null);
const exeamobj = ref(null)
const searchType = ref(null)
const orgLevels = ref('11')
const ruleFormRef = ref(null);
const ruleFormRef2 = ref(null);
const showCjbm = ref(false)
const showpxtit = ref(false)
const examShow = ref(false)
const showrybd = ref(false)
const leaderid = ref("");
const showMb = ref(false)
const singleShow = ref(true); //单选多选
const chooseUserVisible = ref(false); //选择负责人弹窗
const memberList = ref([]); //成员选择的id回显
const taskList = ref([]);
const ryData = ref([]);
const qdrylist = ref([]);
const delrow = ref({}); //删除文件列表
const total = ref(0);
const showDept = ref(false); //选择部门
const showJkssbm = ref(false); //选择试卷
const showCjdw = ref(false); //选择参选部门
const showlable = ref(false); //是否显示对应参数
const disableds = ref(true); //是否显示对应参数
const showrybd2 = ref(false)
const rowrgcode = ref(null)

const isTeacherMask = ref(false)
const teacherList = ref([])

const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10
});
//表单数据
const ruleForm = ref({});
//规则校验
const rules = reactive({
  planName: [{ required: true, message: "培训计划选择不能为空", trigger: "blur" }],
  planHostsDeptName: [{ required: true, message: "主办部门不能为空", trigger: "blur" }],
  planChargePersonName: [{ trigger: "change", required: true, message: "项目负责人不能为空" }],
  planChannel: [{ trigger: "blur", required: true, message: "培训渠道不能为空" }],
  place: [{ trigger: "blur", required: true, message: "培训地点不能为空" }],
  startDate: [{ trigger: "blur", required: true, message: "培训开始日期不能为空" }],
  finshDate: [{ trigger: "blur", required: true, message: "培训结束日期不能为空" }],
  signFinshDate: [{ trigger: "blur", required: true, message: "报道截止时间不能为空" }],
  contactorName: [{ trigger: "blur", required: true, message: "联系人不能为空" }],
  ...rule.phoneRule({ require: true, validator: true }, "contactorPhone"),
  ...rule.intRule({ require: true, validator: true }, "realClassHour"),
  implementationTraineeNumber: [{ trigger: "blur", required: true, message: "培训总人数不能为空" }],
  ...rule.intRuleNumber({ validator: true, require: true }, "realBudget"),
  examinationType: [{ trigger: "blur", required: true, message: "考核方式不能为空" }],
  teachers: [{ trigger: "blur", required: true, message: "培训教师不能为空", }],
  specialityType: [{ trigger: "blur", required: true, message: "请选择业务类型" }],
  otherType: [{ trigger: "blur", required: true, message: "请选择培训类型" }],
});
const rules2 = reactive({
  sflx: [{ trigger: "blur", required: true, message: "请选择是否乱序出现考题" }],
  sffz: [{ trigger: "blur", required: true, message: "请选择是否发证" }],
  ctfs: [{ trigger: "blur", required: true, message: "请选择出题方式" }],
  examStartTime: [{ trigger: "blur", required: true, message: "请选择最早开考时间" }],
  examEndTime: [{ trigger: "blur", required: true, message: "请选择最晚开考时间" }],
  paperName: [{ trigger: "blur", required: true, message: "请选择试卷" }],
  sfckct: [{ trigger: "blur", required: true, message: "请选择是否查看错题" }],
  ...rule.intRule({ validator: true, require: true }, "pdCount"),
  ...rule.intRule({ validator: true, require: true }, "danxCount"),
  ...rule.intRule({ validator: true, require: true }, "duoxCount"),
  ...rule.intRule({ validator: true, require: true }, "kcjcs"),
  ...rule.intRule({ validator: true, require: true }, "examTime"),
  ...rule.percentageRule({ validator: true, require: true }, "danxfz"),
  ...rule.percentageRule({ validator: true, require: true }, "hgfs"),
  ...rule.percentageRule({ validator: true, require: true }, "pdfz"),
  ...rule.percentageRule({ validator: true, require: true }, "duoxfz"),
  ...rule.percentageRule({ validator: true, require: true }, "zf"),
})
const rules3 = reactive({
  ...rule.intRule({ validator: true, require: false }, "pdCount"),
  ...rule.intRule({ validator: true, require: false }, "danxCount"),
  ...rule.intRule({ validator: true, require: false }, "duoxCount"),
  ...rule.intRule({ validator: true, require: false }, "kcjcs"),
  ...rule.intRule({ validator: true, require: false }, "examTime"),
  ...rule.percentageRule({ validator: true, require: false }, "danxfz"),
  ...rule.percentageRule({ validator: true, require: false }, "hgfs"),
  ...rule.percentageRule({ validator: true, require: false }, "pdfz"),
  ...rule.percentageRule({ validator: true, require: false }, "duoxfz"),
  ...rule.percentageRule({ validator: true, require: false }, "zf"),
})
const emits = defineEmits(["changeAddVi", "changeclose"]);
const planList = ref([]);
//当前登录部门等级
const orgLevel = ref(JSON.parse(window.localStorage.getItem("deptId")).orgLevel.substring(0, 1))
const props = defineProps({
  formData: {
    type: Object,
    required: {}
  },
  type: String
});
const tableColumns1 = reactive([
  {
    title: "参加培训单位",
    prop: "orgName"
  },
  {
    title: "参加培训人数",
    prop: "traineeDistributionNum"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const tableColumns2 = reactive([
  {
    title: "学员名称",
    prop: "name"
  },
  {
    title: "所属部门",
    prop: "deptName"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const tableColumns3 = reactive([
  {
    title: "姓名",
    prop: "name"
  },
  {
    title: "时间",
    prop: "time"
  },
  {
    title: "内容",
    prop: "content"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])

const handleAddTeacher = () => {
  isTeacherMask.value = true
}
const handleUser = (data) => {
  isTeacherMask.value = false
  if (data) {
    teacherList.value.unshift(data)
  }
}
const deleteTeacherList = (row) => {
  teacherList.value.forEach((item, index) => {
    if (row.teacherId == item.teacherId) {
      ElMessage.success("删除成功");
      teacherList.value.splice(index, 1)
    }
  })
}
// 初始化
onMounted(() => {
  ruleForm.value.otherType = props.formData.otherType

  if (props.title == "计划内培训实施") {
    getPxjhlist();
  }
  if (props.formData.id) {
    if (props.formData.types && props.formData.types == 'ej') {
      //二级实施
      ruleForm.value.yjid = props.formData.id
      ruleForm.value.planName = props.formData.planName
      disableds.value = false
      ruleForm.value.planHostsDeptName = getItem('deptId').ssbmmc
      ruleForm.value.planHostsDeptId = getItem('deptId').ssbmid
      ruleForm.value.otherType = '09'
      if (orgLevel.value == "1" || orgLevel.value == "2" || filterqx("isaqbm") == "1") {
        if (filterqx('isSgs') == '1') {
          ruleForm.value.deptList = [
            { orgCode: getItem('deptId').ssbmid, orgName: getItem('deptId').ssbmmc, traineeDistributionNum: 0 }
          ]
          rowrgcode.value = getItem('deptId').ssbmid
        } else if (filterqx('isgs') == '1') {
          // 市级：本级加县单位
          ruleForm.value.deptList = [
            { orgCode: getItem('deptId').ssdwid, orgName: getItem('deptId').ssdwmc, traineeDistributionNum: 0 }
          ]
          rowrgcode.value = getItem('deptId').ssdwid
        } else {
          ruleForm.value.deptList = [
            { orgCode: getItem('deptId').ssbmid, orgName: getItem('deptId').ssbmmc, traineeDistributionNum: 0 }
          ]
          rowrgcode.value = getItem('deptId').ssbmid
          // 选择三级培训（县都展示部门）
        }
      }


      getcxxylist(ruleForm.value.yjid, '1')
    } else if (props.formData.types && props.formData.types == 'sj') {
      //三级实施
      ruleForm.value.yjid = props.formData.id
      ruleForm.value.ejid = props.formData.oldejid
      ruleForm.value.planName = props.formData.planName
      disableds.value = false
      ruleForm.value.planHostsDeptName = getItem('deptId').ssbmmc
      ruleForm.value.planHostsDeptId = getItem('deptId').ssbmid
      ruleForm.value.otherType = '09'
      if (orgLevel.value == "1" || orgLevel.value == "2" || filterqx("isaqbm") == "1") {
        if (filterqx('isSgs') == '1') {
          ruleForm.value.deptList = [
            { orgCode: getItem('deptId').ssbmid, orgName: getItem('deptId').ssbmmc, traineeDistributionNum: 0 }
          ]
          rowrgcode.value = getItem('deptId').ssbmid
        } else if (filterqx('isgs') == '1') {
          // 市级：本级加县单位
          ruleForm.value.deptList = [
            { orgCode: getItem('deptId').ssdwid, orgName: getItem('deptId').ssdwmc, traineeDistributionNum: 0 }
          ]
          rowrgcode.value = getItem('deptId').ssdwid
        } else {
          ruleForm.value.deptList = [
            { orgCode: getItem('deptId').ssbmid, orgName: getItem('deptId').ssbmmc, traineeDistributionNum: 0 }
          ]
          rowrgcode.value = getItem('deptId').ssbmid
          // 选择三级培训（县都展示部门）
        }
      }
      //实施三级培训--选择参训学员名单
      getcxxylist(props.formData.oldejid, '2')
    } else {
      //修改
      getJhssxq(props.formData.id);
    }

  }
  //只有安全部门人员才能选择三级教育培训
  getSysDictByCode({ dictCode: "GZ_TRAINOT" }).then((res) => {
    if (res) {
      res.itemList.forEach((item) => {
        item.label = item.zdmc;
        item.value = item.dm;
        if (item.dm == '09') {
          // filterqx('isaqbm') != '1' &&
          item.disabled = true
        } else {
          item.disabled = false
        }
      });
      if (ruleForm.value.otherType == '09') {
        pxlxlist.value = res.itemList

      } else {
        pxlxlist.value = res.itemList.filter(it => { return it.dm != '09' })
      }

    }
  });
});
//实施三级培训--选择参训学员名单
function getcxxylist(id, type) {
  getApi({ id, type }, '/mosty-jcgl/trainingSign/getSjryList').then(res => {
    qdrylist.value = res
  })
}
//培训结束日期
function disablednowDate(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(ruleForm.value.startDate).getTime()
}
//报道截止日期
function disablednowDate2(time) {
  return time.getTime() > new Date(ruleForm.value.finshDate).getTime()
}
function disabledzwkk(time) {
  return time.getTime() < new Date(ruleForm.value.examStartTime).getTime()
}
function changetime(params) {
  ruleForm.value.finshDate = ''
  ruleForm.value.signFinshDate = ''
}
function changetime2(params) {
  ruleForm.value.signFinshDate = ''
}
function check1() {
  if (ruleForm.value.realClassHour.length > 3) {
    ruleForm.value.realClassHour = ruleForm.value.realClassHour.slice(0, 3);
  }
}
function check() {
  if (ruleForm.value.realBudget.length > 7) {
    ruleForm.value.realBudget = ruleForm.value.realBudget.slice(0, 7);
  }
}
//获取培训实施-新增计划内实施-选择未实施计划
function getPxjhlist() {
  getApi(listQuery.value, "/mosty-jcgl/training/getJhListByDeptid").then(
    (res) => {
      planList.value = res.records;
      total.value = res.total;
    }
  );
}
// 切换分值配置
function changeScore() {
  let pd = ruleForm.value.pdCount * (ruleForm.value.pdfz ? ruleForm.value.pdfz : 0);
  let danx = ruleForm.value.danxCount * (ruleForm.value.danxfz ? ruleForm.value.danxfz : 0);
  let duox = ruleForm.value.duoxCount * (ruleForm.value.duoxfz ? ruleForm.value.duoxfz : 0);
  ruleForm.value.zf = pd + danx + duox


}

//计划内实施-详情
function getJhssxq(id) {
  getApi({ id: id }, "/mosty-jcgl/training/pxssInfoJhn").then((res) => {
    let library = res.library
    res.paperId = library.id
    res.sfckct = library.sfckct
    res.hgfs = library.hgfs
    res.examStartTime = library.examStartTime
    res.examEndTime = library.examEndTime
    res.examTime = library.examTime
    res.ctfs = library.ctfs
    res.kcjcs = library.kcjcs
    res.sffz = library.sffz
    res.sflx = library.sflx
    res.duoxfz = library.duoxfz
    res.danxfz = library.danxfz
    res.pdfz = library.pdfz
    res.bbid = library.bbid
    teacherList.value = res.teacherList
    getApi({}, "/mosty-jcgl/template/getTemplateInfo?id=" + library.bbid).then(async (resp) => {
      if (resp) {
        ruleForm.value.mbName = resp.name
        let url = await new Promise(async ok => {
          await getApi({}, `/mosty-base/minio/file/download/${resp.file}`).then((res) => {
            if (res && res.url) {
              ok(res.url)
            } else {
              ok('')
            }
          })
        })
        ruleForm.value.mbImg = url
      }
    })
    ruleForm.value = res;
    ruleForm.value.specialityType = ruleForm.value.specialityType.split(",");
    if (ruleForm.value.deptList) {
      ruleForm.value.deptList.forEach(async (item) => {
        item.traineeList = await getrylist(item.id)
      })
    }
    if (library.id) {
      // 获取试题参数项
      getApi({}, "/mosty-jcgl/exampaper/getDetailById?id=" + library.id).then((resp) => {
        if (resp) {
          exeamobj.value = resp
          // if (resp.ctfs == '3') {
          //   ruleForm.value.danxCount = resp.danxtl
          //   ruleForm.value.duoxCount = resp.duoxtl
          //   ruleForm.value.pdCount = resp.pdtl
          // } else {

          // }
          ruleForm.value.pdCount = resp.pdCount >= 0 ? resp.pdCount : resp.danxtl
          ruleForm.value.danxCount = resp.danxCount >= 0 ? resp.danxCount : resp.duoxtl
          ruleForm.value.duoxCount = resp.duoxCount >= 0 ? resp.duoxCount : resp.pdtl
          ruleForm.value.paperName = library.name

          changeScore()
        }
      })
    }

  });
}
const getrylist = async (id) => {
  return new Promise(ok => {
    getApi({ id }, '/mosty-jcgl/trainingSign/getUserList').then((res) => {
      ok(res ? res : [])
    })
  })
}
const deptId = ref("");
//选择人员或部门
function ChooesDdld(value, row) {
  parentId.value = getItem("deptId").ssdwid;
  zzlx.value = value;
  leaderid.value = "";
  memberList.value = []
  //培训计划
  if (value == '00') {
    showpxtit.value = true
  } else if (value == "01") {
    //主办部门
    showDept.value = true;
  } else if (value == "02") {
    //项目负责人
    deptId.value = getItem("deptId").ssbmid;
    singleShow.value = true;
    chooseUserVisible.value = true;
    leaderid.value = ruleForm.value.planChargePersonId;
  } else if (value == "04") {
    //考试题多选
    showJkssbm.value = true;
    taskList.value = ruleForm.value.paperId
  } else if (value == "05") {
    //选择参选部门
    fromObj.value = ruleForm.value.deptList
    // 参加单位选择，如果是省公司，只选择到市公司层级，如果是市公司，选择到县公司层级
    if (ruleForm.value.otherType == '09') {
      //一级随便选，二级、三级只能选择自己单位
      if (filterqx('isSgs') == '1') {
        orgLevels.value = '11'
        showCjbm.value = true
      } else if (filterqx('isgs') == '1') {
        // 市级：本级加县单位
        searchType.value = '03'
        showCjdw.value = true;
      } else {
        orgLevels.value = '31,40'
        showCjbm.value = true
        // 选择三级培训（县都展示部门）
      }
    } else {
      if (filterqx('isSgs') == '1') {
        //         //省下的安全部门选择市公司层级单位
        searchType.value = '02'
        showCjdw.value = true;
      } else if (filterqx('isgs') == '1') {
        //市下的层级单位
        searchType.value = '03'
        showCjdw.value = true;
      } else {
        // 县下的
        //安全部门的人只展示当前单位下的部门（不是安全部门的人就展示参训学员）
        if (filterqx('isaqbm') == '1') {
          orgLevels.value = '31,40'
          showCjbm.value = true
        }
      }

    }
  } else if (value == '06') {
    //选择证书模板
    showMb.value = true
  } else if (value == '07') {
    if (props.formData.types && (props.formData.types == 'sj' || props.formData.types == 'ej')) {
      if (ruleForm.value.traineeList) {
        memberList.value = ruleForm.value.traineeList.map((item) => {
          return item.userPk;
        });
      }
      showrybd2.value = true;
    } else {
      deptId.value = getItem("deptId").ssbmid;
      singleShow.value = false
      if (ruleForm.value.traineeList) {
        memberList.value = ruleForm.value.traineeList.map((item) => {
          return item.userPk;
        });
      }
      chooseUserVisible.value = true;
    }

  } else if (value == '08') {
    if (row.traineeList) {
      memberList.value = row.traineeList.map((item) => {
        return item.userPk;
      });
    }
    singleShow.value = false
    //参训学院名单
    if (props.formData.types == 'ej' || props.formData.types == 'sj') {
      showrybd2.value = true;
    } else {
      deptId.value = row.orgCode;
      rowrgcode.value = row.orgCode;
      chooseUserVisible.value = true;
    }
    deptId.value = getItem("deptId").ssdwid;
  }
}
//查看参训人员
function changeryli(row) {
  ryData.value = row.traineeList
  showrybd.value = true
}
function closeryData() {
  ryData.value = []
  showrybd.value = false
}
//删除部门
const deldetedept = (row) => {
  if (row) {
    ruleForm.value.deptList = ruleForm.value.deptList.filter((item) => {
      return item.orgCode != row.orgCode;
    });
  }
};
//删除人员
const deldetery = (row) => {
  if (row) {
    ruleForm.value.traineeList = ruleForm.value.traineeList.filter((item) => {
      return item.userPk != row.userPk;
    });
  }
};
//预览试卷
function chooseexam() {
  examShow.value = true
}
//获取部门、人员
const getSonValue = (value) => {
  exeamobj.value = null
  if (zzlx.value == "00") {
    ruleForm.value = value[0]
    ruleForm.value.implementationTraineeNumber = value[0].planTraineeNumber;
    ruleForm.value.realBudget = value[0].planBudget;
    ruleForm.value.realClassHour = value[0].planClassHour;
    ruleForm.value.realContent = value[0].planContent;

    if (props.formData.otherType == '09') {
      ruleForm.value.otherType = props.formData.otherType
    }
  } else if (zzlx.value == "01") {
    ruleForm.value.planHostsDeptName = value.orgName;
    ruleForm.value.planHostsDeptId = value.id;
  } else if (zzlx.value == "02") {
    ruleForm.value.planChargePersonName = value[0].userName;
    ruleForm.value.planChargePersonId = value[0].id;
  } else if (zzlx.value == "04") {
    ruleForm.value.pdCount = value[0].pdCount || 0
    ruleForm.value.danxCount = value[0].danxCount || 0
    ruleForm.value.duoxCount = value[0].duoxCount || 0
    ruleForm.value.examTime = value[0].examTime || 0
    ruleForm.value.duoxfz = value[0].multipleChoice || 0
    ruleForm.value.danxfz = value[0].singleChoice || 0
    ruleForm.value.pdfz = value[0].trueOrFalseQuestions || 0
    ruleForm.value.zf = value[0].trueOrFalseQuestions + value[0].singleChoice + value[0].multipleChoice
    exeamobj.value = value[0]
    ruleForm.value.paperId = value[0].id;
    ruleForm.value.paperName = value[0].name
    ruleForm.value.ctfs = value[0].ctfs
    ruleForm.value.sfckct = ruleForm.value.sfckct || '1'

    if (value[0].ctfs == '1' || value[0].ctfs == '3') {
      ruleForm.value.sflx = '1'
    } else {
      ruleForm.value.sflx = '2'
    }
    ruleForm.value.kcjcs = ruleForm.value.kcjcs || 3
    ruleForm.value.hgfs = ruleForm.value.hgfs || 80
    ruleForm.value.sffz = ruleForm.value.sffz || '2'
    // ruleForm.value.zf = null
    // ruleForm.value.pdfz = null
    // ruleForm.value.danxfz = null
    // ruleForm.value.duoxfz = null
    changeScore()
  } else if (zzlx.value == "05") {
    ruleForm.value.deptList = value.map((item) => {
      return {
        orgCode: item.id,
        id: item.id,
        orgName: item.orgName,
        traineeDistributionNum: 0,
        bz: "",
        ifbj: false
      };
    });
  } else if (zzlx.value == '06') {
    mbData.value = value
    ruleForm.value.bbid = value.id
    ruleForm.value.mbImg = value.url
    ruleForm.value.mbName = value.name
  } else if (zzlx.value == '07') {
    if (props.formData.types && (props.formData.types == 'sj' || props.formData.types == 'ej')) {
      ruleForm.value.traineeList = value.map((item) => {
        return {
          deptId: item.depcode,
          deptName: item.depname,
          name: item.name || item.name,
          userPk: item.userPk,
        };
      });
    } else {
      ruleForm.value.traineeList = value.map((item) => {
        return {
          deptId: item.deptId,
          deptName: item.deptName,
          name: item.userName || item.name,
          userPk: item.id,
          phone: item.telePhone,
        };
      });
    }

  } else if (zzlx.value == '08') {
    ruleForm.value.deptList.forEach(item => {
      if (item.orgCode == rowrgcode.value) {
        item.traineeList = value.map((item) => {
          return {
            deptId: item.orgCode,
            depname: item.deptName,
            name: item.userName || item.name,
            userPk: item.id,
          };
        });
        item.traineeDistributionNum = item.traineeList.length
      }
    })
  }
};

//关闭弹窗
const closezzjg = (val) => {
  showDept.value = val;
};
const closedept = (val) => {
  showCjdw.value = val;
  showCjbm.value = val;
  searchType.value = null
};

const closeJhss = (val) => {
  showJkssbm.value = val;
};
function closepxjh(val) {
  showpxtit.value = val;
}
// 获取模板数据
const closeMbData = (val) => {
  showMb.value = val
}
// 取消教师选择
const closeTeacher = () => {
  isTeacherMask.value = false
}
//清空数据
function reset() {
  ruleForm.value = {};
}
function postgetdata(data, url, text) {
  loading.value = true;
  postApi(data, url)
    .then((res) => {
      ElMessage.success(text);
      reset();
      emits("changeAddVi", false);
      loading.value = false;
    }).finally(() => {
      loading.value = false;
      ruleForm.value.specialityType = ruleForm.value.specialityType && isString(ruleForm.value.specialityType) ? ruleForm.value.specialityType.split(',') : ruleForm.value.specialityType;
    })
}
const handleSave = async (formEl) => {
  if (!formEl) return
  if (!ruleForm.value.pxtzwj) {
    return ElMessage.warning('请上传培训通知文件附件！！！')
  }
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (ruleForm.value.examinationType == "4") {
        // if (!ruleFormRef2.value) return
        ruleFormRef2.value.validate((valid) => {
          if (valid) {
            savefrom()
          } else {
            ElMessage.warning('请输入必填项！！！')
          }
        })
      } else {
        savefrom()
      }
    } else {
      ElMessage.warning(getErrMsg(fields) || "请检查表单!");
      // ElMessage.warning('请输入必填项！！')
    }
  });
};

function savefrom() {
  if (!ruleForm.value.paperId && (ruleForm.value.examinationType == "2" || ruleForm.value.examinationType == "4")) {
    ElMessage.warning("请选择考试题目");
  }

  if (ruleForm.value.zf != 100 && (ruleForm.value.examinationType == "2" || ruleForm.value.examinationType == "4")) {
    ElMessageBox.confirm("当前分值不是满分，确认提交?", "警告", {
      confirmButtonText: "确认提交",
      type: "warning"
    }).then(() => {
      saveDatas()
    }).catch(() => {
      return
    });
  } else {
    saveDatas()
  }
  if (ruleForm.value.otherType == '09' && (orgLevel.value == "1" || orgLevel.value == "2" || filterqx("isaqbm") == "1")) {
    if (!ruleForm.value.deptList) {
      ElMessage.warning("请选择参训单位");
      return
    } else {
      ruleForm.value.deptList.forEach(item => {
        if (!item.traineeList || item.traineeList.length == 0) {
          ElMessage.warning("请选择参训学员");

          return
        }
      })
    }
  }

}
function saveDatas() {
  ruleForm.value.realClassHour = parseInt(ruleForm.value.realClassHour);
  ruleForm.value.realBudget = parseFloat(ruleForm.value.realBudget);
  ruleForm.value.implementationTraineeNumber = parseInt(
    ruleForm.value.implementationTraineeNumber
  );
  if (ruleForm.value.deptList) {
    ruleForm.value.deptList.forEach((it) => {
      it.traineeDistributionNum = parseInt(it.traineeDistributionNum);
    });
  }
  let library = {}
  library.id = ruleForm.value.paperId
  library.sfckct = ruleForm.value.sfckct
  library.hgfs = ruleForm.value.hgfs
  library.sflx = ruleForm.value.sflx
  library.examStartTime = ruleForm.value.examStartTime
  library.examEndTime = ruleForm.value.examEndTime
  library.examTime = ruleForm.value.examTime
  library.ctfs = ruleForm.value.ctfs
  library.kcjcs = ruleForm.value.kcjcs
  library.sffz = ruleForm.value.sffz
  library.duoxfz = ruleForm.value.duoxfz
  library.danxfz = ruleForm.value.danxfz
  library.pdfz = ruleForm.value.pdfz
  ruleForm.value.library = library
  library.bbid = ruleForm.value.bbid
  ruleForm.value.files = ruleForm.value.files ? ruleForm.value.files.toString() : null;
  ruleForm.value.pxfa = ruleForm.value.pxfa ? ruleForm.value.pxfa.toString() : null;
  ruleForm.value.pxtzwj = ruleForm.value.pxtzwj ? ruleForm.value.pxtzwj.toString() : null;
  ruleForm.value.qdb = ruleForm.value.qdb ? ruleForm.value.qdb.toString() : null;
  ruleForm.value.imgs = ruleForm.value.imgs ? ruleForm.value.imgs.toString() : null;
  ruleForm.value.specialityType = ruleForm.value.specialityType ? ruleForm.value.specialityType.toString() : null;
  ruleForm.value.type = '1';
  ruleForm.value.teacherList = teacherList.value
  if (ruleForm.value.id && props.formData.id) {
    postgetdata(
      ruleForm.value,
      "/mosty-jcgl/training/pxssEditJhn",
      "修改成功"
    );

  } else {
    postgetdata(
      ruleForm.value,
      "/mosty-jcgl/training/pxssAddJhn",
      "新增成功"
    );
  }
}
// 关闭
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      // 关闭上一次的表单校验
      ruleFormRef.value.clearValidate();
      reset();
      emits("changeAddVi", false);
    })
    .catch(() => {
      // catch error
    })

};



</script>

<style lang="scss" scoped>
.sele-title {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 10px 20px;
}

.sele-titles {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 10px 20px 0px 50px;

  // >span {
  //     display: block;
  //     width: 33%;
  //     text-align: center;
  // }
}

.beiz {
  width: 100%;
  padding: 10px;
  background: #0b6047;
}

.addbtn {
  margin: 10px;
  display: flex;
  justify-content: end;
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.el-form {
  width: 100%;
  margin: 0px auto;
  flex-wrap: wrap;
  justify-content: space-between;

}

.el-form-item {
  text-align: center;
}


::v-deep .el-dialog__body {
  overflow: auto !important;
  max-height: 70vh !important;
}
</style>
