<template>
  <a-modal title="集中培训详情" :width="800" v-model="visible" :confirmLoading="confirmLoading" :footer="null">
    <a-descriptions :column="1" title="">
      <a-descriptions-item label="培训名称">
        {{ data.trainName }}
      </a-descriptions-item>
      <a-descriptions-item label="培训时间">
        {{ data.trainSdate }}至{{ data.trainEdate }}
      </a-descriptions-item>
      <a-descriptions-item label="主持人">
        {{ data.host }}
      </a-descriptions-item>
      <a-descriptions-item label="会议人数">
        {{ data.personNum }}/{{ data.personNum }}
      </a-descriptions-item>
      <a-descriptions-item label="学习内容">
        {{ data.learningContent }}
      </a-descriptions-item>
      <a-descriptions-item label="联系人">
        {{ data.contact }}({{ data.phone }})
      </a-descriptions-item>
      <a-descriptions-item label="备注">
        {{ data.remark }}
      </a-descriptions-item>
    </a-descriptions>
    <div v-if="data.status === 3" class="flex-center">
      <a-button @click="handlerJoin" type="primary">报名参加</a-button>
    </div>
  </a-modal>
</template>

<script>
import { reqCourseCenterDetail } from '@/api/mycourse/index'
export default {
  data () {
    return {
      visible: false,
      confirmLoading: false,
      data: {}
    }
  },
  methods: {
    getDetail (row) {
      reqCourseCenterDetail({ projectId: row.id }).then(res => {
        this.data = res.data
      })
    },
    handlerJoin () {

    }
  }
}
</script>

<style lang="less" scoped>
.cover-img {
  width: 100%;
  height: 200px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}

.info-text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  h2 {
    line-height: 1.2;
  }
}
</style>
