<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 部门数据 -->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
            @node-click="handleNodeClick">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <el-tooltip :content="data.label" placement="top" effect="dark">
                <span>{{ data.label }}</span>
              </el-tooltip>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 事项数据 -->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-form-item label="事项名称" prop="itemName">
            <el-input v-model="queryParams.itemName" placeholder="请输入事项名称" clearable style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item prop="prefixQuestion">
            <label for="prefixQuestion" class="el-form-item__label" style="width: 120px">是否有前置问题</label>
            <el-select v-model="queryParams.prefixQuestion" placeholder="请选择是否有前置问题" clearable style="width: 240px">
              <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              v-hasPermi="['matter:item:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
              v-hasPermi="['matter:item:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
              v-hasPermi="['matter:item:remove']">删除</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="matterList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column :label="columns[0].label" align="center" key="id" prop="id" v-if="columns[0].visible" />
          <el-table-column :label="columns[1].label" align="center" key="itemName" prop="itemName"
            v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column :label="columns[2].label" align="center" key="deptName" prop="dept.deptName"
            v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column :label="columns[3].label" align="center" key="sortNum" prop="sortNum"
            v-if="columns[3].visible" width="120" />
          <el-table-column :label="columns[4].label" align="center" key="prefixQuestion" v-if="columns[4].visible">
            <template slot-scope="scope">
              {{ scope.row.prefixQuestion == "Y" ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column :label="columns[5].label" align="center" prop="createTime" v-if="columns[5].visible"
            width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button size="mini" type="text" icon="el-icon-set-up" @click="handleDeploy(scope.row)"
                v-if="scope.row.prefixQuestion == 'Y'">问题配置</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['matter:item:edit']">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                v-hasPermi="['matter:item:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 添加或修改审查事项对话框 -->
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="850px" @close="cancel"
      @open="handleDialogOpen" id="itemDialog" append-to-body>
      <el-form ref="formDataref" :model="formData" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="formData.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"
                @input="changedetId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="事项名称" prop="itemName">
              <el-input v-model="formData.itemName" placeholder="请输入事项名称" maxlength="255" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="formData.contacts" placeholder="请输入联系人" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactsPhone">
              <el-input v-model="formData.contactsPhone" placeholder="请输入联系电话" maxlength="255" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="排序号" prop="sort">
              <el-input v-model.trim="formData.sort" placeholder="请输入排序号（数字越大越靠前）"
                oninput="value=value.replace(/[^\d]/g,'')" maxlength="5" @blur="formData.sort=$event.target.value" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="常见问题" prop="commonProblem">
              <editor v-model="formData.commonProblem" :min-height="152" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span=" 24">
            <el-form-item label="前置问题" prop="prefixQuestion">
              <el-radio-group v-model="formData.prefixQuestion" @change="handleVersionChange">
                <el-radio v-model="formData.prefixQuestion" v-for="dict in dict.type.sys_yes_no" :key="dict.value"
                  :label="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
              <div style="color: red;" v-if="formData.prefixQuestion=='Y'">提示：请在事项列表中"问题配置"按钮处配置相关问题</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.prefixQuestion=='N'">
          <el-col :span="24">
            <el-form-item label="申请条件" prop="conditions">
              <editor v-model="formData.conditions" :min-height="152" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.prefixQuestion=='N'">
          <el-col :span="24">
            <el-form-item label="办理方式">
              <editor v-model="formData.dealWith" :min-height="152" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.prefixQuestion=='N'">
          <div style="border: 1px solid #ccc;margin-top:10px;padding: 10px;box-sizing: border-box;"
            v-for="(domain, index) in materialList" :key="domain.key">
            <el-row>
              <el-col :span="24">
                <el-form-item label="材料名称" required :error="domain.customError">
                  <el-input v-model="domain.listName" placeholder="请输入材料名称"
                    @blur="checkCustomValid(index)" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="人工核验" required>
                  <el-radio-group v-model="domain.verification">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="审查要点">
<!--                  <el-input v-model="domain.memo" type="textarea" placeholder="请输入审查要点" :autosize="{minRows: 3}"-->
<!--                    :style="{width: '100%'}"></el-input>-->
                  <editor v-model="domain.memo" :min-height="152" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="图片上传">
                  <el-upload :action="uploadFileUrl" accept=".jpg, .jpeg, .png" list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="(file, fileList)=>handleRemove(file, fileList,index)" :file-list="domain.imgs"
                    :headers="headers" :before-upload="handleBeforeUpload"
                    :on-success="(response, file, fileList)=>handleSuccess(response, file, fileList,index)"
                    :on-error="handleUploadError">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" :append-to-body="true">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item>
                  <el-button @click="reommaterialList(index)" style="background-color: #e56f6f;"
                    class="newbutton">删除该材料</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <el-row style="margin-top: 10px;margin-left: 10px;" v-if="formData.prefixQuestion=='N'">
          <el-col :span="8">
            <el-form-item>
              <el-button @click="addmaterialList()" style="background-color: #4468bb;"
                class="newbutton">添加材料</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <label class="el-form-item__label" style="width: 80px; line-height: 16px;">受理通知单</label>
            <editor v-model="formData.printContent" :min-height="152" style="margin-left: 80px;" />
          </el-col>
          <el-col>
            <div style="color: #8f8f8f; font-size: 12px; margin-left: 80px; margin-top: 8px; margin-bottom: 20px;">表达式：
              <span>① {$year}：当前年；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>② {$month}：当前月；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>③ {$day}：当前日；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>④ {$matter}：事项名称；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑤ {$materialNum}：材料数量；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑥ {$dealWithUser}：受理人；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑦ {$approveUser}：申请人；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑧ {$contactPhone}：申请人联系电话；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑧ {$serialNumber}：受理编号；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑨ {$materialConditions}：申请条件；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑩ {$materialList}：材料列表；&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <label class="el-form-item__label" style="width: 80px; line-height: 16px;">补正材料告知书</label>
            <editor v-model="formData.printMissContent" :min-height="152" style="margin-left: 80px;" />
          </el-col>
          <el-col>
            <div style="color: #8f8f8f; font-size: 12px; margin-left: 80px; margin-top: 8px; margin-bottom: 20px;">表达式：
              <span>① {$year}：当前年；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>② {$month}：当前月；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>③ {$day}：当前日；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>④ {$matter}：事项名称；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑤ {$materialNum}：提交材料数量；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑥ {$materials}：缺失材料信息；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑦ {$dealWithUser}：受理人；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑧ {$approveUser}：申请人；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑨ {$serialNumber}：不予受理编号；&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <label class="el-form-item__label" style="width: 80px; line-height: 16px;">不予受理通知书</label>
            <editor v-model="formData.printDenyContent" :min-height="152" style="margin-left: 80px;" />
          </el-col>
          <el-col>
            <div style="color: #8f8f8f; font-size: 12px; margin-left: 80px; margin-top: 8px; margin-bottom: 20px;">表达式：
              <span>① {$year}：当前年；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>② {$month}：当前月；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>③ {$day}：当前日；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>④ {$matter}：事项名称；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑤ {$materialNum}：提交材料数量；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑥ {$dealWithUser}：受理人；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑦ {$approveUser}：申请人；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑧ {$serialNumber}：不予受理编号；&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>⑨ {$reason}：不予受理理由；&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改问题对话框 -->
    <el-dialog title="问题题目配置" :visible.sync="addProblem" :close-on-click-modal="false" width="850px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addItem"
            v-hasPermi="['matter:question:add']">新增</el-button>
        </el-col>
        <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columnsp"></right-toolbar> -->
      </el-row>
      <el-table v-loading="loadingp" :data="problemList" id="prblemTable">
        <el-table-column :label="columnsp[0].label" align="center" type="index" key="id" v-if="columnsp[0].visible" />
        <el-table-column :label="columnsp[1].label" align="center" key="desc" prop="desc" v-if="columnsp[1].visible"
          :show-overflow-tooltip="true" />
        <el-table-column :label="columnsp[2].label" align="center" key="sortNum" prop="sortNum"
          v-if="columnsp[2].visible" :show-overflow-tooltip="true" width="150" />
        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="scope.row.userId !== 1">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="problemUpdate(scope.row)"
              v-hasPermi="['matter:question:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="problemDelete(scope.row)"
              v-hasPermi="['matter:question:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="totalp > 0" :total="totalp" :page.sync="problemParams.pageNum"
        :limit.sync="problemParams.pageSize" @pagination="getPrblemList" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="canceladd">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改问题选项对话框 -->
    <el-dialog :title="title" :visible.sync="problemopen" @close="cancelproblem" :close-on-click-modal="false"
      width="850px" id="problemDialog" @open="handleDialogOpenP" append-to-body>
      <el-form ref="prblemformref" :model="prblemform" :rules="rulesproblem" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="问题题目" :prop="'title'" :rules="[{required: true, message: '问题题目不能为空', trigger: 'blur'},
            {
              required: true,
              transform: (value) => value && value.trim(),
              message: '问题题目不能全部为空',
              trigger: 'blur'
            }]">
              <el-input v-model="prblemform.title" placeholder="请输入问题题目"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="排序号" :prop="'sort'" :rules="[{required: true, message: '排序号不能为空', trigger: 'blur'}]">
              <el-input v-model.trim="prblemform.sort" placeholder="请输入排序号（数字越大越靠前）"
                oninput="value=value.replace(/[^\d]/g,'')" maxlength="5" @blur="prblemform.sort=$event.target.value" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div style="border: 1px solid #ccc;margin-top:10px;padding: 10px;box-sizing: border-box;"
            v-for="(domain, index) in prblemform.optionlist" :key="domain.key" v-if="prblemform.type===1">
            <el-row>
              <el-col :span="13">
                <el-form-item :label="'选项'+(index+1)" :prop="'optionlist['+index+'].option'" :rules="[{required: true, message: '选项不能为空', trigger: 'blur'},
                  {
                    required: true,
                    transform: (value) => value && value.trim(),
                    message: '选项不能全部为空',
                    trigger: 'blur'
                  }]">
                  <el-input v-model="domain.option" placeholder="请输入选择选项" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="排序号" :prop="'optionlist['+index+'].number'"
                  :rules="[{required: true, message: '排序号不能为空', trigger: 'blur'}]">
                  <el-input v-model.trim="domain.number" placeholder="请输入排序号（数字越大越靠前）"
                    oninput="value=value.replace(/[^\d]/g,'')" maxlength="5"
                    @blur="domain.number=$event.target.value" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="题目跳转" :prop="'optionlist['+index+'].Jump'"
                  :rules="[{required: true,message: '请选择跳转题目', trigger: 'change'}]">
                  <el-radio-group v-model="domain.Jump" @change="handleJumpChange($event,index)">
                    <el-radio key="1" label="是"></el-radio>
                    <el-radio key="2" label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="prblemform.optionlist[index].Jump=='是'">
              <el-col :span="24">
                <el-form-item :prop="'optionlist['+index+'].region'"
                  :rules="{required: true, message: '跳转问题不能为空', trigger: 'blur'}">
                  <el-select v-model="domain.region" placeholder="请选择跳转问题" style="width: 100%;">
                    <el-option v-for="(item, index) in problemList" :key="index" :label="item.desc" :value="item.id"
                      :disabled="prblemform.id==item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="prblemform.optionlist[index].Jump=='否'">
              <el-col :span="24">
                <el-form-item label="申请条件" :prop="'optionlist['+index+'].conditions'">
                  <editor v-model="domain.conditions" :min-height="152" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="prblemform.optionlist[index].Jump=='否'">
              <el-col :span="24">
                <el-form-item label="办理方式" :prop="'optionlist['+index+'].dealWith'">
                  <editor v-model="domain.dealWith" :min-height="152" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="prblemform.optionlist[index].Jump=='否'">
              <div style="border: 1px solid #ccc;margin-top:10px;padding: 10px;box-sizing: border-box;"
                v-for="(domainp, indexp) in prblemform.optionlist[index].materialListPro" :key="domainp.key">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="材料名称" :prop="'optionlist['+index+'].materialListPro['+indexp+'].listName'"
                      :rules="[{required: true, message: '材料名称不能为空', trigger: 'blur'},
                      {
                        required: true,
                        transform: (value) => value && value.trim(),
                        message: '材料名称不能全部为空',
                        trigger: 'blur'
                      }]">
                      <el-input v-model="domainp.listName" placeholder="请输入材料名称" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="人工核验" required>
                      <el-radio-group v-model="domainp.verification">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="审查要点" :prop="prblemform.optionlist[index].materialListPro[indexp].memo">
<!--                      <el-input v-model="domainp.memo" type="textarea" placeholder="请输入审查要点" :autosize="{minRows: 3}"-->
<!--                        :style="{width: '100%'}"></el-input>-->
                      <editor v-model="domainp.memo" :min-height="152" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="图片上传">
                      <el-upload :action="uploadFileUrl" accept=".jpg, .jpeg, .png" list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="(file, fileList)=>handleRemovePro(file, fileList,index,indexp)"
                        :file-list="domainp.imgs" :headers="headers" :before-upload="handleBeforeUpload"
                        :on-success="(response, file, fileList)=>handleSuccessPro(response, file, fileList,index,indexp)"
                        :on-error="handleUploadError">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" :append-to-body="true">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item>
                      <el-button @click="reommaterialListPro(indexp,index)" style="background-color: #e56f6f;"
                        class="newbutton">删除该材料</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-row>
            <el-row style="margin-top: 10px;margin-left: 10px;">
              <el-col :span="24">
                <el-form-item>
                  <el-button @click="addmaterialListPro(index)" v-if="prblemform.optionlist[index].Jump=='否'"
                    style="background-color: #4468bb;" class="newbutton">添加材料</el-button>
                  <el-button @click="reomoptionlist(index)" v-if="prblemform.type===1"
                    style="background-color: #ed6a6a;" class="newbutton">删除备选选项</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="8" v-if="prblemform.type===1">
            <el-form-item size="large">
              <el-button @click="addoptionlist()" style="background-color: #55af55;margin-left: 20px;"
                class="newbutton">添加备选选项</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormproblem">确 定</el-button>
        <el-button @click="cancelproblem">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { deptTreeSelect } from "@/api/system/user";
  import { addMatter, listMatter, updateMatter, getMatter, delMatter } from "@/api/matter/matter";
  import { addQuestion, listQuestion, updateQuestion, delQuestion, getQuestion } from "@/api/matter/question";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { getToken } from "@/utils/auth";

  export default {
    name: "Item",
    components: { Treeselect },
    dicts: ["sys_yes_no"],
    data() {
      let validates = (rule, value, callback) => {
        // reg是用于解析富文本标签里的内容，
        const reg = /(?!<(img|video).*?>)<.*?>/g
        // strings 是解析出来的内容，不包含标签
        const strings = value.replace(reg, '')
        // value是空，callback触发不能为空
        if (value === "") {
          callback(new Error("内容不能为空"));
          // 如果解析出来的内容是空或全部是空格，callback触发不能为空
        } else if (strings.match(/^[ ]*$/)) {
          callback(
            new Error("内容不能为空")
          );
        } else {
          callback();
        }
      };
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: [],
        uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
          type: Array,
          default: () => ['png', 'jpg', 'jpeg'],
        },
        // 显示非表单校验的内容
        customError: [''],
        // 遮罩层
        loading: true,
        loadingp: true,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        addProblem: false,
        problemopen: false,
        // 表单参数
        formData: {},
        materialList: [{
          customError: "",
          listName: "",
          memo: "",
          verification: 0,
          imgs: []
        }],
        // 表单参数
        prblemform: {
          title: '',
          type: 1,
          sort: "",
          number: 0,
          key: Date.now(),
          optionlist: [{
            option: '',
            number: '',
            Jump: '',
            region: '',
            conditions: '',
            dealWith: '',
            materialListPro: [{
              listName: "11",
              memo: "",
              imgs: []
            }],
            reason: false,
            checked: false,
            key: Date.now()
          }]
        },
        // 部门名称
        deptName: undefined,
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label",
        },
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        totalp: 0,
        // 事项表格数据
        matterList: null,
        //问题数据
        problemList: null,
        // 查询事项参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          itemName: undefined,
          prefixQuestion: undefined,
          deptId: undefined,
        },
        // 查询问题参数
        problemParams: {
          pageNum: 1,
          pageSize: 10,
          matterId: undefined,
        },
        // 列信息
        columns: [
          { key: 0, label: `事项编号`, visible: true },
          { key: 1, label: `事项名称`, visible: true },
          { key: 2, label: `所属部门`, visible: true },
          { key: 3, label: `排序号`, visible: true },
          { key: 4, label: `是否有前置问题`, visible: true },
          { key: 5, label: `创建时间`, visible: true },
        ],
        columnsp: [
          { key: 0, label: `序号`, visible: true },
          { key: 1, label: `问题题目`, visible: true },
          { key: 2, label: `排序号`, visible: true }
        ],
        // 表单校验
        rules: {
          deptId: [
            { required: true, message: "请选择归属部门", trigger: "input" }
          ],
          itemName: [
            { required: true, message: "事项名称不能为空", trigger: "blur" },
            {
              required: true,
              transform: (value) => value && value.trim(),
              message: '事项名称不能全部为空',
              trigger: 'blur'
            }
          ],
          contacts: [{ required: true, message: "联系人不能为空", trigger: "blur" },
          {
            required: true,
            transform: (value) => value && value.trim(),
            message: '联系人不能全部为空',
            trigger: 'blur'
          }
          ],
          contactsPhone: [{ required: true, message: "联系电话不能为空", trigger: "blur" },
          {
            required: true,
            transform: (value) => value && value.trim(),
            message: '联系电话不能全部为空',
            trigger: 'blur'
          }
          ],
          sort: [
            { required: true, message: "排序号不能为空", trigger: "blur" }
          ],
          prefixQuestion: [
            {
              required: true,
              message: "请选择是否有前置问题",
              trigger: "change",
            },
          ],
        },
        rulesproblem: {
        }
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {
      this.getList();
      this.getDeptTree();
    },
    methods: {
      // 上传前校检格式和大小
      handleBeforeUpload(file) {
        const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
        const isJPG = type.includes(file.type);
        // 检验文件格式
        if (!isJPG) {
          this.$message.error(`只可上传jpeg、jpg、png的图片格式！`);
          return false;
        }
        return true;
      },
      // 上传失败
      handleUploadError(err) {
        this.$modal.msgError("上传文件失败，请重试");
        this.$modal.closeLoading();
      },
      handleRemove(file, fileList, index) {
        this.materialList[index].imgs = [];
        var imgList = [];
        for (var i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            imgList.push(
              {
                name: fileList[i].response.originalFilename,
                url: process.env.VUE_APP_BASE_API + fileList[i].response.fileName
              }
            )
          } else {
            imgList.push(
              {
                name: fileList[i].name,
                url: fileList[i].url
              }
            )
          }
        }
        this.materialList[index].imgs = imgList;
      },
      handleRemovePro(file, fileList, index, indexp) {
        this.prblemform.optionlist[index].materialListPro[indexp].imgs = [];
        var imgList = [];
        for (var i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            imgList.push(
              {
                name: fileList[i].response.originalFilename,
                url: process.env.VUE_APP_BASE_API + fileList[i].response.fileName
              }
            )
          } else {
            imgList.push(
              {
                name: fileList[i].name,
                url: fileList[i].url
              }
            )
          }
        }
        this.prblemform.optionlist[index].materialListPro[indexp].imgs = imgList;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response, file, fileList, index) {
        console.log('File uploaded successfully:', fileList);
        this.materialList[index].imgs = [];
        var imgList = [];
        for (var i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            imgList.push(
              {
                name: fileList[i].response.originalFilename,
                url: process.env.VUE_APP_BASE_API + fileList[i].response.fileName
              }
            )
          } else {
            imgList.push(
              {
                name: fileList[i].name,
                url: fileList[i].url
              }
            )
          }
        }
        this.materialList[index].imgs = imgList;
      },
      handleSuccessPro(response, file, fileList, index, indexp) {
        this.prblemform.optionlist[index].materialListPro[indexp].imgs = [];
        var imgList = [];
        for (var i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            imgList.push(
              {
                name: fileList[i].response.originalFilename,
                url: process.env.VUE_APP_BASE_API + fileList[i].response.fileName
              }
            )
          } else {
            imgList.push(
              {
                name: fileList[i].name,
                url: fileList[i].url
              }
            )
          }
        }
        this.prblemform.optionlist[index].materialListPro[indexp].imgs = imgList;
      },
      handleDialogOpen() {
        // 使用Vue.nextTick确保DOM已经更新
        this.$nextTick(() => {
          const dialogBody = document.querySelector("#itemDialog .el-dialog__body");
          if (dialogBody) {
            dialogBody.scrollTop = 0;
          }
        });
      },
      handleDialogOpenP() {
        // 使用Vue.nextTick确保DOM已经更新
        this.$nextTick(() => {
          const dialogBody = document.querySelector("#problemDialog .el-dialog__body");
          if (dialogBody) {
            dialogBody.scrollTop = 0;
          }
        });
      },
      changedetId() {
        this.$nextTick(() => {
          this.$refs.formDataref.validateField('deptId')
        })
      },
      // 2、非表单校验
      checkCustomValid(index) {
        if (!this.materialList[index].listName.trim()) {
          this.$set(this.materialList, index, {
            customError: "材料名称不能为空",
            listName: this.materialList[index].listName,
            memo: this.materialList[index].memo,
            verification: this.materialList[index].verification,
            imgs: this.materialList[index].imgs
          })
          // this.materialList[index].customError = '材料名称不能为空'
          return false
        } else {
          this.$set(this.materialList, index, {
            customError: "",
            listName: this.materialList[index].listName,
            memo: this.materialList[index].memo,
            verification: this.materialList[index].verification,
            imgs: this.materialList[index].imgs
          })
          // this.materialList[index].customError = ''
          return true
        }
      },
      /** 是否前置选择器 */
      handleVersionChange(prefixQuestion) {
        this.handleDialogOpen();
      },
      handleJumpChange(val, index) {
        if (val == "否") {
          var optionlist = this.prblemform.optionlist;
          for (var i = 0; i < optionlist.length; i++) {
            if (optionlist[i].Jump == "否" && (index != i)) {
              this.prblemform.optionlist[index].conditions = this.prblemform.optionlist[i].conditions;
              this.prblemform.optionlist[index].dealWith = this.prblemform.optionlist[i].dealWith;
              this.prblemform.optionlist[index].materialListPro[0].listName = this.prblemform.optionlist[i].materialListPro[0].listName;
              this.prblemform.optionlist[index].materialListPro[0].memo = this.prblemform.optionlist[i].materialListPro[0].memo;
              break;
            }
          }
        }
        // this.handleDialogOpenP();
      },
      /** 查询审查事项列表 */
      getList() {
        this.loading = true;
        listMatter(this.queryParams).then((response) => {
          this.matterList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询问题列表 */
      getPrblemList() {
        this.loadingp = true;
        listQuestion(this.problemParams).then((response) => {
          this.problemList = response.rows;
          this.totalp = response.total;
          this.loadingp = false;
        });
      },
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then((response) => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.formData.deptId = data.id;
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.deptId = undefined;
        this.$refs.tree.setCurrentKey(null);
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.open = true;
        this.title = "添加审查事项";
        this.reset();
        try {
          this.$refs.formDataref.resetFields();
          this.$refs.formDataref.clearValidate('deptId')
        } catch (e) { }
      },
      addItem() {
        this.title = "添加问题题目"
        this.problemopen = true;
        this.resetproblem();
      },
      /** 问题配置 */
      handleDeploy(row) {
        this.problemParams.matterId = row.id;
        this.addProblem = true;
        this.problemParams.pageNum = 1;
        this.getPrblemList();
      },
      submitFormproblem() {
        console.log(this.prblemform)
        this.$refs["prblemformref"].validate((valid) => {
          if (valid) {
            var data = this.prblemform;
            var params = {
              desc: data.title,
              sortNum: data.sort,
              id: data.id ? data.id : "",
              matterId: this.problemParams.matterId,
              preQuestionOptionList: []
            }
            var optionlist = data.optionlist;
            for (var j = 0; j < optionlist.length; j++) {
              if (optionlist[j].Jump == "是") {
                params.preQuestionOptionList.push({
                  desc: optionlist[j].option,
                  sortNum: optionlist[j].number,
                  id: optionlist[j].id ? optionlist[j].id : "",
                  jumpToMatterId: optionlist[j].region
                })
              } else {
                var materialListPro = optionlist[j].materialListPro;
                var materialList = [];
                for (var i = 0; i < materialListPro.length; i++) {
                  var imgList = materialListPro[i].imgs;
                  var imgs = [];
                  for (var k = 0; k < imgList.length; k++) {
                    imgs.push("/profile" + imgList[k].url.split("profile")[1]);
                  }
                  materialList.push({
                    id: materialListPro[i].id ? materialListPro[i].id : "",
                    listName: materialListPro[i].listName,
                    memo: materialListPro[i].memo,
                    verification: materialListPro[i].verification,
                    imgs: imgs.join('*')
                  })
                }
                params.preQuestionOptionList.push({
                  desc: optionlist[j].option,
                  sortNum: optionlist[j].number,
                  jumpToMatterId: 0,
                  id: optionlist[j].id ? optionlist[j].id : "",
                  material: {
                    conditions: optionlist[j].conditions,
                    dealWith: optionlist[j].dealWith,
                    materialList: materialList,
                    id: optionlist[j].id ? optionlist[j].id : "",
                  }
                })
              }
            }
            if (this.prblemform.id != undefined) {
              updateQuestion(params).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.problemopen = false;
                this.getPrblemList();
              });
            } else {
              addQuestion(params).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.problemopen = false;
                this.getPrblemList();
              });
            }
          }
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.title = "修改审查事项";
        const ids = row.id || this.ids;
        getMatter(ids).then((response) => {
          var data = response.data;
          var material = [];
          if (data.material) {
            var materialList = data.material.materialList;
            for (var i = 0; i < materialList.length; i++) {
              console.log(materialList[i].imgs)
              var imgList = [];
              if (materialList[i].imgs) {
                var imgs = materialList[i].imgs.split("*");
                for (var j = 0; j < imgs.length; j++) {
                  imgList.push({
                    name: "img.jpg",
                    url: process.env.VUE_APP_BASE_API + imgs[j]
                  })
                }
              }
              console.log(imgList)
              material.push({
                id: materialList[i].id,
                listName: materialList[i].listName,
                memo: materialList[i].memo,
                verification: materialList[i].verification,
                imgs: imgList
              })
            }
            this.formData.materialList = material;
            this.materialList = material;
          }
          if (data.prefixQuestion == "Y") {
            this.materialList = [{
              customError: "",
              listName: "",
              memo: "",
              verification: 0,
              imgs: []
            }]
          }
          this.formData = {
            deptId: data.deptId,
            id: data.id,
            materialId: data.material ? data.material.id : "",
            itemName: data.itemName,
            contacts: data.contacts,
            contactsPhone: data.contactsPhone,
            sort: data.sortNum,
            prefixQuestion: data.prefixQuestion,
            conditions: data.material ? data.material.conditions : "",
            commonProblem: data.commonProblem ? data.commonProblem : "",
            dealWith: data.material ? data.material.dealWith : "",
            materialList: material,
            printContent: data.print ? data.print.content : "",
            printMissContent: data.print ? data.print.missContent : "",
            printDenyContent: data.print ? data.print.denyContent : "",
            printid: data.print ? data.print.id : ""
          }
          this.open = true;
        });
      },
      problemUpdate(row) {
        this.title = "修改问题题目";
        var matterId = row.id;
        getQuestion(matterId).then((response) => {
          var data = response.data;
          this.prblemform = {
            title: data.desc,
            type: 1,
            id: data.id,
            sort: data.sortNum,
            number: 0,
            key: Date.now(),
            // type为1是选择题，下面储存选项
            optionlist: []
          }
          var optionlist = response.data.preQuestionOptionList;
          for (var i = 0; i < optionlist.length; i++) {
            if (optionlist[i].jumpToMatterId) {
              var Jump = "是";
              this.prblemform.optionlist.push({
                option: optionlist[i].desc,
                number: optionlist[i].sortNum,
                jumpToMatterId: optionlist[i].jumpToMatterId,
                Jump: Jump,
                region: optionlist[i].jumpToMatterId,
                materialListPro: [{
                  id: "",
                  listName: "",
                  memo: "",
                  imgs: []
                }],
                id: optionlist[i].id,
                reason: false,
                checked: false,
                key: optionlist[i].key,
              })
            } else {
              var Jump = "否";
              var material = optionlist[i].material.materialList;
              var materialListPro = [];
              for (var j = 0; j < material.length; j++) {
                var imgList = [];
                if (material[j].imgs) {
                  var imgs = material[j].imgs.split("*");
                  for (var k = 0; k < imgs.length; k++) {
                    imgList.push({
                      name: "img.jpg",
                      url: process.env.VUE_APP_BASE_API + imgs[k]
                    })
                  }
                }
                materialListPro.push({
                  id: material[j].id ? material[j].id : "",
                  listName: material[j].listName,
                  memo: material[j].memo,
                  imgs: imgList
                })
              }
              this.prblemform.optionlist.push({
                option: optionlist[i].desc,
                number: optionlist[i].sortNum,
                jumpToMatterId: optionlist[i].jumpToMatterId,
                Jump: Jump,
                region: '',
                id: optionlist[i].id,
                conditions: optionlist[i].material.conditions,
                dealWith: optionlist[i].material.dealWith,
                materialListPro: materialListPro,
                reason: false,
                checked: false,
                key: optionlist[i].key,
              })
            }
          }
          this.problemopen = true;
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除所选择的数据项？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'custom-confirm-class',
          closeOnClickModal: false // 设置为false表示点击modal区域不关闭
        }).then(function () {
          return delMatter(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      problemDelete(row) {
        var matterId = row.id;
        this.$confirm('是否确认删除该问题题目？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'custom-confirm-class',
          closeOnClickModal: false // 设置为false表示点击modal区域不关闭
        }).then(function () {
          return delQuestion(matterId);
        }).then(() => {
          this.getPrblemList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      // 添加问题
      addFormlist() {
        this.prblemform.formlist.push({
          title: '',
          type: 1,
          sort: "",
          category: null,
          key: Date.now(),
          optionlist: [{
            option: '',
            number: '',
            Jump: '',
            region: '',
            conditions: '',
            materialListPro: [{
              listName: "",
              memo: "",
              imgs: []
            }],
            reason: false,
            checked: false,
            key: Date.now(),
          }],
        })
        this.prblemform.number++
      },
      // 添加问题选项
      addoptionlist() {
        this.prblemform.optionlist.push({
          option: '',
          number: '',
          Jump: '',
          sort: "",
          region: '',
          conditions: '',
          dealWith: '',
          materialListPro: [{
            listName: "",
            memo: "",
            imgs: []
          }],
          reason: false,
          checked: false,
          key: Date.now(),
        });
      },
      addmaterialList() {
        this.materialList.push({
          customError: this.materialList[0].customError,
          listName: this.materialList[0].listName,
          memo: this.materialList[0].memo,
          verification: this.materialList[0].verification,
          imgs: []
        })
      },
      addmaterialListPro(index) {
        this.prblemform.optionlist[index].materialListPro.push({
          listName: this.prblemform.optionlist[index].materialListPro[0].listName,
          memo: this.prblemform.optionlist[index].materialListPro[0].memo,
          imgs: []
        })
      },
      // 删除问题的选项
      reomoptionlist(itme) {
        if (this.prblemform.optionlist.length === 1) {
          this.$message.info("至少要有一个选项")
          return;
        }
        var _this = this;
        this.$confirm('是否确认删除该选项？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'custom-confirm-class',
          closeOnClickModal: false // 设置为false表示点击modal区域不关闭
        }).then(function () {
          return _this.prblemform.optionlist.splice(itme, 1)
        }).then(() => {
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      reommaterialList(itme) {
        if (this.materialList.length === 1) {
          this.$message.info("至少要有一个材料")
          return;
        }
        var _this = this;
        this.$confirm('是否确认删除该材料？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'custom-confirm-class',
          closeOnClickModal: false // 设置为false表示点击modal区域不关闭
        }).then(function () {
          return _this.materialList.splice(itme, 1)
        }).then(() => {
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      reommaterialListPro(itme, index) {
        if (this.prblemform.optionlist[index].materialListPro.length === 1) {
          this.$message.info("至少要有一个材料")
          return;
        }
        var _this = this;
        this.$confirm('是否确认删除该材料？', '提示', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'custom-confirm-class',
          closeOnClickModal: false // 设置为false表示点击modal区域不关闭
        }).then(function () {
          return _this.prblemform.optionlist[index].materialListPro.splice(itme, 1)
        }).then(() => {
          this.$modal.msgSuccess("删除成功");
        }).catch(() => { });
      },
      /** 提交按钮 */
      submitForm: function () {
        console.log(this.formData)
        console.log(this.materialList)
        this.$refs["formDataref"].validate((valid) => {
          if (valid) {
            var data = this.formData;
            if (data.prefixQuestion == "Y") {
              var params = {
                deptId: data.deptId,
                id: data.id ? data.id : "",
                itemName: data.itemName,
                contacts: data.contacts,
                contactsPhone: data.contactsPhone,
                sortNum: data.sort,
                commonProblem: data.commonProblem,
                prefixQuestion: data.prefixQuestion,
                print: {
                  id: data.printid,
                  content: data.printContent,
                  missContent: data.printMissContent,
                  denyContent: data.printDenyContent
                }
              };
            } else {
              for (var i = 0; i < this.materialList.length; i++) {
                if (!this.materialList[i].listName.trim()) {
                  this.$set(this.materialList, i, {
                    customError: "材料名称不能为空",
                    listName: this.materialList[i].listName,
                    memo: this.materialList[i].memo,
                    verification: this.materialList[i].verification,
                    imgs: this.materialList[i].imgs
                  })
                  return;
                }
              }
              var materialList = this.materialList;
              var params = {
                deptId: data.deptId,
                id: data.id ? data.id : "",
                itemName: data.itemName,
                contacts: data.contacts,
                contactsPhone: data.contactsPhone,
                commonProblem: data.commonProblem,
                sortNum: data.sort,
                prefixQuestion: data.prefixQuestion,
                material: {
                  conditions: data.conditions,
                  dealWith: data.dealWith,
                  materialList: [],
                  id: data.materialId ? data.materialId : "",
                },
                print: {
                  id: data.printid,
                  content: data.printContent,
                  missContent: data.printMissContent,
                  denyContent: data.printDenyContent
                }
              };
              for (var i = 0; i < materialList.length; i++) {
                var imgList = materialList[i].imgs;
                var imgs = [];
                for (var j = 0; j < imgList.length; j++) {
                  imgs.push("/profile" + imgList[j].url.split("profile")[1]);
                }
                params.material.materialList.push({
                  id: materialList[i].id ? materialList[i].id : "",
                  listName: materialList[i].listName,
                  memo: materialList[i].memo,
                  verification: materialList[i].verification,
                  imgs: imgs.join('*')
                })
              }
            }
            if (this.formData.id != undefined) {
              updateMatter(params).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addMatter(params).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.$refs.formDataref.resetFields();
        this.open = false;
        this.reset();
      },
      canceladd() {
        this.addProblem = false;
      },
      cancelproblem() {
        this.$refs.prblemformref.resetFields();
        this.problemopen = false;
        this.resetproblem();
      },
      resetproblem() {
        this.prblemform = {
          title: '',
          type: 1,
          sort: "",
          number: 0,
          key: Date.now(),
          // type为1是选择题，下面储存选项
          optionlist: [{
            option: '',
            number: '',
            Jump: '',
            region: '',
            conditions: '',
            dealWith: '',
            materialListPro: [{
              listName: "",
              memo: "",
              imgs: []
            }],
            reason: false,
            checked: false,
            key: Date.now(),
          }]
        };
      },
      reset() {
        this.formData = {
          deptId: this.queryParams.deptId ? this.queryParams.deptId : undefined,
          itemName: '',
          contacts: '',
          contactsPhone: '',
          sort: '',
          prefixQuestion: '',
          conditions: '',
          commonProblem: '',
          dealWith: '',
          material: '',
          desc: '',
          printContent: '',
          printMissContent: '',
          printDenyContent: ''
        }
        this.materialList = [{
          customError: "",
          listName: "",
          memo: "",
          verification: 0,
          imgs: []
        }]
      },
    },
  };
</script>
<style>
  .el-dialog {
    height: 80vh;
  }

  .el-dialog__body {
    height: 80%;
    overflow-y: scroll;
  }

  .newbutton {
    color: #fff;
  }

  .newbutton:hover,
  .newbutton:focus {
    color: #fff;
  }

  .el-select-dropdown {
    /* width: 700px; */
  }

  #prblemTable .el-table .cell.el-tooltip {
    width: auto;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .el-input .el-input__suffix {
    display: none;
  }

  .el-select-dropdown.el-popper {
    max-width: 600px;
  }

  .custom-tree-node {
    flex: 1;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
