ssti-CollegeManage/src/views/projectManage/components/Closingstatement.vue

<template>
  <!-- 结项书组件 -->
  <div ref="downPDF" v-if="myArrayProp.length">
    <!-- <header>创新创业学院管理系统</header> -->
    <div class="ProNumber">项目编号：{{ myArrayProp[0].ProjectNo }}</div>

    <div class="onePage">
      <div class="titSchool">深圳技师学院</div>
      <div class="title">校级创客项目结题申请书</div>
      <div class="basicInformation">
        <span>项目名称</span>
        <div class="line">{{ myArrayProp[0].title }}</div>
      </div>
      <div class="basicInformation">
        <span>负责人</span>
        <div class="line">{{ myArrayProp[0].pro_leader }}</div>
      </div>
      <div class="basicInformation">
        <span>指导教师</span>
        <div class="line" style="position: relative">
          <span
            v-for="(item, index) in myArrayProp[0].course_teacher"
            :key="index"
            >{{ item.name }}</span
          >
          <span style="position: absolute; right: -100px"
            >{{ myArrayProp[0].course_teacher.filter(i=>i.name!='').length }}(人)</span
          >
        </div>
      </div>
      <div class="basicInformation">
        <span>申请部门</span>
        <div class="line">{{ myArrayProp[0].name }}</div>
      </div>
      <div class="basicInformation">
        <span>申请日期</span>
        <div class="line">{{ myArrayProp[0].applyProjectTime }}</div>
      </div>

      <div
        style="
          font-size: 22px;
          font-family: \4eff\5b8b;
          font-weight: bold;
          margin-bottom: 10px;
        "
      >
        创新创业学院制
      </div>
      <div style="font-size: 22px; font-family: \4eff\5b8b; font-weight: bold">
        {{ nowTime }}
      </div>
    </div>
    <!-- <table border="1" cellspacing="0" ref="tableBox" v-show="!isDownPdf"> -->
    <table border="1" cellspacing="0" ref="tableBox">
      <!-- <tr v-if="false">
        <td v-for="i in 8" :key="i">i</td>
      </tr> -->
      <tr>
        <td colspan="2">项目名称</td>
        <td colspan="6">
          {{ myArrayProp[0].title }}
        </td>
      </tr>
      <tr>
        <td colspan="2">大创项目</td>
        <td>学生申报</td>
        <td colspan="2" style="padding: 0 30px; box-sizing: border-box">
					<span style="margin-right: 10px;">{{ (myArrayProp[0].typeName == "4a4e2cfe-e1a1-11ee-81d4-00ff5c7a43f5"? "☑": "□") }}创新训练项目</span>
					<span style="margin-right: 10px;">{{ (myArrayProp[0].typeName == "56f0ad8d-e1a1-11ee-81d4-00ff5c7a43f5"? "☑": "□") }}创业训练项目</span>
					<span style="margin-right: 10px;">{{ (myArrayProp[0].typeName == "ed917c55-f51d-11ed-a3f6-509a4c5b67cf"? "☑": "□") }}创业实践项目</span>
          <!-- <span
            >{{
              (myArrayProp[0].typeName = "f3068e26-f51d-11ed-a3f6-509a4c5b67cf"
                ? "☑"
                : "□")
            }}创意组</span
          >
          <span style="margin-left: 15px"
            >{{
              (myArrayProp[0].typeName = "f3068e26-f51d-11ed-a3f6-509a4c5b67cf"
                ? "□"
                : "☑")
            }}初创组</span
          > -->
        </td>
        <td>学院申报</td>
        <td colspan="2"><span>□创客空间建设</span></td>
      </tr>
      <tr>
        <td colspan="2">项目级别</td>
        <td colspan="8">
          □ 一般资助项目　　　□ 重点资助项目　　　 □ 特别申报项目
        </td>
      </tr>
      <tr>
        <td colspan="2">项目类别</td>
        <td colspan="8">
          □技术创新项目　 □ 公益创新项目　 □ 非遗文创项目　 □ 乡村振兴项目
        </td>
      </tr>
      <tr>
        <td colspan="2">优先支持项目 <br />（可多选）</td>
        <td colspan="8" v-if="myArrayProp[0].multiSelectProject != null" style="height: auto;text-align: left;">
          <!-- {{
            myArrayProp[0].multiSelectProject.includes("1") ? "☑" : "□"
          }}大赛选拔项目
          {{ myArrayProp[0].multiSelectProject.includes("2") ? "☑" : "□" }}
          落地注册项目
          {{ myArrayProp[0].multiSelectProject.includes("3") ? "☑" : "□" }}
          社会征集项目
          {{ myArrayProp[0].multiSelectProject.includes("4") ? "☑" : "□" }}
          产业命题项目 -->
					<div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('1')?'☑ ':'□ '"></span><span>团队合作项目、跨学科合作项目。</span></div>
          <div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('2')?'☑ ':'□ '"></span><span>科技创新、低空经济、银发经济、乡村振兴、助残助学、非遗文创等新技术、新产业、新业态、新模式方面的项目。</span></div>
          <div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('3')?'☑ ':'□ '"></span><span>企业真实生产经营项目或外包服务项目。</span></div>
          <div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('4')?'☑ ':'□ '"></span><span>社会征集项目、产业命题项目。</span></div>
					<div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('5')?'☑ ':'□ '"></span><span>近两年内参与校级以上创新创业大赛并获奖的项目。</span></div>
          <div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('6')?'☑ ':'□ '"></span><span>美丽校园改造计划中的校园智能产品及文创产品的研发项目。</span></div>
          <div class="checkAreaBlc"><span v-text="myArrayProp[0]['multiSelectProject'].includes('7')?'☑ ':'□ '"></span><span>企申报人为港澳籍、学校扶贫班及在校贫困生申报的项目</span></div>
        </td>
        <td colspan="8" v-if="myArrayProp[0].multiSelectProject == null">
          □大赛选拔项目 □落地注册项目 □ 社会征集项目 □产业命题项目
        </td>
      </tr>
      <tr>
        <td colspan="2">美丽校园改造项目 <br />（单选）</td>
        <td colspan="8">
          {{ myArrayProp[0].schoolRemould.includes("1") ? "☑" : "□" }}校园安全项目
          {{ myArrayProp[0].schoolRemould.includes("2") ? "☑" : "□" }}环境治理项目
          {{ myArrayProp[0].schoolRemould.includes("3") ? "☑" : "□" }} 校园服务项目
          {{ myArrayProp[0].schoolRemould.includes("4") ? "☑" : "□" }} 文创装置项目
        </td>
      </tr>
      <tr>
        <td colspan="2">项目负责人身份 <br />（单选）</td>
        <td colspan="8">□在校学生 □ 孵化基地创业学生 □ 二级学院项目负责人</td>
      </tr>
      <tr>
        <td colspan="2">项目负责人信息</td>
        <td>姓名</td>
        <td>
          {{ myArrayProp[0].pro_leader }}
        </td>
        <td>所在学院</td>
        <td>
          <div v-html="myArrayProp[0].name"></div>
          <!-- <el-input
            type="textarea"
            autosize
            style="width: 100%"
            resize="none"
            placeholder=""
            v-model="myArrayProp[0].name"
          >
          </el-input> -->
        </td>
        <td>联系电话</td>
        <td>
          <!-- 16625153232 -->
          {{ myArrayProp[0].phone }}
        </td>
      </tr>
      <tr>
        <td colspan="2">项目组人数</td>
        <td colspan="2">
          {{
            myArrayProp[0].course_student.filter(i=>i.name!='').length +
            myArrayProp[0].course_teacher.filter(i=>i.name!='').length
          }}人
        </td>
        <td>学生人数</td>
        <td>{{ myArrayProp[0].course_student.filter(i=>i.name!='').length }}</td>
        <td>教师人数</td>
        <td>{{ myArrayProp[0].course_teacher.filter(i=>i.name!='').length }}</td>
      </tr>
      <tr>
        <td style="font-size: 21px">项目起始时间</td>
        <td colspan="2">{{ myArrayProp[0].begin_at }}</td>
        <td style="font-size: 21px">项目完成时间</td>
        <td colspan="2">{{ myArrayProp[0].plannedEnd_at }}</td>
        <td>预算经费</td>
        <td>{{ myArrayProp[0].fund }}元</td>
      </tr>
      <!-- 学生创客项目 -->
      <tbody>
        <tr
          v-if="myArrayProp[0].typeid == '5e21b204-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td
            class="vertical"
            :rowspan="myArrayProp[0].course_student.length + 1"
          >
            学生团队成员
          </td>
          <td>姓名</td>
          <td colspan="2">所在学院及专业</td>
          <td colspan="4">项目分工</td>
        </tr>
        <tr
          v-for="(item, index) in myArrayProp[0].course_student"
          :key="index + 'a'"
          v-if="myArrayProp[0].typeid == '5e21b204-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td><span v-text="item.name"></span></td>
          <td colspan="2"><span v-html="item.collage"></span></td>
          <td colspan="4"><span v-text="item.work"></span></td>
        </tr>
      </tbody>
      <tbody>
        <tr
          v-if="myArrayProp[0].typeid == '5e21b204-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td
            class="vertical"
            :rowspan="myArrayProp[0].course_teacher.length + 1"
          >
            项目指导教师
          </td>
          <td>姓名</td>
          <td colspan="2">所在学院及专业</td>
          <td colspan="4">项目分工</td>
        </tr>
        <tr
          v-for="(item, index) in myArrayProp[0].course_teacher"
          :key="index + 'b'"
          v-if="myArrayProp[0].typeid == '5e21b204-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td><span v-text="item.name"></span></td>
          <td colspan="2"><span v-html="item.collage"></span></td>
          <td colspan="4"><span v-text="item.work"></span></td>
        </tr>
      </tbody>
      <tbody>
        <!-- 特色创客空间建设项目 -->
        <tr
          v-if="myArrayProp[0].typeid == '5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td
            class="vertical"
            :rowspan="myArrayProp[0].course_student.length + 1"
          >
            学生团队成员
          </td>
          <td>姓名</td>
          <td>所在学院及专业</td>
          <td>年龄</td>
          <td colspan="5">项目组任务分工</td>
        </tr>
        <tr
          v-for="(item, index) in myArrayProp[0].course_student"
          :key="index + 'c'"
          v-if="myArrayProp[0].typeid == '5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td><span v-text="item.name"></span></td>
          <td><span v-html="item.class"></span></td>
          <td><span v-html="item.age"></span></td>
          <td colspan="5"><span v-text="item.work"></span></td>
        </tr>
      </tbody>
      <tbody>
        <tr
          v-if="myArrayProp[0].typeid == '5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td
            class="vertical"
            :rowspan="myArrayProp[0].course_teacher.length + 1"
          >
            项目指导教师
          </td>
          <td>姓名</td>
          <td>专业</td>
          <td>职称</td>
          <td>学历</td>
          <td>所在教研室</td>
          <td colspan="5">项目角色分工</td>
        </tr>
        <tr
          v-for="(item, index) in myArrayProp[0].course_teacher"
          :key="index + 'd'"
          v-if="myArrayProp[0].typeid == '5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"
        >
          <td><span v-text="item.name"></span></td>
          <td><span v-html="item.speciality"></span></td>
          <td><span v-html="item.title"></span></td>
          <td><span v-html="item.education"></span></td>
          <td><span v-html="item.section"></span></td>
          <td colspan="5"><span v-text="item.work"></span></td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td class="vertical" rowspan="6">
            项目研发内容及目标
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; height: auto">
            <p>一、项目研发内容简介（200字以内）</p>
            <div
              class="textCss"
              v-html="myArrayProp[0].brief.replace(/ /g, '&nbsp;')"
            ></div>
            <!-- <el-input
            type="textarea"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0].brief"
          >
          </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; height: auto">
            <p>目标计划：</p>
            <div
              class="textCss"
              v-html="
                myArrayProp[0]['ClosingstatementData'].plan.replace(
                  / /g,
                  '&nbsp;'
                )
              "
            ></div>
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="myArrayProp[0]['ClosingstatementData'].plan"
            >
            </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; height: auto">
            <p>二、拟解决的关键技术问题</p>
            <div
              class="textCss"
              v-html="
                myArrayProp[0]['ClosingstatementData'].technology.replace(
                  / /g,
                  '&nbsp;'
                )
              "
            ></div>
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="myArrayProp[0]['ClosingstatementData'].technology"
            >
            </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; height: auto">
            <p>三、项目的商业（公益）价值评估</p>
            <div
              class="textCss"
              v-html="
                myArrayProp[0]['ClosingstatementData'].business.replace(
                  / /g,
                  '&nbsp;'
                )
              "
            ></div>
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="myArrayProp[0]['ClosingstatementData'].business"
            >
            </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; height: auto">
            <p>四、项目创新点评估</p>
            <div
              class="textCss"
              v-html="
                myArrayProp[0]['ClosingstatementData'].innovate.replace(
                  / /g,
                  '&nbsp;'
                )
              "
            ></div>
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              v-model="myArrayProp[0]['ClosingstatementData'].innovate"
            >
            </el-input> -->
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td class="vertical" rowspan="10">
            成果及社会价值
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <p>一、成果（名称、数量及形式,开发产品及取得的专利等）</p>
            <p>专利证书获得（提供专利申请或成果证书附件）：</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="getFile"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress7"
            ></beUpload>
            <el-progress
              v-if="progress7.show"
              :percentage="progress7.value"
              :format="ProgressFormatresultAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].resultAccessory.length >
                0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .resultAccessory"
                :key="index + 'e'"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 1)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 1)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 1)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 1)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <el-input
                    type="textarea"
                    :autosize="{minRows: 6}"
                    placeholder="请输入内容"
                    v-model="myArrayProp[0].brief">
                </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" style="height: 200px">
            <p>企业应用实证（提供企业证明或合作协议证明等附件）：</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="getfirmAccessory"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress1"
            ></beUpload>
            <el-progress
              v-if="progress1.show"
              :percentage="progress1.value"
              :format="ProgressFormatfirmAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].firmAccessory.length > 0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .firmAccessory"
                :key="index + 'f'"
                style="cursor: pointer"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 2)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 2)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 2)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 2)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <el-input
                    type="textarea"
                    :autosize="{minRows: 6}"
                    placeholder="请输入内容"
                    v-model="myArrayProp[0].brief">
                </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" style="height: 200px">
            <p>双创竞赛成绩（提供参加师生名单、比赛取得的成绩等附件）：</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="getcompetitionAccessory"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress2"
            ></beUpload>
            <el-progress
              v-if="progress2.show"
              :percentage="progress2.value"
              :format="ProgressFormatcompetitionAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].competitionAccessory
                  .length > 0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .competitionAccessory"
                :key="index + 'g'"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 3)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 3)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 3)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 3)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7" style="height: 200px">
            <p>参展或交流活动（提供参加师生名单、活动方案及照片等附件）：</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="getexchangeAccessory"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress3"
            ></beUpload>
            <el-progress
              v-if="progress3.show"
              :percentage="progress3.value"
              :format="ProgressFormatexchangeAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].exchangeAccessory
                  .length > 0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .exchangeAccessory"
                :key="index + 'h'"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 4)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 4)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 4)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 4)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7" style="height: 200px">
            <p>创业公司转化（提供公司注册资料、营业执照等附件）：</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="getconversionAccessory"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress4"
            ></beUpload>
            <el-progress
              v-if="progress4.show"
              :percentage="progress4.value"
              :format="ProgressFormatconversionAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].conversionAccessory
                  .length > 0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .conversionAccessory"
                :key="index + 'j'"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 5)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 5)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 5)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 5)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7" style="height: 200px">
            <p>二、创客人才培养（提供成果、数量、学生名单等附件）</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="gettalentsAccessory"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress5"
            ></beUpload>
            <el-progress
              v-if="progress5.show"
              :percentage="progress5.value"
              :format="ProgressFormattalentsAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].talentsAccessory.length >
                0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .talentsAccessory"
                :key="index + 'k'"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 6)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 6)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 6)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 6)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: left; height: auto">
            <p>目标计划：</p>
            <div
              class="textCss"
              v-html="
                myArrayProp[0]['ClosingstatementData'].targetPlan.replace(
                  / /g,
                  '&nbsp;'
                )
              "
            ></div>
            <!-- <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].targetPlan"
          >
          </el-input> -->
          </td>
        </tr>
        <tr>
          <td colspan="7" :style="{ height: isDownPdf ? 'auto' : '200px' }">
            <p>实际结果：</p>
            <el-input
              v-if="!isDownPdf"
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              @change="changeInput"
              v-model="myArrayProp[0]['ClosingstatementData'].realityResult"
            >
            </el-input>
            <div v-else style="min-height: 100px">
              {{ myArrayProp[0]["ClosingstatementData"].realityResult }}
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="7" :style="{ height: isDownPdf ? 'auto' : '200px' }">
            <p>三、社会价值（项目实践运用情况及效果评价）</p>
            <el-input
              v-if="!isDownPdf"
              type="textarea"
              :autosize="{ minRows: 6 }"
              placeholder="请输入内容"
              @change="changeInput"
              v-model="myArrayProp[0]['ClosingstatementData'].socialValue"
            >
            </el-input>
            <div v-else style="min-height: 100px">
              {{ myArrayProp[0]["ClosingstatementData"].socialValue }}
            </div>
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td class="vertical">附件</td>
          <td colspan="7" style="height: 200px">
            <p>附：课题研究报告、用户评价意见或专家鉴定意见、其它附件等等</p>
            <beUpload
              v-if="!isDownPdf"
              style="position: absolute; right: 10px; top: 5px"
              @getFile="gettaskAccessory"
              :navName="'上传文件'"
              :accept="accept"
              :progress="progress6"
            ></beUpload>
            <el-progress
              v-if="progress6.show"
              :percentage="progress6.value"
              :format="ProgressFormattaskAccessory"
              style="width: 80%"
            ></el-progress>

            <div
              :class="
                myArrayProp[0]['ClosingstatementData'].taskAccessory.length > 0
                  ? 'bigBlock'
                  : 'noFileBox'
              "
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                  .taskAccessory"
                :key="index + 'l'"
              >
                <div class="fileBox">
                  <div class="fileBoxLeft" @click="checkFile(item.url)">
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                  <div class="fileBoxRight" v-if="!isDownPdf">
                    <div class="chapter_upload_ud" style="z-index: 99">
                      <div
                        class="chapter_upload_up"
                        @click="upCd($event, index, 7)"
                      ></div>
                      <div
                        class="chapter_upload_down"
                        @click="downCd($event, index, 7)"
                      ></div>
                    </div>
                    <div
                      class="chapter_upload_ic_edit"
                      @click="updataVideoT($event, index, 7)"
                    ></div>
                    <div
                      class="chapter_upload_ic_r"
                      @click="deleteFile(index, 7)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td class="vertical" rowspan="12">经费使用</td>
          <td colspan="2">预算总经费</td>
          <td colspan="2">{{ myArrayProp[0].fund }}元</td>
          <td>实际使用</td>
          <td colspan="2">{{ myArrayProp[0].actualuse }}元</td>
        </tr>
        <tr>
          <td>经费大类</td>
          <td>经费小类</td>
          <td>支出科目</td>
          <td>金额（元）</td>
          <td colspan="3">计算依据及理由</td>
        </tr>
        <tr>
          <td rowspan="5">直接经费</td>
        </tr>
        <!-- total：总经费     
              小型仪器设备费：device        deviceRemarks
              材料费：Material             MaterialRemarks
              测试化验加工费：processing    processingRemarks
              项目协作费：Collaboration     CollaborationRemarks
              项目成果鉴定费：APPRAISAL     APPRAISALRemarks
              参展参赛费：entery            enteryRemarks
              创客交流活动费：activities    activitiesRemarks
              知识产权事务费：Transaction   TransactionRemarks -->
        <tr>
          <td>小型仪器设备费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].device"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].device }}</div>
          </td>
          <td colspan="3">
            项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
          </td>
        </tr>
        <tr>
          <td>材料费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].Material"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].Material }}</div>
          </td>
          <td colspan="3">
            项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。
          </td>
        </tr>
        <tr>
          <td>测试化验加工费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].processing"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].processing }}</div>
          </td>
          <td colspan="3">
            项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。
          </td>
        </tr>
        <tr>
          <td>项目协作费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].Collaboration"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].Collaboration }}</div>
          </td>
          <td colspan="3">按合同规定支付给协作单位的费用</td>
        </tr>
        <tr>
          <td rowspan="5">间接经费</td>
        </tr>
        <tr>
          <td>项目成果鉴定费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].APPRAISAL"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].APPRAISAL }}</div>
          </td>
          <td colspan="3">学术会务费、评审费、鉴定费、成果集制作费等费用。</td>
        </tr>
        <tr>
          <td>参展参赛费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].entery"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].entery }}</div>
          </td>
          <td colspan="3">
            参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。
          </td>
        </tr>
        <tr>
          <td>创客交流活动费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].activities"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].activities }}</div>
          </td>
          <td colspan="3">
            创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。
          </td>
        </tr>
        <tr>
          <td>知识产权事务费</td>
          <td>-</td>
          <td>
            <el-input
              v-if="!isDownPdf"
              v-model="myArrayProp[0]['money'].Transaction"
              @change="getPrice"
            ></el-input>
            <div v-else>{{ myArrayProp[0]["money"].Transaction }}</div>
          </td>
          <td colspan="3">论文版面费、专利及其他知识产权事务等费用。</td>
        </tr>
      </tbody>
      <tbody>
        <tr style="height: 350px">
          <td class="vertical">
            所在学院/部门初审意见
          </td>
          <td colspan="7" style="position: relative">
            <div
              v-if="qpList.length && qpList[2] && qpList[2].type == 4"
              class="qpText"
              v-html="qpList[2].text"
            ></div>
            <div
              style="
                width: 200px;
                position: absolute;
                right: 80px;
                bottom: 50px;
              "
            >
              负责人签章：<span
                v-if="qpList.length && qpList[2] && qpList[2].type == 4"
                >{{ qpList[2].username }}
              </span>
            </div>
            <div
              v-if="qpList.length && qpList[2] && qpList[2].type == 4"
              style="width: 300px; position: absolute; right: 0px; bottom: 15px"
            >
              日期：{{ qpList[2].time }}
            </div>
            <div
              style="width: 300px; position: absolute; right: 0px; bottom: 15px"
              v-else
            >
              年 月 日
            </div>
          </td>
        </tr>
      </tbody>
      <!-- <tr>
        <td>专 <br />家 <br />验 <br />收 <br />结 <br />论</td>
        <td colspan="7">
          <div style="width: 200px; float: right; margin: 10px 300px">
            负责人签章：
          </div>
          <div style="width: 200px; float: right; margin: 10px 100px">
            年 月 日
          </div>
        </td>
      </tr> -->
      <tbody>
        <tr style="height: 350px">
          <td class="vertical">创新创业学院审核意见</td>
          <td colspan="7" style="position: relative">
            <div
              v-if="qpList.length && qpList[1] && qpList[1].type == 3"
              class="qpText"
              v-html="qpList[1].text"
            ></div>
            <div
              v-else-if="
                qpList.length &&
                qpList.length == 1 &&
                qpList[0] &&
                qpList[0].type == 0
              "
              class="qpText"
              v-html="qpList[0].text"
            ></div>
            <div
              style="
                width: 200px;
                position: absolute;
                right: 80px;
                bottom: 50px;
              "
            >
              负责人签章：<span
                v-if="qpList.length && qpList[1] && qpList[1].type == 3"
                >{{ qpList[1].username }} </span
              ><span
                v-else-if="
                  qpList.length &&
                  qpList.length == 1 &&
                  qpList[0] &&
                  qpList[0].type == 0
                "
                >{{ qpList[0].username }}
              </span>
            </div>
            <div
              v-if="qpList.length && qpList[1] && qpList[1].type == 3"
              style="width: 300px; position: absolute; right: 0px; bottom: 15px"
            >
              日期：{{ qpList[1].time }}
            </div>
            <div
              v-else-if="
                qpList.length &&
                qpList.length == 1 &&
                qpList[0] &&
                qpList[0].type == 0
              "
              style="width: 300px; position: absolute; right: 0px; bottom: 15px"
            >
              日期：{{ qpList[0].time }}
            </div>
            <div
              style="width: 300px; position: absolute; right: 0px; bottom: 15px"
              v-else
            >
              年 月 日
            </div>
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr style="height: 350px">
          <td class="vertical">专家意见</td>
          <td colspan="7" style="position: relative">
            <span v-if="myArrayProp[0]['promotion']!=-1" style="position: absolute;left: 15px;top: 15px;">经专家组评审，一致通过，同意该项目立项。</span>
            <div
              :class="!!myArrayProp[0].opinion ? 'bigBlock' : 'noFileBox'"
            >
              <div
                class="fileBlock"
                v-for="(item, index) in myArrayProp[0].opinion"
                :key="index + 'l'"
              >
                <div class="fileBox">
                  <div
                    class="fileBoxLeft"
                    @click="checkFile(item.url)"
                  >
                    <div class="chapter_upload_l_i3"></div>
                    <div class="titName">{{ item.fileName }}</div>
                  </div>
                </div>
              </div>
            </div>
          <div v-if="myArrayProp[0]['promotion']!=-1" style="width: 95%;margin: 10px 0; display: flex;justify-content: end;">2024年4月16日</div>

          </td>

        </tr>
      </tbody>
      <tbody>
        <tr style="height: 350px">
          <td class="vertical" style="height: 350px">学校终审意见</td>
          <td colspan="7">
            <div
              style="
                width: 200px;
                position: absolute;
                right: 80px;
                bottom: 50px;
              "
            >
              负责人签章：
            </div>
            <div
              style="width: 300px; position: absolute; right: 0px; bottom: 15px"
            >
              年 月 日
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- <div v-show="isDownPdf" ref="tableBox2">

    </div> -->
    <div class="ending">
      <p>备注：1、本表一式三份，专家验收后交双创学院</p>
      <p style="text-indent: 3em">
        2、各栏目若不够填写，可自行加页，加页需紧附该栏目之后。
      </p>
    </div>
    <!-- <footer>https://cxcy.ssti.net.cn/</footer> -->
    <!-- 展示文档开始 -->
    <el-dialog
      title="展示文件"
      :visible.sync="showFile"
      top="1vh"
      width="80vw"
      append-to-body
    >
      <div class="showFileArea" style="height: 80vh">
        <!-- <vpdf v-if="/^\s*$/g.test(showFileUrl)&&showFileUrl.split('.')[showFileUrl.split('.').length-1]=='pdf'" :pdfUrl="showFileUrl"></vpdf> -->
        <div
          class="workd_media"
          style="width: 90%; height: 90%"
          v-if="videoDetail.sources"
        >
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="videoDetail"
            @play="onPlayerPlay($event)"
            style="width: 90%; height: 90%; margin: 0 auto"
          ></video-player>
        </div>
        <vword
          style="width: 100%; height: 100%; overflow: auto"
          class="fullStyle"
          v-else-if="Wordss['type'] != 'pdf' && Wordss['name'] != '图片'"
          :pdfUrl="
            'https://view.officeapps.live.com/op/view.aspx?src=' + showFileUrl
          "
        ></vword>
        <vpdf
          style="width: 100%; height: 100%; overflow: auto"
          class="fullStyle"
          :pdfUrl="showFileUrl"
          v-else-if="Wordss['type'] == 'pdf'"
        ></vpdf>
        <img
          :src="showFileUrl"
          alt="图片哦"
          v-else-if="Wordss['name'] == '图片'"
          style="width: auto; height: auto; max-width: 100%; max-height: 100%"
        />
      </div>
      <!-- <el-button type="primary" size="mini" @click="downFile(showFileUrl)">下载文件</el-button> -->
    </el-dialog>
    <el-dialog
      title="修改名称"
      :visible.sync="dialogVisibleupdataVideoT"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div
        style="
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: center;
        "
      >
        <div style="min-width: fit-content">文件名称：</div>
        <el-input
          v-model="fileName"
          placeholder="请输入要修改的名称"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleupdataVideoT = false">取 消</el-button>
        <el-button type="primary" @click="updataVideoC">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getNowDate } from "@/components/tool/Date.js";
import beUpload from "@/components/tool/beUpload";
import vpdf from "@/components/vpdf.vue";
import vword from "@/components/vword.vue";
export default {
  props: {
    myArrayProp2: {
      type: Array,
      required: true,
    },
    iid: {
      type: String,
      required: true,
    },
    isDownPdf: {
      type: Boolean,
      required: true,
    },
  },
  components: { beUpload, vpdf, vword },
  data() {
    return {
      myArrayProp: [],
      accept: "*",
      nowTime: getNowDate(1),
      file: "",
      progress1: {
        value: 0,
        show: false,
      },
      progress2: {
        value: 0,
        show: false,
      },
      progress3: {
        value: 0,
        show: false,
      },
      progress4: {
        value: 0,
        show: false,
      },
      progress5: {
        value: 0,
        show: false,
      },
      progress6: {
        value: 0,
        show: false,
      },
      progress7: {
        value: 0,
        show: false,
      },
      showFile: false,
      showFileUrl: "",
      Wordss: { type: "", name: "" },
      canonical: {
        Image:
          /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
        File: /^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i,
      },
      word: [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
        "XLSX",
        "XLS",
      ],
      pdf: ["PDF"],
      image: [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ],
      vedio: [
        "AVI",
        "NAVI",
        "MPEG",
        "ASF",
        "MOV",
        "WMV",
        "3GP",
        "RM",
        "RMVB",
        "FLV",
        "F4V",
        "H.264",
        "H.265",
        "REAL VIDEO",
        "MKV",
        "WebM",
        "HDDVD",
        "MP4",
        "MPG",
        "M4V",
        "MGV",
        "OGV",
        "QTM",
        "STR",
        "AMC",
        "DVX",
        "EVO",
        "DAT",
        "OGG",
        "OGM",
      ],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      videoDetail: {},
      qpList: [],
      fileName: "",
      fileIndex: 0,
      fileType: 0,
      dialogVisibleupdataVideoT: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    getFile(val) {
      //上传成果文件
      console.log(val);
      this.progress7.show = false;
      this.myArrayProp[0]["ClosingstatementData"].resultAccessory.push(val);
      this.setFile();
    },
    deleteFile(val, t) {
      this.$confirm("确定删除此文件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(val);
          if (t == 1) {
            this.myArrayProp[0]["ClosingstatementData"].resultAccessory.splice(
              val,
              1
            );
          } else if (t == 2) {
            this.myArrayProp[0]["ClosingstatementData"].firmAccessory.splice(
              val,
              1
            );
          } else if (t == 3) {
            this.myArrayProp[0][
              "ClosingstatementData"
            ].competitionAccessory.splice(val, 1);
          } else if (t == 4) {
            this.myArrayProp[0][
              "ClosingstatementData"
            ].exchangeAccessory.splice(val, 1);
          } else if (t == 5) {
            this.myArrayProp[0][
              "ClosingstatementData"
            ].conversionAccessory.splice(val, 1);
          } else if (t == 6) {
            this.myArrayProp[0]["ClosingstatementData"].talentsAccessory.splice(
              val,
              1
            );
          } else {
            this.myArrayProp[0]["ClosingstatementData"].taskAccessory.splice(
              val,
              1
            );
          }
          this.setFile();
        })
        .catch(() => {});
    },
    getfirmAccessory(val) {
      //上传企业应用实证
      this.progress1.show = false;
      this.myArrayProp[0]["ClosingstatementData"].firmAccessory.push(val);
      this.setFile();
    },
    getcompetitionAccessory(val) {
      //双创竞赛成绩
      this.progress2.show = false;
      this.myArrayProp[0]["ClosingstatementData"].competitionAccessory.push(
        val
      );
      this.setFile();
    },
    getexchangeAccessory(val) {
      //参展或交流活动
      this.progress3.show = false;
      this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory.push(val);
      this.setFile();
    },
    getconversionAccessory(val) {
      //创业公司转化
      this.progress4.show = false;
      this.myArrayProp[0]["ClosingstatementData"].conversionAccessory.push(val);
      this.setFile();
    },
    gettalentsAccessory(val) {
      //创客人才培养
      this.progress5.show = false;
      this.myArrayProp[0]["ClosingstatementData"].talentsAccessory.push(val);
      this.setFile();
    },
    gettaskAccessory(val) {
      //
      this.progress6.show = false;
      this.myArrayProp[0]["ClosingstatementData"].taskAccessory.push(val);
      this.setFile();
    },

    ProgressFormattaskAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormattalentsAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatconversionAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatexchangeAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatcompetitionAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatfirmAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatresultAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    //展示文件
    checkFile(url) {
      this.videoDetail = {};
      if (
        this.vedio.indexOf(
          url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        this.playerOptions.sources[0].src = url;
        this.videoDetail = this.playerOptions;
        this.showFile = true;
      } else {
        if (
          this.word.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1 &&
          this.pdf.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1 &&
          this.image.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1
        ) {
          this.downFile(url);
          return;
        }
        this.showFileUrl = url;
        this.showFile = true;
        if (typeof url == "undefined") return { type: "", name: "" };
        let urlSplit = url.split(".");
        const type = urlSplit[urlSplit.length - 1];
        if (this.canonical.Image.test(url)) {
          this.Wordss = { type: type, name: "图片" };
          return console.log(this.Wordss);
        }
        if (this.canonical.File.test(url)) {
          this.Wordss = { type: type, name: "文档" };
          return console.log(this.Wordss);
        }
        if (this.canonical.vedio.test(url)) {
          this.Wordss = { type: type, name: "视频" };
          return console.log(this.Wordss);
        } else return (this.Wordss = { type: type, name: type });
      }
    },
    //下载文件
    downFile(f) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      let url2 = f;
      let _url2 = "";
      if (
        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url2 = url2.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url2 = url2;
      }
      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
      let name = decodeURIComponent(
        _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
      );
      var params = {
        Bucket: "ccrb",
        Key: name,
      };
      s3.getObject(params, function (err, data) {
        if (err) console.log(err, err.stack); // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = name;
          a.href = url;
          a.download = name;
          a.click();
          console.log(data);
        } // sxuccessful response
      });

      return;
    },
    getPrice(t) {
      if (this.myArrayProp && this.myArrayProp.length == 0) {
        return;
      }
      var a =
        this.myArrayProp[0]["money"].device != ""
          ? parseInt(this.myArrayProp[0]["money"].device)
          : 0;
      var b =
        this.myArrayProp[0]["money"].Material != ""
          ? parseInt(this.myArrayProp[0]["money"].Material)
          : 0;
      var c =
        this.myArrayProp[0]["money"].processing != ""
          ? parseInt(this.myArrayProp[0]["money"].processing)
          : 0;
      var d =
        this.myArrayProp[0]["money"].Collaboration != ""
          ? parseInt(this.myArrayProp[0]["money"].Collaboration)
          : 0;
      var e =
        this.myArrayProp[0]["money"].APPRAISAL != ""
          ? parseInt(this.myArrayProp[0]["money"].APPRAISAL)
          : 0;
      var f =
        this.myArrayProp[0]["money"].entery != ""
          ? parseInt(this.myArrayProp[0]["money"].entery)
          : 0;
      var g =
        this.myArrayProp[0]["money"].activities != ""
          ? parseInt(this.myArrayProp[0]["money"].activities)
          : 0;
      var h =
        this.myArrayProp[0]["money"].Transaction != ""
          ? parseInt(this.myArrayProp[0]["money"].Transaction)
          : 0;
      this.myArrayProp[0].actualuse = a + b + c + d + e + f + g + h;
      if (t != 1) {
        this.$emit("myArrayProp2:update", this.myArrayProp);
      }
      this.$forceUpdate();
    },
    onPlayerPlay() {},
    setFile() {
      this.ajax
        .post(this.$store.state.api + "/updateClosingstatementData", {
          uid: this.$store.state.userInfo.userid,
          pid: this.iid,
          cdata: encodeURIComponent(JSON.stringify(this.myArrayProp[0]["ClosingstatementData"])),
          sta: 2,
        })
        .then(
          (res) => {
            console.log(res);
            this.$emit("myArrayProp2:update", this.myArrayProp);
            this.$forceUpdate();
          },
          (err) => {
            console.log(err);
          }
        );
    },
    changeInput() {
      this.$emit("myArrayProp2:update", this.myArrayProp);
    },
    // 获取代办公文审批
    getSign() {
      let param = {
        pid: this.iid,
      };
      // return console.log(param);
      // console.log(param)
      this.ajax.get(this.$store.state.api + "/selectSign", param).then(
        (res) => {
          this.qpList = res.data[0];
          // console.log('this.qpList',this.qpList);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    upCd(e, i, t) {
      e.stopPropagation();
      if (i == 0) {
        return;
      }
      if (t == 1) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i - 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i - 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i] = a;
      } else if (t == 2) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i - 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i - 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i] = a;
      } else if (t == 3) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[
              i - 1
            ]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[
          i - 1
        ] = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[i]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[i] = a;
      } else if (t == 4) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i - 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i - 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i] = a;
      } else if (t == 5) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[
              i - 1
            ]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[i - 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[i] = a;
      } else if (t == 6) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i - 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i - 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i] = a;
      } else {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i - 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i - 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i] = a;
      }
      this.$forceUpdate();
      this.setFile();
    },
    downCd(e, i, t) {
      e.stopPropagation();
      if (t == 1) {
        if (
          i ==
          this.myArrayProp[0]["ClosingstatementData"].resultAccessory.length - 1
        ) {
          return;
        }
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i + 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i + 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].resultAccessory[i] = a;
      } else if (t == 2) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i + 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i + 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i] = a;
      } else if (t == 3) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[
              i + 1
            ]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[
          i + 1
        ] = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[i]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[i] = a;
      } else if (t == 4) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i + 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i + 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[i] = a;
      } else if (t == 5) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[
              i + 1
            ]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[i + 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[i] = a;
      } else if (t == 6) {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i + 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i + 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[i] = a;
      } else {
        var a = JSON.parse(
          JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i + 1]
          )
        );
        this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i + 1] =
          JSON.parse(
            JSON.stringify(
              this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i]
            )
          );
        this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i] = a;
      }
      this.$forceUpdate();
      this.setFile();
    },
    updataVideoT(e, i, t) {
      if (t == 1) {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].resultAccessory[
            i
          ].fileName;
      } else if (t == 2) {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].firmAccessory[i].fileName;
      } else if (t == 3) {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[
            i
          ].fileName;
      } else if (t == 4) {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[
            i
          ].fileName;
      } else if (t == 5) {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[
            i
          ].fileName;
      } else if (t == 6) {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[
            i
          ].fileName;
      } else {
        this.fileName =
          this.myArrayProp[0]["ClosingstatementData"].taskAccessory[i].fileName;
      }
      this.fileIndex = i;
      this.fileType = t;
      this.dialogVisibleupdataVideoT = true;
      this.$forceUpdate();
    },
    updataVideoC() {
      if (this.fileType == 1) {
        this.myArrayProp[0]["ClosingstatementData"].resultAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      } else if (this.fileType == 2) {
        this.myArrayProp[0]["ClosingstatementData"].firmAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      } else if (this.fileType == 3) {
        this.myArrayProp[0]["ClosingstatementData"].competitionAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      } else if (this.fileType == 4) {
        this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      } else if (this.fileType == 5) {
        this.myArrayProp[0]["ClosingstatementData"].conversionAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      } else if (this.fileType == 6) {
        this.myArrayProp[0]["ClosingstatementData"].talentsAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      } else {
        this.myArrayProp[0]["ClosingstatementData"].taskAccessory[
          this.fileIndex
        ].fileName = JSON.parse(JSON.stringify(this.fileName));
      }
      this.dialogVisibleupdataVideoT = false;
      this.$forceUpdate();
      this.setFile();
    },
  },
  watch: {
    isDownPdf: {
      handler(newVal) {
        if (newVal) {
          this.isDownPdf = newVal;
        }
      },
      deep: true,
    },
    myArrayProp2: {
      handler(newVal) {
        if (newVal) {
          this.myArrayProp = JSON.parse(JSON.stringify(newVal));
          this.getPrice(1);
        }
      },
      deep: true,
    },
  },
  created() {
    // console.log(this.myArrayProp);
    //    this.getData();
    this.myArrayProp = JSON.parse(JSON.stringify(this.myArrayProp2));
    // console.log('this.myArrayProp',this.myArrayProp);
    this.getPrice(1);
    this.getSign();
  },
};
</script>

<style lang="less" scoped>
.vertical {
  writing-mode: vertical-rl; /*从右到左竖直书写*/
  // letter-spacing: 4px;
}
@media print {
  @page {
    margin: 20px;
    /* 设置页边距 */
  }

  // body {
  //   padding: 50px 0;
  //   /* 留出页脚空间 */
  // }
  // header {
  //   position: fixed;
  //   /* 固定页脚位置 */
  //   top: 0;
  //   /* 置于页面底部 */
  //   width: 100%;
  //   /* 宽度占满整个页面 */
  //   height: 50px;
  //   /* 设置页脚高度 */
  //   text-align: center;
  //   /* 居中对齐 */
  //   font-size: 20px;
  //   /* 设置字号 */
  //   display: block;
  //   line-height: 50px;
  // }
  // footer {
  //   position: fixed;
  //   /* 固定页脚位置 */
  //   bottom: 0;
  //   /* 置于页面底部 */
  //   width: 100%;
  //   /* 宽度占满整个页面 */
  //   height: 50px;
  //   /* 设置页脚高度 */
  //   text-align: center;
  //   /* 居中对齐 */
  //   font-size: 20px;
  //   /* 设置字号 */
  //   display: block;
  //   line-height: 50px;
  // }
}
html,
body {
  overflow: unset;
  .dialog_diy {
    /deep/.el-dialog__header {
      background: #3c3c3c !important;
      padding: 15px 20px;
    }
    /deep/.el-dialog__title {
      color: #fff;
    }
    /deep/.el-dialog__headerbtn {
      top: 19px;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close:hover {
      color: #fff;
    }
    /deep/.el-dialog__body,
    /deep/.el-dialog__footer {
      background: #fafafa;
    }
  }
}
.ProNumber{
    position: absolute;
    right: 60px;
    top: 30px;
    // font-size: 25px;
    text-align: right;
    margin: auto 0;
    // width: 80% !important;
  }
.onePage {
  width: 100%;
  // height: 1000px;
  box-sizing: border-box;
  padding: 200px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  // width: 100%;
  // height: 1820px;
  // text-align: center;
  // // margin: 20px auto;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // border: 1px solid #000;
  .titSchool {
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 30px;
    font-family: \6977\4f53;
  }
  .title {
    font-weight: 600;
    font-size: 34px;
    margin-bottom: 30px;
    font-family: \9ed1\4f53;
    margin-bottom: 100px;
  }
  .line {
    width: 300px;
    border-bottom: 1px black solid;
  }
  .basicInformation {
    display: flex;
    justify-content: center;
    font-size: 22px;
    font-family: \4eff\5b8b;
    font-weight: bold;
    margin-bottom: 50px;

    span {
      width: 100px;
      text-align: justify;
      text-align-last: justify;
      /*兼容ie*/
      text-justify: distribute-all-lines;
      margin-right: 10px;
    }
  }
}
table {
  position: relative;
  color: black;
  width: 95%;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 19px;
  font-family: \5b8b\4f53;
  tr {
    width: 100%;
    border: none;
  }
  tr td {
    height: 60px;
    width: 10%;
    // width: 200px;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    .textCss {
      word-break: break-word;
      white-space: pre-line;
      line-height: 40px;
    }
    // :deep(.el-textarea.is-disabled .el-textarea__inner) {
    //   background-color: unset;
    //   border-color: unset;
    //   color: rgb(0, 0, 0);
    //   cursor: unset;
    // }
    .noFileBox {
      width: 98%;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
    }
    .bigBlock {
      width: 98%;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      border: 1px solid #cad1dc;
      border-radius: 4px;
      padding: 10px;
      margin: 20px 0 0 0;
      .fileBlock {
        width: 98%;
        margin-right: 20px;
        position: relative;
        border-radius: 5%;
        padding: 5px 0 5px 0;
        border-bottom: 1px solid #cad1dc;
        .fileBox {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;

          .fileBoxLeft {
            cursor: pointer;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            .chapter_upload_l_i3 {
              width: 15px;
              height: 15px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url("../../../assets/img/u_video.png");
            }
            .titName {
              width: calc(100% - 15px);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-word;
              text-align: left;
              margin-left: 10px;
              max-width: 800px;
            }
          }
          .fileBoxRight {
            cursor: pointer;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            .chapter_upload_ud {
              display: flex;
              flex-direction: row;
              justify-content: center;
              margin: 0 10px 0 0;
              .chapter_upload_up {
                margin-right: 10px !important;
              }
              .chapter_upload_down,
              .chapter_upload_up {
                width: 20px;
                height: 20px;
                background: #e4eaf2;
                cursor: pointer;
                margin: 0 auto;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
            .chapter_upload_up::after,
            .chapter_upload_down::after {
              content: "";
              background-image: url("../../../assets/img/downBtn.png");
              width: 13px;
              height: 13px;
              background-size: 100% 100%;
              display: block;
            }

            .chapter_upload_up::after {
              background-image: url("../../../assets/img/upBtn.png") !important;
            }
            .chapter_upload_ic_edit {
              width: 18px;
              height: 18px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
              background-image: url("../../../assets/img/edit_u.png");
            }
            .chapter_upload_ic_r {
              width: 18px;
              height: 18px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url("../../../assets/img/delete_u.png");
            }
          }
        }
      }
      .masking-out {
        width: 100px;
        height: 135px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        border-radius: 5%;
        background: #00000053;
        .delete {
          cursor: pointer;
          margin-left: 50%;
          margin-top: 50%;
          transform: translate(-50%, -50%);
        }
        .delete:hover {
          color: #fff;
        }
      }
      .fileBlock:hover .masking-out {
        display: block;
      }
    }
    p {
      text-align: left;
    }
    :deep(.el-textarea__inner) {
      border: none;
      resize: none;
      font-size: 18px;
    }
  }
}
.ending {
  margin-left: 30px;
  p {
    line-height: 1.5em;
  }
}
.qpText {
  position: absolute;
  top: 10px;
  left: 10px;
  max-height: 260px;
  text-align: left;
  overflow: auto;
}

.qpText::-webkit-scrollbar-track-piece {
  background-color: #f8f8f800;
}
.qpText::-webkit-scrollbar {
  width: 6px;
  transition: all 2s;
}
.qpText::-webkit-scrollbar-thumb {
  background-color: #929292;
  border-radius: 100px;
}
.qpText::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
.qpText::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}
</style>