
<template>
  <div class="app-content" style="height: 76vh;overflow: auto;">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="page-card">
        <a-tabs type="card" hideAdd size="small" @change="callback">
          <a-tab-pane :key="item.key" :tab="item.title" v-for="(item) in tabsData">
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="page-content">
        <task-edit v-model="value" @close="closeWindow" @load="onLoad" ref="taskCreate" :tabsData.sync="tabsData" />
      </div>
      <div class="page-footer">
        <a-button type="primary" @click="save" v-if="tabsData[0].isShow">保 存</a-button>
        <a-button type="primary" style="margin-left: 40px" @click="submit" v-if="tabsData[0].isShow">完成填写</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import taskEdit from "@/views/report/task/components/taskEdit"
export default {
  name: "taskCreate",
  components: {
    taskEdit,
  },
  data () {
    return {
      loading: false,
      tabsData: [
        { title: '填报信息', key: '0', isShow: true },
        { title: '项目组主要成员及单位', key: '1', isShow: true },
        { title: '项目主要实施内容和目标', key: '2', isShow: true },
        { title: '申请书正文', key: '3', isShow: true },
        { title: '经费预算及设备明细', key: '4', isShow: true },
        { title: '项目实施阶段及任务', key: '5', isShow: true },
        { title: '项目课题设置', key: '6', isShow: true },
        { title: '绩效目标表', key: '7', isShow: true },
        { title: '附件信息', key: '8', isShow: true },
      ],
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  created () {
  },
  methods: {
    save () {
      this.$refs.taskCreate.save()
    },
    submit () {
      this.$refs.taskCreate.submit()
    },
    closeWindow (value) {
      this.$emit('close', value)
    },
    onLoad (value) {
      this.loading = value
    },
    callback (key) {
      var index = parseInt(key)
      this.tabsData.forEach(e => {
        e.isShow = false
      })
      this.tabsData[index].isShow = true;
    },
  },
}
</script>
<style scoped lang="less">
::v-deep .ant-spin-container {
  width: 100%;
  height: 100%;
}
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
.page-card {
  width: 100%;
  height: 50px;
  overflow: auto;
}
.page-content {
  width: 100%;
  height: calc(100% - 90px);
  overflow: auto;
}
.page-footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgb(248, 248, 248);
  text-align: center;
}
</style>


