<template>
  <div class="wrapper" v-if="types">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <h3>项目申报</h3>
      <!-- 导航 -->
      <div class="box">
        <div
          :class="sub == 0 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 0 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >
          1 填写基本信息
        </div>
        <div
          :class="sub == 1 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 1 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >
          2 填写详细信息
        </div>
      </div>
      <form action method enctype="multipart/form-data" onsubmit="return false">
        <div v-show="sub == 0">
          <h4>一、基本信息</h4>
          <!-- start -->
          <aside>
            <div>
              <label>项目名称:</label>
              <input type="text" name="name" value v-model="name" required />
            </div>
            <div>
              <label>项目申报单位:</label>
              <input
                type="text"
                name="company"
                v-model="company"
                value
                disabled
                required
              />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>项目类别:</label>
              <select name="tid" v-model="tid">
                <template v-for="(type, index) in types">
                  <option :key="index" :value="index">{{ type }}</option>
                </template>
              </select>
            </div>
            <div>
              <label>项目落地区域:</label>
              <select name="rid" v-model="rid">
                <template v-for="(list, index) in area">
                  <option :key="index" :value="index">{{ list }}</option>
                </template>
              </select>
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>一级项目方向:</label>
              <select name="rid" v-model="first_level">
                <template v-for="(list, index) in first_levels">
                  <option :key="index" :value="index">{{ list }}</option>
                </template>
              </select>
              <!-- <input type="text" name="first_level" v-model="first_level" value required /> -->
            </div>
            <div>
              <label>二级项目方向:</label>
              <input
                type="text"
                name="secondary"
                v-model="secondary"
                value
                required
              />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>项目服务领域:</label>
              <input
                type="text"
                name="fieldeara"
                v-model="fieldeara"
                value
                required
              />
            </div>
            <div>
              <label>申报单位属性:</label>
              <input
                type="text"
                name="attribute"
                v-model="attribute"
                value
                required
              />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>申请日期:</label>
              <input type="date" name="aterm" v-model="aterm" value required />
            </div>
            <div>
              <label>截止日期:</label>
              <input type="date" name="fterm" v-model="fterm" value required />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>通讯地址:</label>
              <input
                type="text"
                name="postaladdress"
                v-model="postaladdress"
                value
                required
              />
            </div>
            <div>
              <label>邮政编码:</label>
              <input
                type="text"
                name="postalcode"
                v-model="postalcode"
                value
                required
              />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>电子邮箱:</label>
              <input type="text" name="pmail" v-model="pmail" value required />
            </div>
            <div>
              <label>传真电话:</label>
              <input
                type="text"
                placeholder="非必填"
                name="fax_tel"
                v-model="fax_tel"
                value
              />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <aside>
            <div>
              <label>法定代表人:</label>
              <input
                type="text"
                name="plegal"
                v-model="plegal"
                value
                required
              />
            </div>
            <div>
              <label>统一社会信用代码:</label>
              <input
                type="text"
                name="plcode"
                v-model="plcode"
                value
                required
              />
            </div>
          </aside>
          <!-- end -->
          <!-- start -->
          <section>
            <div>
              <label>负责人姓名:</label>
              <input
                class="i"
                type="text"
                name="pname"
                v-model="pname"
                value
                required
              />
            </div>
            <div>
              <label>职务:</label>
              <input
                class="i"
                type="text"
                name="poster"
                v-model="poster"
                value
                required
              />
            </div>
            <div>
              <label>办公电话:</label>
              <input
                class="i"
                type="text"
                name="poffice_tel"
                v-model="poffice_tel"
                value
                required
              />
            </div>
            <div>
              <label>手机:</label>
              <input
                class="i"
                type="text"
                name="aphone"
                v-model="aphone"
                value
                required
              />
            </div>
          </section>
          <!-- end -->
          <section>
            <div>
              <label>联系人姓名:</label>
              <input
                class="i"
                type="text"
                name="cname"
                v-model="cname"
                value
                required
              />
            </div>
            <div>
              <label>职务:</label>
              <input
                class="i"
                type="text"
                name="cpost"
                v-model="cpost"
                value
                required
              />
            </div>
            <div>
              <label>办公电话:</label>
              <input
                class="i"
                type="text"
                name="coffice_tel"
                v-model="coffice_tel"
                value
                required
              />
            </div>
            <div>
              <label>手机:</label>
              <input
                class="i"
                type="text"
                name="cphone"
                v-model="cphone"
                value
                required
              />
            </div>
          </section>
          <!-- end -->
          <div class="btn" @click="btn(1)">下一页</div>
        </div>
        <div v-show="sub == 1">
          <div class="cc">
            <!-- start -->
            <aside>
              <div>
                <label>项目主责单位:</label>
                <input
                  class="i-i"
                  type="text"
                  name="prespo"
                  v-model="prespo"
                  value
                  required
                />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <div>
                <label>通讯地址:</label>
                <input
                  type="text"
                  name="respoadd"
                  v-model="respoadd"
                  value
                  required
                />
              </div>
              <div>
                <label>邮政编码:</label>
                <input
                  type="text"
                  name="respopcode"
                  v-model="respopcode"
                  value
                  required
                />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <aside>
              <div>
                <label>电子邮箱:</label>
                <input
                  type="text"
                  name="respomail"
                  v-model="respomail"
                  value
                  required
                />
              </div>
              <div>
                <label>传真电话:</label>
                <input
                  type="text"
                  placeholder="非必填"
                  name="respophone"
                  v-model="respophone"
                  value
                />
              </div>
            </aside>
            <!-- end -->
            <!-- start -->
            <section>
              <div>
                <label>负责人姓名:</label>
                <input
                  class="i"
                  type="text"
                  name="respopname"
                  v-model="respopname"
                  value
                  required
                />
              </div>
              <div>
                <label>职务:</label>
                <input
                  class="i"
                  type="text"
                  name="respopost"
                  v-model="respopost"
                  value
                  required
                />
              </div>
              <div>
                <label>办公电话:</label>
                <input
                  class="i"
                  type="text"
                  name="respoophone"
                  v-model="respoophone"
                  value
                  required
                />
              </div>
              <div>
                <label>手机:</label>
                <input
                  class="i"
                  type="text"
                  placeholder="非必填"
                  name="respoptel"
                  v-model="respoptel"
                  value
                />
              </div>
            </section>
            <!-- end -->
            <section>
              <div>
                <label>联系人姓名:</label>
                <input
                  class="i"
                  type="text"
                  name="respocname"
                  v-model="respocname"
                  value
                  required
                />
              </div>
              <div>
                <label>职务:</label>
                <input
                  class="i"
                  type="text"
                  name="respocpost"
                  v-model="respocpost"
                  value
                  required
                />
              </div>
              <div>
                <label>办公电话:</label>
                <input
                  class="i"
                  type="text"
                  name="respocophone"
                  v-model="respocophone"
                  value
                  required
                />
              </div>
              <div>
                <label>手机:</label>
                <input
                  class="i"
                  type="text"
                  placeholder="非必填"
                  name="respoctel"
                  v-model="respoctel"
                  value
                />
              </div>
            </section>
            <!-- end -->
          </div>
          <div>
            <div class="xx">
              <h5>二、申报单位简介</h5>
              <div class="rich">
                <about-us
                  @aboutUs="aboutUs"
                  :aboutUsVal="aboutUsVal"
                ></about-us>
              </div>
              <!-- <textarea
                value
                name="decldes"
                v-model="decldes"
                required
              ></textarea> -->
            </div>
            <div class="xx">
              <h5>三、项目简介</h5>
              <div class="rich">
                <project-brief
                  @projectBrief="projectBrief"
                  :projectBriefVal="projectBriefVal"
                ></project-brief>
              </div>
              <!-- <textarea
                value
                name="prodes"
                v-model="prodes"
                required
              ></textarea> -->
            </div>
            <div class="xx">
              <h5>四、项目论证</h5>
              <h3>(一) 项目实施的必要性、可行性</h3>
              <div class="rich">
                <project-assessment
                  @projectAssessment="projectAssessment"
                  :projectAssessmentVal="projectAssessmentVal"
                ></project-assessment>
              </div>
              <!-- <textarea
                value
                name="prodemo"
                v-model="prodemo"
                required
              ></textarea> -->
              <h3>
                (二)
                项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间
              </h3>
              <p>1.项目实施的已有基础</p>
              <article>
                〔说明：包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等。〕
              </article>
              <div class="rich">
                <existing-basis
                  @existingBasis="existingBasis"
                  :existingBasisVal="existingBasisVal"
                ></existing-basis>
              </div>
              <!-- <textarea
                value
                name="prodemojc"
                v-model="prodemojc"
                required
                placeholder="(说明:包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等)"
              ></textarea> -->
              <p>2.具体方法和途径</p>
              <article>
                〔说明：包括项目实施的具体方式、途径。明确项目的具体组成内容（子项目、各类服务等），每类、每次活动的具体内容、形式、对象、次数、人数等。〕
              </article>
              <div class="rich">
                <methods-way
                  @methodsWay="methodsWay"
                  :methodsWayVal="methodsWayVal"
                ></methods-way>
              </div>
              <!-- <textarea
                name="prodemotj"
                value
                v-model="prodemotj"
                required
                placeholder="(说明:包括项目实施的具体方式、途径。明确项目的具体组成内容(子项目、各类服务等),每类、每次活动的具体内容、形式、对象、次数、人数等)"
              ></textarea> -->
              <p>3.进度安排</p>
              <article>
                〔说明：可单独作为一部分，也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月，不建议简单表述为“年内”、“上半年”、“下半年”、“第*季度”等。〕
              </article>
              <div class="rich">
                <scheduling
                  @scheduling="scheduling"
                  :schedulingVal="schedulingVal"
                ></scheduling>
              </div>
              <!-- <textarea
                name="prodemojd"
                value
                v-model="prodemojd"
                required
                placeholder="(说明:可单独作为一部分,也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月,不建议简单表述为“年内”、“上半年”“下半年”、“第*季度”等。)"
              ></textarea> -->
              <p>4.预期效果</p>
              <article>
                〔说明：具体明确项目实施所要达到的目标或预期的效果。〕
              </article>
              <div class="rich">
                <desired-effect
                  @desiredEffect="desiredEffect"
                  :desiredEffectVal="desiredEffectVal"
                ></desired-effect>
              </div>
              <!-- <textarea
                value
                name="prodemoxg"
                v-model="prodemoxg"
                placeholder="(说明:具体明确项目实施所要达到的目标或预期的效果以及)"
              ></textarea> -->
              <p>5.项目团队及分工</p>
              <article>
                〔说明：包括项目实施的组织管理机构组成，各子项目或各项服务活动的具体承接单位和负责人，各有关协作单位等。要把可能引起转包怀疑的所有事项交代清楚，避免在检查、审计和评估中产生误解。〕
              </article>
              <div class="rich">
                <division-labor
                  @divisionLabor="divisionLabor"
                  :divisionLaborVal="divisionLaborVal"
                ></division-labor>
              </div>
              <!-- <textarea
                value
                required
                v-model="prodemofg"
                name="prodemofg"
                placeholder="(说明:包括项目实施的组织管理机构组成,各子项目或各项服务活动的具体承接单位和负责人,各有关协作单位等。如有以主责单位名义申报的综合性、联合性项目,要细化各子项目的组织实施体系。如有涉及到委托管理(如财务委托管理)的,要在组织架构中予以说明。要把可能引起转包怀疑的所有事项交代清楚,避免在检查、审计和评估中产生误解。)"
              ></textarea> -->
              <h3>
                (三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等
              </h3>
              <div class="rich">
                <cover @cover="cover" :coverVal="coverVal"></cover>
              </div>
              <!-- <textarea
                required
                name="prodemotwo"
                v-model="prodemotwo"
                value
              ></textarea> -->
            </div>
            <div class="xx">
              <h5>五、经费预算</h5>
              <!-- <textarea name="funds" v-model="funds" required value></textarea> -->
              <div class="rich">
                <rich-text-one
                  @quillVal="quillVal"
                  :initialTextVal="initialTextVal"
                ></rich-text-one>
              </div>
            </div>
            <div class="xxx">
              <h5>六、申报单位承诺</h5>
              <div class="plpl" style="margin-top:32px;">
                <span
                  @click="thf()"
                  :class="thff ? 'ic' : ''"
                  class="iconfont icon-fuxuankuang_xuanzhong"
                ></span>
                <label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
              </div>
            </div>
            <div class="xxx">
              <h5>七、项目主责单位意见</h5>
              <div class="xxxx">
                <template>
                  <el-upload
                    class="upload-demo"
                    action="http://cyteam.org.cn/api/v1/file/files"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="successUpload"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="10"
                    :on-exceed="handleExceed"
                    :file-list="fileLists"
                  >
                    <el-button size="small" type="primary">上传文件</el-button>
                    <div slot="tip" class="el-upload__tip">
                      可上传同意申报说明扫描版PDF文件或图片压缩包。
                    </div>
                  </el-upload>
                </template>
              </div>
            </div>
          </div>
          <div class="ll">
            <button type="button" @click="btn(0)">上一页</button>
            <button type="button" @click="submit(0)">保存</button>
            <button type="submit" @click="submit(1)">提交</button>
          </div>
        </div>
      </form>
      <div class="queren" v-if="popupStatus">
        <div>
          <p>{{ subStatus == 0 ? "是否保存申报项目" : "是否确认申报项目" }}</p>
          <div>
            <span @click="popupStatus = !popupStatus">否</span>
            <span @click="submitYes">是</span>
          </div>
          <span v-if="subStatus == 1">
            请您核对以上项目申报信息，提交之后不可修改
          </span>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
const path = require('path')
const files = require.context('@/components', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
var preD = function (e) {
  e.preventDefault()
}
export default {
  components: modules,
  props: {},
  data () {
    return {
      index_num: 2,
      sub: 0,
      bgData: null,
      initialTextVal: '',
      initialText: '',
      aboutUsText: '',
      aboutUsVal: '',
      projectBriefVal: '',
      projectBriefText: '',
      projectAssessmentVal: '',
      projectAssessmentText: '',
      existingBasisVal: '',
      existingBasisText: '',
      methodsWayVal: '',
      methodsWayText: '',
      schedulingVal: '',
      schedulingText: '',
      desiredEffectVal: '',
      desiredEffectText: '',
      divisionLaborVal: '',
      divisionLaborText: '',
      coverVal: '',
      coverText: '',
      thff: false,
      imgUrl: {
        bg0: require('../../../static/img/bg0.png'),
        bg1: require('../../../static/img/bg1.png'),
        xa: require('../../../static/img/xa.png')
      },
      fileLists: [],
      popupStatus: false,
      first_levels: [],
      types: [],
      area: [],
      name: '',
      company: '',
      tid: '',
      rid: '',
      first_level: '',
      secondary: '',
      fieldeara: '',
      attribute: '',
      aterm: '',
      fterm: '',
      postaladdress: '',
      postalcode: '',
      pmail: '',
      fax_tel: '',
      plegal: '',
      plcode: '',
      pname: '',
      poster: '',
      poffice_tel: '',
      aphone: '',
      cname: '',
      cpost: '',
      coffice_tel: '',
      cphone: '',
      prespo: '',
      respoadd: '',
      respopcode: '',
      respomail: '',
      respophone: '',
      respoctel: '',
      respopname: '',
      respopost: '',
      respoophone: '',
      respoptel: '',
      respocname: '',
      respocpost: '',
      respocophone: '',
      decldes: '',
      prodes: '',
      prodemo: '',
      prodemojc: '',
      prodemotj: '',
      prodemojd: '',
      prodemoxg: '',
      prodemofg: '',
      prodemotwo: '',
      funds: '',
      proimages: '',
      subStatus: 0,
      picture: [],
      pid: 0
    }
  },
  computed: {},
  watch: {
    popupStatus (val) {
      if (val) {
        document.body.style.overflow = 'hidden'
        document.addEventListener('touchmove', preD, {
          passive: false
        }) /** 禁止页面滑动 */
      } else {
        document.body.style.overflow = '' /** 出现滚动条 */
        document.removeEventListener('touchmove', preD, { passive: false })
      }
    }
  },
  methods: {
    successUpload (response, file, fileList) {
      this.picture.push({
        name: file.name,
        url: file.response.data.url
      })
    },
    handleRemove (file, fileList) {
      this.picture.forEach(element => {
        if (file.name === element.name) {
          this.picture.splice(element, 1)
        }
      })
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`)
    },
    /** 获取富文本内容 */
    aboutUs (data) {
      this.aboutUsText = data
    },
    projectBrief (data) {
      this.projectBriefText = data
    },
    projectAssessment (data) {
      this.projectAssessmentText = data
    },
    existingBasis (data) {
      this.existingBasisText = data
    },
    methodsWay (data) {
      this.methodsWayText = data
    },
    scheduling (data) {
      this.schedulingText = data
    },
    desiredEffect (data) {
      this.desiredEffectText = data
    },
    divisionLabor (data) {
      this.divisionLaborText = data
    },
    cover (data) {
      this.coverText = data
    },
    quillVal (data) {
      this.initialText = data
    },
    /** 申报单位承诺 */
    thf () {
      this.thff = !this.thff
    },
    /** 下一步 */
    btn (index) {
      let s = this.sub
      s = index
      // this.sub = s

      let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
      let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/

      if (
        this.name === '' ||
        this.company === '' ||
        this.tid === '' ||
        this.rid === '' ||
        this.first_level === '' ||
        this.secondary === '' ||
        this.fieldeara === '' ||
        this.attribute === '' ||
        this.aterm === '' ||
        this.fterm === '' ||
        this.postaladdress === '' ||
        this.postalcode === '' ||
        this.pmail === '' ||
        this.plegal === '' ||
        this.plcode === '' ||
        this.pname === '' ||
        this.poster === '' ||
        this.poffice_tel === '' ||
        this.aphone === '' ||
        this.cname === '' ||
        this.cpost === '' ||
        this.coffice_tel === '' ||
        this.cphone === ''
      ) {
        alert('请认真核对填写内容完整性！')
        return false
      } else if (this.aterm > this.fterm) {
        alert('截止日期应比申请日期晚')
        return false
      } else if (!regd.test(this.poffice_tel) || !regd.test(this.coffice_tel)) {
        alert('请填写正确的电话号码！')
        return false
      } else if (!regs.test(this.aphone) || !regs.test(this.cphone)) {
        alert('请填写正确的手机号码！')
        return false
      } else {
        this.sub = s
      }
    },
    /** 保存和提交 */
    submit (index) {
      let s = this.subStatus
      s = index
      this.subStatus = s

      let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
      let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/

      this.decldes = this.aboutUsText
      this.prodes = this.projectBriefText
      this.prodemo = this.projectAssessmentText
      this.prodemojc = this.existingBasisText
      this.prodemotj = this.methodsWayText
      this.prodemojd = this.schedulingText
      this.prodemoxg = this.desiredEffectText
      this.prodemofg = this.divisionLaborText
      this.prodemotwo = this.coverText
      this.funds = this.initialText
      // this.proimages = [...this.fileLists, ...this.picture]
      this.proimages = [...this.picture]

      // if (this.subStatus === 1) {
      if (
        this.name === '' ||
        this.company === '' ||
        this.tid === '' ||
        this.rid === '' ||
        this.first_level === '' ||
        this.secondary === '' ||
        this.fieldeara === '' ||
        this.attribute === '' ||
        this.aterm === '' ||
        this.fterm === '' ||
        this.postaladdress === '' ||
        this.postalcode === '' ||
        this.pmail === '' ||
        this.plegal === '' ||
        this.plcode === '' ||
        this.pname === '' ||
        this.poster === '' ||
        this.poffice_tel === '' ||
        this.aphone === '' ||
        this.cname === '' ||
        this.cpost === '' ||
        this.coffice_tel === '' ||
        this.cphone === '' ||
        this.prespo === '' ||
        this.respoadd === '' ||
        this.respopcode === '' ||
        this.respomail === '' ||
        this.respopname === '' ||
        this.respopost === '' ||
        this.respoophone === '' ||
        this.respocname === '' ||
        this.respocpost === '' ||
        this.respocophone === '' ||
        this.decldes === '' ||
        this.prodes === '' ||
        this.prodemo === '' ||
        this.prodemojc === '' ||
        this.prodemotj === '' ||
        this.prodemojd === '' ||
        this.prodemoxg === '' ||
        this.prodemofg === '' ||
        this.prodemotwo === '' ||
        this.funds === ''
      ) {
        alert('请认真核对填写内容完整性！')
        return false
      } else if (this.aterm > this.fterm) {
        alert('截止日期应比申请日期晚')
        return false
      } else if (!regd.test(this.poffice_tel) || !regd.test(this.coffice_tel)) {
        alert('请填写正确的电话号码！')
        return false
      } else if (!regs.test(this.aphone) || !regs.test(this.cphone)) {
        alert('请填写正确的手机号码！')
        return false
      } else if (
        !regd.test(this.respoophone) ||
        !regd.test(this.respocophone)
      ) {
        alert('请填写正确的电话号码！')
        return false
      } else if (this.thff === false) {
        alert('请同意：申报单位承诺')
        return false
      } else if (this.proimages.length === 0) {
        alert('未上传文件！')
        return false
      }

      if (this.respoptel !== '' && !regs.test(this.respoptel)) {
        alert('请填写正确的手机号码！')
        return false
      }
      if (this.respoctel !== '' && !regs.test(this.respoctel)) {
        alert('请填写正确的手机号码！')
        return false
      }
      // }

      let val = this.proimages
      val = JSON.stringify(this.proimages)
      this.proimages = val

      // if (this.subStatus === 1) {
      if (this.proimages === '') {
        alert('文件还未上传！')
        return false
      }
      // }

      this.popupStatus = true
    },
    /** 申报项目 */
    submitYes () {
      this.popupStatus = false
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/project/apply',
        data: {
          id: _this.pid,
          subStatus: _this.subStatus,
          name: _this.name,
          company: _this.company,
          tid: _this.tid,
          rid: _this.rid,
          first_level: _this.first_level,
          secondary: _this.secondary,
          fieldeara: _this.fieldeara,
          attribute: _this.attribute,
          aterm: _this.aterm,
          fterm: _this.fterm,
          postaladdress: _this.postaladdress,
          postalcode: _this.postalcode,
          pmail: _this.pmail,
          fax_tel: _this.fax_tel,
          plegal: _this.plegal,
          plcode: _this.plcode,
          pname: _this.pname,
          poster: _this.poster,
          poffice_tel: _this.poffice_tel,
          aphone: _this.aphone,
          cname: _this.cname,
          cpost: _this.cpost,
          coffice_tel: _this.coffice_tel,
          cphone: _this.cphone,
          prespo: _this.prespo,
          respoadd: _this.respoadd,
          respopcode: _this.respopcode,
          respomail: _this.respomail,
          respophone: _this.respophone,
          respoctel: _this.respoctel,
          respopname: _this.respopname,
          respopost: _this.respopost,
          respoophone: _this.respoophone,
          respoptel: _this.respoptel,
          respocname: _this.respocname,
          respocpost: _this.respocpost,
          respocophone: _this.respocophone,
          decldes: _this.decldes,
          prodes: _this.prodes,
          prodemo: _this.prodemo,
          prodemojc: _this.prodemojc,
          prodemotj: _this.prodemotj,
          prodemojd: _this.prodemojd,
          prodemoxg: _this.prodemoxg,
          prodemofg: _this.prodemofg,
          prodemotwo: _this.prodemotwo,
          funds: _this.funds,
          proimages: _this.proimages
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.code === 200) {
              alert(res.data.data.msg)
              _this.proimages = ''
              _this.$router.push({
                name: 'project'
              })
            } else {
              alert(res.data.data.msg)
            }
          } else {
            alert(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /** 获取下拉框的数据 */
    getData () {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/project/get-info',
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.types = res.data.data.type
            _this.area = res.data.data.area
            _this.first_levels = res.data.data.first_level
            if (this.$route.query.id) {
              let id = this.$route.query.id
              this.getDataDetails(id)
            }
          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /** 判断是否有权限进行项目申报 */
    status () {
      let id = sessionStorage.id
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/society/get-status',
        data: { id: id }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.status === 0) {
              alert('您当前社会组织状态为：活动异常，请与主管单位联系审核！')
              _this.$router.push({
                name: 'project'
              })
            } else if (res.data.data.status === 3) {
              alert('您当前社会组织状态为：活动异常，请与主管单位联系审核！')
              _this.$router.push({
                name: 'project'
              })
            } else if (res.data.data.status === 4) {
              alert('项目申报暂未开始！')
              _this.$router.push({
                name: 'project'
              })
            } else {
              _this.getData()
            }
          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /** 为提交时的赋值操作 */
    assignment (data) {
      this.name = data.name
      // this.company = data.company
      for (var prop in this.types) {
        if (data.tid === this.types[prop]) {
          this.tid = prop
        }
      }
      this.area.forEach((item, index) => {
        if (data.rid === item) {
          this.rid = parseInt(index)
        }
      })
      for (let prop in this.first_levels) {
        if (data.first_level === this.first_levels[prop]) {
          this.first_level = prop
        }
      }
      this.secondary = data.secondary
      this.fieldeara = data.fieldeara
      this.attribute = data.attribute
      this.aterm = data.aterm
      this.fterm = data.fterm
      this.postaladdress = data.postaladdress
      this.postalcode = data.postalcode
      this.pmail = data.pmail
      this.fax_tel = data.fax_tel
      this.plegal = data.plegal
      this.plcode = data.plcode
      this.pname = data.pname
      this.poster = data.poster
      this.poffice_tel = data.poffice_tel
      this.aphone = data.aphone
      this.cname = data.cname
      this.cpost = data.cpost
      this.coffice_tel = data.coffice_tel
      this.cphone = data.cphone
      this.prespo = data.prespo
      this.respoadd = data.respoadd
      this.respopcode = data.respopcode
      this.respomail = data.respomail
      this.respophone = data.respophone
      this.respopname = data.respopname
      this.respopost = data.respopost
      this.respoophone = data.respoophone
      this.respoptel = data.respoptel
      this.respocname = data.respocname
      this.respocpost = data.respocpost
      this.respocophone = data.respocophone
      this.respoctel = data.respoctel
      this.aboutUsVal = data.decldes
      this.aboutUsText = data.decldes
      this.projectBriefVal = data.prodes
      this.projectBriefText = data.prodes
      this.projectAssessmentVal = data.prodemo
      this.projectAssessmentText = data.prodemo
      this.existingBasisVal = data.prodemojc
      this.existingBasisText = data.prodemojc
      this.methodsWayVal = data.prodemotj
      this.methodsWayText = data.prodemotj
      this.schedulingVal = data.prodemojd
      this.schedulingText = data.prodemojd
      this.desiredEffectVal = data.prodemoxg
      this.desiredEffectText = data.prodemoxg
      this.divisionLaborVal = data.prodemofg
      this.divisionLaborText = data.prodemofg
      this.coverVal = data.prodemotwo
      this.coverText = data.prodemotwo
      this.initialTextVal = data.funds
      this.initialText = data.funds

      this.pid = data.id

      let imgs = JSON.parse(data.proimages)
      this.fileLists = imgs
      this.picture = this.fileLists
    },
    getDataDetails (id) {
      this.$http({
        method: 'post',
        url: 'v1/project/details',
        data: {
          id: id
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            this.bgData = res.data.data.data.ProjectDetails
            this.assignment(this.bgData)
          } else {
            alert('请求失败！')
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    this.company = sessionStorage.name
  },
  mounted () {
    this.status()
  }
}
</script>

<style lang="scss" scoped>
.rich {
  z-index: 10;
  width: 100%;
  margin: 30px auto 0px;
  height: 320px;
}
.img-img {
  margin-top: 25px;
  width: 150px;
  height: auto;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}

.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .queren {
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: rgba($color: #000, $alpha: 0.56);
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      width: 500px;
      height: 400px;
      background: #fff;
      border-radius: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 100px 0 100px;
      box-sizing: border-box;

      & > span {
        text-align: center;
        width: 120%;
        color: #000;
      }

      & > p {
        font-size: 32px;
        font-weight: 600;
      }

      & > div {
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 30px;
          cursor: pointer;
        }
      }
    }
  }

  #box {
    margin: 40px auto 0;
    padding: 34px 32px 100px 28px;
    box-sizing: border-box;
    width: 1200px;
    background-color: #ffffff;

    form {
      .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }

        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
      }

      .xxx {
        margin-top: 60px;
        width: 100%;
        // height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .plpl {
          display: flex;
          align-items: center;
          label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #323232;
          }

          .iconfont {
            font-size: 22px;
            color: #999;
          }
          .ic {
            color: #e60012;
          }
        }

        .xxxx {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-left: 25px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000;
          }

          /deep/ .upload-demo {
            margin-bottom: 10%;
          }

          /deep/ .el-button--primary {
            margin-top: 32px;
            border: none;
            cursor: pointer;
            width: 96px;
            height: 32px;
            border-radius: 4px;
            background-image: linear-gradient(
                69deg,
                #cc263f 0%,
                #f42b47 100%,
                #ed162d 100%,
                #e60012 100%
              ),
              linear-gradient(#e60012, #e60012);
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          /deep/ .el-upload-list.el-upload-list--text {
            max-height: 100px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 3px;
              // height: 5px;
            }

            &::-webkit-scrollbar-track-piece {
              background-color: rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:vertical {
              height: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:horizontal {
              width: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }
          }
        }

        .btnn {
          cursor: pointer;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          label {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }

      .xx {
        margin-top: 60px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        textarea {
          margin-top: 30px;
          width: 1139px;
          height: 138px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          resize: none;

          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999999;
        }

        article {
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999;
        }

        p {
          margin-top: 38px;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h5 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h3 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-top: 38px;
        }
      }

      .cc {
        width: 1140px;
        margin: 0 auto 0px;
        aside {
          width: 100%;
          height: 43px;
          div {
            display: flex;
            align-items: center;

            label {
              display: inline-block;
              // width: 101px;
              height: 43px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 43px;
              text-align: right;
              letter-spacing: 0px;
              color: #323232;
              white-space: nowrap;
            }

            .i-i {
              width: 1009px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              margin-left: 20px;
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #323232;
            }
          }
        }
      }

      .btn {
        margin: 60px auto 0;
        width: 230px;
        height: 63px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }

      aside {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 130px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      section {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 100px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      h4 {
        width: 1138px;
        height: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        margin-bottom: 54px;
      }
    }

    .box {
      width: 395px;
      height: 34px;
      margin: 44px auto 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 192px;
        height: 34px;
        background-size: 100% 100%;
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34px;
        text-align: center;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        color: #fff;
      }
    }

    h3 {
      width: 89px;
      height: 23px;
      margin: 0 auto;
      font-family: "MicrosoftYaHei";
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
