<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">查看回收内容</div>
    </div>
    <div class="content-container contentBox">
      <el-form :model="ruleForm2" status-icon ref="ruleForm2" label-width="100px" class="demo-ruleForm formTable">
        <div class="formWidth">
          <el-form-item label="标题" prop="contentTitle">
            平台新闻<span>Science：美国国家科学基金会暂停研究生资助项目，上千访问学者或受影响</span>
          </el-form-item>
          <el-form-item label="作者/来源" prop="authorSource">
            科袖网
          </el-form-item>
          <el-form-item label="相关专家" prop="professor">
            张莎莎
          </el-form-item>
          <el-form-item label="相关机构" prop="institution">
            北京科技大学
          </el-form-item>
          <el-form-item label="相关企业" prop="company">
            北京科技大学
          </el-form-item>
        </div>
        <el-form-item label="文章正文" prop="artDesc" class="editBox">
          <div class="editContent"></div>
        </el-form-item>
        <el-form-item class="publishButton">
          <el-button type="primary" @click="submitForm('ruleForm2')">恢复</el-button>
          <el-button @click="resetForm('ruleForm2')">彻底删除</el-button>
        </el-form-item>
      </el-form>
      <div class="fileBox">
        <img src="../../assets/404_images/404.png" alt="" class="fileImg">
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm2: {
          authorSource: '',
          select: '',
          contentTitle: '',
          professor: '',
          artDesc: ''
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .formTable {
    width: 943px
  }

  .formWidth {
    width: 500px
  }

  .content-container {
    position: relative;
  }

  .fileBox {
    position: absolute;
    top: 20px;
    left: 550px;
    text-align: center
  }

  .editContent {
    height: 500px;
    border: 1px solid #409EFF;
    overflow: hidden;
  }

  .publishButton {
    text-align: center;
  }

  .fileImg {
    width: 400px;
    height: 200px;
    border: 1px solid #409EFF;
  }
</style>