<template>
  <div>
    <div class="con-title">学习报告</div>
    <div class="con-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="学术报告申请" name="1">
          <el-row type="flex" justify="center">
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="8">
              <el-form ref="setApplyForm" :label-width="labelWidth" :model="setApply" :rules="applyRules">
                <el-form-item label="学术活动名称" prop="name">
                  <el-input v-model="setApply.name" placeholder="请输入活动名称" type="text" />
                </el-form-item>
                <el-form-item label="学术活动时间" prop="time">
                  <el-date-picker v-model="setApply.time" placeholder="选择日期时间" type="datetime" />
                </el-form-item>
                <el-form-item label="主 讲 人" prop="author">
                  <el-input v-model="setApply.author" placeholder="请输入主讲人" type="text" />
                </el-form-item>
                <el-form-item label="学术活动内容" prop="content">
                  <el-input v-model="setApply.content" placeholder="请输入活动内容" type="textarea" :autosize="{ minRows: 5 }" />
                </el-form-item>
                <el-form-item label="附 件" prop="file">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :limit="3">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">（可以上传 word、ppt、png、jpg 等资源）</div>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onApplyFrom">保存并提交</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="学术报告提交" name="2">
          <el-row type="flex" justify="center">
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="8">
              <el-form ref="setSubmitForm" :label-width="labelWidth" :model="setSubmit" :rules="submitRules">
                <el-form-item label="学术报告主题" prop="name">
                  <el-input v-model="setSubmit.name" placeholder="请输入报告主题" type="text" />
                </el-form-item>
                <el-form-item label="学术报告摘要" prop="title">
                  <el-input v-model="setSubmit.title" placeholder="请输入报告摘要" type="text" />
                </el-form-item>
                <el-form-item label="附 件" prop="file">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :limit="3">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">（可以上传word、ppt等资源。系统提供模板下载）</div>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitFrom">保存并提交</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="学术报告统计" name="3">
          <m-page
            :tableHead="tableHead"
            :tableData="tableData"
            :params="params"
            :objFn="objFn"
            :tableConfig="tableConfig"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import mSearch from '../../components/module/mSearch.vue'
import mPage from '../../components/module/mPage.vue'
export default {
  components: { mSearch, mPage },
  data () {
    return {
      activeName: '1',
      labelWidth: '110px',
      setApply: {},
      applyRules: {
        'name': [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        'time': [
          { required: true, message: '活动时间不能为空', trigger: 'blur' }
        ],
        'author': [
          { required: true, message: '主讲人不能为空', trigger: 'blur' }
        ],
        'content': [
          { required: true, message: '活动内容不能为空', trigger: 'blur' }
        ]
      },
      setSubmit: {},
      submitRules: {
        'name': [
          { required: true, message: '报告主题不能为空', trigger: 'blur' }
        ],
        'title': [
          { required: true, message: '报告摘要不能为空', trigger: 'blur' }
        ]
      },
      tableConfig: { border: '', size: '', selection: { has: false, sels: [], width: '50px', fix: 'left', align: '' } }, // 增加选择框，has设置为true
      tableHead: [
        { prop: 'index', label: '序号', minWidth: '80', fix: false },
        { prop: 'title', label: '学号', minWidth: '150', fix: false },
        { prop: 'type', label: '姓名', minWidth: '80', fix: false },
        { prop: 'publish_time', label: '学术报告主题', minWidth: '170', fix: false },
        { prop: 'publish_author', label: '审核状态', minWidth: '100', fix: false },
        { prop: 'publish_author', label: '审核时间', minWidth: '100', fix: false }
        // { prop: '', label: '', minWidth: '', fix: false, goObj: { routerName: '', params: {} } }, // 点击跳转页面并传参数
        // { prop: 'img_url', label: '图片', width: '60px', fix: false, align: 'left' } // 显示图片缩略小图，浮上去可查看大图
        // { prop: 'operate', label: '操作', width: '60px', fix: false, commandArr: [ { command: 'newslist-edit', name: '编辑' }, { command: 'newslist-del', name: '删除' } ] } // 操作控制列
      ],
      tableData: [],
      params: { keywords: '', curPage: 1, pageSize: 10, total: '' },
      objFn: {
        paramsFn: (_this) => {
          let strType = _this.params.type
          return {
            'org_type': /2-/gi.test(strType) ? '2' : strType,
            'org_sub_type': /2-/gi.test(strType) ? strType.replace(/2-/gi, '') : '',
            'org_class': '0',
            'keywords': _this.params.keywords,
            'page_num': _this.params.curPage,
            'page_size': _this.params.pageSize,
            'quota_type': 'org_bigscience_stat'
          }
        },
        nameAPI: 'getReportList',
        actionClass: 'reportAction',
        // nameExcel: 'getStatSummaryExcel',
        nameExcel: 'getExportExcel3_4_14',
        callback: (_this, data) => {
          _this.params.total = 100
          /* 伪造数据 */
          var fakeData = [
            { title: '测试文章，有长有短测试文章，有长有短测试文章，有长有短测试文章，有长有短', type: '校园类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '校园类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '校园类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' }
          ]
          fakeData.forEach((elem, i) => {
            elem.index = i + 1 + (_this.params.curPage - 1) * _this.params.pageSize
            _this.tableData.push(elem)
          })
        }
      }
    }
  },
  mounted () {
    window.addEventListener('resize', () => {
      let width = document.documentElement.clientWidth
      if (width < 790) {
        this.labelWidth = 'auto'
      } else {
        this.labelWidth = '110px'
      }
    })
  },
  methods: {
    handleClick (tab, event) { /* console.log(tab, event) */ },
    onApplyFrom () {
      this.$refs['setApplyForm'].validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          this.$message.error('请检查输入项，确认无误后，重新提交')
          return false
        }
      })
    },
    onSubmitFrom () {
      this.$refs['setSubmitForm'].validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          this.$message.error('请检查输入项，确认无误后，重新提交')
          return false
        }
      })
    }
  }
}
</script>


<style lang="scss" scoped>
/* 申请 */
.el-date-editor.el-input {
  width: 100%;
}
.el-upload__tip {
  line-height: 1.5;
}
</style>
