<template>
  <div id="app">
    <vue-form
      :menus="menus"
      :default-active="currentActive"
      @change="handleChange"
      @success="handleSuccess"
      @error="handleError"
    >
      <!-- 最终检查 -->
      <template v-if="currentActive === 'final'">
        <table border="1">
          <template v-for="(item, index) in submenu">
            <tr :key="index" v-if="index < 7">
              <td>{{index}}{{item.title}}</td>
              <td>{{item.progress ? '已完成' : '未完成'}}</td>
            </tr>
          </template>
        </table>
      </template>
    </vue-form>
  </div>
</template>
<script>
import axios from 'axios'
import kelleyForm from './kelley-form'
import sofiaForm from './sofia-form'

function url2Json(url) {
  const str = url.split('?').pop()
  return str.split('&').reduce((result, item) => {
    const [key, value] = item.split('=')
    result[key] = value
    return result
  }, {})
}
const query = url2Json(location.href)

export default {
  name: 'app',
  data() {
    return {
      projectId: query.projectId,
      currentActive: query.active || 'profile',
      menus: query.projectId === '1000' ? sofiaForm : kelleyForm
    }
  },
  computed: {
    submenu() {
      return this.menus[0].children
    }
  },
  methods: {
    handleChange(value) {
      this.currentActive = value
      console.log('页面切换了', value)
    },
    handleSuccess(data) {
      console.log('提交成功了', data)
      this.getProgress()
    },
    handleError(error) {
      console.log(error)
    },
    // 获取进度
    getProgress() {
      axios
        .get('/zws/v1/enrollment/submissions?project_id=1000')
        .then(response => {
          let children = this.menus[0].children
          const submitProgress = response.data.submit_progress
          children.forEach(item => {
            let progress = 0
            if (submitProgress.hasOwnProperty(item.id)) {
              progress = submitProgress[item.id] === 0.2 ? 100 : 0
            }
            item.progress = progress
          })
        })
    }
  },
  beforeMount() {
    this.getProgress()
  }
}
</script>
