<template>
  <el-dialog v-drag title="电子档案模板维护" :modelValue="templateOpenShow" :before-close="cancel" fullscreen @opened="open" append-to-body class="template-preserve-dialog">
    <div class="templateBox">
      <div class="leftTemplate">
        <el-card class="box-card" v-for="(template, index) in 20" :key="index">
          <template #header>
            <div class="clearfix">
              <span style="color:rgb(85, 85, 243)">模板{{ templateNames[index] }}</span>
              <span style="float: right">
                插入行数:
                <el-input v-model="insertNums[index]" style="width:90px" placeholder="请输入内容" />
                <el-button type="primary" size="medium" style="margin-left:10px;" @click="insertOneClick(template)">插入模板</el-button>
              </span>
            </div>
          </template>
          <table id="cus-table" cellspacing="0" style="width:100%">
            <tbody>
              <tr>
                <!-- <td>槽号序号</td> -->
                <td>槽位/工步</td>
                <td colspan="2">工艺要求</td>
                <td colspan="2">实际参数</td>
              </tr>
              <component
                v-if="rightItem[template - 1]"
                :is="getTemplateComponent(template)"
                :itemSlot="rightItem[template - 1]"
                :indexSlot="template - 1"
              />
            </tbody>
          </table>
        </el-card>
      </div>
      <div class="rightPage">
        <div class="submitClass">
          <el-button type="primary" @click="saveClick(false)">保存</el-button>
          <el-button type="primary" @click="saveClick(true)">保存并退出</el-button>
        </div>
        <div class="cusTable">
          <table id="cus-table" cellspacing="0" style="width:100%">
            <tbody>
              <tr>
                <td>槽号序号</td>
                <td>槽位/工步</td>
                <td colspan="2">工艺要求</td>
                <td colspan="2">实际参数</td>
                <td>操作</td>
              </tr>
              <template v-for="(items, listIndex) in rightList">
              <!-- 模板一 -->
              <template v-if="items.rfpsType == 1">
                <tr :key="listIndex">
                  <td rowspan="3">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="3">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==0" :rowspan="2">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                  </tr>
                </template>
              </template>
              <!-- 模板二 -->
              <template v-else-if="items.rfpsType == 2">
                <tr :key="listIndex">
                  <td rowspan="4">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="4">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="3">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                    <td v-if="index > 1">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index > 1">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index > 1" colspan="2" />
                  </tr>
                </template>
              </template>
              <!-- 模板三 -->
              <template v-else-if="items.rfpsType == 3">
                <tr :key="listIndex">
                  <td rowspan="5">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="5">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td v-if="index == 0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index == 0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index == 0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index == 0" />
                    <td v-if="index == 0" :rowspan="4">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                    <td v-if="index == 1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index == 1" />
                    <td v-if="index > 1">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index > 1">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index > 1" colspan="2" />
                  </tr>
                </template>
              </template>
              <!-- 模板四 -->
              <template v-else-if="items.rfpsType == 4">
                <tr :key="listIndex">
                  <td rowspan="4">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="4">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                    <td v-if="index ==0" :rowspan="3">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板五 -->
              <template v-else-if="items.rfpsType == 5">
                <tr :key="listIndex">
                  <td rowspan="6">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="6">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index == 0" :key="listIndex+''+index">
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                    <td rowspan="6">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                  </tr>
                </template>
              </template>
              <!-- 模板六 -->
              <template v-else-if="items.rfpsType == 6">
                <tr :key="listIndex">
                  <td rowspan="7">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="7">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <= 1" :key="listIndex+''+index">
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                    <td v-if="index ==0" :rowspan="6">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                  </tr>
                </template>
              </template>
              <!-- 模板七 -->
              <template v-else-if="items.rfpsType == 7">
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="items.slotIndex" />
                    </td>
                    <td>
                      <el-input v-model="items.slotName" />
                    </td>
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                    <td>
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板八 -->
              <template v-else-if="items.rfpsType == 8">
                <tr :key="listIndex">
                  <td rowspan="3">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="3">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                    <td v-if="index ==0" :rowspan="2">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板九 -->
              <template v-else-if="items.rfpsType == 9">
                <tr :key="listIndex">
                  <td rowspan="6">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="6">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <=1" :key="listIndex+''+index">
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="5">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                  </tr>
                </template>
              </template>
              <!-- 模板十 -->
              <template v-else-if="items.rfpsType == 10">
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="items.slotIndex" />
                    </td>
                    <td>
                      <el-input v-model="items.slotName" />
                    </td>
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2">
                      <el-switch v-model="item.qualified" disabled style="display: flex; justify-content: center;" active-color="#13ce66" inactive-color="#ff4949" active-text="合格" inactive-text="不合格" />
                    </td>
                    <td>
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板十一 -->
              <template v-else-if="items.rfpsType == 11">
                <tr :key="listIndex">
                  <td rowspan="5">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="5">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <=1" :key="listIndex+''+index">
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="4">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index==2" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index==3" >
                    <td colspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="2" />
                  </tr>

                </template>
              </template>
              <!-- 模板十二 -->
              <template v-else-if="items.rfpsType == 12">
                <tr :key="listIndex">
                  <td rowspan="4">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="4">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td v-if="index ==0" :rowspan="3">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="3">
                      <el-input v-model="item.ask" />
                    </td>
                    <td>
                      <el-input v-model="item.paramName" />
                    </td>
                    <td />
                    <td v-if="index ==0" :rowspan="3">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板十三 -->
              <template v-else-if="items.rfpsType == 13">
                <tr :key="listIndex">
                  <td rowspan="11">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="11">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                    <td v-if="index ==0" :rowspan="10">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板十四 -->
              <template v-else-if="items.rfpsType == 14">
                <tr :key="listIndex">
                  <td rowspan="13">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="13">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <=1" :key="listIndex+''+index">
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="12">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 2" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 3" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td>
                      <el-input v-model="item.paramName" />
                    </td>
                    <td />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                  </tr>
                </template>
              </template>
              <!-- 模板十五 -->
              <template v-else-if="items.rfpsType == 15">
                <tr :key="listIndex">
                  <td rowspan="15">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="15">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <=1" :key="listIndex+''+index">
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="14">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 2" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 3 || index == 4" >
                    <td v-if="index == 3" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index == 3" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td :colspan="2" />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 5" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td>
                      <el-input v-model="item.paramName" />
                    </td>
                    <td />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                  </tr>
                </template>
              </template>
              <!-- 模板十六 -->
              <template v-else-if="items.rfpsType == 16">
                <tr :key="listIndex">
                  <td rowspan="17">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="17">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <=1" :key="listIndex+''+index">
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="16">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 2" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 3" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td>
                      <el-input v-model="item.paramName" />
                    </td>
                    <td />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                  </tr>
                </template>
              </template>
              <!-- 模板十七 -->
              <template v-else-if="items.rfpsType == 17">
                <tr :key="listIndex">
                  <td rowspan="9">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="9">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <tr v-if="index <=1" :key="listIndex+''+index">
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.detailName" />
                    </td>
                    <td v-if="index ==0" :rowspan="2">
                      <el-input v-model="item.ask" />
                    </td>
                    <td v-if="index ==0">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==0" />
                    <td v-if="index ==1">
                      <el-input v-model="item.paramName" />
                    </td>
                    <td v-if="index ==1" />
                    <td v-if="index ==0" :rowspan="8">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 2" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else-if="index == 3" >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td>
                      <el-input v-model="item.paramName" />
                    </td>
                    <td />
                  </tr>
                  <!-- :key="listIndex+''+index" -->
                  <tr v-else >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                  </tr>
                </template>
              </template>
              <!-- 模板十八 -->
              <template v-else-if="items.rfpsType == 18">
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="items.slotIndex" />
                    </td>
                    <td>
                      <el-input v-model="items.slotName" />
                    </td>
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                    <td>
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板十九 -->
              <template v-else-if="items.rfpsType == 19">
                <tr :key="listIndex">
                  <td rowspan="13">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="13">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td colspan="3" />
                    <td v-if="index ==0" :rowspan="13">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 模板二十 -->
              <template v-else-if="items.rfpsType == 20">
                <tr :key="listIndex">
                  <td rowspan="9">
                    <el-input v-model="items.slotIndex" />
                  </td>
                  <td rowspan="9">
                    <el-input v-model="items.slotName" />
                  </td>
                </tr>
                <template v-for="(item,index) in items.childrenList">
                  <!-- :key="listIndex+''+index" -->
                  <tr >
                    <td>
                      <el-input v-model="item.detailName" />
                    </td>
                    <td>
                      <el-input v-model="item.ask" />
                    </td>
                    <td colspan="2" />
                    <td v-if="index ==0" :rowspan="8">
                      <el-button type="danger" @click="deleteRow(listIndex)">删除</el-button>
                    </td>
                  </tr>
                </template>
              </template>
            </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {editTable,deleteTable,getWordDetail} from '@/api/qualityManagement/inspectionArchiving/rbFilePreserve'
import Templates from '../../../qualityTemplate/index.js'
import { getTemplateComponent as getTemplateComponentUtil } from '@/utils/templateMapper.js'

export default {
  props: {
    templateOpen: {
      type: Boolean,
      default: false
    },
    rfpId: {
      type: Number,
      default: null
    }
  },
  components: {
    ...Templates
  },
  data() {
    return {
       templateNames: [
      '一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
      '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十'
    ],
      rightItem: Array.from({length: 20}, (_, i) => ({
        slotName: `示例槽位${i + 1}`,
        rfpsType: i + 1,
        style:'固定',
        // childrenList: [
        //   { detailName: '工艺要求示例1', ask: '具体要求内容1', paramName: '参数1', rfpdTime: '实际值1' },
        //   { detailName: '', ask: '', paramName: '参数2', rfpdTime: '实际值2' }
        // ]
      })),
      rightList: [],
      insertIndex: 0,
      insertNums: Array.from({length: 20}, () => 1),
      deleteIds: [],
      switchData: true,
      templateOpenShow:false
    };
  },
  mounted(){
    this.templateOpenShow = this.templateOpen
  },
  methods: {
    getTemplateComponent(type) {
      const componentName = getTemplateComponentUtil(type);
      return componentName;
    },
    open() {
      this.getDate();
    },
    getDate() {
      getWordDetail({id:this.rfpId}).then(res =>{
        this.deleteIds = []
        const preserveSlotList = res.data.data.preserveSlotList || [];
        // 处理模板十的qualified字段，将Integer转换为Boolean
        this.rightList = preserveSlotList.map(item => {
          if (item.rfpsType == 10 && item.childrenList && item.childrenList.length > 0) {
            const processedChildren = item.childrenList.map(child => {
              const { qualified, ...rest } = child;
              return {
                ...rest,
                qualified: qualified === 1 ? true : (qualified === 0 ? false : qualified)
              };
            });
            return {
              ...item,
              childrenList: processedChildren
            };
          }
          return item;
        });
        this.insertIndex = res.data.data.insertIndex;
      })
      // this.$ajax
      //   .get('dsRbFilePreserveSlot/getByRfpId/' + this.rfpId)
      //   .then((res) => {
      //     if (this.$ifAjax(res)) {
      //       const { preserveSlotList, insertIndex } = res.data;
      //       this.rightList = preserveSlotList;
      //       this.insertIndex = insertIndex;
      //     }
      //   });
    },
    async insertOneClick(type) {
      const num = this.insertNums[type - 1];
      const currentSlotIndex = this.rightList.length;
      if (type == 1) {
        for (var i = 0; i < num; i++) {
          const obj = {
             slotName: '',
             slotIndex: this.rightList.length,
            // slotName: `槽位${currentSlotIndex + i + 1}`,
            // slotIndex: currentSlotIndex + i,
            insertIndex: this.insertIndex,
            rfpsType: 1,
            childrenList: [
              { detailName: '', detailIndex: 1, ask: '' },
              { detailName: '', detailIndex: 2, ask: '' }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 2) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 2,
            childrenList: [
              { detailName: '', detailIndex: 1, ask: '' },
              { detailName: '', detailIndex: 2, ask: '' },
              { detailName: '', detailIndex: 3, ask: '' }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 3) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 3,
            childrenList: [
              { detailName: '', detailIndex: 1, ask: '' },
              { detailName: '', detailIndex: 2, ask: '' },
              { detailName: '', detailIndex: 3, ask: '' },
              { detailName: '', detailIndex: 4, ask: '' }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 4) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 4,
            childrenList: [
              { detailName: '', detailIndex: 1, ask: '' },
              { detailName: '', detailIndex: 2, ask: '' },
              { detailName: '', detailIndex: 3, ask: '' }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 5) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 5,
            childrenList: [
              { detailName: '', detailIndex: 1, ask: '' },
              { detailName: '', detailIndex: 2, ask: '' },
              { detailName: '', detailIndex: 3, ask: '' },
              { detailName: '', detailIndex: 4, ask: '' },
              { detailName: '', detailIndex: 5, ask: '' }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      }
      if (type == 6) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 6,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 7) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 7,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 8) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 8,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 9) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 9,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 10) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 10,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                qualified: true,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 11) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 11,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 12) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 12,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 13) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 13,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 7,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 8,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 9,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 10,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 14) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 14,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 7,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 8,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 9,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 10,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 11,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 12,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 15) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 15,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 7,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 8,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 9,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 10,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 11,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 12,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 13,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 14,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 16) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 16,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 7,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 8,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 9,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 10,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 11,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 12,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 13,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 14,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 15,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 16,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 17) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 17,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 7,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 8,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 18) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 18,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 19) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 19,
            childrenList: [
              {
                detailName: '',
                detailIndex: 1,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 2,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 3,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 4,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 5,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 6,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 7,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 8,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 9,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 10,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 11,
                ask: ''
              },
              {
                detailName: '',
                detailIndex: 12,
                ask: ''
              }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      } else if (type == 20) {
        for (var i = 0; i < num; i++) {
          const obj = {
            slotName: '',
            slotIndex: this.rightList.length,
            // slotName: `槽位${this.rightList.length + i + 1}`,
            // slotIndex: this.rightList.length + i,
            insertIndex: this.insertIndex,
            rfpsType: 20,
            childrenList: [
              { detailName: '', detailIndex: 1, ask: '' },
              { detailName: '', detailIndex: 2, ask: '' },
              { detailName: '', detailIndex: 3, ask: '' },
              { detailName: '', detailIndex: 4, ask: '' },
              { detailName: '', detailIndex: 5, ask: '' },
              { detailName: '', detailIndex: 6, ask: '' },
              { detailName: '', detailIndex: 7, ask: '' },
              { detailName: '', detailIndex: 8, ask: '' }
            ]
          };
          this.rightList.push(obj);
          this.insertIndex++;
        }
      }
    },
    deleteRow(index) {
      const row = this.rightList[index];
      console.log('row----------------',row)
      if (row.id) {
        this.deleteIds.push(row.id);
        // deleteTable({
        //   tankId:row.id
        // }).then(res =>{
          
        // })
      }
      this.rightList.splice(index, 1);
    },
    saveClick(flag) {
      // 处理保存数据，确保字段类型正确且不为空
      const processedList = this.rightList.map(item => {
        let processedItem = { ...item };
        
        // 确保 slotName 不为空
        if (!processedItem.slotName || processedItem.slotName.trim() === '') {
          processedItem.slotName = `槽位${processedItem.slotIndex + 1}`;
          //  processedItem.slotName = '';
        }
        
        // 处理模板十的qualified字段，将Boolean转换为Integer
        if (item.rfpsType == 10 && item.childrenList && item.childrenList.length > 0) {
          const processedChildren = item.childrenList.map(child => {
            const { qualified, ...rest } = child;
            return {
              ...rest,
              qualified: qualified ? 1 : 0
            };
          });
          processedItem = {
            ...processedItem,
            childrenList: processedChildren
          };
        }
        
        return processedItem;
      });

      // this.$ajax
      //   .post('dsRbFilePreserveSlot/saveOrEdit', {
      //     rfpId: this.rfpId,
      //     submitList: this.rightList,
      //     deleteIds: this.deleteIds
      //   })
      //   .then((res) => {
      //     if (this.$ifAjax(res)) {
      //       this.$message.success('保存成功');
      //       if (flag) {
      //         this.cancel(true);
      //       } else {
      //         this.getDate();
      //       }
      //     }
      //   });

      let params = {
        rfpId:this.rfpId,
        submitList:this.rightList,
        deleteIds:this.deleteIds
      }
      console.log('params----------------',params)

      editTable(
        params
        // {
        //   id:this.rfpId,
        //   preserveSlotList:processedList
        // }
      ).then(res =>{
        if(res.data.code == 200){
          this.$message.success('保存成功')
          if (flag) {
            this.cancel(true);
          } else {
            this.getDate();
          }
        }
      })
      // console.log('this.rightList-----------',processedList)
    },
    cancel(isRefresh) {
      this.rightList = [];
      this.$emit('cancel', isRefresh == true);
    }
  }
};
</script>
<style lang="scss">
/* 只针对模板维护对话框的样式 */
.el-dialog.template-preserve-dialog {
  .templateBox {
    display: flex;
    .leftTemplate {
      width: 34%;
      max-height: 88vh;
      overflow: auto;
      .box-card {
        margin-bottom: 10px;
        .el-card__header {
          border-bottom: none !important;
          padding-bottom: 0 !important;
        }
        .el-card__body {
          padding-top: 0 !important;
        }
      }
      table {
        tr {
          page-break-inside: avoid;
        }
        td {
          width: 168px;
          height: 30px;
          border: 1px solid #000;
          background: transparent;
          color: #000;
          font-size: 14px;
          text-align: center;
          padding: 0;
          margin: 0;
        }
      }
    }
    .rightPage {
      width: 65%;
      margin-left: 1%;
      max-height: 80vh;
      position: relative;
      .submitClass {
        position: absolute;
        right: 4px;
        top: 4px;
        height: 28px;
      }
      .cusTable {
        margin-top: 40px;
        max-height: 85vh;
        overflow: auto;
        padding-bottom: 40px;
        table {
          tr {
            page-break-inside: avoid;
          }
          td {
            width: 168px;
            height: 30px;
            border: 1px solid #000;
            background: transparent;
            color: #000;
            font-size: 14px;
            text-align: center;
            padding: 0;
            margin: 0;
          }
        }
      }
    }
    .clearfix {
      height: 50px;
    }
  }
}
</style>
