<template>
  <div class="app-content" style="height: 76vh;overflow: auto;">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="page-steps">
        <a-steps size="small" :current="current" @change="onChange">
          <a-step :status="item.status" v-for="(item,index) in stepsArray" :key="index+'stepsArray'" :title="item.title" />
        </a-steps>
      </div>
      <div class="page-content">
        <talent-edit v-model="value" @close="closeWindow" @load="onLoad" @onStepChange="onStepChange" :completeStatus.sync=completeStatus :stepsArray.sync="stepsArray" ref="talentCreate"></talent-edit>
      </div>
      <div class="page-footer">
        <a-button v-if="currSteps > 0" style="margin-left: 40px" type="primary" @click="prev">上一步</a-button>
        <a-button style="margin-left: 40px" type="primary" @click="save">保 存</a-button>
        <a-button v-if="currSteps < stepsArray.length - 1" style="margin-left: 40px" type="primary" @click="next">下一步</a-button>
        <a-button v-if="currSteps == stepsArray.length - 1" style="margin-left: 40px" type="primary" @click="submit">完成填写</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import talentEdit from "@/views/report/talent/components/talentEdit"

export default {
  name: "talentCreate",
  components: {
    talentEdit
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  data() {
    return {
      loading: false,
      current: 10,
      currSteps: 0,
      stepsArray: [
        { status: "process", title: '申报人才基本情况', showStatus: true },
        { status: "wait", title: '申报人才简历', showStatus: false },
        { status: "wait", title: '申报人才科研成绩', showStatus: false },
        { status: "wait", title: '团队人员名单', showStatus: false },
        { status: "wait", title: '经费预算及培养计划和目标', showStatus: false },
        { status: "wait", title: '附件', showStatus: false }
      ],
      completeStatus: "0,0,0,0,0,0"
    };
  },
  created() {

  },
  methods: {
    stepsChange (e) {
      this.currSteps = e
      this.changeSteps(this.currSteps)
    },
    next () {
      this.$refs.talentCreate.submit(this.currSteps, true)
    },
    prev () {
      this.currSteps--;
      this.changeSteps(this.currSteps)
    },
    onChange (e) {
      if (e != this.currSteps) {
        var arr = this.completeStatus.split(',')
        if (arr[e] == "1") {
          this.loading = true
          this.changeSteps(e)
          this.loading = false
        } else {
          this.$message.error('所选步骤没填写完成，请填写当前步骤后点【下一步】跳转！')
        }
      }
    },
    onStepChange (e) {
      this.completeStatus = e.state
      this.changeSteps(e.step)
    },
    changeSteps (e) {
      this.currSteps = e
      var clone = [].concat(this.stepsArray)
      clone.forEach(e => {
        e.showStatus = false
      })
      clone[e].showStatus = true;
      this.stepsArray = clone
      this.getCompleteStatus(e, this.completeStatus)
    },
    getCompleteStatus (step, completeStatus) {
      var arr = completeStatus.split(',')
      if (!!arr && arr.length > 0) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == "1") {
            this.stepsArray[i].status = "finish"
          } else {
            this.stepsArray[i].status = "wait"
          }
        }
        this.stepsArray[step].status = "process"
      }
    },
    save () {
      this.$refs.talentCreate.save(this.currSteps)
    },
    submit () {
      this.$refs.talentCreate.submit(this.currSteps, false)
    },
    closeWindow (value) {
      this.$emit('close', value)
    },
    onLoad (value) {
      this.loading = value
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .ant-spin-container {
  width: 100%;
  height: 100%;
}
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
.page-steps {
  width: 100%;
  height: 40px;
  padding: 8px 20px 5px 20px;
  background: rgb(248, 248, 248);
  border: 1px 1px 0px 1px solid #e8e8e8;
}
.page-content {
  width: 100%;
  height: calc(100% - 80px);
  overflow: auto;
}
.page-footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgb(248, 248, 248);
  text-align: center;
}
</style>