<template>
  <div>
    <a-form-model ref="form" :model="formData" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
      <a-row>
        <a-col :span="24" style="border-top: 0px">
          <div class="tb-title">
            <span>研究项目</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">项目名称(中文/英文)</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="projName">
            <a-input placeholder="项目名称(中文)" v-model="formData.projName" :maxLength="50" style="width: 80%" />
          </a-form-model-item>
          <a-form-model-item>
            <a-input placeholder="项目名称(英文)" v-model="formData.englishName" :maxLength="200" style="width: 80%" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex" v-if="isModifyNo">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">项目编号</div>
          </div>
        </a-col>
        <a-col :span="20">
          <div class="special-middle">
            <div>
              <a-form-model-item prop="projNo">
                <a-input placeholder="项目编号" v-model="formData.projNo" :maxLength="50" style="width: 40%;" />
              </a-form-model-item>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>申报单位</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>
              <a-form-model-item>
                <div>{{ formData.appUnitName }}</div>
              </a-form-model-item>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>申报年度</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <a-form-model-item>
              <div>{{ formData.reportYear }}</div>
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">申请金额</div>
          </div>
        </a-col>
        <a-col :span="8">
          <a-form-model-item prop="applyMoney">
            <base-select v-model="formData.applyMoney" :type="11" :isAll="true" :width="180" />
            <!-- <a-input-number v-model="formData.applyMoney" :min="0" :step="0.01" style="width: 100px" /> -->
            <span> 单位：万元</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">拟完成的成果形式</div>
          </div>
        </a-col>
        <a-col :span="8">
          <a-form-model-item prop="anticipatedForms">
            <para-select v-model="formData.anticipatedForms" :typeId="53" :width="180" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">是否可实现成果转化或临床应用</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="isAchieve">
            <base-select v-model="formData.isAchieve" :type="12" :isAll="true" :width="180" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">是否选择接受立项不资助</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="isAccept">
            <base-select v-model="formData.isAccept" :type="12" :isAll="true" :width="180" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">是否存在境外机构或人员参与</div>
          </div>
        </a-col>
        <a-col :span="20">
          <div class="special-middle">
            <a-form-model-item prop="isOverseas">
              <base-select v-model="formData.isOverseas" :type="12" :isAll="true" :width="180" />
            </a-form-model-item>
            <a-form-model-item prop="overseasRemark" v-if="overseasShow">
              <a-input placeholder="具体情况说明" v-model="formData.overseasRemark" :maxLength="200" style="width: 80%" />
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">申报学科</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="knowledgeId">
            <para-multi-select v-model="formData.knowledgeId" :typeId="57" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">实施年限</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="startDate" style="width:200px;display: inline-block;">
            <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.startDate" style="width: 180px" @change="dateChange" />
          </a-form-model-item>
          <span style="margin: 0px 10px 0 2px">~</span>
          <a-form-model-item prop="endDate" style="width:200px;display: inline-block;">
            <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.endDate" style="width: 180px" @change="dateChange" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">主题词(中文/英文)</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="projKeywords">
            <a-input placeholder="主题词(中文)" v-model="formData.projKeywords" :maxLength="100" style="width: 80%;" />
          </a-form-model-item>
          <a-form-model-item prop="keywordsEnglish">
            <a-input placeholder="主题词(英文)" v-model="formData.keywordsEnglish" :maxLength="200" style="width: 80%" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>申请者</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>姓名</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.personName }}</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>性别</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.sex }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>出生年月</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{moment(formData.birthday).format("YYYY-MM-DD")}}</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>身份证号</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.certId }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>民族</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.nationName }}</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>职称</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.titleName }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>学历</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.educationName }}</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>专业</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>{{ formData.specName }}</div>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="border-top: 0px">
          <div class="tb-title">
            <span>所在单位</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>名称</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <div>
              <a-form-model-item>
                {{ formData.appUnitName }}
              </a-form-model-item>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">系、所、科室</div>
          </div>
        </a-col>
        <a-col :span="8">
          <a-form-model-item prop="dept">
            <a-input v-model="formData.dept" :maxLength="100" placeholder="系、所、科室" style="width:200px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">性质</div>
          </div>
        </a-col>
        <a-col :span="8">
          <a-form-model-item prop="nature">
            <para-select v-model="formData.nature" :typeId="58" :width="200" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">申请人电话</div>
          </div>
        </a-col>
        <a-col :span="8">
          <a-form-model-item prop="telephone">
            <a-input v-model="formData.telephone" :maxLength="20" placeholder="申请人电话" style="width:200px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">详细地址</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <a-form-model-item prop="address">
              <a-input v-model="formData.address" :maxLength="200" placeholder="详细地址" style="width:200px" />
            </a-form-model-item>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">E-mail</div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="special-middle">
            <a-form-model-item prop="email">
              <a-input v-model="formData.email" :maxLength="20" placeholder="E-mail" style="width:200px" />
            </a-form-model-item>
          </div>
        </a-col>
      </a-row>

      <!-- 项目组成员 v-if="formData.members!=null"  -->
      <proj-group-member :members.sync="formData.members" />

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>经费预算 <strong>(单位：万元)</strong></span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="item_inner">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>分类</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>投资总额</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray ">
          <div class="special-middle">
            <div class="required">卫生健康委资助</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">单位配套</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">自筹</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">其他</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="item_inner">
        <a-col :span="4">
          <div class="special-middle">
            <div>人民币（万元）</div>
          </div>
        </a-col>
        <a-col :span="4">
          <!-- {{ formData.totalFunding }} -->
          <div class="special-middle">
            <div>{{ inCount() }}</div>
          </div>
        </a-col>
        <a-col :span="4">
          <a-form-model-item prop="govFunding">
            <a-input-number placeholder="卫生健康委资助" v-model="formData.govFunding" :step="0.01" :maxLength="300" style="width: 80%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item prop="unitFunding">
            <a-input-number placeholder="单位配套" v-model="formData.unitFunding" :step="0.01" :maxLength="300" style="width: 80%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item prop="selfFunding">
            <a-input-number placeholder="自筹" v-model="formData.selfFunding" :step="0.01" :maxLength="300" style="width: 80%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item prop="otherFunding">
            <a-input-number placeholder="其他" v-model="formData.otherFunding" :step="0.01" :maxLength="300" style="width: 80%" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex" class="item_inner">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>支出科目</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">金额</div>
          </div>
        </a-col>
        <a-col :span="16" class="bg-gray">
          <div class="special-middle">
            <div>计算依据及理由</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="item_inner" v-for="(item, index) in formData.budget" :key="'budget' + index">
        <a-col :span="4">
          <div class="special-middle">
            <div>{{ item.budgetName }}</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>
              <a-form-model-item :prop="'budget.' + index + '.totalBudget'" :rules="{required: true,message: '*',trigger: 'blur',}">
                <a-input-number v-model="item.totalBudget" @change="outNumberChange" :min="0" :step="0.01" style="width: 80%" />
              </a-form-model-item>
            </div>
          </div>
        </a-col>
        <a-col :span="16">
          <div class="special-middle">
            <div>
              <a-input v-model="item.calculationBasis" :maxLength="100" style="width: 80%" />
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="item_inner">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>设备仪器名称</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>规格型号</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>数量</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>金额</div>
          </div>
        </a-col>
        <a-col :span="6" class="bg-gray">
          <div class="special-middle">
            <div>用途</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>操作</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(equipment, index) in formData.equipments" :key="index" type="flex" class="item_inner">
        <a-col :span="4">
          <a-form-model-item :prop="'equipments.' + index + '.name'">
            <a-input v-model="equipment.name" :maxLength="20" placeholder="设备仪器名称" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :prop="'equipments.' + index + '.specificationType'">
            <a-input v-model="equipment.specificationType" :maxLength="20" placeholder="规格型号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :prop="'equipments.' + index + '.quantity'">
            <a-input-number v-model="equipment.quantity" :min="0" :step="0" style="width: 80%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item :prop="'equipments.' + index + '.totalBudget'">
            <a-input-number v-model="equipment.totalBudget" :min="0" :max="999999999" :step="0.01" style="width: 80%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item :prop="'equipments.' + index + '.useFrom'">
            <a-input v-model="equipment.useFrom" :maxLength="20" placeholder="用途" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeEquipments(equipment)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="24" style="text-align: center">
          <div class="special-middle">
            <div>
              <a-button type="dashed" style="width: 50%" @click="addEquipments">
                <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px">※说明：仪器设备每台单价一千元以上的须逐项填写</span>
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>

      <a-row type="flex">
        <a-col :span="24">
          <div class="tb-title">
            <span>研究内容和意义</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">研究内容和意义(限500字)</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="projContent">
            <a-textarea placeholder="研究内容和意义" v-model="formData.projContent" :maxLength="500" style="width: 80%; height: 160px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="24">
          <div class="tb-title">
            <span>立项依据</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">立项依据(限6000字)</div>
            (参考文献限10000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="projBasis">
            <a-textarea placeholder="立项依据" v-model="formData.projBasis" :maxLength="6000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
          <a-layout-content>
            <a-form-model-item prop="projReference">
              <a-textarea placeholder="参考文献" v-model="formData.projReference" :maxLength="10000" style="width: 80%; height: 100px; margin-top: 5px" />
            </a-form-model-item>
          </a-layout-content>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="24">
          <div class="tb-title">
            <span>研究方案</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">研究内容和研究目标，<br />拟解决的关键问题(限5000字)</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="researchContent">
            <a-textarea placeholder="研究内容和研究目标，拟解决的关键问题" v-model="formData.researchContent" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">研究思路、方法、技术路线、实验方案及可行性分析</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="researchPlan">
            <a-textarea placeholder="研究思路、方法、技术路线、实验方案及可行性分析" v-model="formData.researchPlan" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">本项目的特色和创新之处</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="mainFeatures">
            <a-textarea placeholder="本项目的特色和创新之处" v-model="formData.mainFeatures" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">研究进度计划</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="studyPlan">
            <a-textarea placeholder="研究进度计划" v-model="formData.studyPlan" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">预期研究成果</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="expectedResults">
            <a-textarea placeholder="预期研究成果" v-model="formData.expectedResults" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="24">
          <div class="tb-title">
            <span>研究基础</span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required"> 与本项目有关的研究工作积累和已取得的研究工作成绩</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="workFoundation">
            <a-textarea placeholder="与本项目有关的研究工作积累和已取得的研究工作成绩" v-model="formData.workFoundation" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required"> 已具备的实验条件和资料，尚缺少的实验条件和资料及解决的途径</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="workingConditions">
            <a-textarea placeholder="已具备的实验条件和资料，尚缺少的实验条件和资料及解决的途径" v-model="formData.workingConditions" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">申请者和项目组主要成员研究工作简历</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="memResume">
            <a-textarea placeholder="申请者和项目组主要成员研究工作简历" v-model="formData.memResume" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">申请者正在承担的其它研究项目</div>
            (限5000字)
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="researchProjects">
            <a-textarea placeholder="申请者正在承担的其它研究项目（名称、编号、任务来源、起止年月、负责或参加以及与本申请项目的关系等情况）" v-model="formData.researchProjects" :maxLength="5000" style="width: 80%; height: 140px; margin-top: 12px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>附件上传<strong style="margin-left:20px;">注：技术路线、项目组成员签字<span style="color:red;">*</span>、伦理审批件<span style="color:red;">*</span>、科研诚信承诺书<span style="color:red;">*</span>、查新报告<span style="color:red;">*</span>、合作单位盖章页等文件(<span style="color:red;">*</span>为必须上传的附件)</strong></span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="item_inner">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>附件说明</div>
          </div>
        </a-col>
        <a-col :span="18" class="bg-gray">
          <div class="special-middle">
            <div class="required">附件上传</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>操作</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.fileList" :key="'fileList' + index" type="flex">
        <a-col :span="10">
          <a-form-model-item :prop="'fileList.' + index + '.fileExplain'" :rules="{required: true, message: '*',trigger: 'blur',}">
            <a-input v-model="item.fileExplain" :maxLength="100" style="width: 80%" :disabled="item.required" />
            <!-- {{item.fileExplain}} -->
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <div class="special-middle">
            <div v-if="item.downloadUrl" class="file-box">
              <div>
                <a-icon type="file" style="margin-right: 8px" />
                <span class="hover-pointer" @click="downloadfile(item)">{{item.fileName}}</span>
              </div>
              <a-icon type="delete" class="hover-pointer d-icon" @click="deletefile(item, index)" />
            </div>
            <div v-else>
              <a-form-model-item :prop="'fileList.' + index + '.downloadUrl'" :rules="{required: true, message: '请上传附件',trigger: 'blur',}">
                <input type="file" :ref="'fileElem' + index" class="visually-hidden" @change="handleFiles(item, index)" />
                <a-button @click="fileSelect(item, index)"><a-icon type="upload" />选择文件</a-button>
              </a-form-model-item>
            </div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div v-if="!item.required">
              <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removefileList(item)">
                <a-button type="link" size="small">删除</a-button>
              </a-popconfirm>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="24" style="text-align: center">
          <div class="special-middle">
            <div>
              <a-button type="dashed" style="width: 50%" @click="addfileList()">
                <a-icon type="plus" /> 添加
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form-model>

  </div>
</template>

<script>
import { getType } from '@/views/utils/auth'
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import baseSelect from '@/views/components/common/baseSelect'
import ProjGroupMember from '@/views/report/project/components/projGroupMember'
import { isEmptyParams } from "@/views/utils/common"
import moment from 'moment'

const Members = { showIndex: 1, name: null, certId: null, sex: null, birthday: null, age: null, degree: null, title: null, duty: null, spec: null, workUnit: null, projWork: null }
const Equipments = { name: null, specificationType: null, quantity: null, totalBudget: null, useFrom: null }
const File = { fileName: '', downloadUrl: '', fileExplain: '', downloadId: '' }

export default {
  name: 'projectEdit',
  components: {
    paraMultiSelect, paraSelect, baseSelect, ProjGroupMember
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
    isModifyNo: {
      type: Boolean,
      default: () => {
        return false
      }
    },
  },
  created () {
    this.getProject()
  },
  data () {
    return {
      overseasShow: false,
      formData: {
        id: null,
        // 项目名称
        projName: '',
        // 项目名称
        englishName: '',
        // 项目状态
        projState: -10,
        isAchieve: null,
        // 申报学科
        isAccept: null,
        // 申报学科
        isOverseas: null,
        // 申报学科
        knowledgeId: '',
        // 拟完成的成果形式
        anticipatedForms: '',
        // 申请金额
        applyMoney: null,
        // 申报年度
        reportYear: null,
        // 实施年限 起止日期
        startDate: null,
        endDate: null,
        // 主题词
        projKeywords: '',
        // 主题词(英文)
        keywordsEnglish: '',
        // 依托单位
        appUnitName: '',
        // 申报人
        personName: '',
        // 性别
        sex: '',
        // 出生年月
        birthday: '',
        // 证件号
        certId: '',
        // 民族
        nationName: '',
        // 职 称
        titleName: '',
        // 学历
        educationName: '',
        // 专业
        specName: '',
        // 电话
        mobile: '',
        // 邮箱
        email: '',
        // 成员
        members: [{ ...Members }],
        // 投资总额
        totalFunding: null,
        // 卫生健康委资助
        govFunding: null,
        // 单位配套
        unitFunding: null,
        // 自筹
        selfFunding: null,
        // 其他
        otherFunding: null,
        budget: [],
        equipments: [{ ...Equipments }],
        // 研究内容和意义
        projContent: '',
        //参考文献
        projReference: '',
        // 立项依据
        projBasis: '',
        // 研究内容和研究目标，拟解决的关键问题
        researchContent: '',
        // 研究思路、方法、技术路线、实验方案及可行性分析
        researchPlan: '',
        // 项目的特色和创新之处
        mainFeatures: '',
        // 研究进度计划
        studyPlan: '',
        // 预期研究成果
        expectedResults: '',
        // 研究工作积累和已取得的研究工作成绩
        workFoundation: '',
        // 实验条件和资料
        workingConditions: '',
        // 申请者和项目组主要成员研究工作简历
        memResume: '',
        // 申请者正在承担的其它研究项目
        researchProjects: '',
        projDoc: '',
        fileList: [{ ...File }],
        //项目类型（1.科研项目、2.重点项目）
        projType: getType()
      },
      rules: {
        projName: [
          { required: true, message: '请填写项目名称', trigger: 'blur' },
          { max: 50, message: '项目名称不能大于50', trigger: 'blur' }
        ],
        englishName: [{ max: 200, message: '项目名称（英文）不能大于50', trigger: 'blur' }],
        proj_no: { required: true, message: '请填写项目编号', trigger: 'blur' },
        isAchieve: { required: true, message: '是否可实现成果转化或临床应用', trigger: 'change' },
        isAccept: { required: true, message: '请选择是否选择接受立项不资助', trigger: 'change' },
        isOverseas: { required: true, message: '请选择是否存在境外机构或人员参与', trigger: 'change' },
        knowledgeId: { required: true, message: '请选择申报学科', trigger: 'change' },
        anticipatedForms: { required: true, message: '请选择成果形式', trigger: 'change' },
        projKeywords: [{ required: true, message: '请填写主题词', trigger: 'blur' },],
        keywordsEnglish: [{ max: 200, message: '主题词不能大于50', trigger: 'blur' },],
        startDate: { required: true, message: '请选择起始日期', trigger: 'change' },
        endDate: { required: true, message: '请选择结束日期', trigger: 'change' },
        dept: { required: true, message: '请填写系、所、科室', trigger: 'blur' },
        nature: { required: true, message: '请填单位性质', trigger: 'change' },
        telephone: { required: true, message: '请填写申请人电话', trigger: 'blur' },
        address: { required: true, message: '请填写详细地址', trigger: 'blur' },
        email: { required: true, message: '请填写邮箱', trigger: 'blur' },
        applyMoney: { required: true, message: '请填写申请金额', trigger: 'blur' },
        // 研究内容和意义
        projContent: [{ required: true, message: '请填写研究内容和意义', trigger: 'blur' }],
        //参考文献
        projReference: [{ required: false, message: '请填写参考文献', trigger: 'blur' }],
        // 立项依据
        projBasis: [{ required: true, message: '请填写立项依据', trigger: 'blur' }],
        // 研究内容和研究目标，拟解决的关键问题
        researchContent: [{ required: true, message: '请填写研究内容和研究目标', trigger: 'blur' }],
        // 研究思路、方法、技术路线、实验方案及可行性分析
        researchPlan: [{ required: true, message: '请填写研究思路、方法、技术路线', trigger: 'blur' }],
        // 项目的特色和创新之处
        mainFeatures: [{ required: true, message: '请填写项目的特色和创新之处', trigger: 'blur' }],
        // 研究进度计划
        studyPlan: [{ required: true, message: '请填写研究进度计划', trigger: 'blur' }],
        // 预期研究成果
        expectedResults: [{ required: true, message: '请填写预期研究成果', trigger: 'blur' }],
        // 研究工作积累和已取得的研究工作成绩
        workFoundation: [{ required: true, message: '请填写研究工作积累和已取得的研究工作成绩', trigger: 'blur' }],
        // 实验条件和资料
        workingConditions: [{ required: true, message: '请填写实验条件和资料', trigger: 'blur' }],
        // 申请者和项目组主要成员研究工作简历
        memResume: [{ required: true, message: '请填写研究工作简历', trigger: 'blur' }],
        // 申请者正在承担的其它研究项目
        researchProjects: [{ required: true, message: '请填写研究项目', trigger: 'blur' }],
        govFunding: { required: true, message: '*', trigger: 'blur' },
        unitFunding: { required: true, message: '*', trigger: 'blur' },
        selfFunding: { required: true, message: '*', trigger: 'blur' },
        otherFunding: { required: true, message: '*', trigger: 'blur' },
      },
      // 富文本字数
      tinymceLimit: 15000,
      tinymceWordCount: 0,
      flag: false,
    }
  },
  computed: {
  },
  mounted () {

  },
  methods: {
    moment,
    getProject () {
      this.$emit('load', true)
      if (!!this.value) {
        this.$api.project.getProjectInfoById({ id: this.value }).then(({ data = {} }) => {
          if (data) {
            this.formData = data
            this.loadList()
          } else
            this.$emit('close', 'error')
          this.$emit('load', false)
        }).catch(() => {
          this.$emit('close', 'error')
          this.$emit('load', false)
        })
      } else {
        this.$api.project.getNewProject({ projType: getType() }).then(({ data = {} }) => {
          if (data) {
            this.formData = data
            this.loadList()
            // tinyMCE.activeEditor.setContent(data.projDoc)
          } else
            this.$emit('close', 'error')
          this.$emit('load', false)
        }).catch(() => {
          this.$emit('close', 'error')
          this.$emit('load', false)
        })
      }
    },
    loadList () {
      if (!this.formData.members || this.formData.members.length == 0)
        this.formData.members = [{ ...Members }]
      if (!this.formData.equipments || this.formData.equipments.length == 0)
        this.formData.equipments = [{ ...Equipments }]
      if (!this.formData.fileList || !this.formData.fileList.length || this.formData.fileList.length == 0) {
        this.formData.fileList = []
        //this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '学术委员会审查意见' }))
        // this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '项目申报简要信息首页(签字页)', isDelete: false, must: true }))
        // this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '伦理审批件', isDelete: false, must: true }))
        // this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '科研诚信承诺书', isDelete: false, must: true }))
        // this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '查新报告', isDelete: false, must: true }))
        // this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '技术路线', isDelete: false, must: false }))
      }
    },
    addEquipments () {
      this.formData.equipments.push({ ...Equipments })
    },
    removeEquipments (item) {
      let index = this.formData.equipments.indexOf(item)
      if (index !== -1) {
        this.formData.equipments.splice(index, 1)
      }
    },
    save () {
      if (this.checkProjName()) {
        this.$emit('load', true)
        let pars = isEmptyParams(this.formData)
        let par = { ...pars }
        this.$api.project.save(par).then(({ data = {} }) => {
          if (data) {
            this.formData.id = data
            this.$message.success('保存成功！')
            this.$emit('onSave', 'save')
          }
          this.$emit('load', false)
        }).catch(() => {
          this.$emit('load', false)
        })
      }
    },
    submit () {
      if (this.formData.members.length == 0) {
        this.$message.error('至少添加一位项目组成员！')
        return
      }
      if (this.formData.isOverseas && this.formData.isOverseas == '是') {
        if (this.formData.overseasRemark == null || this.formData.overseasRemark == '') {
          this.$message.error('请填写存在境外机构或人员具体情况说明！')
          return
        }
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          if (!this.checkApplyMoney()) {
            return false
          }
          this.$emit('load', true)
          let state = this.formData.projState
          if (state != 30)
            this.formData.projState = 10
          // this.formData.projDoc = this.projDoc
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.project.save(par).then(({ data = {} }) => {
            if (data) {
              this.formData.id = data
              this.$message.success('成功！')
              this.$emit('onSave', 'submit')
            }
            this.$emit('load', false)
          }).catch(() => {
            this.$emit('load', false)
          })
        } else {
          this.$message.warn('项目信息未填写完全！')
          return false
        }
      })
    },
    tinymceSet () {
      tinymce.remove('#tinymce_dom')
      tinymce.init({
        selector: '#tinymce_dom',
        language: 'zh_CN',
        content_style: "img {max-width:100%;}",
        // menubar: false,
        // 隐藏底部状态栏
        statusbar: false,
        height: 800,
        plugins: 'code advlist autolink link image lists preview table wordcount',
        toolbar: `undo redo | styleselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image 
                    | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow
                    | tableinsertcolbefore tableinsertcolafter tabledeletecol | wordcount`,
        // 初始化完成回调
        init_instance_callback: (editor) => {
          let wordcount = editor.plugins.wordcount
          this.tinymceWordCount = wordcount.body.getWordCount()
        },
        // 图片上传路径
        // images_upload_url: 'http://192.168.1.185:8888/profile',
        // 图片上传操作
        images_upload_handler: (blobInfo, succFun, failFun) => {
          this.$api.base.asyncUpload(this.uploadHandle(blobInfo.blob(), blobInfo.filename())).then(({ data = {} }) => {
            if (data) {
              succFun(data.downloadUrl)
            }
          }).catch((err) => {
            failFun(err)
          })
        }
      })
      // 设置富文本内容
      // tinymce.activeEditor.setContent(htmlText)
      // 监听输入计算字数
      let mark = 1
      tinymce.activeEditor.on('keyup', (e) => {
        if (mark === 1) {
          let wordcount = tinymce.activeEditor.plugins.wordcount
          this.tinymceWordCount = wordcount.body.getWordCount()
          mark = 0
          setTimeout(() => {
            mark = 1
          }, 500)
        }
      })
    },
    // 添加附件
    addfileList () {
      this.formData.fileList.push(Object.assign({ ...File }, { fileExplain: '' }))
    },
    // 删除附件
    removefileList (item) {
      let index = this.formData.fileList.indexOf(item)
      if (index !== -1) {
        this.formData.fileList.splice(index, 1)
      }
    },
    downfileList (item) {
    },
    fileSelect (item, index) {
      let fileElem = this.$refs['fileElem' + index][0]
      if (fileElem) {
        fileElem.click()
      }
    },
    fileCheck (file) {
      //判断是否小于1M
      let isLtSize = file.size < 1024 * 1024 * 15;
      if (!isLtSize) {
        this.$message.error('文件大小不能超过15M！');
        return false
      }
      // var fileNames = file.name.split('.')
      // var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
      // var extList = ['doc', 'docx', 'pdf']
      // if (!extList.find((item) => item == fileType)) {
      //   this.$message.error('文件格式错误！')
      //   return false
      // }
      return true
    },
    handleFiles (item, index) {
      let fileElem = this.$refs['fileElem' + index][0]
      let files = fileElem.files
      if (files.length <= 0) {
        this.$message.error('未选中文件，请尝试重新选择')
        return
      }
      if (!this.fileCheck(files[0]))
        return
      this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => {
        if (data) {
          item.fileName = files[0].name
          item.downloadUrl = '/' + files[0].name
          item.downloadId = data.id
        } else
          this.$message.error('上传失败')
      }).catch(() => {
        this.$message.error('上传失败')
      })
    },
    inCount () {
      let govFunding = 0
      let unitFunding = 0
      let selfFunding = 0
      let otherFunding = 0
      if (this.formData.govFunding)
        govFunding = this.formData.govFunding
      if (this.formData.unitFunding)
        unitFunding = this.formData.unitFunding
      if (this.formData.selfFunding)
        selfFunding = this.formData.selfFunding
      if (this.formData.otherFunding)
        otherFunding = this.formData.otherFunding
      this.formData.totalFunding = (govFunding + unitFunding + selfFunding + otherFunding).toFixed(2)
      return this.formData.totalFunding
    },
    outNumberChange () {
      let vartotalBudget = 0
      this.formData.budget.forEach(e => {
        if (e.totalBudget != null)
          vartotalBudget += parseFloat(e.totalBudget)
      })
      this.formData.totalFunding = vartotalBudget.toFixed(2)
    },
    deletefile (item, index) {
      this.$api.base.deletefile({ id: item.downloadId }).then(({ data = {} }) => {
        if (data) {
          item.fileName = ''
          item.downloadUrl = ''
          item.downloadId = ''
          if (item.fileExplain != '学术委员会审查意见' && item.fileExplain != '项目组的人员签字') {
            item.fileExplain = ''
          }
        }
      }).catch(() => {
        this.$message.error('删除失败')
      })
    },
    uploadHandle (file, fileName) {
      let formData = new FormData()
      formData.append('file', file)
      formData.append('fileName', fileName)
      return formData
    },
    // 起止日期选择处理
    dateChange (value) {
      let statr = this.formData.startDate
      let end = this.formData.endDate
      if (!statr || !end) {
        return
      }
      if (statr > end) {
        this.formData.startDate = end
        this.formData.endDate = statr
      }
    },
    checkApplyMoney () {
      var m = parseFloat(this.formData.applyMoney)
      if (m != this.formData.govFunding) {
        alert('项目经费与申请金额不一致！')
        return false
      }
      return true
    },
    checkProjName () {
      if (this.formData.projName == "" || this.formData.projName == null) {
        alert('项目名称不能为空')
        return false
      } else {
        return true
      }
    },
  },
  watch: {
    'formData.isOverseas': {
      handler (value) {
        if (value && value == '是')
          this.overseasShow = true
        else
          this.overseasShow = false
      },
    },
  }
}
</script>
<style scoped lang="less">
.d-icon {
  margin-right: 10px;
}
</style>

