<template>
  <div class="main" v-if="detail">
    <ul class="field-list">
      <li v-for="(item, index) in fields" :key="index">
        <span class="label">{{ item.label }}</span>
        <span class="content">{{ detail[item.name] }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import * as api from '@/api/index'
export default {
  data() {
    return {
      list: [],
      fields: [
        { name: 'project_name', label: '项目' },
        { name: 'user_name', label: '姓名' },
        { name: 'phone_number', label: '手机号' },
        { name: 'wechat', label: '微信号' },
        { name: 'company', label: '工作单位' },
        { name: 'title', label: '职务' },
        { name: 'comment', label: '推荐理由' },
        { name: 'created_time', label: '提交时间' },
        { name: 'application_status', label: '学员状态' }
      ]
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    },
    detail() {
      const detail = this.list.find(item => item.id === this.pid)
      if (!detail) {
        return null
      }
      const projectMap = {
        1000: '金融工商管理硕士（FMBA）',
        1001: '金融硕士（MSF）',
        1005: '教育学硕士（MED）',
        1006: '应用心理学硕士（MAP）',
        1007: '中国未来金融领袖计划',
        1008: '酒店及旅游业工商管理硕士（HMBA）',
        1012: '工商管理硕士（MBA）'
      }
      detail.project_name = projectMap[detail.project_id]
      return detail
    }
  },
  methods: {
    dateFormat(value) {
      return value.split(' ')[0]
    },
    getMyRecommendList() {
      api.getMyRecommendList().then(response => {
        this.list = response
      })
    }
  },
  beforeMount() {
    this.getMyRecommendList()
  }
}
</script>

<style lang="scss" scoped>
.field-list {
  padding: 20px 0;
  li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 0;
    color: #000030;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #ededed;
      transform: scaleY(0.5);
    }
    .label {
      width: 100px;
    }
    .content {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>