<template>
  <div>
    <div class="con-title">{{ $t('pages.affairsHall.shareAdd.shareapplication') }}</div>
    <div class="con-box">
      <el-button type="text" @click="goBack">{{ $t('pages.affairsHall.shareAdd.backlist') }}</el-button>
      <div class="main-form">
        <el-form label-width="110px" :disabled="isView" ref="ruleForm" :model="ruleForm" :rules="rules">
          <el-form-item :label="$t('pages.affairsHall.shareAdd.sname')" prop="personal_name">
            <el-input v-model="ruleForm.personal_name" :placeholder="$t('pages.affairsHall.shareAdd.inputname')" />
          </el-form-item>
          <el-form-item :label="$t('pages.affairsHall.shareAdd.industry')" prop="trade_name">
            <el-input v-model="ruleForm.trade_name" :placeholder="$t('pages.affairsHall.shareAdd.inputindustry')" />
          </el-form-item>
          <el-form-item :label="$t('pages.affairsHall.shareAdd.age')" prop="age">
            <el-input type="number" v-model="ruleForm.age" :placeholder="$t('pages.affairsHall.shareAdd.inputage')" />
          </el-form-item>
          <el-form-item :label="$t('pages.affairsHall.shareAdd.classs')" prop="class_name">
            <el-input v-model="ruleForm.class_name" :placeholder="$t('pages.affairsHall.shareAdd.inputclasss')" />
          </el-form-item>
          <el-form-item :label="$t('pages.affairsHall.shareAdd.phone')" prop="telephone">
            <el-input v-model="ruleForm.telephone" :placeholder="$t('pages.affairsHall.shareAdd.inputphone')" />
          </el-form-item>
          <el-form-item label="分享大概时间" prop="sharing_time">
            <el-date-picker
              v-model="ruleForm.sharing_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择分享时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('pages.affairsHall.shareAdd.Sharingthemes')" prop="sharing_theme">
            <el-input
              v-model="ruleForm.sharing_theme"
              :placeholder="$t('pages.affairsHall.shareAdd.inputSharingthemes')"
            />
          </el-form-item>
          <el-form-item label="分享内容简介" prop="content_introduction">
            <el-input type="textarea" v-model="ruleForm.content_introduction" placeholder="请输入分享内容简介" />
          </el-form-item>
          <template v-if="isView">
            <el-form-item v-if="detail.approve_time" :label="$t('pages.affairsHall.shareAdd.approvalTime')">
              <el-input v-model="detail.approve_time" />
            </el-form-item>
            <el-form-item v-if="detail.remark1" :label="$t('pages.affairsHall.shareAdd.remarks')">
              <el-input v-model="detail.remark1" maxlength="50" type="textarea" :autosize="{ minRows: 5 }" />
            </el-form-item>
          </template>
          <el-form-item v-if="!this.isView">
            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
              {{ $t('pages.affairsHall.shareAdd.savesubmit') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import editMixins from '../../mixins/edit'
export default {
  mixins: [editMixins],
  data() {
    return {
      ruleForm: {
        personal_name: '',
        trade_name: '',
        age: '',
        class_name: '',
        telephone: '',
        sharing_theme: '',
        affair_id: ''
      },
      rules: {
        personal_name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
        trade_name: [{ required: true, message: '请输入您的行业', trigger: 'blur' }],
        age: [{ required: true, message: '请输入您的年龄', trigger: 'blur' }],
        class_name: [{ required: true, message: '请输入您的班级', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
        sharing_theme: [{ required: true, message: '请输入分享主题', trigger: 'blur' }],
        sharing_time: [{ required: true, message: '请选择分享时间', trigger: 'change' }],
        content_introduction: [{ 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>
