<template>
  <div>
    <div class="con-title">{{ $t('officesActivity.title') }}</div>
    <div class="con-box">
      <el-button type="text" @click="goBack">{{ $t('officesActivity.backlist') }}</el-button>
      <!-- <el-page-header @back="goBack" content="学术活动"></el-page-header> -->
      <el-form label-width="120px" :disabled="isView" :model="ruleForm" :rules="rules" ref="ruleForm" class="main-form">
        <!-- <el-form-item label="姓名" prop="personal_name">
              <el-input v-model="ruleForm.personal_name" placeholder="请输入您的姓名" type="text" />
            </el-form-item>
            <el-form-item label="班级" prop="class_name">
              <el-input v-model="ruleForm.class_name" placeholder="请输入您的班级" type="text" />
            </el-form-item> -->
        <el-form-item :label="$t('officesActivity.activityName')" prop="symposium_name">
          <el-input v-model="ruleForm.symposium_name" :placeholder="$t('officesActivity.enterActivity')" />
        </el-form-item>
        <el-form-item :label="$t('officesActivity.ActivityTime')" prop="symposium_time">
          <el-date-picker
            type="datetime"
            v-model="ruleForm.symposium_time"
            value-format="yyyy-MM-dd HH:mm:ss"
            :placeholder="$t('officesActivity.selectTime')"
          />
        </el-form-item>
        <el-form-item :label="$t('officesActivity.people')" prop="symposium_lecturer">
          <el-input v-model="ruleForm.symposium_lecturer" :placeholder="$t('officesActivity.people2')" />
        </el-form-item>
        <el-form-item :label="$t('officesActivity.address')" prop="symposium_address">
          <el-input v-model="ruleForm.symposium_address" :placeholder="$t('officesActivity.enteraddress')" />
        </el-form-item>
        <el-form-item :label="$t('officesActivity.activityContent')" prop="symposium_contents">
          <el-input
            type="textarea"
            v-model="ruleForm.symposium_contents"
            maxlength="50"
            :placeholder="$t('officesActivity.entActCon')"
            :autosize="{ minRows: 5 }"
          />
        </el-form-item>
        <template v-if="isView">
          <el-form-item v-if="detail.approve_time" :label="$t('officesActivity.approvalTime')">
            <el-input v-model="detail.approve_time" readonly />
          </el-form-item>
          <el-form-item v-if="detail.remark1" :label="$t('officesActivity.beizhu')">
            <el-input type="textarea" v-model="detail.remark1" maxlength="50" readonly :autosize="{ minRows: 5 }" />
          </el-form-item>
        </template>
        <el-form-item v-if="!this.isView">
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
            {{ $t('officesActivity.savesubmit') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import editMixins from '../../mixins/edit'
export default {
  mixins: [editMixins],
  data() {
    return {
      ruleForm: {
        personal_name: '',
        class_name: '',
        symposium_name: '',
        symposium_time: '',
        symposium_lecturer: '',
        symposium_address: '',
        symposium_contents: ''
      },
      rules: {
        personal_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }],
        symposium_name: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
        symposium_time: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
        symposium_lecturer: [{ required: true, message: '主讲人不能为空', trigger: 'blur' }],
        symposium_address: [{ required: true, message: '学术活动地址不能为空', trigger: 'blur' }],
        symposium_contents: [{ required: true, message: '活动内容不能为空', trigger: 'blur' }]
      }
    }
  },
  beforeMount() {
    if (this.isEdit || this.isView) {
      this.getDetail()
    }
  }
}
</script>

<style lang="scss" scoped>
.main-form {
  max-width: 600px;
  margin: 0 auto;
}
.el-date-editor.el-input {
  width: 100%;
}
</style>
