<template>
  <div id="model-1">
    <el-row type="flex" justify="end">
      <el-col :span="2">
        <slot></slot>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="title">
          2022年度吉林省科技发展计划高新技术领域项目建议书
        </el-col>
        <el-col :span="24">
          <el-tabs v-model="active" type="card">
            <el-tab-pane label="通知正文" name="first">
              <questionInfo :info="data"></questionInfo>
            </el-tab-pane>
            <el-tab-pane label="信息填报" name="second">
              <projectForm :form="form" @onSubmit="onSubmit"></projectForm>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import questionInfo from './parts/questionInfo.vue';
import projectForm from './parts/projectForm.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: projectsolic } = createNamespacedHelpers('projectsolic');
export default {
  name: 'model-1',
  props: {
    data: { type: Object, default: () => {} },
  },
  components: {
    questionInfo,
    projectForm,
  },
  data: function() {
    return {
      active: 'first',
      form: {},
    };
  },
  created() {},
  methods: {
    ...projectsolic(['create']),
    async onSubmit({ data }) {
      data.question_id = this.data._id;
      // data.user_id = this.user.userid;
      let res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '数据添加成功',
          type: 'success',
        });
        this.form = {};
        this.active = 'first';
      }
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  .title {
    font-size: 25px;
    margin: 40px 0;
    text-align: center;
  }
}
</style>
